update 目前所有页面使用1.2的种子

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

@@ -14,28 +14,23 @@
         <a-form-model-item label="角色名" prop="name">
           <a-input placeholder="请输入角色名" v-model="form.name" />
         </a-form-model-item>
-      <a-form-model-item label="唯一编码" prop="code" :disabled="editDisabled">
+        <a-form-model-item :disabled="editDisabled" label="唯一编码" prop="code">
           <a-input placeholder="请输入唯一编码" v-model="form.code" />
         </a-form-model-item>
         <a-form-model-item label="系统参数" prop="sysFlag">
-        <a-radio-group v-model="form.sysFlag" :disabled="editDisabled">
+          <a-radio-group :disabled="editDisabled" v-model="form.sysFlag">
-          <a-radio-button value="Y">
+            <a-radio-button value="Y">是</a-radio-button>
-            <a-icon :style="{ color: '#1890ff' }" />是
+            <a-radio-button value="N">否</a-radio-button>
-          </a-radio-button>
-          <a-radio-button value="N">
-            <a-icon :style="{ color: '#eb2f96' }" />否
-          </a-radio-button>
           </a-radio-group>
         </a-form-model-item>
         <a-form-model-item label="所属分类" prop="groupCode">
-        <a-select placeholder="请选择所属分类" v-model="form.groupCode" :disabled="editDisabled">
+          <a-select :disabled="editDisabled" placeholder="请选择所属分类" v-model="form.groupCode">
             <a-select-option
               :key="i"
               :value="item.code"
               v-for="(item, i) in groupCode"
             >{{ item.value }}</a-select-option>
           </a-select>
-        </a-select>
         </a-form-model-item>
         <a-form-model-item label="参数值" prop="name">
           <a-input placeholder="请输入参数值 " v-model="form.value" />
@@ -50,7 +45,6 @@
 <script>
 /* 表单内容默认值 */
 const defaultForm = {
-  // editDisabled:false,
   /* ... */
 };
 
@@ -61,11 +55,11 @@ export default {
       form: {},
       /** 验证格式 */
       rules: {
-        name: [{ required: true, message: "请输入应用名称" }],
+        name: [{ required: true, message: '请输入应用名称' }],
-        code: [{ required: true, message: "请输入唯一编码" }],
+        code: [{ required: true, message: '请输入唯一编码' }],
-        sysFlag: [{ required: true, message: "请选择参数类型" }],
+        sysFlag: [{ required: true, message: '请选择参数类型' }],
-        groupCode: [{ required: true, message: "请选择所属分类" }],
+        groupCode: [{ required: true, message: '请选择所属分类' }],
-        value: [{ required: true, message: "请输入参数值" }],
+        value: [{ required: true, message: '请输入参数值' }],
         /* ... */
       },
 
@@ -92,13 +86,7 @@ export default {
         /* ... */
       });
 
-        if(this.form.sysFlag == 'Y')
+      this.editDisabled = this.form.sysFlag == 'Y';
-      {
-          this.editDisabled = true
-      }else
-      {
-           this.editDisabled = false
-      }
     },
 
     /**

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

@@ -114,18 +114,20 @@ export default {
       ],
 
       /* 字典编码储存格式 */
-      // codes: {
+      codes: {
-      //   code1: [],
+        code1: [],
-      //   code2: [],
+        code2: [],
-      // },
+      },
     };
   },
   created() {
     /** 按需加载字典编码 */
-    //this.onLoadCodes();
+    this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/* ... */);
+    const flag = this.$auth({
+      sysConfig: [['edit'], ['delete']],
+    });
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -180,19 +182,7 @@ export default {
      * 加载字典数据
      * 如果不需要获取相应的字典数据,此方法内容可空
      */
-    //onLoadCodes() {
+    onLoadCodes() {},
-    //   this.$api
-    //     .$queue([
-    //       this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
-    //       this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
-    //       /* ... */
-    //     ])
-    //     .then(([code1, code2]) => {
-    //       this.codes.code1 = code1.data;
-    //       this.codes.code2 = code2.data;
-    //       /* ... */
-    //     });
-    // },
 
     /**
      * 必要方法

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

@@ -1,74 +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,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen() {
-      this.visible = true;
-    //   this.$nextTick(() => {
-    //     this.$refs['form-body'].onFillData(record);
-    //   });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysPosAdd(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              this.confirmLoading = false;
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

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

@@ -1,74 +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,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.$refs['form-body'].onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysPosEdit(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              this.confirmLoading = false;
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

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

@@ -1,6 +1,16 @@
 <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">
+        <!-- 表单控件 -->
+        <!-- ... -->
         <a-form-model-item label="职位名称" prop="name">
           <a-input placeholder="请输入职位名称" v-model="form.name" />
         </a-form-model-item>
@@ -16,35 +26,74 @@
             v-model="form.sort"
           />
         </a-form-model-item>
-        <a-form-model-item
+        <a-form-model-item label="备注" prop="remark">
-          label="备注"
+          <a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></a-textarea>
-          prop="remark"
-        >
-          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
         </a-form-model-item>
       </div>
+    </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+  sort: 100,
+};
+
 export default {
   data() {
     return {
-      form: {
+      /** 表单数据 */
-        active: 'N',
+      form: {},
-      },
+      /** 验证格式 */
       rules: {
-        name: [{ required: true, message: '请输入应用名称' }],
+        /* ... */
-        code: [{ required: true, message: '请输入唯一编码' }],
+        name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }],
       },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
