151 lines
4.2 KiB
JavaScript
151 lines
4.2 KiB
JavaScript
export default {
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'modal',
|
|
validator: function (value) {
|
|
return ['modal', 'drawer'].indexOf(value) > -1
|
|
}
|
|
},
|
|
compareOnClose: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
action: {
|
|
type: Function
|
|
},
|
|
successMessage: {
|
|
type: String
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false,
|
|
|
|
form: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
body() {
|
|
return this.$slots.default && this.$slots.default[0].componentInstance
|
|
}
|
|
},
|
|
|
|
created() {
|
|
},
|
|
|
|
methods: {
|
|
renderModal(props) {
|
|
|
|
const _props = {
|
|
...props,
|
|
confirmLoading: this.confirmLoading
|
|
}
|
|
|
|
const _on = {
|
|
cancel: () => this.onClose(this.compareOnClose),
|
|
ok: () => this.onOk()
|
|
}
|
|
|
|
return (<a-modal {...{ props: _props, on: _on }} class="yo-modal-form">
|
|
{this.renderBody()}
|
|
</a-modal>)
|
|
},
|
|
|
|
renderDrawer(props) {
|
|
|
|
const _props = {
|
|
...props
|
|
}
|
|
|
|
const _on = {
|
|
close: () => this.onClose(this.compareOnClose),
|
|
ok: () => this.onOk()
|
|
}
|
|
|
|
return (<a-drawer {...{ props: _props, on: _on }} class="yo-drawer-form">
|
|
<div class="yo-drawer-form--body">
|
|
{this.renderBody()}
|
|
</div>
|
|
<div class="ant-drawer-footer">
|
|
<a-button onClick={_on.close}>取消</a-button>
|
|
<a-button loading={this.confirmLoading} onClick={_on.ok} type="primary">确定</a-button>
|
|
</div >
|
|
</a-drawer>)
|
|
},
|
|
|
|
renderBody() {
|
|
return this.$scopedSlots.default && this.$scopedSlots.default()
|
|
},
|
|
|
|
onOpen(data) {
|
|
this.visible = true
|
|
this.$nextTick(async () => {
|
|
if (!this.body) return
|
|
|
|
this.body.onInit && await this.body.onInit(data)
|
|
this.body.onFillData && this.body.onFillData(data)
|
|
this.form = this.$_.cloneDeep(this.body.form)
|
|
})
|
|
},
|
|
|
|
onClose(compare = false) {
|
|
const close = () => {
|
|
this.body
|
|
&& this.body.onResetFields
|
|
&& this.body.onResetFields()
|
|
this.visible = false
|
|
}
|
|
|
|
if (this.body) {
|
|
if (!this.$_.isEqual(this.form, this.body.form) && compare) {
|
|
this.$confirm({
|
|
title: '是否确认关闭',
|
|
content: '当前内容已更改，是否确认不保存并且关闭',
|
|
onOk: () => {
|
|
close()
|
|
}
|
|
})
|
|
} else {
|
|
close()
|
|
}
|
|
} else {
|
|
close()
|
|
}
|
|
},
|
|
|
|
onOk() {
|
|
this.body
|
|
&& this.body.onGetData
|
|
&& this.body.onGetData()
|
|
.then((data) => {
|
|
this.confirmLoading = true
|
|
this.action
|
|
&& this.action(data)
|
|
.then(({ success }) => {
|
|
if (success) {
|
|
this.$message.success(this.successMessage || '保存成功');
|
|
this.onClose();
|
|
this.$emit('ok');
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.confirmLoading = false
|
|
})
|
|
}).catch(() => { })
|
|
}
|
|
},
|
|
|
|
render() {
|
|
const props = {
|
|
...this.$props,
|
|
...this.$attrs,
|
|
visible: this.visible
|
|
}
|
|
|
|
return this.type === 'modal' ? this.renderModal(props) : this.renderDrawer(props)
|
|
}
|
|
} |