feat: add dict utils

locales/en_US.json

@@ -125,7 +125,8 @@
     "setting": "System settings",
     "userCenter": "Personal Center",
     "accountSetting": "User settings",
-    "cascader": "Administrative region selection"
+    "cascader": "Administrative region selection",
+    "dict": "Dictionary example"
   },
   "http": {
     "400": "Syntax error in the request",

locales/zh_CN.json

@@ -152,6 +152,7 @@
     "menuSetting": "菜单设置",
     "userCenter": "个人中心",
     "about": "关于",
-    "cascader": "省市区联动"
+    "cascader": "省市区联动",
+    "dict": "字典示例"
   }
 }

src/router/routes.static.ts

@@ -404,4 +404,35 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     id: 40,
     pid: null,
   },
+  {
+    name: 'cascader',
+    path: '/demo/cascader',
+    title: '省市区联动',
+    requiresAuth: true,
+    icon: 'icon-park-outline:add-subset',
+    componentPath: '/demo/cascader/index.vue',
+    id: 41,
+    pid: 13,
+  },
+  {
+    name: 'docmentsNova',
+    path: '/docments/nova',
+    title: 'Nova docs',
+    requiresAuth: true,
+    icon: 'local:logo',
+    href: 'https://nova-admin-docs.netlify.app/',
+    componentPath: '2333333',
+    id: 42,
+    pid: 24,
+  },
+  {
+    name: 'dict',
+    path: '/demo/dict',
+    title: '字典示例',
+    requiresAuth: true,
+    icon: 'icon-park-outline:book-one',
+    componentPath: '/demo/dict/index.vue',
+    id: 43,
+    pid: 13,
+  },
 ]

src/service/api/system.ts

@@ -14,13 +14,13 @@ export function fetchRoleList() {
   return request.Get<Service.ResponseResult<Entity.Role[]>>('/role/list')
 }
 
