<template>
|
<el-dialog
|
v-dialogDrag
|
:class="{'dialog-column-min': column==='min','dialog-column-1': column === '1', 'dialog-column-2': column === '2', 'dialog-column-3': column === '3', 'dialog-column-4': column === '4'}"
|
:visible.sync="visible"
|
v-if="visible"
|
:title="_title"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:append-to-body="appendToBody"
|
@open="onOpen"
|
@close="onClose">
|
<slot></slot>
|
<template slot="footer">
|
<template v-if="isView">
|
<el-button type="info" @click="close()">{{ $t('close') }}</el-button>
|
</template>
|
<template v-else>
|
<template v-if="stepMarker && stepMarker.indexOf('first')>0">
|
<el-button type="warning" @click="formSubmit('zc')">暂存</el-button>
|
<el-button type="warning" @click="formSubmit('tj')" v-if="">提交
|
</el-button>
|
</template>
|
<template v-else-if="stepMarker">
|
<el-button type="warning" @click="formSubmit('zc')">暂存</el-button>
|
<el-button type="warning" @click="formSubmit('bl')">办理</el-button>
|
</template>
|
<el-button v-else-if="hasConfirm" type="primary" @click="formSubmit('qd')" v-preventReClick>{{
|
$t('confirm') }}
|
</el-button>
|
<el-button v-else-if="editAble" type="warning" @click="formSubmit('bc')">保存
|
</el-button>
|
|
<el-button type="info" @click="visible = false" v-if="editAble||stepMarker">{{ $t('cancel') }}</el-button>
|
<el-button type="info" @click="close()" v-else>{{ $t('close') }}</el-button>
|
</template>
|
<slot name="footer"></slot>
|
</template>
|
</el-dialog>
|
</template>
|
<script>
|
import cloneDeep from 'lodash/cloneDeep'
|
|
export default {
|
name: 'ZtDialog',
|
props: {
|
title: String,
|
column: { // 几列
|
type: String,
|
default: '1'
|
},
|
stepMarker: {},
|
appendToBody: {
|
type: Boolean,
|
default: false
|
},
|
hasConfirm: {
|
type: Boolean,
|
default: false
|
},
|
editAble: {
|
type: Boolean,
|
default: true
|
},
|
hasSubmit: {
|
type: Boolean,
|
default: false
|
},
|
hasSave: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
dataFormBack: null,
|
visible: false,
|
isView: false,
|
//editAble: true // 是否可编辑
|
}
|
},
|
computed: {
|
_title() {
|
if (this.title) {
|
return this.title
|
} else if (!this.editAble) {
|
return this.$t('view')
|
} else if (this.$parent.dataForm !== undefined) {
|
return !this.$parent.dataForm.id ? this.$t('add') : this.$t('update')
|
}
|
}
|
},
|
mounted() {
|
this.dataFormBack = cloneDeep(this.$parent.dataForm)
|
},
|
methods: {
|
init(id, row, isView) {
|
this.isView = isView
|
|
|
this.$nextTick(() => {
|
// 清空表单校验
|
console.log(this.$parent.$refs.dataForm, id, row, isView, 'this.$parent.$refs.dataForm')
|
if (this.$parent.$refs.dataForm) { // dialog里面的form
|
this.$parent.$refs.dataForm.resetFields()
|
}
|
|
|
this.$parent.dataForm = cloneDeep(this.dataFormBack)
|
if (this.$parent.dataForm) {
|
this.$parent.dataForm.id = id
|
this.$parent.dataForm.disabled = isView === true // 表单是否可编辑
|
}
|
|
if (this.$parent.init) {
|
console.log(id, row, this.stepMarker, 'id row')
|
this.$parent.init(id, row)
|
}
|
if (id && this.$parent.getInfo) {
|
this.$parent.getInfo()
|
}
|
})
|
this.open()
|
},
|
// 表单提交
|
formSubmit(submitType) {
|
let dataForm = this.$parent.$refs.dataForm
|
if (dataForm) {
|
dataForm.validate(async valid => {
|
if (valid) {
|
this.$emit('confirm', submitType)
|
} else {
|
this.$nextTick(() => {
|
let isError = document.getElementsByClassName('is-error')
|
isError[0].scrollIntoView({
|
// 滚动到指定节点
|
// 值有start,center,end，nearest，当前显示在视图区域中间
|
block: 'center',
|
// 值有auto、instant,smooth，缓动动画（当前是慢速的）
|
behavior: 'smooth'
|
})
|
})
|
}
|
})
|
} else {
|
this.$emit('confirm', submitType)
|
}
|
},
|
open() {
|
this.visible = true
|
},
|
close() {
|
this.visible = false
|
},
|
onOpen() {
|
this.$emit('open')
|
},
|
onClose() {
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.dialog-column-min {
|
/deep/ .el-dialog {
|
position: fixed;
|
margin-top: 0 !important;
|
top: 50% !important;
|
left: 50% !important;
|
transform: translate(-50%, -50%);
|
width: 20%;
|
/*margin-top:7vh !important;*/
|
.el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
|
width: 100%;
|
}
|
}
|
}
|
.dialog-column-1 {
|
/deep/ .el-dialog {
|
position: fixed;
|
margin-top: 0 !important;
|
top: 50% !important;
|
left: 50% !important;
|
transform: translate(-50%, -50%);
|
width: 50%;
|
/*margin-top:7vh !important;*/
|
.el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
|
width: 75%;
|
}
|
}
|
}
|
|
.dialog-column-2 {
|
/deep/ .el-dialog {
|
width: 60%;
|
position: fixed;
|
margin-top: 0 !important;
|
top: 50% !important;
|
left: 50% !important;
|
transform: translate(-50%, -50%);
|
|
.el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
|
width: 50%;
|
float: left;
|
}
|
}
|
}
|
|
.dialog-column-3 {
|
/deep/ .el-dialog {
|
width: 75%;
|
position: fixed;
|
margin-top: 0 !important;
|
top: 50% !important;
|
left: 50% !important;
|
transform: translate(-50%, -50%);
|
|
.el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
|
//width: 33.33333%;
|
float: left;
|
}
|
}
|
}
|
|
.dialog-column-4 {
|
/deep/ .el-dialog {
|
width: 90%;
|
position: fixed;
|
margin-top: 0 !important;
|
top: 50% !important;
|
left: 50% !important;
|
transform: translate(-50%, -50%);
|
|
.el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
|
//width: 33.33333%;
|
float: left;
|
}
|
}
|
}
|
|
/deep/ .el-form {
|
padding: 15px;
|
|
.item-line-divider {
|
width: 100%;
|
height: 0px;
|
float: left;
|
}
|
}
|
|
</style>
|
