update

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

Web/public/doc-code/seed/addForm.vue

@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testAddApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/public/doc-code/seed/editForm.vue

@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testEditApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/public/doc-code/seed/form.vue

@@ -1,27 +1,41 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
       <div class="yo-form-group">
         <!-- 表单控件 -->
+        <!-- ... -->
       </div>
     </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
       form: {},
       /** 验证格式 */
-      rules: {},
+      rules: {
+        /* ... */
+      },
 
       /** 加载异步数据状态 */
       loading: false,
 
       /** 其他成员属性 */
-      /** ... */
+      /* ... */
     };
   },
 
@@ -30,12 +44,13 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
-        ...record,
+        ...defaultForm,
-        /** 在此处添加默认数据转换 */
+        ...params.record,
-        /** ... */
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
       });
     },
 
@@ -50,7 +65,7 @@ export default {
             const record = this.$_.cloneDeep(this.form);
 
             /** 验证通过后可以对数据进行转换得到想要提交的格式 */
-            /** ... */
+            /* ... */
 
             reslove(record);
           } else {
@@ -77,7 +92,7 @@ export default {
         this.$refs.form.resetFields();
 
         /** 在这里可以初始化当前组件中其他属性 */
-        /** ... */
+        /* ... */
       }, 300);
     },
 
@@ -85,16 +100,15 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit() {
+    async onInit(params) {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
-      /** ...BEGIN */
+      /* ... */
-      /** ...END */
       this.loading = false;
     },
 
     /** 当前组件的其他方法 */
-    /** ... */
+    /* ... */
   },
 };
 </script>

Web/public/doc-code/seed/query.vue

@@ -1,4 +1,10 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
@@ -11,11 +17,13 @@
       >
         <Auth auth="authCode:page" slot="query">
           <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
         </Auth>
         <Auth auth="authCode:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
+          <a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
         </Auth>
         <!-- 格式化字段内容 -->
+        <!-- ... -->
         <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
@@ -28,35 +36,52 @@
               </a-popconfirm>
             </Auth>
             <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
