update 区域管理使用新种子

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

@@ -1,32 +1,35 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysArea:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <!-- 此处添加查询表单控件 -->
-            <a-form-model-item label="参数名称">
-              <a-input placeholder="请输入参数名称" v-model="query.name" />
-            </a-form-model-item>
-            <a-form-model-item label="参数编码">
-              <a-input placeholder="请输入参数编码" v-model="query.code" />
-            </a-form-model-item>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="onResetQuery">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysArea:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+          <a-form-model-item label="参数名称">
+            <a-input placeholder="请输入参数名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="参数编码">
+            <a-input placeholder="请输入参数编码" v-model="query.code" />
+          </a-form-model-item>
+        </Auth>
         <Auth auth="sysArea:add" slot="operator">
           <a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button>
         </Auth>
         <!-- 格式化字段内容 -->
+        <!-- ... -->
         <span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span>
         <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
@@ -40,27 +43,49 @@
               </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: 'sysAreaPage',
+  add: 'sysAreaAdd',
+  edit: 'sysAreaEdit',
+  delete: 'sysAreaDelete',
+  /* ... */
+};
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
+      api,
+
+      name: '区域编码',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '参数类型',
@@ -94,12 +119,15 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
       codes: {
         levelType: [],
       },
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
@@ -119,17 +147,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return (
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysAreaPage({
-            ...params,
-            ...this.query,
-          })
-          .then((res) => {
-            return res.data;
-          })
-      );
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -164,9 +187,15 @@ export default {
      * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
-      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'dic_areacode_type' })]).then(([dic_areacode_type]) => {
-        this.codes.levelType = dic_areacode_type.data;
-      });
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_areacode_type' }),
+          /* ... */
+        ])
+        .then(([code1]) => {
+          this.codes.levelType = code1.data;
+          /* ... */
+        });
     },
 
     /**
@@ -186,7 +215,11 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**
@@ -206,9 +239,7 @@ export default {
      */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api
-        /** !!此处必须修改调用的接口方法 */
-        .sysAreaDelete(record)
+      this.$api[api.delete](record)
         .then(({ success }) => {
           this.onResult(success, '删除成功');
         })