字典增加搜索条件

src/api/dict.ts

@@ -1,21 +1,39 @@
 import request from '@/utils/request'
 
-export function createDict(data: any) {
-  return request.post('/createDict', data)
+// 字典
+export function getDictList(data: any) {
+  return request.post('/sys/dict/data', data, {
+    headers: { 'content-type': 'application/x-www-form-urlencoded' }
+  })
 }
-
-export function updateDict(data: any) {
-  return request.post('/updateDict', data)
+export function saveDict(data: any) {
+  return request.post('/sys/dict/save', data, {
+    headers: { 'content-type': 'application/x-www-form-urlencoded' }
+  })
 }
-
 export function deleteDict(data: any) {
-  return request.post('/deleteDict', data)
+  return request.get('/sys/dict/deleteAll', {
+    params: data
+  })
 }
 
-export function findDict(data: any) {
-  return request.get('/findDict', data)
+// 字典值
+export function getDictValue(dictTypeId: string | number) {
+  return request.get(`/sys/dict/getDictValue?dictTypeId=${dictTypeId}`)
+}
+export function saveDictValue(data: any) {
+  return request.post('/sys/dict/saveDictValue', data, {
+    headers: { 'content-type': 'application/x-www-form-urlencoded' }
+  })
+}
+export function deleteDictValue(data: any) {
+  return request.get('/sys/dict/deleteDictValue', {
+    params: data
+  })
 }
 
-export function getDictList(data?: any) {
-  return request.get('/getDictList', data)
+export function getDictByType(data: any) {
+  return request.get('/commonApi/dict/listByType', {
+    params: data
+  })
 }

src/views/system/Dict.vue

@@ -1,41 +1,70 @@
 <script setup lang="ts">
 import type { BasicForm } from '@/types/form'
+import { getDictList, getDictValue, saveDict, deleteDict, saveDictValue, deleteDictValue } from '@/api/dict'
 
 const CRUD = {
-  create() {
-    return Promise.resolve()
+  create(data: any) {
+    return saveDict(data)
   },
-  update() {
-    return Promise.resolve()
+  update(data: any) {
+    return saveDict(data)
+  },
+  getList(data: any) {
+    return getDictList(data).then((res: any) => {
+      if (res.rows.length) {
+        curRow.value = res.rows[0]
+      }
+      return {
+        data: res.rows,
+        total: res.total
+      }
+    })
+  },
+  delete(data: any) {
+    return deleteDict({ ids: data.id })
+  },
+  deleteBatch(data: any) {
+    return deleteDict(data)
+  }
+}
+
+const itemCRUD = {
+  create(data: any) {
+    data.dictTypeId = curRow.value.id
+    return saveDictValue(data)
+  },
+  update(data: any) {
+    data.dictTypeId = curRow.value.id
+    return saveDictValue(data)
   },
   getList() {
-    return new Promise(resolve => {
-      return resolve({
-        data: [
-          {
-            name: 'test'
-          }
-        ],
-        total: 1
-      })
+    return getDictValue(curRow.value.id).then((res: any) => {
+      return {
+        data: res.rows,
+        total: res.total
+      }
     })
+  },
+  delete(data: any) {
+    return deleteDictValue({ dictValueId: data.id, dictTypeId: curRow.value.id })
   }
 }
 
 const dictFormConfig = reactive<BasicForm>({
-  span: 12,
+  span: 24,
   formItems: [
     {
       label: '字典名称',
       value: '',
-      name: 'name',
+      name: 'description',
       type: 'input',
-      rules: [{ required: true, message: '请输入字典名称', trigger: 'blur' }]
+      rules: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
+      search: true
     },
     {
       label: '字典值',
       value: '',
-      name: 'value',
+      name: 'type',
       type: 'input',
       rules: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
     }
@@ -43,23 +72,27 @@ const dictFormConfig = reactive<BasicForm>({
 })
 
 const curRow = ref<any>(null)
-const handleRowClick = (row: any, column: any, event: any) => {
-  console.log(row, column, event)
+const handleRowClick = (row: any) => {
   curRow.value = row
 }
+const itemTableRef = ref<any>(null)
+watch(curRow, () => {
+  itemTableRef.value?.refresh()
+})
 
 const dictItemFormConfig = reactive<BasicForm>({
   span: 12,
   formItems: [
     {
-      label: '字典名称',
+      label: '标签',
       value: '',
-      name: 'name',
+      name: 'label',
       type: 'input',
-      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+      search: true
     },
     {
-      label: '字典值',
+      label: '键值',
       value: '',
       name: 'value',
       type: 'input',
@@ -69,7 +102,7 @@ const dictItemFormConfig = reactive<BasicForm>({
       label: '排序',
       value: '',
       name: 'sort',
-      type: 'input',
+      type: 'input-number',
       props: {
         maxlength: 11
       }
@@ -82,15 +115,17 @@ const dictItemFormConfig = reactive<BasicForm>({
   <el-row :gutter="16">
     <el-col :span="12">
       <pro-table :crud="CRUD" :formConfig="dictFormConfig" @row-click="handleRowClick">
-        <el-table-column prop="name" label="字典名称"></el-table-column>
-        <el-table-column prop="value" label="字典值"></el-table-column>
+        <el-table-column prop="description" label="字典名称"></el-table-column>
+        <el-table-column prop="type" label="字典值"></el-table-column>
       </pro-table>
     </el-col>
-    <el-col :span="12" class="bg-white">
-      <pro-table :crud="CRUD" :formConfig="dictItemFormConfig" v-if="curRow">
-        <el-table-column prop="name" label="标签"></el-table-column>
-        <el-table-column prop="phone" label="键值"></el-table-column>
-        <el-table-column prop="gender" label="排序"></el-table-column>
+    <el-col :span="12" class="position-relative">
+      <div class="position-absolute right-[30px] top-[105px]">
+        <el-tag>{{ curRow?.description }}</el-tag>
+      </div>
+      <pro-table ref="itemTableRef" :crud="itemCRUD" :formConfig="dictItemFormConfig" :selection="false" v-if="curRow">
+        <el-table-column prop="label" label="标签"></el-table-column>
+        <el-table-column prop="value" label="键值"></el-table-column>
       </pro-table>
       <el-empty v-else description="请选择左侧数据后操作"></el-empty>
     </el-col>