+
-    <add-form @ok="onReloadData" ref="add-form" />
+    <!-- 新增表单 -->
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
+import FormBody from './form';
-import EditForm from './editForm';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  page: 'testPageApi',
+  page: 'testPageApi...',
-  delete: 'testDeleteApi',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
-    AddForm,
+    FormBody,
-    EditForm,
   },
   data() {
     return {
+      ...api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
       codes: {
         code1: [],
         code2: [],
@@ -64,10 +89,11 @@ export default {
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -127,10 +153,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -151,7 +179,11 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**

Web/public/doc-code/seed/treeLayout.vue

@@ -1,4 +1,10 @@
 <template>
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <yo-tree-layout
     :load-data="loadTreeData"
     @select="onSelect"
@@ -16,11 +22,13 @@
         >
           <Auth auth="authCode:page" slot="query">
             <!-- 此处添加查询表单控件 -->
+            <!-- ... -->
           </Auth>
           <Auth auth="authCode:add" slot="operator">
             <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
           </Auth>
           <!-- 格式化字段内容 -->
+          <!-- ... -->
           <!-- 添加操作控件 -->
           <span slot="action" slot-scope="text, record">
             <yo-table-actions>
@@ -33,41 +41,62 @@
                 </a-popconfirm>
               </Auth>
               <!-- 可在此处添加其他操作控件 -->
+              <!-- ... -->
             </yo-table-actions>
           </span>
         </yo-table>
       </a-card>
     </container>
-    <add-form @ok="onReloadData" ref="add-form" />
+
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </yo-tree-layout>
 </template>
 <script>
 /* 需要引用YoTreeLayout组件 */
 import YoTreeLayout from '@/components/yoTreeLayout';
-
+import FormBody from './form';
-import AddForm from './addForm';
-import EditForm from './editForm';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  tree: 'testTreeApi',
+  tree: 'testTreeApi...',
-  page: 'testPageApi',
+  page: 'testPageApi...',
-  delete: 'testDeleteApi',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
     YoTreeLayout,
-    AddForm,
+    FormBody,
-    EditForm,
   },
 
   data() {
     return {
+      ...api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
     };
   },
 
@@ -75,7 +104,7 @@ export default {
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -102,7 +131,7 @@ export default {
      * 选择树节点事件
      */
     onSelect([id]) {
-      /* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
       this.query = {
         pid: id,
       };
@@ -163,10 +192,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -187,7 +218,12 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.query['pid']);
+      this.$refs[formName].onOpen({
+        record,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**

Web/src/assets/style/lib/form.less

@@ -207,22 +207,34 @@
   }
 }
 .yo-drawer-form {
+  .ant-drawer-wrapper-body {
+    display: flex;
+    flex-direction: column;
+  }
   .ant-drawer-header {
-    position: absolute;
+    flex: 0 0 auto;
-    top: 0;
-    left: 0;
-    z-index: 7;
-
-    width: 100%;
   }
   .ant-drawer-body {
-    padding: @padding-lg + 56px @padding-lg;
+    position: relative;
+
+    flex: 1 1 100%;
+
+    padding: 0;
+  }
+  .yo-drawer-form--body {
+    position: absolute;
+    top: 0;
+    bottom: @border-width-base + 20px + @padding-md * 2;
+
+    overflow: auto;
+
+    width: 100%;
+    padding: @padding-lg;
   }
   .ant-drawer-footer {
     position: absolute;
     left: 0;
     bottom: 0;
-    z-index: 7;
 
     width: 100%;
     padding: 10px @padding-md;

Web/src/assets/style/lib/visibility.less

@@ -1,3 +1,4 @@
+@import (reference) '~@/assets/style/extend.less';
 .hide {
   visibility: hidden !important;
 }

Web/src/assets/style/lib/width-height.css

@@ -1,3 +0,0 @@
-.w-100-p {
-  width: 100%;
-}

Web/src/assets/style/lib/width-height.less

@@ -1,3 +1,4 @@
+@import (reference) '~@/assets/style/extend.less';
 .w-100-p {
   width: 100%;
 }

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)
+    }
+}

Web/src/main.js

@@ -78,6 +78,8 @@ import YoTable from './components/yoTable'
 Vue.component('YoTable', YoTable)
 import YoTableActions from './components/yoTableActions'
 Vue.component('YoTableActions', YoTableActions)
+import YoModalForm from './components/yoModalForm'
+Vue.component('YoModalForm', YoModalForm)
 import YoImage from './components/yoImage'
 Vue.component('YoImage', YoImage)
 

Web/src/pages/system/_seed/addForm.vue

@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testAddApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/_seed/editForm.vue

@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testEditApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/_seed/form.vue

@@ -1,27 +1,41 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
       <div class="yo-form-group">
         <!-- 表单控件 -->
+        <!-- ... -->
       </div>
     </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
       form: {},
       /** 验证格式 */
-      rules: {},
+      rules: {
+        /* ... */
+      },
 
       /** 加载异步数据状态 */
       loading: false,
 
       /** 其他成员属性 */
-      /** ... */
+      /* ... */
     };
   },
 
@@ -30,12 +44,13 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
-        ...record,
+        ...defaultForm,
-        /** 在此处添加默认数据转换 */
+        ...params.record,
-        /** ... */
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
       });
     },
 
@@ -50,7 +65,7 @@ export default {
             const record = this.$_.cloneDeep(this.form);
 
             /** 验证通过后可以对数据进行转换得到想要提交的格式 */
-            /** ... */
+            /* ... */
 
             reslove(record);
           } else {
@@ -77,7 +92,7 @@ export default {
         this.$refs.form.resetFields();
 
         /** 在这里可以初始化当前组件中其他属性 */
-        /** ... */
+        /* ... */
       }, 300);
     },
 
@@ -85,16 +100,15 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit() {
+    async onInit(params) {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
-      /** ...BEGIN */
+      /* ... */
-      /** ...END */
       this.loading = false;
     },
 
     /** 当前组件的其他方法 */
-    /** ... */
+    /* ... */
   },
 };
 </script>

Web/src/pages/system/_seed/index.vue

@@ -1,4 +1,10 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
@@ -11,11 +17,13 @@
       >
         <Auth auth="authCode:page" slot="query">
           <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
         </Auth>
         <Auth auth="authCode:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
+          <a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
         </Auth>
         <!-- 格式化字段内容 -->
+        <!-- ... -->
         <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
@@ -28,35 +36,52 @@
               </a-popconfirm>
             </Auth>
             <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
