update 字典结构更改. 扩展值可编辑为json

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

@@ -1,76 +1,134 @@
 <template>
-  <container>
-    <br />
-    <a-card :bordered="false">
-      <yo-table
-        :columns="columns"
-        :load-data="loadData"
-        @query="onQuery"
-        @resetQuery="onResetQuery"
-        ref="table"
-      >
-        <Auth auth="sysDictType: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="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>
-            <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 />
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
+    <container>
+      <a-card :bordered="false">
+        <yo-table
+          :columns="columns"
+          :load-data="loadData"
+          @query="onQuery"
+          @resetQuery="onResetQuery"
+          ref="table"
+        >
+          <Auth auth="authCode: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 label="类型">
+              <a-radio-group v-model="query.type">
+                <a-radio-button :value="1">目录</a-radio-button>
+                <a-radio-button :value="2">字典类型</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </Auth>
+          <Auth auth="authCode:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增目录/字典类型</a-button>
+          </Auth>
+          <!-- 格式化字段内容 -->
+          <!-- ... -->
+          <span slot="code" slot-scope="text">
+            <span>{{ text ? '字典类型' : '目录' }}</span>
+          </span>
+          <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+          <!-- 添加操作控件 -->
+          <span slot="action" slot-scope="text, record">
+            <yo-table-actions>
+              <Auth auth="authCode:edit">
+                <a @click="onOpen('edit-form', record)">编辑</a>
+              </Auth>
+              <Auth auth="authCode:delete">
+                <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                  <a>删除</a>
+                </a-popconfirm>
+              </Auth>
+              <!-- 可在此处添加其他操作控件 -->
+              <!-- ... -->
+            </yo-table-actions>
+          </span>
 
-    <yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
+          <div slot="expandedRowRender" slot-scope="record">
+            <dict-data :codes="codes" :type="record" v-if="record.code" />
+            <span class="text-normal" v-else>不可在目录中添加字典数据</span>
+          </div>
+        </yo-table>
+      </a-card>
+    </container>
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
       <form-body />
     </yo-modal-form>
 
-    <yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
-  </container>
+  </yo-tree-layout>
 </template>
 <script>
+/* 需要引用YoTreeLayout组件 */
+import YoTreeLayout from '@/components/yoTreeLayout';
+import FormBody from './form';
+
 import DictData from './dictdata';
 
-import FormBody from './form';
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  tree: 'sysDictTypeTree',
+  page: 'sysDictTypePage',
+  add: 'sysDictTypeAdd',
+  edit: 'sysDictTypeEdit',
+  delete: 'sysDictTypeDelete',
+  /* ... */
+};
 
 export default {
   components: {
-    DictData,
+    YoTreeLayout,
     FormBody,
+    DictData,
   },
+
   data() {
     return {
-      query: {},
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
+      query: {
+        type: 2,
+      },
+
+      /* 表格字段 */
       columns: [
         {
-          title: '类型名称',
+          title: '字典名称',
           dataIndex: 'name',
           sorter: true,
         },
+        {
+          title: '类型',
+          key: 'type',
+          dataIndex: 'code',
+          sorter: true,
+          scopedSlots: { customRender: 'code' },
+        },
         {
           title: '唯一编码',
           dataIndex: 'code',
@@ -94,16 +152,19 @@ export default {
           sorter: true,
         },
       ],
+
+      /* 字典编码储存格式 */
       codes: {
         commonStatus: [],
       },
     };
   },
+
   created() {
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -113,32 +174,42 @@ export default {
       });
     }
   },
+
   methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api[api.tree]().then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
+    onSelect([id]) {
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      this.query = {
+        pid: id,
+        type: this.query.type,
+      };
+      this.onQuery();
+    },
+
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      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;
-          })
-      );
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -150,12 +221,19 @@ export default {
     },
 
     /**
-     * 有查询功能时的必要方法
-     * 重置查询条件
+     * 必要方法
+     * 重新列表数据
      */
     onResetQuery() {
-      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
-      this.query = {};
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+        if (p === 'type') {
+          this.query.type = 2;
+        }
+      });
       this.onQuery();
     },
 
@@ -165,6 +243,7 @@ export default {
      */
     onReloadData() {
       this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
     },
 
     /**
@@ -173,9 +252,15 @@ export default {
      * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
-      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
-        this.codes.commonStatus = commonStatus.data;
-      });
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
+          /* ... */
+        ])
+        .then(([common_status]) => {
+          this.codes.commonStatus = common_status.data;
+          /* ... */
+        });
     },
 
     /**
@@ -191,12 +276,15 @@ export default {
     },
 
     /**
-     * 必要方法
+     * 有编辑新增功能的必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
       this.$refs[formName].onOpen({
         record,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
       });
     },
 
@@ -217,9 +305,7 @@ export default {
      */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api
-        /** !!此处必须修改调用的接口方法 */
-        .sysDictTypeDelete(record)
+      this.$api[api.delete](record)
         .then(({ success }) => {
           this.onResult(success, '删除成功');
         })