-// 获取所有字典列表
-export function fetchDictList() {
-  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/list')
-}
-
-// 获取所有字典列表
-export function fetchDictContent(id: number) {
-  const params = { id }
-  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/contentById', { params })
+/**
+ * 请求获取字典列表
+ *
+ * @param code - 字典编码，用于筛选特定的字典列表
+ * @returns 返回的字典列表数据
+ */
+export function fetchDictList(code?: string) {
+  const params = { code }
+  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/list', { params })
 }

src/store/dict.ts

@@ -0,0 +1,47 @@
+import { fetchDictList } from '@/service'
+
+interface DictState {
+  dict: { [key: string]: Entity.Dict[] }
+}
+
+export const useDictStore = defineStore('dict-store', {
+  state: (): DictState => {
+    return {
+      dict: {},
+    }
+  },
+  actions: {
+    async dict(code: string) {
+      const targetDict = await this.getDict(code)
+
+      return {
+        list: () => targetDict,
+        mapByValue: () => Object.fromEntries(targetDict.map(({ value, ...data }) => [value, data])),
+        mapByLabel: () => Object.fromEntries(targetDict.map(({ label, ...data }) => [label, data])),
+      }
+    },
+    async getDict(code: string) {
+      const isExist = Reflect.has(this.dict, code)
+
+      if (isExist) {
+        return this.dict[code]
+      }
+      else {
+        return await this.getDictByNet(code)
+      }
+    },
+    async getDictByNet(code: string) {
+      const { data, isSuccess } = await fetchDictList(code)
+      if (isSuccess) {
+        Reflect.set(this.dict, code, data)
+        return data
+      }
+      else {
+        throw new Error(`Failed to get ${code} dictionary from network, check ${code} field or network`)
+      }
+    },
+  },
+  persist: {
+    storage: sessionStorage,
+  },
+})

src/store/index.ts

@@ -5,6 +5,7 @@ export * from './app/index'
 export * from './auth'
 export * from './router'
 export * from './tab'
+export * from './dict'
 
 // 安装pinia全局状态库
 export function installPinia(app: App) {

src/typings/entities/dict.d.ts

@@ -5,8 +5,9 @@ namespace Entity {
 
   interface Dict {
     id?: number
-    pid?: number
-    dictLabel?: string
-    dictValue?: number
+    isRoot?: 0 | 1
+    code: string
+    label: string
+    value?: number
   }
 }

src/views/demo/dict/index.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useDictStore } from '@/store'
+import { fetchDictList } from '@/service'
+
+const { dict } = useDictStore()
+
+const dictKey = ref('')
+const options = ref()
+const subOptions = ref()
+const currentDict = ref()
+async function getAlldict() {
+  const { data, isSuccess } = await fetchDictList()
+  if (isSuccess) {
+    options.value = data.map((item) => {
+      return {
+        label: item.label,
+        value: item.code,
+      }
+    })
+  }
+}
+function changeSelect(v: string) {
+  dict(v).then((data) => {
+    currentDict.value = data
+    subOptions.value = data.list()
+  })
+}
+
+onMounted(() => {
+  getAlldict()
+})
+
+const data = ref()
+async function getDict() {
+  data.value = currentDict.value.list()
+}
+
+async function getValueMap() {
+  data.value = currentDict.value.mapByValue()
+}
+async function getLabelMap() {
+  data.value = currentDict.value.mapByLabel()
+}
+
+const dictValue = ref()
+
+const dictLabel = computed(() => {
+  if (data.value && dictValue.value) {
+    return data.value[dictValue.value].label
+  }
+  return ''
+})
+</script>
+
+<template>
+  <n-card title="字典示例">
+    <n-flex vertical>
+      <n-flex>
+        <n-select v-model:value="dictKey" class="w-1/3" :options="options" @update:value="changeSelect" />
+        子字典下拉框
+        <n-select class="w-1/3" :options="subOptions" />
+      </n-flex>
+      <n-flex>
+        <n-button @click="getDict">
+          获取当前字典数据
+        </n-button>
+        <n-button @click="getValueMap">
+          获取当前字典ValueMap
+        </n-button>
+        <n-button @click="getLabelMap">
+          获取当前字典LabelMap
+        </n-button>
+      </n-flex>
+
+      <pre class="bg-#eee">
+          {{ data }}
+        </pre>
+
+      <n-flex align="center">
+        <n-input-number v-model:value="dictValue" />
+        <n-text v-if="data && dictValue" type="info">
+          回显结果 {{ dictLabel }}
+        </n-text>
+      </n-flex>
+    </n-flex>
+  </n-card>
+</template>
+
+<style scoped></style>

src/views/setting/dictionary/components/DictContentModal.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useBoolean } from '@/hooks'
+
+interface Props {
+  modalName?: string
+  dictCode: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modalName: '',
+})
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
+
+const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
+
+const formDefault: Entity.Dict = {
+  label: '',
+  code: '',
+}
+const formModel = ref<Entity.Dict>({ ...formDefault })
+
+type ModalType = 'add' | 'view' | 'edit'
+const modalType = shallowRef<ModalType>('add')
+const modalTitle = computed(() => {
+  const titleMap: Record<ModalType, string> = {
+    add: '添加',
+    view: '查看',
+    edit: '编辑',
+  }
+  return `${titleMap[modalType.value]}${props.modalName}`
+})
+
+async function openModal(type: ModalType = 'add', data?: any) {
+  emit('open')
+  modalType.value = type
+  showModal()
+  const handlers = {
+    async add() {
+      formModel.value = { ...formDefault }
+      formModel.value.code = props.dictCode
+    },
+    async view() {
+      if (!data)
+        return
+      formModel.value = { ...data }
+    },
+    async edit() {
+      if (!data)
+        return
+      formModel.value = { ...data }
+    },
+  }
+  await handlers[type]()
+}
+
+function closeModal() {
+  hiddenModal()
+  endLoading()
+  emit('close')
+}
+
+defineExpose({
+  openModal,
+})
+
+const formRef = ref()
+async function submitModal() {
+  const handlers = {
+    async add() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          window.$message.success('模拟新增成功')
+          resolve(true)
+        }, 2000)
+      })
+    },
+    async edit() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          window.$message.success('模拟编辑成功')
+          resolve(true)
+        }, 2000)
+      })
+    },
+    async view() {
+      return true
+    },
+  }
+  await formRef.value?.validate()
+  startLoading()
+  await handlers[modalType.value]() && closeModal()
+}
+
+const rules = {
+  label: {
+    required: true,
+    message: '请输入字典名称',
+    trigger: 'blur',
+  },
+  value: {
+    required: true,
+    message: '请输入字典值',
+    trigger: 'blur',
+  },
+}
+</script>
+
+<template>
+  <n-modal
+    v-model:show="modalVisible"
+    :mask-closable="false"
+    preset="card"
+    :title="modalTitle"
+    class="w-700px"
+    :segmented="{
+      content: true,
+      action: true,
+    }"
+  >
+    <n-form ref="formRef" :rules="rules" label-placement="left" :model="formModel" :label-width="100" :disabled="modalType === 'view'">
+      <n-form-item label="字典名称" path="label">
+        <n-input v-model:value="formModel.label" />
+      </n-form-item>
+      <n-form-item label="字典码" path="code">
+        <n-input v-model:value="formModel.code" disabled />
+      </n-form-item>
+      <n-form-item label="字典值" path="value">
+        <n-input-number v-model:value="formModel.value" />
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <n-space justify="center">
+        <n-button @click="closeModal">
+          取消
+        </n-button>
+        <n-button type="primary" :loading="submitLoading" @click="submitModal">
+          提交
+        </n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>

