From 9eba92a2fb8a807acc615a9bd6d3495a4f32524b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?=
 <188633308@qq.com>
Date: Mon, 10 May 2021 16:22:26 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E7=9B=AE=E5=89=8D=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BD=BF=E7=94=A81.2=E7=9A=84=E7=A7=8D?=
 =?UTF-8?q?=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/pages/system/config/form.vue   |  86 +++++-------
 Web/src/pages/system/config/index.vue  |  28 ++--
 Web/src/pages/system/pos/addForm.vue   |  74 ----------
 Web/src/pages/system/pos/editForm.vue  |  74 ----------
 Web/src/pages/system/pos/form.vue      | 125 +++++++++++++----
 Web/src/pages/system/pos/index.vue     | 175 +++++++++++++++++------
 Web/src/pages/system/role/addForm.vue  |  71 ----------
 Web/src/pages/system/role/dataForm.vue |   8 +-
 Web/src/pages/system/role/editForm.vue |  75 ----------
 Web/src/pages/system/role/form.vue     | 124 +++++++++++++----
 Web/src/pages/system/role/index.vue    | 185 +++++++++++++++++++------
 Web/src/pages/system/role/menuForm.vue |   4 +-
 12 files changed, 509 insertions(+), 520 deletions(-)
 delete mode 100644 Web/src/pages/system/pos/addForm.vue
 delete mode 100644 Web/src/pages/system/pos/editForm.vue
 delete mode 100644 Web/src/pages/system/role/addForm.vue
 delete mode 100644 Web/src/pages/system/role/editForm.vue

diff --git a/Web/src/pages/system/config/form.vue b/Web/src/pages/system/config/form.vue
index 93ec7d1..dacdc2a 100644
--- a/Web/src/pages/system/config/form.vue
+++ b/Web/src/pages/system/config/form.vue
@@ -11,38 +11,33 @@
       <div class="yo-form-group">
         <!-- 表单控件 -->
         <!-- ... -->
-              <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-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-button value="Y">
-            <a-icon :style="{ color: '#1890ff' }" />是
-          </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-form-model-item label="角色名" prop="name">
+          <a-input placeholder="请输入角色名" v-model="form.name" />
+        </a-form-model-item>
+        <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 :disabled="editDisabled" v-model="form.sysFlag">
+            <a-radio-button value="Y">是</a-radio-button>
+            <a-radio-button value="N">否</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item label="所属分类" prop="groupCode">
+          <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" />
-      </a-form-model-item>
-      <a-form-model-item label="备注" prop="remark">
-        <a-input placeholder="请输入备注" v-model="form.remark" />
-      </a-form-model-item>
+              :key="i"
+              :value="item.code"
+              v-for="(item, i) in groupCode"
+            >{{ item.value }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="参数值" prop="name">
+          <a-input placeholder="请输入参数值 " v-model="form.value" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-input placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
       </div>
     </a-spin>
   </a-form-model>
@@ -50,7 +45,6 @@
 <script>
 /* 表单内容默认值 */
 const defaultForm = {
-  // editDisabled:false,
   /* ... */
 };
 
@@ -61,18 +55,18 @@ export default {
       form: {},
       /** 验证格式 */
       rules: {
-        name: [{ required: true, message: "请输入应用名称" }],
-        code: [{ required: true, message: "请输入唯一编码" }],
-        sysFlag: [{ required: true, message: "请选择参数类型" }],
-        groupCode: [{ required: true, message: "请选择所属分类" }],
-        value: [{ required: true, message: "请输入参数值" }],
+        name: [{ required: true, message: '请输入应用名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+        sysFlag: [{ required: true, message: '请选择参数类型' }],
+        groupCode: [{ required: true, message: '请选择所属分类' }],
+        value: [{ required: true, message: '请输入参数值' }],
         /* ... */
       },
 
       /** 加载异步数据状态 */
       loading: false,
-      editDisabled:false,
-      groupCode:[],
+      editDisabled: false,
+      groupCode: [],
       /** 其他成员属性 */
       /* ... */
     };
@@ -91,14 +85,8 @@ export default {
         /** 在此处添加其他默认数据转换 */
         /* ... */
       });
-     
-        if(this.form.sysFlag == 'Y')
-      {
-          this.editDisabled = true
-      }else
-      {
-           this.editDisabled = false
-      }
+
+      this.editDisabled = this.form.sysFlag == 'Y';
     },
 
     /**
@@ -158,9 +146,9 @@ export default {
     /** 当前组件的其他方法 */
     /* ... */
     /**
-     * 
+     *
      * 获取所属分类字典表的内容
-     */ 
+     */
     onLoadgroupCodeData() {
       return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
         return data;
diff --git a/Web/src/pages/system/config/index.vue b/Web/src/pages/system/config/index.vue
index c779929..6dd2bdf 100644
--- a/Web/src/pages/system/config/index.vue
+++ b/Web/src/pages/system/config/index.vue
@@ -114,18 +114,20 @@ export default {
       ],
 
       /* 字典编码储存格式 */
-      // codes: {
-      //   code1: [],
-      //   code2: [],
-      // },
+      codes: {
+        code1: [],
+        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() {
-    //   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;
-    //       /* ... */
-    //     });
-    // },
+    onLoadCodes() {},
 
     /**
      * 必要方法
diff --git a/Web/src/pages/system/pos/addForm.vue b/Web/src/pages/system/pos/addForm.vue
deleted file mode 100644
index 2d2dcae..0000000
--- a/Web/src/pages/system/pos/addForm.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/Web/src/pages/system/pos/editForm.vue b/Web/src/pages/system/pos/editForm.vue
deleted file mode 100644
index 79196bc..0000000
--- a/Web/src/pages/system/pos/editForm.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/Web/src/pages/system/pos/form.vue b/Web/src/pages/system/pos/form.vue
index e752d1b..48576b9 100644
--- a/Web/src/pages/system/pos/form.vue
+++ b/Web/src/pages/system/pos/form.vue
@@ -1,50 +1,99 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-    <div class="yo-form-group">
-      <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">
-        <a-input placeholder="请输入唯一编码" v-model="form.code" />
-      </a-form-model-item>
-      <a-form-model-item label="排序" prop="sort">
-        <a-input-number
-          :max="1000"
-          :min="0"
-          class="w-100-p"
-          placeholder="请输入排序"
-          v-model="form.sort"
-        />
-      </a-form-model-item>
-        <a-form-model-item
-          label="备注"
-          prop="remark"
-        >
-          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
+    <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>
-    </div>
+        <a-form-model-item label="唯一编码" prop="code">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number
+            :max="1000"
+            :min="0"
+            class="w-100-p"
+            placeholder="请输入排序"
+            v-model="form.sort"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></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) {
-      this.form = this.$_.cloneDeep(record);
+    onFillData(params) {
+      /** 将默认数据覆盖到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>
\ No newline at end of file
diff --git a/Web/src/pages/system/pos/index.vue b/Web/src/pages/system/pos/index.vue
index 6453768..df21a4d 100644
--- a/Web/src/pages/system/pos/index.vue
+++ b/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">
-        <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="() => {(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">
+      <yo-table
+        :columns="columns"
+        :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>
+        </Auth>
         <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 editForm from './editForm';
+import FormBody from './form';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'sysPosPage',
+  add: 'sysPosAdd',
+  edit: 'sysPosEdit',
+  delete: 'sysPosDelete',
+  /* ... */
+};
+
 export default {
   components: {
-    AddForm,
-    editForm,
+    FormBody,
   },
   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: {
-          customRender: 'action',
-        },
+        scopedSlots: { customRender: 'action' },
       });
     }
   },
