faf6575c by 任超

style:业务申请

1 parent 8e1b8d0b
<template>
<el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
:lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" :show-close="false"
:custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
id="dialogBox">
<div slot="title">
</div>
<div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }">
<slot></slot>
</div>
<div slot="footer" class="dialog_footer" v-if="isButton">
<el-button @click="closeDialog" v-if="isReset">取消</el-button>
<el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
{{ saveButton }}</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
value: { type: Boolean, default: false },
isMain: {
type: Boolean,
default: false
},
isButton: {
type: Boolean,
default: true,
},
width: {
type: String,
default: '70%',
},
title: {
type: String,
default: '',
},
isFullscreen: {
type: Boolean,
default: true,
},
isSave: {
type: Boolean,
default: true,
},
saveButton: {
type: String,
default: '提交',
},
isReset: {
type: Boolean,
default: true,
},
saveloding: {
type: Boolean,
default: false,
},
},
data () {
return {
key: 0,
dialogVisible: false,
fullscreen: false,
scrollerHeight: '520px',
}
},
watch: {
value (val) {
this.dialogVisible = val
}
},
methods: {
handleFullscreen (val) {
this.fullscreen = !this.fullscreen
let height = document.getElementById('dialogBox').clientHeight
if (!this.fullscreen) {
this.scrollerHeight = false
} else {
this.scrollerHeight = (window.innerHeight - 180) + 'px'
}
},
submitForm () {
this.$emit('submitForm');
},
closeDialog () {
this.key++
this.$emit('input', false)
this.$emit('closeDialog')
}
},
}
</script>
<style rel="stylesheet/scss" scoped lang="scss" >
@import "~@/styles/mixin.scss";
@import "./dialogBox.scss";
/deep/.el-dialog__header {
background-color: #409EFF;
}
</style>
\ No newline at end of file
......@@ -24,7 +24,6 @@
.el-dialog__body {
max-height: 88vh;
overflow-y: scroll;
overflow-x: hidden;
}
......@@ -43,9 +42,7 @@
.el-dialog__header {
margin-bottom: 10px;
color: #4A4A4A;
}
.borderBottom {
background-color: #FCFDFD;
border-bottom: 1px solid #E4EBF4;
}
......
......@@ -76,11 +76,6 @@ export default {
this.dialogVisible = val
}
},
mounted () {
var header = document.getElementsByClassName("el-dialog__header")[0].style
header.borderBottom = '1px solid #E4EBF4'
header.background = '#FCFDFD'
},
methods: {
handleFullscreen (val) {
this.fullscreen = !this.fullscreen
......
......@@ -61,7 +61,8 @@ export default {
default: 285,
},
maxHeight: {
type: Number
type: Number,
default: 500
},
heightNumSetting: {
type: Boolean,
......
......@@ -169,6 +169,7 @@ export default {
cllx: ''
}
)
this.key++
},
handleMinus (index, row) {
this.tableData.splice(index, 1)
......
......@@ -169,6 +169,7 @@ export default {
sfqy: 0
}
)
this.key++
},
handleMinus (index, row) {
this.tableData.splice(index, 1)
......
<template>
<cusDialogBox @closeDialog="closeDialog" width="80%" v-model="value">
<template #header>
<div class="header">
<div class="appli-header">
<ul class="header-left">
<li>
图形定位
......@@ -33,27 +31,18 @@
<li>
转出
</li>
<li @click="closeDialog" class="pointer">
<i class="el-icon-circle-close"></i>
</li>
</ul>
</div>
</template>
</cusDialogBox>
</template>
<script>
import cusDialogBox from '@/components/DialogBox/cusDialogBox'
export default {
props: {
value: { type: Boolean, default: false },
},
components: {
cusDialogBox
},
data () {
return {
applicationDialog: false,
}
},
methods: {
closeDialog () {
this.$emit('input', false)
......@@ -63,17 +52,4 @@ export default {
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.header {
@include flex;
justify-content: space-between;
ul {
@include flex;
li {
margin-right: 20px;
}
}
}
</style>
......
......@@ -52,18 +52,13 @@
</div>
</div>
</dialogBox>
<applicationDialog v-model="appliDialog" />
</div>
</template>
<script>
import { datas } from "../ywsqdata.js";
import applicationDialog from '../../components/applicationDialog.vue'
export default {
components: {
applicationDialog
},
props: {
value: { type: Boolean, default: false },
},
......