From 602c05d09dc1c8ddda41cf4ee911d287f1f7d35b 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, 26 Apr 2021 17:31:37 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=96=B0=E5=A2=9E=E5=AD=97=E5=85=B8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/assets/style/lib/table.less           |   4 -
 Web/src/components/yoTable/index.js           |   3 +-
 Web/src/pages/system/dict/addForm.vue         |  78 +++++
 .../pages/system/dict/dictdata/addForm.vue    |  79 +++++
 .../pages/system/dict/dictdata/editForm.vue   |  79 +++++
 Web/src/pages/system/dict/dictdata/form.vue   | 122 +++++++
 Web/src/pages/system/dict/dictdata/index.vue  | 301 ++++++++----------
 Web/src/pages/system/dict/editForm.vue        |  79 +++++
 Web/src/pages/system/dict/form.vue            | 117 +++++++
 Web/src/pages/system/dict/index.vue           | 238 +++++++-------
 10 files changed, 811 insertions(+), 289 deletions(-)
 create mode 100644 Web/src/pages/system/dict/addForm.vue
 create mode 100644 Web/src/pages/system/dict/dictdata/addForm.vue
 create mode 100644 Web/src/pages/system/dict/dictdata/editForm.vue
 create mode 100644 Web/src/pages/system/dict/dictdata/form.vue
 create mode 100644 Web/src/pages/system/dict/editForm.vue
 create mode 100644 Web/src/pages/system/dict/form.vue

