update

重新封装了表单窗体,支持关闭时变更检测;
优化模版代码及内部注释,更快速开发;
开发文档中的代码片段可以复制成用户片段模版

Web/src/components/yoModalForm/index.js

@@ -0,0 +1,148 @@
+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
+        }
+    },
+
+    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.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)
+    }
+}