@@ -97,14 +138,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .sysPosPage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          return res.data;
-        });
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -115,6 +154,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -124,26 +173,60 @@ 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.onResult(success, '删除成功');
-      });
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
     },
   },
 };
diff --git a/Web/src/pages/system/role/addForm.vue b/Web/src/pages/system/role/addForm.vue
deleted file mode 100644
index 712b517..0000000
--- a/Web/src/pages/system/role/addForm.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/Web/src/pages/system/role/dataForm.vue b/Web/src/pages/system/role/dataForm.vue
index e24cca7..984928e 100644
--- a/Web/src/pages/system/role/dataForm.vue
+++ b/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;
     },
diff --git a/Web/src/pages/system/role/editForm.vue b/Web/src/pages/system/role/editForm.vue
deleted file mode 100644
index 1998175..0000000
--- a/Web/src/pages/system/role/editForm.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/Web/src/pages/system/role/form.vue b/Web/src/pages/system/role/form.vue
index a1de03e..2d2606c 100644
--- a/Web/src/pages/system/role/form.vue
+++ b/Web/src/pages/system/role/form.vue
@@ -1,50 +1,98 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-    <div class="yo-form-group">
-      <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">
-        <a-input placeholder="请输入唯一编码" v-model="form.code" />
-      </a-form-model-item>
-      <a-form-model-item label="排序" prop="sort">
-        <a-input-number
-          :max="1000"
-          :min="0"
-          class="w-100-p"
-          placeholder="请输入排序"
-          v-model="form.sort"
-        />
-      </a-form-model-item>
-        <a-form-model-item
-          label="备注"
-          prop="remark"
-        >
-          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
+    <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>
-    </div>
+        <a-form-model-item label="唯一编码" prop="code">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number
+            :max="1000"
+            :min="0"
+            class="w-100-p"
+            placeholder="请输入排序"
+            v-model="form.sort"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea :rows="4" placeholder="请输入备注" v-model="form.remark"></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) {
-      this.form = this.$_.cloneDeep(record);
+    onFillData(params) {
+      /** 将默认数据覆盖到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>
\ No newline at end of file
diff --git a/Web/src/pages/system/role/index.vue b/Web/src/pages/system/role/index.vue
index 2057f1a..49e66c4 100644
--- a/Web/src/pages/system/role/index.vue
+++ b/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">
-        <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="() => {(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>
+      <yo-table
+        :columns="columns"
+        :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>
         </Auth>
-
+        <Auth auth="sysRole: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="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 EditForm from './editForm';
+import FormBody from './form';
 import MenuForm from './menuForm';
 import DataForm from './dataForm';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'getRolePage',
+  add: 'sysRoleAdd',
+  edit: 'sysRoleEdit',
+  delete: 'sysRoleDelete',
+  /* ... */
+};
+
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
     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,14 +160,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .getRolePage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          return res.data;
-        });
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -139,6 +176,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -148,26 +195,72 @@ 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.onResult(success, '删除成功');
-      });
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
     },
   },
 };
diff --git a/Web/src/pages/system/role/menuForm.vue b/Web/src/pages/system/role/menuForm.vue
index 4a4523c..f45de34 100644
--- a/Web/src/pages/system/role/menuForm.vue
+++ b/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'];