字典管理修改

library/build/unplugin/components.d.ts

@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {}
+export { }
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -21,7 +21,6 @@ declare module 'vue' {
     CarouselVertical: typeof import('./../../../src/views/vab/carousel/vabAutoComponents/CarouselVertical.vue')['default']
     CommonProperty: typeof import('./../../../src/views/other/workflow/vabAutoComponents/propertySetting/CommonProperty.vue')['default']
     Control: typeof import('./../../../src/views/other/workflow/vabAutoComponents/lFComponents/Control.vue')['default']
-    copy: typeof import('./../../../src/views/system/roleManagement/vabAutoComponents/RoleManagementEdit2 copy.vue')['default']
     DataDialog: typeof import('./../../../src/views/other/workflow/vabAutoComponents/lFComponents/DataDialog.vue')['default']
     DataScreenBottom: typeof import('./../../../src/views/index/vabAutoComponents/DataScreenBottom.vue')['default']
     DataScreenHeader: typeof import('./../../../src/views/index/vabAutoComponents/DataScreenHeader.vue')['default']
@@ -36,7 +35,9 @@ declare module 'vue' {
     DepartmentManagementEdit: typeof import('./../../../src/views/setting/departmentManagement/vabAutoComponents/DepartmentManagementEdit.vue')['default']
     DepartmentManagementEdit2: typeof import('./../../../src/views/system/departmentManagement/vabAutoComponents/DepartmentManagementEdit2.vue')['default']
     Develop: typeof import('./../../../src/views/index/vabAutoComponents/Develop.vue')['default']
+    DictionaryDataManagemenetEdit: typeof import('../../../src/views/system/dictionaryManagement/vabAutoComponents/DictionaryDataManagementEdit.vue')['default']
     DictionaryManagementEdit: typeof import('./../../../src/views/setting/dictionaryManagement/vabAutoComponents/DictionaryManagementEdit.vue')['default']
+    DictionaryManagementEdit2: typeof import('./../../../src/views/system/dictionaryManagement/vabAutoComponents/DictionaryManagementEdit2.vue')['default']
     DictTag: typeof import('./../../components/DictTag/index.vue')['default']
     DrawerBasicUsage: typeof import('./../../../src/views/vab/drawer/vabAutoComponents/DrawerBasicUsage.vue')['default']
     DrawerCustomizationContent: typeof import('./../../../src/views/vab/drawer/vabAutoComponents/DrawerCustomizationContent.vue')['default']

src/api/dictionaryDataManagement.ts

+import request from '/@/utils/request'
+
+// 查询字典数据列表
+export function getList(params?: any) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params,
+  })
+}
+
+// 新增字典数据
+export const doAdd = (data: any) => {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data,
+  })
+}
+
+// 修改字典数据
+export const doEdit = (data: any) => {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data,
+  })
+}
+
+// 删除字典数据
+export const doDelete = (dictCode: any) => {
+  return request({
+    url: `/system/dict/data/${dictCode}`,
+    method: 'delete',
+  })
+}
+
+// 查询字典数据详细
+export function getData(dictCode: any) {
+  return request({
+    url: `/system/dict/data/${dictCode}`,
+    method: 'get',
+  })
+}
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType: any) {
+  return request({
+    url: `/system/dict/data/type/${dictType}`,
+    method: 'get',
+  })
+}

src/api/dictionaryManagement.ts

 import request from '/@/utils/request'
 
-export function getTree(params?: any) {
+// 查询字典类型列表
+export function getList(params?: any) {
   return request({
-    url: '/dictionaryManagement/getTree',
+    url: '/system/dict/type/list',
     method: 'get',
     params,
   })
 }
 
-export function getList(params?: any) {
+// 新增字典类型
+export const doAdd = (data: any) => {
   return request({
-    url: '/dictionaryManagement/getList',
-    method: 'get',
-    params,
+    url: '/system/dict/type',
+    method: 'post',
+    data,
   })
 }
 
+// 修改字典类型
 export const doEdit = (data: any) => {
   return request({
-    url: '/dictionaryManagement/doEdit',
-    method: 'post',
+    url: '/system/dict/type',
+    method: 'put',
     data,
   })
 }
 
-export const doDelete = (data: any) => {
+// 删除字典类型
+export const doDelete = (dictId: any) => {
   return request({
-    url: '/dictionaryManagement/doDelete',
-    method: 'post',
-    data,
+    url: `/system/dict/type/${dictId}`,
+    method: 'delete',
+  })
+}
+
+// 查询字典类型详细
+export function getDictType(dictId: any) {
+  return request({
+    url: `/system/dict/type/${dictId}`,
+    method: 'get',
+  })
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: '/system/dict/type/refreshCache',
+    method: 'delete',
+  })
+}
+
+// 获取字典选择框列表
+export function optionselect() {
+  return request({
+    url: '/system/dict/type/optionselect',
+    method: 'get',
   })
 }

src/router/index.ts

@@ -272,6 +272,19 @@ export const customRoutes: VabRouteRecord[] = [
           activeMenu: '/system/roleManagement',
         },
       },
+      {
+        path: 'dictionaryManagement/dictData/:dictId',
+        component: '/@/views/system/dictionaryManagement/dictData.vue',
+        name: 'DictData',
+        meta: {
+          hidden: true,
+          icon: 'book-2-line',
+          title: '字典数据',
+          noKeepAlive: true,
+          dynamicNewTab: true,
+          activeMenu: '/system/dictionaryManagement',
+        },
+      },
     ],
   },
 ]

src/store/modules/dict.ts

@@ -14,7 +14,8 @@ const useDictStore = defineStore('dict', {
             return this.dict[i].value
           }
         }
