Merge branch 'main' of https://github.com/chansee97/nova-admin

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": "字典示例"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nova-admin",
   "type": "module",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "private": true,
   "description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.",
   "author": {

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')
+ *
-}
+ * @param code - 字典编码，用于筛选特定的字典列表
-
+ * @returns 返回的字典列表数据
-// 获取所有字典列表
+ */
-export function fetchDictContent(id: number) {
+export function fetchDictList(code?: string) {
-  const params = { id }
+  const params = { code }
-  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/contentById', { params })
+  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
+    isRoot?: 0 | 1
-    dictLabel?: string
+    code: string
-    dictValue?: number
+    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/DictModal.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import type { FormRules } from 'naive-ui'
 import { useBoolean } from '@/hooks'
 
 interface Props {
   modalName?: string
+  dictCode?: string
+  isRoot?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modalName: '',
+  isRoot: false,
 })
 
 const emit = defineEmits<{
@@ -19,8 +23,8 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
 const formDefault: Entity.Dict = {
-  dictLabel: '',
+  label: '',
-  dictValue: -1,
+  code: '',
 }
 const formModel = ref<Entity.Dict>({ ...formDefault })
 
@@ -35,13 +39,18 @@ 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()
   const handlers = {
     async add() {
       formModel.value = { ...formDefault }
+
+      formModel.value.isRoot = props.isRoot ? 1 : 0
+      if (props.dictCode) {
+        formModel.value.code = props.dictCode
+      }
     },
     async view() {
       if (!data)
@@ -95,16 +104,22 @@ async function submitModal() {
   await handlers[modalType.value]() && closeModal()
 }
 
-const rules = {
+const rules: FormRules = {
-  dictLabel: {
+  label: {
     required: true,
     message: '请输入字典名称',
-    trigger: 'blur',
+    trigger: ['input', 'blur'],
   },
-  dictValue: {
+  code: {
+    required: true,
+    message: '请输入字典码',
+    trigger: ['input', 'blur'],
+  },
+  value: {
     required: true,
     message: '请输入字典值',
-    trigger: 'blur',
+    type: 'number',
+    trigger: ['input', 'blur'],
   },
 }
 </script>
@@ -122,11 +137,14 @@ 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-form-item label="字典名称" path="label">
-        <n-input v-model:value="formModel.dictLabel" />
+        <n-input v-model:value="formModel.label" />
       </n-form-item>
-      <n-form-item label="字典值" path="dictValue">
+      <n-form-item label="字典码" path="code">
-        <n-input-number v-model:value="formModel.dictValue" />
+        <n-input v-model:value="formModel.code" :disabled="!isRoot" />
+      </n-form-item>
+      <n-form-item v-if="!isRoot" label="字典值" path="value">
+        <n-input-number v-model:value="formModel.value" :min="0" />
       </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 DictModal from './components/DictModal.vue'
-import { fetchDictContent, fetchDictList } from '@/service'
+import { fetchDictList } from '@/service'
 import { useBoolean } from '@/hooks'
+import { useDictStore } from '@/store'
+import CopyText from '@/components/custom/CopyText.vue'
 
 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 DictModal>>()
 
 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,27 @@ async function getDictList() {
   endDictLoading()
 }
 
-let lastDictId: number
+const lastDictCode = ref('')
-async function getDictContent(id: number) {
+async function getDictContent(code: string) {
   startContentLoading()
-  const { data, isSuccess } = await fetchDictContent(id)
+  dictContentData.value = await getDictByNet(code)
-  if (isSuccess) {
+  lastDictCode.value = code
-    lastDictId = id
-    dictContentData.value = data
-  }
   endContentLoading()
 }
 
 const dictColumns: DataTableColumns<Entity.Dict> = [
   {
-    title: '字典名称',
+    title: '字典项',
-    key: 'dictLabel',
+    key: 'label',
+  },
+  {
+    title: '字典码',
+    key: 'code',
+    render: (row) => {
+      return (
+        <CopyText value={row.code} />
+      )
+    },
   },
   {
     title: '操作',
@@ -51,13 +62,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 +77,7 @@ const dictColumns: DataTableColumns<Entity.Dict> = [
               default: () => (
                 <span>
                   确认删除字典
-                  <b>{row.dictLabel}</b>
+                  <b>{row.label}</b>
                   {' '}
                   ？
                 </span>
@@ -83,11 +94,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 +114,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 +123,7 @@ const contentColumns: DataTableColumns<Entity.Dict> = [
               default: () => (
                 <span>
                   确认删除字典值
-                  <b>{row.dictLabel}</b>
+                  <b>{row.label}</b>
                   {' '}
                   ？
                 </span>
@@ -129,10 +144,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 +164,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" :disabled="!lastDictCode" @click="dictContentRef!.openModal('add')">
             <template #icon>
               <icon-park-outline-add-one />
             </template>
@@ -164,7 +182,7 @@ function deleteDict(id: number) {
         </template>
         <template #header-extra>
           <NFlex>
-            <NButton type="primary" secondary @click="getDictContent(lastDictId)">
+            <NButton type="primary" :disabled="!lastDictCode" secondary @click="getDictContent(lastDictCode)">
               <template #icon>
                 <icon-park-outline-refresh />
               </template>
@@ -172,11 +190,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="字典项" is-root />
+    <DictModal ref="dictContentRef" modal-name="字典值" :dict-code="lastDictCode" />
   </NFlex>
 </template>