update

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

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