字典管理

src/api/modules/dict.ts

@@ -0,0 +1,31 @@
+import { handle } from '../index'
+
+const suffix = 'api'
+//  字典管理 > 树
+export const getDictTypeTreeSelectTree = () => handle({
+  url: `/${suffix}/dict/type/treeselect`,
+  method: 'get',
+})
+//  字典管理 > 列表
+export const getDictDataList = (params: any) => handle({
+  url: `/${suffix}/dict/data/list`,
+  method: 'get',
+  params
+})
+//  字典管理 > 列表 > 新增
+export const addDictData = (params: any) => handle({
+  url: `/${suffix}/dict/data/save`,
+  method: 'post',
+  params
+})
+//  字典管理 > 列表 > 编辑
+export const editDictData = (params: any) => handle({
+  url: `/${suffix}/dict/data/edit`,
+  method: 'put',
+  params
+})
+//  字典管理 > 列表 > 删除
+export const delDictData = (id: any) => handle({
+  url: `/${suffix}/dict/data/${id}`,
+  method: 'delete',
+})

src/api/request.ts

@@ -50,6 +50,49 @@ export class HttpRequest {
       })
     })
   }
+  public put = ({url, params, config = {}}: { [index: string]: any }) => {
+    return new Promise((resolve, reject) => {
+      this.axios.put(url, params, {
+        headers: {
+          Authorization: sessionStorage.getItem('sg_token'),
+        },
+        ...config
+      }).then((res: any) => {
+        resolve(res.data)
+      }).catch((err) => {
+        reject(err);
+      })
+    })
+  }
+  public delete = ({url, params, config = {}}: { [index: string]: any }) => {
+    return new Promise((resolve, reject) => {
+      let paramUrl = url
+      if (params) {
+        if (typeof params === 'object') {
+          let str = ''
+          Object.entries(params).map(([k, v]: any, i) => {
+            if (i > 0) {
+              str += '&'
+            }
+            str += `${k}=${encodeURIComponent(v)}`
+          })
+          paramUrl += `?${str}`
+        } else {
+          paramUrl += `?${params}`
+        }
+      }
+      this.axios.delete(paramUrl, {
+        headers: {
+          Authorization: sessionStorage.getItem('sg_token')
+        },
+        ...config
+      }).then((res: any) => {
+        resolve(res.data)
+      }).catch((err) => {
+        reject(err);
+      })
+    })
+  }
   public download = ({url, params, fileName, config = {}}: { [index: string]: any }) => {
     return new Promise((resolve, reject) => {
       let paramUrl = url

src/views/system/dict-manage/detail.vue

@@ -6,6 +6,8 @@
       @submit="onSubmit"
       height="300px"
       :closeConfirm="!isViewCpt"
+      :loading="loading"
+      :showSubmit="!isViewCpt"
   >
     <div class="__normal-form">
       <CusForm labelWidth="130px" ref="ref_form" :formView="isViewCpt">
@@ -13,19 +15,19 @@
             :span="24"
             required
             label="字典显示名称:"
-            v-model:param="cusDetail.p1"/>
+            v-model:param="cusDetail.dictLabel"/>
         <CusFormColumn
             :span="24"
             required
             label="字典值内容:"
-            v-model:param="cusDetail.p1"/>
+            v-model:param="cusDetail.dictValue"/>
         <CusFormColumn
             :span="24"
             required
             label="排序:"
             link="number"
             :min="0"
-            v-model:param="cusDetail.p1"/>
+            v-model:param="cusDetail.dictSort"/>
       </CusForm>
     </div>
   </CusDialog>
@@ -46,6 +48,7 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox } from 'element-plus';
 
 export default defineComponent({
   name: '',
@@ -60,25 +63,16 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      cusDetail: {
-        p1: null,
-        p2: null,
-        p3: null,
-        fileList: [
-          { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},],
-        }
+      cusDetail: {},
+      loading: false
     })
     watch(() => props.show, (n) => {
       if (n) {
         state.cusDetail = {
-          p1: null,
-          p2: null,
-          p3: null,
-          fileList: [],
+          dictType: props.transfer.dictType
         }
         if (props.transfer.method !== 'add') {
-          state.cusDetail.p1 = props.transfer.detail.p1
-          state.cusDetail.fileList = props.transfer.detail.fileList
+          state.cusDetail = props.transfer.detail
         }
         nextTick(() => {
           ref_form.value.reset()
@@ -90,6 +84,34 @@ export default defineComponent({
       return props.transfer.method === 'view'
     })
     const onSubmit = () => {
+      ref_form.value.submit().then(() => {
+        ElMessageBox.confirm("是否提交?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          state.loading = true
+          const apiHandle = props.transfer.method === 'edit' ? that.$api.editDictData(state.cusDetail) : that.$api.addDictData(state.cusDetail)
+          apiHandle.then(res => {
+            if (res.code === 200) {
+              ElMessage.success(res.msg)
+              emit('update:show', false)
+              emit('refresh')
+            } else {
+              ElMessage.error(res.msg)
+            }
+            state.loading = false
+          }).catch(() => {
+            state.loading = false
+          })
+        }).catch(() => {})
+      }).catch((e) => {
+        ElMessage({
+          message: e[0].message,
+          grouping: true,
+          type: 'warning',
+        })
+      })
     }
     return {
       ...toRefs(state),

src/views/system/dict-manage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="__normal-page">
-    <div class="__normal-tree">
+    <div class="__normal-tree" v-loading="loadingTree">
       <div class="tree-filter">
         <CusFormColumn
             :span="24"
@@ -14,14 +14,14 @@
         <template v-for="p in dictTree">
           <div class="tree-parent __hover" :class="{active: p.expend}" @click="p.expend = !p.expend">{{p.name}}</div>
           <template v-if="p.expend">
-            <template v-for="s in p.children.filter(v => v.name.includes(treeFilter))">
-              <div class="tree-son __hover" :class="{active: queryForm.dictId === s.value}" @click="queryForm.dictId = s.value">{{s.name}}</div>
+            <template v-for="s in p.children?.filter(v => v.name.includes(treeFilter))">
+              <div class="tree-son __hover" :class="{active: selectDict === s.value}" @click="handleTreeClick(s.value)">{{s.name}}</div>
             </template>
           </template>
         </template>
       </div>
     </div>
-    <div class="__normal-content">
+    <div class="__normal-content" v-if="selectDict">
       <CusContent
           v-model:tableHead="tableHead"
           @handleReset="handleReset"
@@ -32,11 +32,11 @@
             <CusFormColumn
                 :span="8"
                 label="字典显示名称:"
-                v-model:param="queryForm.shipId"/>
+                v-model:param="queryForm.dictLabel"/>
             <CusFormColumn
                 :span="8"
                 label="字典值内容:"
-                v-model:param="queryForm.shipId"/>
+                v-model:param="queryForm.dictValue"/>
             <CusSearchButtons
                 @handleReset="handleReset"
                 @handleSearch="onSearch"
@@ -58,7 +58,6 @@
               :page="queryPage.pageNum"
               :pageSize="queryPage.pageSize"
               @handlePage="handlePage"
-              @handleSort="handleSort"
           >
             <template #do-column-value="{ scope }">
               <div class="__cus-table_do">
@@ -68,7 +67,7 @@
                 <div class="__cus-table_do-blue __hover" @click="onEdit(scope.row)">
                   <SvgIcon name="edit" size="16"/>编辑
                 </div>
-                <div class="__cus-table_do-red __hover">
+                <div class="__cus-table_do-red __hover" @click="onDel(scope.row)">
                   <SvgIcon name="del" size="16"/>删除
                 </div>
               </div>
@@ -77,7 +76,7 @@
         </template>
       </CusContent>
     </div>
-    <DetailCom v-model:show="showDetail" :transfer="transfer"/>
+    <DetailCom v-model:show="showDetail" :transfer="transfer" @refresh="handleSearch()"/>
   </div>
 </template>
 
@@ -97,6 +96,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import DetailCom from './detail.vue'
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 export default defineComponent({
   name: '',
@@ -125,38 +125,20 @@ export default defineComponent({
       queryForm: <any>{},
       //  查询表单参数备份
       back_queryForm: {},
-      //  查询表格排序
-      querySort: {},
       //  表格表头
       tableHead: [
-        {value: "p1", label: "字典显示名称", show: true},
-        {value: "p1", label: "字典值内容", show: true},
-        {value: "p1", label: "排序", show: true},
-        {value: "p1", label: "更新时间", show: true},
-        {value: "do", label: "操作", show: true, width: 260},
+        {value: "dictLabel", label: "字典显示名称", show: true},
+        {value: "dictValue", label: "字典值内容", show: true},
+        {value: "dictSort", label: "排序", show: true},
+        {value: "updateTime", label: "更新时间", show: true},
+        {value: "do", label: "操作", show: true, popover: true, width: 260},
       ],
       showDetail: false,
       transfer: {},
       treeFilter: '',
-      dictTree: [
-        {
-          name: '席位管理',
-          expend: true,
-          children: [
-            {name: '值班厅领导', value: 1},
-            {name: '总值班', value: 2},
-            {name: '带班领导', value: 3},
-            {name: '值班长', value: 4},
-            {name: '值班员', value: 5},
-          ]
-        },
-        {
-          name: 'xxx管理',
-          expend: false,
-          children: [
-          ]
-        },
-      ]
+      dictTree: [],
+      loadingTree: false,
+      selectDict: ''
     });
     const ref_cusTable = ref()
     //  获取字典
@@ -168,11 +150,6 @@ export default defineComponent({
       state.queryPage.pageSize = pageSize
       handleSearch(page, pageSize)
     }
-    //  查询排序参数改变处理方法
-    const handleSort = ({key, value}: any) => {
-      state.querySort = key ? {key: value} : {}
-      handleSearch()
-    }
     //  重置查询表单方法
     const handleReset = () => {
       state.queryForm = {}
@@ -185,46 +162,24 @@ export default defineComponent({
       const queryParams: any = {
         pageNum: page,
         pageSize: pageSize,
-        sort: {},
-        text: ''
-      }
-      //  添加排序参数
-      for (const [k, v] of Object.entries(state.querySort)) {
-        that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
+        dictType: state.selectDict
       }
       //  添加表单参数
       for (const [k, v] of Object.entries(state.back_queryForm)) {
         that.$util.isValue(v) ? (queryParams[k] = v) : null;
       }
-      //  添加复合查询参数
       state.loading = true
-
-      // mock
-      const arr: any = []
-      for (let i = 0; i < 77; i++) {
-        arr.push({
-          p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶' + i,
-          fileList: [
-            { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},
-          ],
-        })
-      }
-      state.queryResult.tableData = arr
-      state.queryResult.total = arr.length
-      state.loading = false
-      // that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
-      //   if (res.code === 200) {
-      //     state.queryResult.tableData = res.rows
-      //     state.queryResult.total = res.total
-      //   }
-      //   setTimeout(() => {
-      //     state.loading = false
-      //   }, 1000)
-      // }).catch(() => {
-      //   setTimeout(() => {
-      //     state.loading = false
-      //   }, 1000)
-      // })
+      that.$api.getDictDataList(that.$util.formatGetParam(queryParams)).then((res: any) => {
+        if (res.code === 200) {
+          state.queryResult.tableData = res.rows
+          state.queryResult.total = res.total
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
+      })
     }
     //  点击查询按钮后
     const onSearch = () => {
@@ -236,39 +191,91 @@ export default defineComponent({
     const onAdd = () => {
       state.transfer = {
         method: 'add',
+        dictType: state.selectDict
       }
       state.showDetail = true
     }
     const onEdit = (val) => {
       state.transfer = {
         method: 'edit',
-        detail: val
+        detail: JSON.parse(JSON.stringify(val)),
+        dictType: state.selectDict
       }
       state.showDetail = true
     }
     const onView = (val) => {
       state.transfer = {
         method: 'view',
-        detail: val
+        detail: JSON.parse(JSON.stringify(val))
       }
       state.showDetail = true
     }
+    const initTree = () => {
+      state.loadingTree = true
+      state.dictTree = []
+      that.$api.getDictTypeTreeSelectTree().then(res => {
+        if (res.code === 200) {
+          state.dictTree = res.data.map((p) => {
+            p.expend = false
+            p.name = p.label
+            p.value = p.attachedField
+            if (p.children?.length > 0) {
+              p.children = p.children.map(c => {
+                c.name = c.label
+                c.value = c.attachedField
+                return c
+              })
+            }
+            return p
+          })
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loadingTree = false
+      }).catch(() => {
+        state.loadingTree = false
+      })
+    }
+    const handleTreeClick = (val) => {
+      state.selectDict = val
+      handleSearch()
+    }
+    const onDel = (val) => {
+      ElMessageBox.confirm(`是否删除${val.dictLabel}?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        state.loading = true
+        that.$api.delDictData(val.id).then(res => {
+          if (res.code === 200) {
+            handleSearch()
+          } else {
+            ElMessage.error(res.msg)
+            state.loading = false
+          }
+        }).catch(() => {
+          state.loading = false
+        })
+      }).catch(() => {})
+    }
     onMounted(() => {
       state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
       initDictionary()
-      handleSearch()
+      initTree()
     })
     return {
       ref_cusTable,
       ...toRefs(state),
       handleSearch,
       handlePage,
-      handleSort,
       handleReset,
       onSearch,
       onAdd,
       onEdit,
       onView,
+      handleTreeClick,
+      onDel
     }
   },
 })