From c4ebbb2f536f1cd5e6dc622120394860161ad450 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Tue, 17 May 2022 09:31:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E5=85=B8=E7=AE=A1=E7=90=86=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Crud/CRUD.operation.vue |  2 +-
 src/components/Crud/crud.js            |  3 +-
 src/views/system/dict/dictDetail.vue   | 58 ++++++----------
 src/views/system/dict/index.vue        | 92 +++++++++++++-------------
 4 files changed, 68 insertions(+), 87 deletions(-)

diff --git a/src/components/Crud/CRUD.operation.vue b/src/components/Crud/CRUD.operation.vue
index 33d2077..873991b 100644
--- a/src/components/Crud/CRUD.operation.vue
+++ b/src/components/Crud/CRUD.operation.vue
@@ -53,7 +53,7 @@
       <!--右侧-->
       <slot name="right" />
     </span>
-    <el-button-group class="crud-opts-right">
+    <el-button-group v-if="crud.optShow.group" class="crud-opts-right">
       <el-button
         size="mini"
         plain
diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js
index ae36765..428bb90 100644
--- a/src/components/Crud/crud.js
+++ b/src/components/Crud/crud.js
@@ -48,7 +48,8 @@ function CRUD(options) {
       edit: true,
       del: true,
       download: true,
-      reset: true
+      reset: true,
+      group: true
     },
     // 自定义一些扩展属性
     props: {},
diff --git a/src/views/system/dict/dictDetail.vue b/src/views/system/dict/dictDetail.vue
index 32756da..964b7f4 100644
--- a/src/views/system/dict/dictDetail.vue
+++ b/src/views/system/dict/dictDetail.vue
@@ -1,28 +1,21 @@
 <template>
   <div>
-    <div v-if="query.dictName === ''">
-      <div class="my-code">点击字典查看详情</div>
-    </div>
-    <div v-else>
+    <div>
       <!--工具栏-->
       <div class="head-container">
-        <div v-if="crud.props.searchToggle">
-          <!-- 搜索 -->
-          <el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
-          <rrOperation />
-        </div>
+        <crudOperation :permission="permission" />
       </div>
       <!--表单组件-->
       <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
         <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-          <el-form-item label="字典标签" prop="label">
+          <el-form-item label="字典名称" prop="label">
             <el-input v-model="form.label" style="width: 370px;" />
           </el-form-item>
-          <el-form-item label="字典值" prop="value">
+          <el-form-item label="字典代码" prop="value">
             <el-input v-model="form.value" style="width: 370px;" />
           </el-form-item>
-          <el-form-item label="排序" prop="dictSort">
-            <el-input-number v-model.number="form.dictSort" :min="0" :max="999" controls-position="right" style="width: 370px;" />
+          <el-form-item label="内容说明" prop="description">
+            <el-input v-model="form.description" style="width: 370px;" type="textarea" :rows="2" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -32,20 +25,10 @@
       </el-dialog>
       <!--表格渲染-->
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-        <el-table-column label="所属字典">
-          {{ query.dictName }}
-        </el-table-column>
-        <el-table-column prop="label" label="字典标签" />
-        <el-table-column prop="value" label="字典值" />
-        <el-table-column prop="dictSort" label="排序" />
-        <el-table-column v-if="checkPer(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
-          <template slot-scope="scope">
-            <udOperation
-              :data="scope.row"
-              :permission="permission"
-            />
-          </template>
-        </el-table-column>
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="label" label="字典名称" />
+        <el-table-column prop="value" label="字典代码" />
+        <el-table-column prop="description" label="内容说明" />
       </el-table>
       <!--分页组件-->
       <pagination />
@@ -56,23 +39,25 @@
 <script>
 import crudDictDetail from '@/api/system/dictDetail'
 import CRUD, { presenter, header, form } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
