update

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

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

@@ -148,9 +148,7 @@ export default {
   data() {
     return {
       /** 表单数据 */
-      form: {
-        ...defaultValue,
-      },
+      form: {},
       /** 验证格式 */
       rules: {
         type: [{ required: true, message: '请选择菜单类型' }],
@@ -185,13 +183,21 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
-      this.form = this.$_.cloneDeep({
-        ...record,
+      let form = {
+        ...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) {
-        await this.onLoadMenuTree(record.application);
-
-        if (isParent) {
-          this.$set(this.form, 'pid', record.id);
-          this.$set(this.form, 'application', record.application);
-        }
+      if (params.isParent) {
+        await this.onLoadMenuTree(params.parent.application);
+      } else if (params.record) {
+        await this.onLoadMenuTree(params.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" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <yo-modal-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 EditForm from './editForm';
+import FormBody from './form';
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
@@ -178,8 +195,17 @@ export default {
      * 有编辑新增功能的必要方法
      * 从列表页调用窗口的打开方法
      */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+    onOpen(formName, record, isParent = false) {
+      const params = isParent
+        ? {
+            parent: record,
+            isParent,
+          }
+        : {
+            record,
+            isParent,
+          };
+      this.$refs[formName].onOpen(params);
     },
 
     onResult(success, successMessage) {