diff --git a/Web/src/assets/style/lib/table.less b/Web/src/assets/style/lib/table.less
index 7a68a1a..6dae04c 100644
--- a/Web/src/assets/style/lib/table.less
+++ b/Web/src/assets/style/lib/table.less
@@ -25,10 +25,6 @@
 
 .ant-table {
   background-color: @white;
-
-  .yo-action-bar {
-    margin-bottom: 0;
-  }
 }
 
 .ant-table-small {
diff --git a/Web/src/components/yoTable/index.js b/Web/src/components/yoTable/index.js
index d927f32..4f05893 100644
--- a/Web/src/components/yoTable/index.js
+++ b/Web/src/components/yoTable/index.js
@@ -162,7 +162,8 @@ export default {
     }
 
     const on = {
-      change: this.onTableChange
+      change: this.onTableChange,
+      ...this.$listeners
     }
     return (
       <section>
diff --git a/Web/src/pages/system/dict/addForm.vue b/Web/src/pages/system/dict/addForm.vue
new file mode 100644
index 0000000..00d6573
--- /dev/null
+++ b/Web/src/pages/system/dict/addForm.vue
@@ -0,0 +1,78 @@
+<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,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.formBody.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictTypeAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/addForm.vue b/Web/src/pages/system/dict/dictdata/addForm.vue
new file mode 100644
index 0000000..bc1067f
--- /dev/null
+++ b/Web/src/pages/system/dict/dictdata/addForm.vue
@@ -0,0 +1,79 @@
+<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,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen(record, typeId) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.formBody.onInit();
+        this.formBody.onFillData(record, typeId);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictDataAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/editForm.vue b/Web/src/pages/system/dict/dictdata/editForm.vue
new file mode 100644
index 0000000..4d40475
--- /dev/null
+++ b/Web/src/pages/system/dict/dictdata/editForm.vue
@@ -0,0 +1,79 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="编辑XX"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictDataEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/form.vue b/Web/src/pages/system/dict/dictdata/form.vue
new file mode 100644
index 0000000..4168210
--- /dev/null
+++ b/Web/src/pages/system/dict/dictdata/form.vue
@@ -0,0 +1,122 @@
+<template>
+  <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="value">
+          <a-input placeholder="请输入字典值" v-model="form.value" />
+        </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 class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {
+        typeId: '',
+        sort: 100,
+      },
+      /** 验证格式 */
+      rules: {
+        value: [{ required: true, message: '请输入字典值' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record, typeId) {
+      if (typeId) {
+        this.form.typeId = typeId;
+      } else {
+        /** 将默认数据覆盖到form */
+        this.form = this.$_.cloneDeep({
+          ...record,
+          /** 在此处添加默认数据转换 */
+          /** ... */
+        });
+      }
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/index.vue b/Web/src/pages/system/dict/dictdata/index.vue
index 833140a..8bee1b5 100644
--- a/Web/src/pages/system/dict/dictdata/index.vue
+++ b/Web/src/pages/system/dict/dictdata/index.vue
@@ -1,165 +1,131 @@
 <template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    width="800px"
-    class="yo-modal-form"
-    title="字典值管理"
-  >
-    <a-card :bordered="false">
-      <Auth auth="sysDictType: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>
+  <a-card>
+    <Auth auth="sysDictData:page">
+      <div class="yo-query-bar">
+        <a-form-model :model="query" layout="inline">
+          <!-- 此处添加查询表单控件 -->
+          <a-form-model-item label="字典值">
+            <a-input placeholder="请输入字典值" v-model="query.value" />
+          </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">
+      <Auth auth="sysDictData:add" slot="operator">
+        <a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
       </Auth>
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <div class="yo-action-bar" slot="title">
-          <div class="yo-action-bar--actions">
-            <a-button @click="onOpen('add-form')">新增类型</a-button>
-          </div>
-        </div>
-         <span slot="status" slot-scope="text, record">
-             {{statusFilter(text)}}
-             </span>
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-              <a @click="onLoad('data-Index', record)">字典</a>
-            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
-              <a-dropdown>
-                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
-                <a-menu slot="overlay">
-                  <Auth auth="sysDictType:edit">
-                    <a-menu-item>
-                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
-                        >编辑</a
-                      >
-                    </a-menu-item>
-                  </Auth>
-                  <Auth auth="sysDictType:delete">
-                    </a-menu-item>
-                    <a-menu-item>
-                    <a-popconfirm
-                      @confirm="onDelete(record)"
-                      placement="topRight"
-                      title="是否确认删除"
-                    >
-                      <a>删除</a>
-                    </a-popconfirm>
-                     </a-menu-item>
-                  </Auth>
-                </a-menu>
-              </a-dropdown>
-            </Auth>
-          </yo-table-actions>
-        </span>
-      </yo-table>
-    </a-card>
-    <br />
-     <!-- <data-Index ref="data-Index" @ok="onReloadData"/> -->
-     <!-- <add-form @ok="onReloadData" ref="add-form" />
-     <edit-form @ok="onReloadData" ref="edit-form" />
-      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
-      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
-  </container>
-  </a-modal>
+      <!-- 格式化字段内容 -->
+      <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+      <!-- 添加操作控件 -->
+      <span slot="action" slot-scope="text, record">
+        <yo-table-actions>
+          <Auth auth="sysDictData:edit">
+            <a @click="onOpen('edit-form', record)">编辑</a>
+          </Auth>
+          <Auth auth="sysDictData:delete">
+            <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+              <a>删除</a>
+            </a-popconfirm>
+          </Auth>
+          <!-- 可在此处添加其他操作控件 -->
+        </yo-table-actions>
+      </span>
+    </yo-table>
+
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </a-card>
 </template>
 <script>
-// import AddForm from './addForm';
-// import editForm from "./editForm";
-// import roleMenuForm from "./roleMenuForm";
-// import dataIndex from "./dictdata/index";
+import AddForm from './addForm';
+import EditForm from './editForm';
+
 export default {
-     components: {
-      //  dataIndex
-  //     AddForm,
-  //     editForm,
-  //     roleMenuForm,
-  //     roleOrgForm,
-     },
+  components: {
+    AddForm,
+    EditForm,
+  },
+  props: {
+    type: {
+      type: Object,
+    },
+
+    codes: {
+      type: Object,
+    },
+  },
   data() {
     return {
-      query: {},
+      query: {
+        typeId: this.type.id,
+      },
       columns: [
         {
-          title: "类型名称",
-          dataIndex: "name",
+          title: '字典值',
+          dataIndex: 'value',
         },
         {
-          title: "唯一编码",
-          dataIndex: "code",
+          title: '唯一编码',
+          dataIndex: 'code',
         },
         {
-          title: "排序",
-          dataIndex: "sort",
+          title: '排序',
+          dataIndex: 'sort',
         },
         {
-          title: "备注",
-          dataIndex: "remark",
+          title: '备注',
+          dataIndex: 'remark',
           width: 200,
         },
         {
-          title: "状态",
-          dataIndex: "status",
-          scopedSlots: { customRender: "status" },
-        },
-        {
-          title: "操作",
-          width: "150px",
-          dataIndex: "action",
-          scopedSlots: { customRender: "action" },
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
         },
       ],
-      visible:false,
-
-      statusDict: [],
     };
   },
   created() {
     this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
   },
   methods: {
-    statusFilter(status) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.statusDict.filter((item) => item.code == status);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .sysDictDataPage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          this.visible = true;
-          console.log(params)
-          return res.data;
-        });
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictDataPage({
+            ...params,
+            ...this.query,
+          })
+          .then((res) => {
+            return res.data;
+          })
+      );
     },
 
     /**
@@ -170,6 +136,20 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'typeId') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -179,20 +159,18 @@ export default {
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
-    onLoadCodes() {
-      this.$api
-        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
-        .then((res) => {
-          this.statusDict = res[0].data;
-        });
-    },
+    onLoadCodes() {},
 
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -200,40 +178,37 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen(record, this.type.id);
     },
 
-    onLoad(formName,record){
-      this.$refs[formName].loadData(record);
-    },
-    onResult(success, message, successMessage) {
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
       }
+      this.$refs.table.onLoaded();
     },
 
-    onSetDefault(record) {
-      this.$refs.table.onLoading();
-      this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
-    },
-
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
-      });
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysDictDataDelete(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        });
     },
   },
 };
diff --git a/Web/src/pages/system/dict/editForm.vue b/Web/src/pages/system/dict/editForm.vue
new file mode 100644
index 0000000..2c6143b
--- /dev/null
+++ b/Web/src/pages/system/dict/editForm.vue
@@ -0,0 +1,79 @@
+<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,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictTypeEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/form.vue b/Web/src/pages/system/dict/form.vue
new file mode 100644
index 0000000..6528541
--- /dev/null
+++ b/Web/src/pages/system/dict/form.vue
@@ -0,0 +1,117 @@
+<template>
+  <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>
+        <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 class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {
+        sort: 100,
+      },
+      /** 验证格式 */
+      rules: {
+        name: [{ required: true, message: '请输入类型名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/index.vue b/Web/src/pages/system/dict/index.vue
index 5ea443a..4b66429 100644
--- a/Web/src/pages/system/dict/index.vue
+++ b/Web/src/pages/system/dict/index.vue
@@ -5,6 +5,7 @@
       <Auth auth="sysDictType: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>
@@ -14,143 +15,127 @@
             <a-form-model-item>
               <a-button-group>
                 <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</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">
-        <div class="yo-action-bar" slot="title">
-          <div class="yo-action-bar--actions">
-            <a-button @click="onOpen('add-form')">新增类型</a-button>
-          </div>
-        </div>
-         <span slot="status" slot-scope="text, record">
-             {{statusFilter(text)}}
-             </span>
+        <Auth auth="sysDictType:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
+        </Auth>
+        <!-- 格式化字段内容 -->
+        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+        <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
-              <a @click="onLoad('data-Index', record)">字典</a>
-            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
-              <a-dropdown>
-                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
-                <a-menu slot="overlay">
-                  <Auth auth="sysDictType:edit">
-                    <a-menu-item>
-                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
-                        >编辑</a
-                      >
-                    </a-menu-item>
-                  </Auth>
-                  <Auth auth="sysDictType:delete">
-                    </a-menu-item>
-                    <a-menu-item>
-                    <a-popconfirm
-                      @confirm="onDelete(record)"
-                      placement="topRight"
-                      title="是否确认删除"
-                    >
-                      <a>删除</a>
-                    </a-popconfirm>
-                     </a-menu-item>
-                  </Auth>
-                </a-menu>
-              </a-dropdown>
+            <Auth auth="sysDictType:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
             </Auth>
+            <Auth auth="sysDictType:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <!-- 可在此处添加其他操作控件 -->
           </yo-table-actions>
         </span>
+        <div slot="expandedRowRender" slot-scope="record">
+          <dict-data :codes="codes" :type="record" />
+        </div>
       </yo-table>
     </a-card>
     <br />
-     <data-Index ref="data-Index" @ok="onReloadData"/>
-     <!-- <add-form @ok="onReloadData" ref="add-form" />
-     <edit-form @ok="onReloadData" ref="edit-form" />
-      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
-      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
   </container>
 </template>
 <script>
-// import AddForm from './addForm';
-// import editForm from "./editForm";
-// import roleMenuForm from "./roleMenuForm";
-import dataIndex from "./dictdata/index";
+import DictData from './dictdata';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
 export default {
-     components: {
-       dataIndex
-  //     AddForm,
-  //     editForm,
-  //     roleMenuForm,
-  //     roleOrgForm,
-     },
+  components: {
+    DictData,
+    AddForm,
+    EditForm,
+  },
   data() {
     return {
       query: {},
       columns: [
         {
-          title: "类型名称",
-          dataIndex: "name",
+          title: '类型名称',
+          dataIndex: 'name',
         },
         {
-          title: "唯一编码",
-          dataIndex: "code",
+          title: '唯一编码',
+          dataIndex: 'code',
         },
         {
-          title: "排序",
-          dataIndex: "sort",
+          title: '排序',
+          dataIndex: 'sort',
         },
         {
-          title: "备注",
-          dataIndex: "remark",
+          title: '备注',
+          dataIndex: 'remark',
           width: 200,
         },
         {
-          title: "状态",
-          dataIndex: "status",
-          scopedSlots: { customRender: "status" },
-        },
-        {
-          title: "操作",
-          width: "150px",
-          dataIndex: "action",
-          scopedSlots: { customRender: "action" },
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
         },
       ],
-      statusDict: [],
+      codes: {
+        commonStatus: [],
+      },
     };
   },
   created() {
     this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
   },
   methods: {
-    statusFilter(status) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.statusDict.filter((item) => item.code == status);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .sysDictTypePage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          console.log(params)
-          return res.data;
-        });
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictTypePage({
+            ...params,
+            ...this.query,
+          })
+          .then((res) => {
+            const data = res.data;
+            data.rows = data.rows.map(
+              (p) =>
+                (p = {
+                  ...p,
+                  data: [],
+                  query: {},
+                })
+            );
+            return data;
+          })
+      );
     },
 
     /**
@@ -161,6 +146,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -170,20 +165,22 @@ export default {
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
-      this.$api
-        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
-        .then((res) => {
-          this.statusDict = res[0].data;
-        });
+      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'common_status' })]).then(([commonStatus]) => {
+        this.codes.commonStatus = commonStatus.data;
+      });
     },
 
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -191,40 +188,39 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
       this.$refs[formName].onOpen(record);
     },
 
-    onLoad(formName,record){
-      this.$refs[formName].loadData(record);
-    },
-    onResult(success, message, successMessage) {
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
       }
     },
 
-    onSetDefault(record) {
-      this.$refs.table.onLoading();
-      this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
-    },
-
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
-      });
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysDictTypeDelete(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
     },
   },
 };