:sparkles: 添加新特性。字典 、 字典项目分离

src/api/admin/dict.js

@@ -17,7 +17,7 @@
 
 import request from '@/router/axios'
 
-export function fetchList (query) {
+export function fetchList(query) {
   return request({
     url: '/admin/dict/page',
     method: 'get',
@@ -25,7 +25,45 @@ export function fetchList (query) {
   })
 }
 
-export function addObj (obj) {
+export function fetchItemList(query) {
+  return request({
+    url: '/admin/dict/item/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addItemObj(obj) {
+  return request({
+    url: '/admin/dict/item',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getItemObj(id) {
+  return request({
+    url: '/admin/dict/item/' + id,
+    method: 'get'
+  })
+}
+
+export function delItemObj(id) {
+  return request({
+    url: '/admin/dict/item/' + id,
+    method: 'delete'
+  })
+}
+
+export function putItemObj(obj) {
+  return request({
+    url: '/admin/dict/item',
+    method: 'put',
+    data: obj
+  })
+}
+
+export function addObj(obj) {
   return request({
     url: '/admin/dict/',
     method: 'post',
@@ -33,21 +71,21 @@ export function addObj (obj) {
   })
 }
 
-export function getObj (id) {
+export function getObj(id) {
   return request({
     url: '/admin/dict/' + id,
     method: 'get'
   })
 }
 
-export function delObj (row) {
+export function delObj(row) {
   return request({
-    url: '/admin/dict/' + row.id + '/' + row.type,
+    url: '/admin/dict/' + row.id,
     method: 'delete'
   })
 }
 
-export function putObj (obj) {
+export function putObj(obj) {
   return request({
     url: '/admin/dict/',
     method: 'put',
@@ -55,7 +93,7 @@ export function putObj (obj) {
   })
 }
 
-export function remote (type) {
+export function remote(type) {
   return request({
     url: '/admin/dict/type/' + type,
     method: 'get'

src/const/crud/admin/dict.js

@@ -24,32 +24,69 @@ export const tableOption = {
   refreshBtn: false,
   showClomnuBtn: false,
   searchSize: 'mini',
-  editBtn: false,
-  delBtn: false,
   column: [{
-    width: 150,
-    label: '数据值',
-    prop: 'value',
+    label: '类型',
+    prop: 'type',
+    'search': true,
     rules: [{
       required: true,
-      message: '请输入数据值',
+      message: '请输入字典类型',
       trigger: 'blur'
     }]
   }, {
-    label: '标签名',
-    prop: 'label',
+    label: '描述',
+    prop: 'description',
     rules: [{
       required: true,
-      message: '请输入标签名',
+      message: '请输入字典描述',
       trigger: 'blur'
     }]
   }, {
+    label: '备注信息',
+    prop: 'remarks'
+  }, {
+    width: 150,
+    label: '创建时间',
+    prop: 'createTime',
+    type: 'datetime',
+    addVisdiplay: false,
+    editDisabled: true,
+    format: 'yyyy-MM-dd HH:mm',
+    valueFormat: 'yyyy-MM-dd HH:mm:ss'
+  }]
+}
+
+
+export const tableDictItemOption = {
+  border: true,
+  index: true,
+  indexLabel: '序号',
+  stripe: true,
+  menuAlign: 'center',
+  align: 'center',
+  refreshBtn: false,
+  showClomnuBtn: false,
+  searchSize: 'mini',
+  column: [{
     label: '类型',
     prop: 'type',
-    'search': true,
+    addDisabled: true,
+    editDisabled: true
+  }, {
+    width: 150,
+    label: '数据值',
+    prop: 'value',
     rules: [{
       required: true,
-      message: '请输入字典类型',
+      message: '请输入数据值',
+      trigger: 'blur'
+    }]
+  }, {
+    label: '标签名',
+    prop: 'label',
+    rules: [{
+      required: true,
+      message: '请输入标签名',
       trigger: 'blur'
     }]
   }, {

src/main.js

@@ -8,7 +8,7 @@ import './permission' // 权限
 import './error' // 日志
 import router from './router/router'
 import store from './store'
-import {loadStyle,filterForm} from './util/util'
+import {loadStyle,filterForm,vaildData} from './util/util'
 import * as urls from '@/config/env'
 import {iconfontUrl, iconfontVersion} from '@/config/env'
 import * as filters from './filters' // 全局filter
@@ -21,6 +21,7 @@ import {validatenull} from '@/util/validate'
 
 Vue.prototype.validatenull = validatenull
 Vue.prototype.filterForm = filterForm
+Vue.prototype.vaildData = vaildData
 
 Vue.use(router)
 

src/util/util.js

@@ -335,3 +335,10 @@ export const filterForm = (form) => {
   });
   return obj;
 }
+
+export const vaildData = (val, dafult) => {
+  if (typeof val === 'boolean') {
+    return val;
+  }
+  return !validatenull(val) ? val : dafult;
+};

src/views/admin/dict/index.vue

@@ -21,6 +21,7 @@
       <avue-crud ref="crud"
                  :page="page"
                  :data="tableData"
+                 :permission="permissionList"
                  :table-loading="tableLoading"
                  :option="tableOption"
                  @on-load="getList"
@@ -31,42 +32,56 @@
         <template slot-scope="scope"
                   slot="menu">
           <el-button type="text"
-                     v-if="permissions.sys_dict_edit"
-                     icon="el-icon-check"
+                     v-if="permissions.sys_dict_add"
+                     icon="el-icon-menu"
                      size="mini"
                      plain
-                     @click="handleEdit(scope.row,scope.index)">编辑
-          </el-button>
-          <el-button type="text"
-                     v-if="permissions.sys_dict_del"
-                     icon="el-icon-delete"
-                     size="mini"
-                     plain
-                     @click="handleDel(scope.row,scope.index)">删除
+                     @click="handleItem(scope.row,scope.index)">字典项
           </el-button>
         </template>
       </avue-crud>
     </basic-container>
+    <el-dialog title="字典项管理" :visible.sync="dialogFormVisible" width="90%"
+               :table-loading="tableLoading"
+               @close="dialogFormVisible=false">
+      <avue-crud ref="crudItem"
+                 :data="tableDictItemData"
+                 :permission="permissionList"
+                 v-model="form"
+                 @row-update="handleItemUpdate"
+                 @row-save="handleItemSave"
+                 @row-del="rowItemDel"
+                 :before-open="handleBeforeOpen"
+                 :option="tableDictItemOption"
+                 :table-loading="tableLoading">
+      </avue-crud>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import {addObj, delObj, fetchList, putObj} from '@/api/admin/dict'
-  import {tableOption} from '@/const/crud/admin/dict'
+  import {addItemObj, addObj, delItemObj, delObj, fetchItemList, fetchList, putItemObj, putObj} from '@/api/admin/dict'
+  import {tableDictItemOption, tableOption} from '@/const/crud/admin/dict'
   import {mapGetters} from 'vuex'
 
   export default {
     name: 'dict',
     data() {
       return {
+        form: {},
+        dictType: undefined,
+        dictId: undefined,
+        dialogFormVisible: false,
         tableData: [],
+        tableDictItemData: [],
         page: {
           total: 0, // 总页数
           currentPage: 1, // 当前页数
           pageSize: 20 // 每页显示多少条
         },
         tableLoading: false,
-        tableOption: tableOption
+        tableOption: tableOption,
+        tableDictItemOption: tableDictItemOption
       }
     },
     created() {
@@ -74,7 +89,14 @@
     mounted: function () {
     },
     computed: {
-      ...mapGetters(['permissions'])
+      ...mapGetters(['permissions']),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permissions.sys_dict_add, false),
+          delBtn: this.vaildData(this.permissions.sys_dict_del, false),
+          editBtn: this.vaildData(this.permissions.sys_dict_edit, false)
+        };
+      }
     },
     methods: {
       getList(page, params) {
@@ -88,23 +110,29 @@
           this.tableLoading = false
         })
       },
-      /**
-       * @title 打开新增窗口
-       * @detail 调用crud的handleadd方法即可
-       *
-       **/
-      handleAdd: function () {
-        this.$refs.crud.rowAdd()
-      },
-      handleEdit(row, index) {
-        this.$refs.crud.rowEdit(row, index)
+
+      getDictItemList(dictId, type) {
+        this.dictType = type
+        this.dictId = dictId
+        this.dialogFormVisible = true
+        this.tableLoading = true
+        fetchItemList(Object.assign({
+          current: this.page.currentPage,
+          size: this.page.pageSize
+        }, {dictId: dictId})).then(response => {
+          this.tableDictItemData = response.data.data.records
+          this.page.total = response.data.data.total
+          this.tableLoading = false
+        })
       },
-      handleDel(row, index) {
-        this.$refs.crud.rowDel(row, index)
+      handleBeforeOpen(done) {
+        this.form.type = this.dictType
+        this.form.dictId = this.dictId
+        done()
       },
-      rowDel: function (row, index) {
+      rowDel: function (row) {
         var _this = this
-        this.$confirm('是否确认删除标签名为"' + row.label + '",数据类型为"' + row.type + '"的数据项?', '警告', {
+        this.$confirm('是否确认删除数据类型为"' + row.type + '"的数据项?', '警告', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
@@ -157,9 +185,58 @@
           done()
         })
       },
+      handleItemSave: function (row, done) {
+        addItemObj(row).then(data => {
+          this.tableDictItemData.push(Object.assign({}, row))
+          this.$message({
+            showClose: true,
+            message: '添加成功',
+            type: 'success'
+          })
+          this.getList(this.page)
+          done()
+        })
+      },
+      handleItemUpdate: function (row, index, done) {
+        putItemObj(row).then(() => {
+          this.tableData.splice(index, 1, Object.assign({}, row))
+          this.$message({
+            showClose: true,
+            message: '修改成功',
+            type: 'success'
+          })
+          this.getDictItemList(row.dictId, row.type)
+          done()
+        })
+      },
       searchChange(form) {
-        this.getList(this.page, form)
-      }
+        this.getList(this.page, this.filterForm(form))
+      },
+      /**
+       * 加载 字典项
+       * @param row
+       */
+      handleItem: function (row) {
+        this.getDictItemList(row.id, row.type)
+      },
+      rowItemDel: function (row) {
+        var _this = this
+        this.$confirm('是否确认删除数据为"' + row.label + '"的数据项?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function () {
+          return delItemObj(row.id)
+        }).then(() => {
+          this.getDictItemList(row.dictId, row.type)
+          _this.$message({
+            showClose: true,
+            message: '删除成功',
+            type: 'success'
+          })
+        }).catch(function () {
+        })
+      },
     }
   }
 </script>