-import rrOperation from '@crud/RR.operation'
-import udOperation from '@crud/UD.operation'
 
 const defaultForm = { id: null, label: null, value: null, dictSort: 999 }
 
 export default {
-  components: { pagination, rrOperation, udOperation },
+  components: { crudOperation, pagination },
   cruds() {
     return [
-      CRUD({ title: '字典详情', url: 'api/dictDetail', query: { dictName: '' }, sort: ['dictSort,asc', 'id,desc'],
+      CRUD({
+        title: '字典内容', url: 'api/dictDetail', query: { dictName: '' }, sort: ['dictSort,asc', 'id,desc'],
         crudMethod: { ...crudDictDetail },
         optShow: {
           add: true,
           edit: true,
           del: true,
-          reset: false
+          reset: false,
+          download: false,
+          group: false
         },
         queryOnPresenterCreated: false
       })
@@ -93,9 +78,6 @@ export default {
         ],
         value: [
           { required: true, message: '请输入字典值', trigger: 'blur' }
-        ],
-        dictSort: [
-          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
         ]
       },
       permission: {
@@ -109,7 +91,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep .el-input-number .el-input__inner {
-    text-align: left;
-  }
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
 </style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index f102023..cacb8d9 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -6,8 +6,11 @@
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
         </el-form-item>
+        <el-form-item label="字典代码">
+          <el-input v-model="form.code" style="width: 370px;" />
+        </el-form-item>
         <el-form-item label="描述">
-          <el-input v-model="form.description" style="width: 370px;" />
+          <el-input v-model="form.description" style="width: 370px;" type="textarea" :rows="2" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -17,51 +20,17 @@
     </el-dialog>
     <!-- 字典列表 -->
     <el-row :gutter="10">
-      <el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
+      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="5" style="margin-bottom: 10px">
         <el-card class="box-card">
-          <!--工具栏-->
-          <div class="head-container">
-            <div v-if="crud.props.searchToggle">
-              <!-- 搜索 -->
-              <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-              <rrOperation />
-            </div>
-            <crudOperation :permission="permission" />
-          </div>
-          <!--表格渲染-->
-          <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
-            <el-table-column type="selection" width="55" />
-            <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
-            <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
-            <el-table-column v-if="checkPer(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
-              <template slot-scope="scope">
-                <udOperation
-                  :data="scope.row"
-                  :permission="permission"
-                />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
+          <crudOperation :permission="permission" />
+          <!--字典树状结构-->
+          <el-tree ref="tree" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" style="height:calc(100vh - 240px);" highlight-current @node-click="handleNodeClick" />
         </el-card>
       </el-col>
       <!-- 字典详情列表 -->
-      <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
+      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="19">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>字典详情</span>
-            <el-button
-              v-if="checkPer(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.query.dictName"
-              class="filter-item"
-              size="mini"
-              style="float: right;padding: 4px 10px"
-              type="primary"
-              icon="el-icon-plus"
-              @click="$refs.dictDetail && $refs.dictDetail.crud.toAdd()"
-            >新增</el-button>
-          </div>
-          <dictDetail ref="dictDetail" :permission="permission" />
+          <dictDetail ref="dictDetail" :permission="permission" style="height:calc(100vh - 203px);" />
         </el-card>
       </el-col>
     </el-row>
@@ -73,18 +42,25 @@ import dictDetail from './dictDetail'
 import crudDict from '@/api/system/dict'
 import CRUD, { presenter, header, form } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
-import pagination from '@crud/Pagination'
-import rrOperation from '@crud/RR.operation'
-import udOperation from '@crud/UD.operation'
 
 const defaultForm = { id: null, name: null, description: null, dictDetails: [] }
 
 export default {
   name: 'Dict',
-  components: { crudOperation, pagination, rrOperation, udOperation, dictDetail },
+  components: { crudOperation, dictDetail },
   cruds() {
     return [
-      CRUD({ title: '字典', url: 'api/dict', crudMethod: { ...crudDict }})
+      CRUD({
+        title: '字典', url: 'api/dict',
+        crudMethod: { ...crudDict },
+        optShow: {
+          add: true,
+          edit: true,
+          del: true,
+          download: false,
+          group: false
+        }
+      })
     ]
   },
   mixins: [presenter(), header(), form(defaultForm)],
@@ -96,13 +72,17 @@ export default {
       ],
       rules: {
         name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
+          { required: true, message: '请输入字典名称', trigger: 'blur' }
         ]
       },
       permission: {
         add: ['admin', 'dict:add'],
         edit: ['admin', 'dict:edit'],
         del: ['admin', 'dict:del']
+      },
+      defaultProps: {
+        children: 'dictDetails',
+        label: (data, node) => { return data.description ? data.description : data.label }
       }
     }
   },
@@ -122,6 +102,18 @@ export default {
         this.$refs.dictDetail.crud.toQuery()
       }
     },
+    handleNodeClick(val) {
+      if (val) {
+        if (val.name) {
+          this.$refs.dictDetail.query.dictName = val.name
+          this.$refs.dictDetail.dictId = val.id
+          this.$refs.dictDetail.crud.toQuery()
+          this.crud.selectionChangeHandler([val])
+        } else {
+          this.crud.selectionChangeHandler([])
+        }
+      }
+    },
     // 编辑前将字典明细临时清空，避免日志入库数据过长
     [CRUD.HOOK.beforeToEdit](crud, form) {
       // 将角色的菜单清空，避免日志入库数据过长
@@ -132,4 +124,10 @@ export default {
 </script>
 
 <style scoped>
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: rgb(158, 213, 250) !important;
+}
+.el-card__body .crud-opts {
+  justify-content: space-around;
+}
 </style>