字典管理修改

src/views/system/dict/dictDetail.vue

@@ -3,7 +3,11 @@
     <div>
       <!--工具栏-->
       <div class="head-container">
-        <crudOperation :permission="permission" />
+        <crudOperation :permission="permission">
+          <template v-slot:left>
+            <el-button v-permission="permission.add" class="filter-item" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="crud.toAdd">新增</el-button>
+          </template>
+        </crudOperation>
       </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">
@@ -14,7 +18,7 @@
           <el-form-item label="字典代码" prop="value">
             <el-input v-model="form.value" style="width: 370px;" />
           </el-form-item>
-          <el-form-item label="内容说明" prop="description">
+          <el-form-item label="内容说明">
             <el-input v-model="form.description" style="width: 370px;" type="textarea" :rows="2" />
           </el-form-item>
         </el-form>
@@ -42,7 +46,7 @@ import CRUD, { presenter, header, form } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 
-const defaultForm = { id: null, label: null, value: null, dictSort: 999 }
+const defaultForm = { id: null, label: null, value: null, description: null, dictSort: 999 }
 
 export default {
   components: { crudOperation, pagination },
@@ -52,7 +56,7 @@ export default {
         title: '字典内容', url: 'api/dictDetail', query: { dictName: '' }, sort: ['dictSort,asc', 'id,desc'],
         crudMethod: { ...crudDictDetail },
         optShow: {
-          add: true,
+          add: false,
           edit: true,
           del: true,
           reset: false,
@@ -69,15 +73,20 @@ export default {
     form(function() {
       return Object.assign({ dict: { id: this.dictId }}, defaultForm)
     })],
+  props: {
+    activeAddBtn: {
+      type: Boolean
+    }
+  },
   data() {
     return {
       dictId: null,
       rules: {
         label: [
-          { required: true, message: '请输入字典标签', trigger: 'blur' }
+          { required: true, message: '请输入字典名称', trigger: 'blur' }
         ],
         value: [
-          { required: true, message: '请输入字典值', trigger: 'blur' }
+          { required: true, message: '请输入字典代码', trigger: 'blur' }
         ]
       },
       permission: {
@@ -86,6 +95,30 @@ export default {
         del: ['admin', 'dict:del']
       }
     }
+  },
+  methods: {
+    // 获取数据前设置好接口地址
+    [CRUD.HOOK.afterDelete]() {
+      console.log(this.$parent)
+      if (this.$parent) {
+        this.$emit('treeRefresh')
+      }
+      return true
+    },
+    [CRUD.HOOK.afterToEdit]() {
+      console.log(this.$parent)
+      if (this.$parent) {
+        this.$emit('treeRefresh')
+      }
+      return true
+    },
+    [CRUD.HOOK.afterToAdd]() {
+      console.log(this.$parent)
+      if (this.$parent) {
+        this.$emit('treeRefresh')
+      }
+      return true
+    }
   }
 }
 </script>

src/views/system/dict/index.vue

@@ -6,10 +6,10 @@
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
         </el-form-item>
-        <el-form-item label="字典代码">
+        <el-form-item label="字典代码" prop="code">
           <el-input v-model="form.code" style="width: 370px;" />
         </el-form-item>
-        <el-form-item label="描述">
+        <el-form-item label="内容说明">
           <el-input v-model="form.description" style="width: 370px;" type="textarea" :rows="2" />
         </el-form-item>
       </el-form>
@@ -24,13 +24,13 @@
         <el-card class="box-card">
           <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-tree ref="tree" v-loading="crud.loading" :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="18" :lg="18" :xl="19">
         <el-card class="box-card">
-          <dictDetail ref="dictDetail" :permission="permission" style="height:calc(100vh - 203px);" />
+          <dictDetail ref="dictDetail" :permission="permission" style="height:calc(100vh - 203px);" :active-add-btn="activeAddBtn" @treeRefresh="treeRefresh" />
         </el-card>
       </el-col>
     </el-row>
@@ -43,7 +43,7 @@ import crudDict from '@/api/system/dict'
 import CRUD, { presenter, header, form } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 
-const defaultForm = { id: null, name: null, description: null, dictDetails: [] }
+const defaultForm = { id: null, name: null, code: null, description: null, dictDetails: [] }
 
 export default {
   name: 'Dict',
@@ -73,6 +73,9 @@ export default {
       rules: {
         name: [
           { required: true, message: '请输入字典名称', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入字典代码', trigger: 'blur' }
         ]
       },
       permission: {
@@ -83,7 +86,8 @@ export default {
       defaultProps: {
         children: 'dictDetails',
         label: (data, node) => { return data.description ? data.description : data.label }
-      }
+      },
+      activeAddBtn: false
     }
   },
   methods: {
@@ -112,12 +116,16 @@ export default {
         } else {
           this.crud.selectionChangeHandler([])
         }
+        this.activeAddBtn = true
       }
     },
     // 编辑前将字典明细临时清空，避免日志入库数据过长
     [CRUD.HOOK.beforeToEdit](crud, form) {
       // 将角色的菜单清空，避免日志入库数据过长
       form.dictDetails = null
+    },
+    treeRefresh() {
+      this.crud.refresh()
     }
   }
 }