+
-    <add-form @ok="onReloadData" ref="add-form" />
+    <!-- 新增表单 -->
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
+import FormBody from './form';
-import EditForm from './editForm';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  page: 'testPageApi',
+  page: 'testPageApi...',
-  delete: 'testDeleteApi',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
-    AddForm,
+    FormBody,
-    EditForm,
   },
   data() {
     return {
+      ...api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
       codes: {
         code1: [],
         code2: [],
@@ -64,10 +89,11 @@ export default {
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -127,10 +153,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -151,7 +179,11 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**

Web/src/pages/system/_seed/treeLayout.vue

@@ -1,4 +1,10 @@
 <template>
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <yo-tree-layout
     :load-data="loadTreeData"
     @select="onSelect"
@@ -16,11 +22,13 @@
         >
           <Auth auth="authCode:page" slot="query">
             <!-- 此处添加查询表单控件 -->
+            <!-- ... -->
           </Auth>
           <Auth auth="authCode:add" slot="operator">
             <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
           </Auth>
           <!-- 格式化字段内容 -->
+          <!-- ... -->
           <!-- 添加操作控件 -->
           <span slot="action" slot-scope="text, record">
             <yo-table-actions>
@@ -33,41 +41,62 @@
                 </a-popconfirm>
               </Auth>
               <!-- 可在此处添加其他操作控件 -->
+              <!-- ... -->
             </yo-table-actions>
           </span>
         </yo-table>
       </a-card>
     </container>
-    <add-form @ok="onReloadData" ref="add-form" />
+
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </yo-tree-layout>
 </template>
 <script>
 /* 需要引用YoTreeLayout组件 */
 import YoTreeLayout from '@/components/yoTreeLayout';
-
+import FormBody from './form';
-import AddForm from './addForm';
-import EditForm from './editForm';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  tree: 'testTreeApi',
+  tree: 'testTreeApi...',
-  page: 'testPageApi',
+  page: 'testPageApi...',
-  delete: 'testDeleteApi',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
     YoTreeLayout,
-    AddForm,
+    FormBody,
-    EditForm,
   },
 
   data() {
     return {
+      ...api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
     };
   },
 
@@ -75,7 +104,7 @@ export default {
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -102,7 +131,7 @@ export default {
      * 选择树节点事件
      */
     onSelect([id]) {
-      /* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
       this.query = {
         pid: id,
       };
@@ -163,10 +192,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -187,7 +218,12 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.query['pid']);
+      this.$refs[formName].onOpen({
+        record,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**

Web/src/pages/system/dict/addForm.vue

@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增字典类型"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictTypeAdd(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/dict/dictdata/addForm.vue

@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增字典数据"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen(record, typeId) {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-        this.formBody.onFillData(record, typeId);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictDataAdd(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/dict/dictdata/editForm.vue

@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑字典数据"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictDataEdit(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/dict/dictdata/form.vue

@@ -21,14 +21,16 @@
   </a-form-model>
 </template>
 <script>
+const defaultForm = {
+  typeId: '',
+  sort: 100,
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
-      form: {
+      form: {},
-        typeId: '',
-        sort: 100,
-      },
       /** 验证格式 */
       rules: {
         value: [{ required: true, message: '请输入字典值' }],
@@ -48,17 +50,15 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record, typeId) {
+    onFillData(params) {
-      if (typeId) {
+      /** 将默认数据覆盖到form */
-        this.form.typeId = typeId;
+      this.form = this.$_.cloneDeep({
-      } else {
+        ...defaultForm,
-        /** 将默认数据覆盖到form */
+        ...params.record,
-        this.form = this.$_.cloneDeep({
+        /** 在此处添加默认数据转换 */
-          ...record,
+        /** ... */
-          /** 在此处添加默认数据转换 */
+        typeId: params.typeId,
-          /** ... */
+      });
-        });
-      }
     },
 
     /**

Web/src/pages/system/dict/dictdata/index.vue

@@ -8,6 +8,7 @@
       ref="table"
     >
       <Auth auth="sysDictData:page" slot="query">
+        <!-- 此处添加查询表单控件 -->
         <a-form-model-item label="文本">
           <a-input placeholder="请输入文本" v-model="query.value" />
         </a-form-model-item>
@@ -36,18 +37,21 @@
       </span>
     </yo-table>
 
-    <add-form @ok="onReloadData" ref="add-form" />
+    <yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
-    <edit-form @ok="onReloadData" ref="edit-form" />
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
+      <form-body />
+    </yo-modal-form>
   </a-card>
 </template>
 <script>
-import AddForm from './addForm';
+import FormBody from './form';
-import EditForm from './editForm';
 
 export default {
   components: {
-    AddForm,
+    FormBody,
-    EditForm,
   },
   props: {
     type: {
@@ -181,7 +185,10 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.type.id);
+      this.$refs[formName].onOpen({
+        typeId: this.type.id,
+        record,
+      });
     },
 
     /**

Web/src/pages/system/dict/editForm.vue

@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑字典类型"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictTypeEdit(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/dict/form.vue

@@ -47,10 +47,10 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
-        ...record,
+        ...params.record,
         /** 在此处添加默认数据转换 */
         /** ... */
       });

Web/src/pages/system/dict/index.vue

@@ -42,21 +42,25 @@
       </yo-table>
     </a-card>
     <br />
-    <add-form @ok="onReloadData" ref="add-form" />
+
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
 import DictData from './dictdata';
 
-import AddForm from './addForm';
+import FormBody from './form';
-import EditForm from './editForm';
 
 export default {
   components: {
     DictData,
-    AddForm,
+    FormBody,
-    EditForm,
   },
   data() {
     return {
@@ -191,7 +195,9 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+      });
     },
 
     /**

Web/src/pages/system/doc/highlight.js

@@ -1,17 +1,23 @@
+import { template } from "lodash"
+
 export default {
     props: {
         code: {
             type: String
+        },
+        copyTemplate: {
+            type: Boolean,
+            default: false
         }
     },
 
     methods: {
-        onCopy() {
+        baseCopy(content) {
             try {
                 const $textarea = document.createElement('textarea')
                 $textarea.style = 'opacity: 0;position: fixed;top: -10000;left: -10000'
                 document.body.append($textarea)
-                $textarea.value = this.code
+                $textarea.value = content
                 $textarea.select()
                 document.execCommand('copy')
                 $textarea.remove()
@@ -21,7 +27,24 @@ export default {
             {
                 this.$message.error('复制失败')
             }
-        }
+        },
+        onCopy() {
+            this.baseCopy(this.code)
+        },
+        onCopyTemplate() {
+            const code = '"' +
+                this.code
+                    // 转义双引号 => \"
+                    .replace(/"/g, '\\"')
+                    // 转义$ => $$
+                    .replace(/\$/g, '$$$$')
+                    // 替换行首 => "
+                    .replace(/\n/g, '"')
+                    // 替换行末 = ",
+                    .replace(/\r/g, '",\r') +
+                '"'
+            this.baseCopy(code)
+        },
     },
 
     render() {
@@ -34,7 +57,26 @@ export default {
             <section>
                 <highlightjs {...{ props }} style={{ maxHeight: '400px', overflow: 'auto' }} />
                 <div class="text-right">
-                    <a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
+                    {this.$scopedSlots.actions && this.$scopedSlots.actions().map(p => {
+                        return (
+                            <span>
+                                {p}
+                                <a-divider type="vertical" />
+                            </span>
+                        )
+                    })}
+                    {
+                        this.copyTemplate &&
+                        <span>
+                            <a-tooltip title="复制用户片段模版">
+                                <a-button size="small" type="dashed" onClick={this.onCopyTemplate} class="mb-xs">Copy template</a-button>
+                            </a-tooltip>
+                            <a-divider type="vertical" />
+                        </span>
+                    }
+                    <a-tooltip title="复制内容">
+                        <a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
+                    </a-tooltip>
                 </div>
             </section>
         )

Web/src/pages/system/doc/seed/form.vue

@@ -1,20 +1,10 @@
 <template>
   <section>
-    <h4>
+    <p>
-      新增
+      当前版本
-      <a-tag>1.0</a-tag>
+      <a-tag>1.2</a-tag>
-    </h4>
+    </p>
-    <Highlight :code="codes['/seed/addForm.vue']" language="html" />
+    <Highlight :code="codes['/seed/form.vue']" copy-template language="html" />
-    <h4>
-      编辑
-      <a-tag>1.0</a-tag>
-    </h4>
-    <Highlight :code="codes['/seed/editForm.vue']" language="html" />
-    <h4>
-      表单主体
-      <a-tag>1.0</a-tag>
-    </h4>
-    <Highlight :code="codes['/seed/form.vue']" language="html" />
   </section>
 </template>
 <script>
@@ -30,4 +20,4 @@ export default {
     },
   },
 };
-</script>
+</script>

Web/src/pages/system/doc/seed/query.vue

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query.vue']" language="html" />
+    <Highlight :code="codes['/seed/query.vue']" copy-template language="html" />
   </section>
 </template>
 <script>

Web/src/pages/system/doc/seed/treeLayout.vue

@@ -4,7 +4,7 @@
       当前版本
       <a-tag>1.1</a-tag>
     </p>
-    <Highlight :code="codes['/seed/treeLayout.vue']" language="html" />
+    <Highlight :code="codes['/seed/treeLayout.vue']" copy-template language="html" />
   </section>
 </template>
 <script>

Web/src/pages/system/menu/form.vue

@@ -148,9 +148,7 @@ export default {
   data() {
     return {
       /** 表单数据 */
-      form: {
+      form: {},
-        ...defaultValue,
-      },
       /** 验证格式 */
       rules: {
         type: [{ required: true, message: '请选择菜单类型' }],
@@ -185,13 +183,21 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
-      this.form = this.$_.cloneDeep({
+      let form = {
-        ...record,
+        ...defaultValue,
+        ...params.record,
         /** 在此处添加默认数据转换 */
         /** ... */
-      });
+      };
+
+      if (params.isParent) {
+        form.pid = params.parent.id;
+        form.application = params.parent.application;
+      }
+
+      this.form = this.$_.cloneDeep(form);
     },
 
     /**
@@ -244,20 +250,17 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit(record, isParent = false) {
+    async onInit(params) {
       this.loading = true;
 
       /** 可以在这里await获取一些异步数据 */
       /** ...BEGIN */
       this.codes = await this.onLoadCodes();
       this.appList = await this.onLoadSysApplist();
-      if (record) {
+      if (params.isParent) {
-        await this.onLoadMenuTree(record.application);
+        await this.onLoadMenuTree(params.parent.application);
-
+      } else if (params.record) {
-        if (isParent) {
+        await this.onLoadMenuTree(params.record.application);
-          this.$set(this.form, 'pid', record.id);
-          this.$set(this.form, 'application', record.application);
-        }
       }
       /** ...END */
       this.loading = false;

Web/src/pages/system/menu/index.vue

@@ -19,7 +19,7 @@
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
             <Auth auth="sysMenu:add" v-if="record.type < 2">
-              <a @click="onOpen('add-form', record)">新增子菜单</a>
+              <a @click="onOpen('add-form', record, true)">新增子菜单</a>
             </Auth>
             <Auth auth="sysMenu:edit">
               <a @click="onOpen('edit-form', record)">编辑</a>
@@ -33,19 +33,36 @@
         </span>
       </yo-table>
     </a-card>
-    <br />
+
-    <add-form @ok="onReloadData" ref="add-form" />
+    <yo-modal-form
-    <edit-form @ok="onReloadData" ref="edit-form" />
+      :action="$api.sysMenuAdd"
+      :width="800"
+      @ok="onReloadData"
+      ref="add-form"
+      title="新增菜单"
+      type="drawer"
+    >
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form
+      :action="$api.sysMenuEdit"
+      :width="800"
+      @ok="onReloadData"
+      ref="edit-form"
+      title="编辑菜单"
+      type="drawer"
+    >
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
+import FormBody from './form';
-import EditForm from './editForm';
 
 export default {
   components: {
-    AddForm,
+    FormBody,
-    EditForm,
   },
   data() {
     return {
@@ -178,8 +195,17 @@ export default {
      * 有编辑新增功能的必要方法
      * 从列表页调用窗口的打开方法
      */
-    onOpen(formName, record) {
+    onOpen(formName, record, isParent = false) {
-      this.$refs[formName].onOpen(record);
+      const params = isParent
+        ? {
+            parent: record,
+            isParent,
+          }
+        : {
+            record,
+            isParent,
+          };
+      this.$refs[formName].onOpen(params);
     },
 
     onResult(success, successMessage) {