-      this.form = this.$_.cloneDeep(record);
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
     },
 
     /**
@@ -61,10 +110,26 @@ export default {
      */
     onResetFields() {
       setTimeout(() => {
-        this.form = {};
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
   },
 };
 </script>

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

@@ -1,30 +1,36 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysPos:page">
+      <yo-table
-        <div class="yo-query-bar">
+        :columns="columns"
-          <a-form-model :model="query" layout="inline">
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysPos: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>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
         </Auth>
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
         <Auth auth="sysPos:add" slot="operator">
           <a-button @click="onOpen('add-form')" icon="plus">新增职位</a-button>
         </Auth>
-
+        <!-- 格式化字段内容 -->
+        <!-- ... -->
+        <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
             <Auth auth="sysPos:edit">
@@ -35,26 +41,50 @@
                 <a>删除</a>
               </a-popconfirm>
             </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
+
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <!-- 新增表单 -->
-    <add-form @ok="onReloadData" ref="add-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: 'sysPosPage',
+  add: 'sysPosAdd',
+  edit: 'sysPosEdit',
+  delete: 'sysPosDelete',
+  /* ... */
+};
+
 export default {
   components: {
-    AddForm,
+    FormBody,
-    editForm,
   },
   data() {
     return {
+      api,
+
+      name: '职位',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '职位名称',
@@ -77,17 +107,28 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
     };
   },
   created() {
-    if (this.$auth({ sysPos: [['edit'], ['delete']] })) {
+    /** 按需加载字典编码 */
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth({
+      sysPos: [['edit'], ['delete']],
+    });
+    if (flag) {
       this.columns.push({
         title: '操作',
-        width: '200px',
+        width: '150px',
         dataIndex: 'action',
-        scopedSlots: {
+        scopedSlots: { customRender: 'action' },
-          customRender: 'action',
-        },
       });
     }
   },
@@ -97,12 +138,10 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
+      return this.$api[api.page]({
-        .sysPosPage({
         ...params,
         ...this.query,
-        })
+      }).then((res) => {
-        .then((res) => {
         return res.data;
       });
     },
@@ -115,6 +154,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -124,25 +173,59 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {},
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
     onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
       }
-      this.$refs.table.onLoaded();
     },
 
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysPosDelete(record).then(({ success, message }) => {
+      this.$api[api.delete](record)
+        .then(({ success }) => {
           this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
   },

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

@@ -1,71 +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,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    onOpen() {
-      this.visible = true;
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysRoleAdd(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              this.confirmLoading = false;
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/role/dataForm.vue

@@ -83,16 +83,16 @@ export default {
   },
 
   methods: {
-    async onOpen(record) {
+    async onOpen(params) {
       this.visible = true;
-      this.record = record;
+      this.record = params.record;
 
       this.loading = true;
 
       await this.onLoadCodes();
-      this.form.dataScopeType = record.dataScopeType.toString();
+      this.form.dataScopeType = this.record.dataScopeType.toString();
 
-      await this.onChange(record.dataScopeType);
+      await this.onChange(this.record.dataScopeType);
 
       this.loading = false;
     },

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

@@ -1,75 +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,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.$refs['form-body'].onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysRoleEdit(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              this.confirmLoading = false;
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

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

@@ -1,6 +1,16 @@
 <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">
+        <!-- 表单控件 -->
+        <!-- ... -->
         <a-form-model-item label="角色名" prop="name">
           <a-input placeholder="请输入角色名" v-model="form.name" />
         </a-form-model-item>
@@ -16,35 +26,73 @@
             v-model="form.sort"
           />
         </a-form-model-item>
-        <a-form-model-item
+        <a-form-model-item label="备注" prop="remark">
-          label="备注"
+          <a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></a-textarea>
-          prop="remark"
-        >
-          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
         </a-form-model-item>
       </div>
+    </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
   data() {
     return {
-      form: {
+      /** 表单数据 */
-        active: 'N',
+      form: {},
-      },
+      /** 验证格式 */
       rules: {
-        name: [{ required: true, message: '请输入应用名称' }],
+        /* ... */
-        code: [{ required: true, message: '请输入唯一编码' }],
+        name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }],
       },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
-      this.form = this.$_.cloneDeep(record);
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
     },
 
     /**
@@ -61,10 +109,26 @@ export default {
      */
     onResetFields() {
       setTimeout(() => {
-        this.form = {};
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
   },
 };
 </script>

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

@@ -1,31 +1,36 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysRole:page">
+      <yo-table
-        <div class="yo-query-bar">
+        :columns="columns"
-          <a-form-model :model="query" layout="inline">
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysRole: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>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="() => {(query = {}), onQuery();}">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
         </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
         <Auth auth="sysRole:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新建角色</a-button>
+          <a-button @click="onOpen('add-form')" icon="plus">新增角色</a-button>
         </Auth>
-
+        <!-- 格式化字段内容 -->
+        <!-- ... -->
+        <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
             <Auth auth="sysRole:edit">
@@ -36,6 +41,8 @@
                 <a>删除</a>
               </a-popconfirm>
             </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
             <Auth :auth="{ sysRole: [['grantMenu'], ['grantData']] }">
               <a-dropdown placement="bottomRight">
                 <a class="ant-dropdown-link">
@@ -60,28 +67,51 @@
         </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>
+
     <menu-form @ok="onReloadData" ref="menu-form" />
     <data-form @ok="onReloadData" ref="data-form" />
   </container>
 </template>
 <script>
-import AddForm from './addForm';
+import FormBody from './form';
-import EditForm from './editForm';
 import MenuForm from './menuForm';
 import DataForm from './dataForm';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'getRolePage',
+  add: 'sysRoleAdd',
+  edit: 'sysRoleEdit',
+  delete: 'sysRoleDelete',
+  /* ... */
+};
+
 export default {
   components: {
-    AddForm,
+    FormBody,
-    EditForm,
     MenuForm,
     DataForm,
   },
   data() {
     return {
+      api,
+
+      name: '角色',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '角色名',
@@ -99,17 +129,26 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
     };
   },
   created() {
+    /** 按需加载字典编码 */
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
     const flag = this.$auth({
       sysRole: [['edit'], ['delete'], ['grantMenu'], ['grantData']],
     });
-
     if (flag) {
       this.columns.push({
         title: '操作',
-        width: '200px',
+        width: '150px',
         dataIndex: 'action',
         scopedSlots: { customRender: 'action' },
       });
@@ -121,12 +160,10 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
+      return this.$api[api.page]({
-        .getRolePage({
         ...params,
         ...this.query,
-        })
+      }).then((res) => {
-        .then((res) => {
         return res.data;
       });
     },
@@ -139,6 +176,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -148,25 +195,71 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
+        ])
+        .then(([code1, code2]) => {
+          this.codes.code1 = code1.data;
+          this.codes.code2 = code2.data;
+          /* ... */
+        });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
     onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
       }
-      this.$refs.table.onLoaded();
     },
 
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysRoleDel(record).then(({ success }) => {
+      this.$api[api.delete](record)
+        .then(({ success }) => {
           this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
   },

Web/src/pages/system/role/menuForm.vue

@@ -41,9 +41,9 @@ export default {
      * 必要的方法
      * 从外部调用打开本窗口
      */
-    onOpen(record) {
+    onOpen(params) {
       this.visible = true;
-      this.record = record;
+      this.record = params.record;
 
       this.$nextTick(async () => {
         const view = this.$refs['authority-view'];