update

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

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 AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  tree: 'testTreeApi',
-  page: 'testPageApi',
-  delete: 'testDeleteApi',
+  tree: 'testTreeApi...',
+  page: 'testPageApi...',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
     YoTreeLayout,
-    AddForm,
-    EditForm,
+    FormBody,
   },
 
   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,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**