src/views/setting/dictionary/components/DictModal.vue

@@ -19,8 +19,8 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
 const formDefault: Entity.Dict = {
-  dictLabel: '',
-  dictValue: -1,
+  label: '',
+  code: '',
 }
 const formModel = ref<Entity.Dict>({ ...formDefault })
 
@@ -35,7 +35,7 @@ const modalTitle = computed(() => {
   return `${titleMap[modalType.value]}${props.modalName}`
 })
 
-async function openModal(type: ModalType = 'add', data: any) {
+async function openModal(type: ModalType = 'add', data?: any) {
   emit('open')
   modalType.value = type
   showModal()
@@ -96,12 +96,12 @@ async function submitModal() {
 }
 
 const rules = {
-  dictLabel: {
+  label: {
     required: true,
     message: '请输入字典名称',
     trigger: 'blur',
   },
-  dictValue: {
+  value: {
     required: true,
     message: '请输入字典值',
     trigger: 'blur',
@@ -122,11 +122,11 @@ const rules = {
     }"
   >
     <n-form ref="formRef" :rules="rules" label-placement="left" :model="formModel" :label-width="100" :disabled="modalType === 'view'">
-      <n-form-item label="字典名称" path="dictLabel">
-        <n-input v-model:value="formModel.dictLabel" />
+      <n-form-item label="字典名称" path="label">
+        <n-input v-model:value="formModel.label" />
       </n-form-item>
-      <n-form-item label="字典值" path="dictValue">
-        <n-input-number v-model:value="formModel.dictValue" />
+      <n-form-item label="字典码" path="code">
+        <n-input v-model:value="formModel.code" />
       </n-form-item>
     </n-form>
     <template #action>

src/views/setting/dictionary/index.vue

@@ -1,14 +1,17 @@
 <script setup lang="tsx">
 import type { DataTableColumns } from 'naive-ui'
 import { NButton, NFlex, NPopconfirm } from 'naive-ui'
-import TableModal from './components/TableModal.vue'
-import { fetchDictContent, fetchDictList } from '@/service'
+import DictModal from './components/DictModal.vue'
+import DictContentModal from './components/DictContentModal.vue'
+import { fetchDictList } from '@/service'
 import { useBoolean } from '@/hooks'
+import { useDictStore } from '@/store'
 
 const { bool: dictLoading, setTrue: startDictLoading, setFalse: endDictLoading } = useBoolean(false)
 const { bool: contentLoading, setTrue: startContentLoading, setFalse: endContentLoading } = useBoolean(false)
 
-const modalRef = ref<InstanceType<typeof TableModal>>()
+const dictRef = ref<InstanceType<typeof DictModal>>()
+const dictContentRef = ref<InstanceType<typeof DictContentModal>>()
 
 onMounted(() => {
   getDictList()
@@ -17,6 +20,8 @@ onMounted(() => {
 const dictData = ref<Entity.Dict[]>([])
 const dictContentData = ref<Entity.Dict[]>([])
 
+const { getDictByNet } = useDictStore()
+
 async function getDictList() {
   startDictLoading()
   const { data, isSuccess } = await fetchDictList()
@@ -26,21 +31,21 @@ async function getDictList() {
   endDictLoading()
 }
 
-let lastDictId: number
-async function getDictContent(id: number) {
+let lastDictCode: string
+async function getDictContent(code: string) {
   startContentLoading()
-  const { data, isSuccess } = await fetchDictContent(id)
-  if (isSuccess) {
-    lastDictId = id
-    dictContentData.value = data
-  }
+  dictContentData.value = await getDictByNet(code)
   endContentLoading()
 }
 
 const dictColumns: DataTableColumns<Entity.Dict> = [
   {
-    title: '字典名称',
-    key: 'dictLabel',
+    title: '字典项',
+    key: 'label',
+  },
+  {
+    title: '字典码',
+    key: 'code',
   },
   {
     title: '操作',
@@ -51,13 +56,13 @@ const dictColumns: DataTableColumns<Entity.Dict> = [
         <NFlex justify="center">
           <NButton
             size="small"
-            onClick={() => getDictContent(row.id!)}
+            onClick={() => getDictContent(row.code)}
           >
             查看字典
           </NButton>
           <NButton
             size="small"
-            onClick={() => modalRef.value!.openModal('edit', row)}
+            onClick={() => dictRef.value!.openModal('edit', row)}
           >
             编辑
           </NButton>
@@ -66,7 +71,7 @@ const dictColumns: DataTableColumns<Entity.Dict> = [
               default: () => (
                 <span>
                   确认删除字典
-                  <b>{row.dictLabel}</b>
+                  <b>{row.label}</b>
                   {' '}
                   ？
                 </span>
@@ -83,11 +88,15 @@ const dictColumns: DataTableColumns<Entity.Dict> = [
 const contentColumns: DataTableColumns<Entity.Dict> = [
   {
     title: '字典名称',
-    key: 'dictLabel',
+    key: 'label',
+  },
+  {
+    title: '字典码',
+    key: 'code',
   },
   {
     title: '字典值',
-    key: 'dictValue',
+    key: 'value',
   },
   {
     title: '操作',
@@ -99,7 +108,7 @@ const contentColumns: DataTableColumns<Entity.Dict> = [
         <NFlex justify="center">
           <NButton
             size="small"
-            onClick={() => modalRef.value!.openModal('edit', row)}
+            onClick={() => dictContentRef.value!.openModal('edit', row)}
           >
             编辑
           </NButton>
@@ -108,7 +117,7 @@ const contentColumns: DataTableColumns<Entity.Dict> = [
               default: () => (
                 <span>
                   确认删除字典值
-                  <b>{row.dictLabel}</b>
+                  <b>{row.label}</b>
                   {' '}
                   ？
                 </span>
@@ -129,10 +138,10 @@ function deleteDict(id: number) {
 
 <template>
   <NFlex>
-    <div class="basis-1/3">
+    <div class="basis-2/5">
       <n-card>
         <template #header>
-          <NButton type="primary">
+          <NButton type="primary" @click="dictRef!.openModal('add')">
             <template #icon>
               <icon-park-outline-add-one />
             </template>
@@ -149,13 +158,16 @@ function deleteDict(id: number) {
             </NButton>
           </NFlex>
         </template>
-        <n-data-table :columns="dictColumns" :data="dictData" :loading="dictLoading" :pagination="false" :bordered="false" />
+        <n-data-table
+          :columns="dictColumns" :data="dictData" :loading="dictLoading" :pagination="false"
+          :bordered="false"
+        />
       </n-card>
     </div>
     <div class="flex-1">
       <n-card>
         <template #header>
-          <NButton type="primary">
+          <NButton type="primary" @click="dictContentRef!.openModal('add')">
             <template #icon>
               <icon-park-outline-add-one />
             </template>
@@ -164,7 +176,7 @@ function deleteDict(id: number) {
         </template>
         <template #header-extra>
           <NFlex>
-            <NButton type="primary" secondary @click="getDictContent(lastDictId)">
+            <NButton type="primary" secondary @click="getDictContent(lastDictCode)">
               <template #icon>
                 <icon-park-outline-refresh />
               </template>
@@ -172,11 +184,15 @@ function deleteDict(id: number) {
             </NButton>
           </NFlex>
         </template>
-        <n-data-table :columns="contentColumns" :data="dictContentData" :loading="contentLoading" :pagination="false" :bordered="false" />
+        <n-data-table
+          :columns="contentColumns" :data="dictContentData" :loading="contentLoading" :pagination="false"
+          :bordered="false"
+        />
       </n-card>
     </div>
 
-    <TableModal ref="modalRef" modal-name="字典" />
+    <DictModal ref="dictRef" modal-name="字典项" />
+    <DictContentModal ref="dictContentRef" modal-name="字典值" :dict-code="lastDictCode" />
   </NFlex>
 </template>