-      } catch (e) {
+      } catch (error) {
+        console.log(error)
         return null
       }
     },

src/views/system/dictionaryManagement/vabAutoComponents/DictionaryDataManagementEdit.vue

+<template>
+  <vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="500px" @close="close">
+    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="字典类型">
+        <el-input v-model="form.dictType" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="数据标签" prop="dictLabel">
+        <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+      </el-form-item>
+      <el-form-item label="数据键值" prop="dictValue">
+        <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+      </el-form-item>
+      <el-form-item label="样式属性" prop="cssClass">
+        <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+      </el-form-item>
+      <el-form-item label="显示排序" prop="dictSort">
+        <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+      </el-form-item>
+      <el-form-item label="回显样式" prop="listClass">
+        <el-select v-model="form.listClass">
+          <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="save">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </template>
+  </vab-dialog>
+</template>
+
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus'
+import { doAdd, doEdit, getData } from '/@/api/dictionaryDataManagement'
+import useDictStore from '/@/store/modules/dict'
+
+defineOptions({
+  name: 'DictionaryDataManagementEdit',
+})
+
+const { proxy } = getCurrentInstance() as any
+const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
+
+const emit = defineEmits(['fetch-data'])
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: '',
+  },
+})
+
+// 数据标签回显样式
+const listClassOptions = ref([
+  { value: 'default', label: '默认' },
+  { value: 'primary', label: '主要' },
+  { value: 'success', label: '成功' },
+  { value: 'info', label: '信息' },
+  { value: 'warning', label: '警告' },
+  { value: 'danger', label: '危险' },
+])
+
+const formRef = ref<FormInstance>()
+const form = ref<any>({
+  dictCode: undefined,
+  dictLabel: undefined,
+  dictValue: undefined,
+  cssClass: undefined,
+  listClass: 'default',
+  dictSort: 0,
+  status: '0',
+  remark: undefined,
+})
+const rules = reactive<any>({
+  dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+  dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+  dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
+})
+const title = ref<string>('')
+const dialogFormVisible = ref<boolean>(false)
+
+const showEdit = (row?: any) => {
+  reset()
+  if (row && row.dictCode) {
+    title.value = '编辑'
+    getData(row.dictCode).then((response: any) => {
+      form.value = response.data
+      dialogFormVisible.value = true
+    })
+  } else {
+    title.value = '添加'
+    form.value.dictType = props.dictType
+    dialogFormVisible.value = true
+  }
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictCode: undefined,
+    dictLabel: undefined,
+    dictValue: undefined,
+    cssClass: undefined,
+    listClass: 'default',
+    dictSort: 0,
+    status: '0',
+    remark: undefined,
+  }
+  proxy.resetForm('formRef')
+}
+
+const close = () => {
+  formRef.value?.clearValidate()
+  formRef.value?.resetFields()
+  emit('fetch-data')
+}
+
+const cancel = () => {
+  close()
+  dialogFormVisible.value = false
+}
+
+const save = () => {
+  formRef.value?.validate(async (valid: any) => {
+    if (valid) {
+      if (form.value.dictCode) {
+        await doEdit(form.value)
+        useDictStore().removeDict(props.dictType)
+        await $baseMessage('修改成功', 'success', 'hey')
+      } else {
+        await doAdd(form.value)
+        useDictStore().removeDict(props.dictType)
+        await $baseMessage('添加成功', 'success', 'hey')
+      }
+      cancel()
+    }
+  })
+}
+
+defineExpose({
+  showEdit,
+})
+</script>

src/views/system/dictionaryManagement/vabAutoComponents/DictionaryManagementEdit2.vue

+<template>
+  <vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="500px" @close="close">
+    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="字典名称" prop="dictName">
+        <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+      </el-form-item>
+      <el-form-item label="字典类型" prop="dictType">
+        <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="save">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </template>
+  </vab-dialog>
+</template>
+
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus'
+import { doAdd, doEdit, getDictType } from '/@/api/dictionaryManagement'
+
+defineOptions({
+  name: 'DictionaryManagementEdit2',
+})
+
+const { proxy } = getCurrentInstance() as any
+const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
+
+const emit = defineEmits(['fetch-data'])
+
+const formRef = ref<FormInstance>()
+const form = ref<any>({
+  dictId: undefined,
+  dictName: undefined,
+  dictType: undefined,
+  status: '0',
+  remark: undefined,
+})
+const rules = reactive<any>({
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+  dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
+})
+const title = ref<string>('')
+const dialogFormVisible = ref<boolean>(false)
+
+const showEdit = (row?: any) => {
+  reset()
+  if (row && row.dictId) {
+    title.value = '编辑'
+    getDictType(row.dictId).then((response: any) => {
+      form.value = response.data
+      dialogFormVisible.value = true
+    })
+  } else {
+    title.value = '添加'
+    dialogFormVisible.value = true
+  }
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    dictId: undefined,
+    dictName: undefined,
+    dictType: undefined,
+    status: '0',
+    remark: undefined,
+  }
+  proxy.resetForm('formRef')
+}
+
+const close = () => {
+  formRef.value?.clearValidate()
+  formRef.value?.resetFields()
+  emit('fetch-data')
+}
+
+const cancel = () => {
+  close()
+  dialogFormVisible.value = false
+}
+
+const save = () => {
+  formRef.value?.validate(async (valid: any) => {
+    if (valid) {
+      if (form.value.dictId) {
+        await doEdit(form.value)
+        await $baseMessage('修改成功', 'success', 'hey')
+      } else {
+        await doAdd(form.value)
+        await $baseMessage('添加成功', 'success', 'hey')
+      }
+      cancel()
+    }
+  })
+}
+
+defineExpose({
+  showEdit,
+})
+</script>