update 新增字典管理

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, '删除成功');
+        });
     },
   },
 };