feat: move dict to utils

src/store/dict.ts

@@ -1,47 +0,0 @@
-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,7 +5,6 @@ export * from './app/index'
 export * from './auth'
 export * from './router'
 export * from './tab'
-export * from './dict'
 
 // 安装pinia全局状态库
 export function installPinia(app: App) {

src/typings/global.d.ts

@@ -30,7 +30,7 @@ declare namespace NaiveUI {
 
 declare namespace Storage {
   interface Session {
-    demoKey: string
+    dict: DictMap
   }
 
   interface Local {
@@ -50,3 +50,7 @@ declare namespace Storage {
 declare namespace App {
   type lang = 'zhCN' | 'enUS'
 }
+
+interface DictMap {
+  [key: string]: Entity.Dict[]
+}

src/utils/array.ts

@@ -1,20 +1,37 @@
+/**
+ * 将给定的数组转换为树形结构。
+ * @param arr - 原始数组，其中每个元素包含id和pid属性，pid表示父级id。
+ * @returns 返回转换后的树形结构数组。
+ */
 export function arrayToTree(arr: any[]) {
+  // 初始化结果数组
   const res: any = []
+  // 使用Map存储数组元素，以id为键，元素本身为值
   const map = new Map()
+
+  // 遍历数组，将每个元素以id为键存储到Map中
   arr.forEach((item) => {
     map.set(item.id, item)
   })
+
+  // 再次遍历数组，根据pid将元素组织成树形结构
   arr.forEach((item) => {
+    // 获取当前元素的父级元素
     const parent = item.pid && map.get(item.pid)
+    // 如果有父级元素
     if (parent) {
+      // 如果父级元素已有子元素，则将当前元素追加到子元素数组中
       if (parent?.children)
         parent.children.push(item)
+      // 如果父级元素没有子元素，则创建子元素数组，并将当前元素作为第一个元素
       else
         parent.children = [item]
     }
+    // 如果没有父级元素，则将当前元素直接添加到结果数组中
     else {
       res.push(item)
     }
   })
+  // 返回组织好的树形结构数组
   return res
 }

src/utils/dict.ts

@@ -0,0 +1,67 @@
+import { fetchDictList } from '@/service'
+import { session } from '@/utils'
+
+export const dictMap: DictMap = {}
+
+/**
+ * 获取与给定代码对应的字典对象
+ *
+ * @param code - 字典编码
+ * @return 包含字典列表、值映射字典和标签映射字典的对象
+ */
+export async function dict(code: string) {
+  const targetDict = await getDict(code)
+
+  return {
+    data: () => targetDict,
+    enum: () => Object.fromEntries(targetDict.map(({ value, label }) => [value, label])),
+    valueMap: () => Object.fromEntries(targetDict.map(({ value, ...data }) => [value, data])),
+    labelMap: () => Object.fromEntries(targetDict.map(({ label, ...data }) => [label, data])),
+  }
+}
+
+/**
+ * 根据字典编码获取字典数据
+ * 如果本地有缓存，则返回缓存数据，否则通过网络请求获取数据
+ *
+ * @param code - 字典编码
+ * @return 字典数据
+ */
+export async function getDict(code: string) {
+  const isExist = Reflect.has(dictMap, code)
+
+  if (isExist) {
+    return dictMap[code]
+  }
+  else {
+    return await getDictByNet(code)
+  }
+}
+
+/**
+ * 通过网络请求获取字典数据
+ *
+ * @param code - 字典编码
+ * @return 字典数据
+ */
+export async function getDictByNet(code: string) {
+  const { data, isSuccess } = await fetchDictList(code)
+  if (isSuccess) {
+    Reflect.set(dictMap, code, data)
+    // 同步至session
+    session.set('dict', dictMap)
+    return data
+  }
+  else {
+    throw new Error(`Failed to get ${code} dictionary from network, check ${code} field or network`)
+  }
+}
+
+function initDict() {
+  const dict = session.get('dict')
+  if (dict) {
+    Object.assign(dictMap, dict)
+  }
+}
+
+initDict()

src/views/demo/dict/index.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useDictStore } from '@/store'
 import { fetchDictList } from '@/service'
-
+import { dict } from '@/utils/dict'
-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) {
@@ -22,7 +21,7 @@ async function getAlldict() {
 function changeSelect(v: string) {
   dict(v).then((data) => {
     currentDict.value = data
-    subOptions.value = data.list()
+    subOptions.value = data.data()
   })
 }
 
@@ -32,23 +31,37 @@ onMounted(() => {
 
 const data = ref()
 async function getDict() {
-  data.value = currentDict.value.list()
+  data.value = currentDict.value.data()
+}
+
+async function getEnum() {
+  data.value = currentDict.value.enum()
 }
 
 async function getValueMap() {
-  data.value = currentDict.value.mapByValue()
+  data.value = currentDict.value.valueMap()
 }
+
 async function getLabelMap() {
-  data.value = currentDict.value.mapByLabel()
+  data.value = currentDict.value.labelMap()
 }
 
 const dictValue = ref()
 
 const dictLabel = computed(() => {
-  if (data.value && dictValue.value) {
+  if (data.value && data.value[dictValue.value]) {
     return data.value[dictValue.value].label
   }
-  return ''
+  return '--'
+})
+
+const enumValue = ref()
+
+const enumLabel = computed(() => {
+  if (data.value && data.value[enumValue.value]) {
+    return data.value[enumValue.value]
+  }
+  return '--'
 })
 </script>
 
@@ -64,6 +77,9 @@ const dictLabel = computed(() => {
         <n-button @click="getDict">
           获取当前字典数据
         </n-button>
+        <n-button @click="getEnum">
+          获取当前字典枚举
+        </n-button>
         <n-button @click="getValueMap">
           获取当前字典ValueMap
         </n-button>
@@ -77,9 +93,15 @@ const dictLabel = computed(() => {
         </pre>
 
       <n-flex align="center">
-        <n-input-number v-model:value="dictValue" />
+        <n-input-number v-model:value="dictValue" :min="0" />
-        <n-text v-if="data && dictValue" type="info">
+        <n-text type="info">
-          回显结果 {{ dictLabel }}
+          Map回显结果 {{ dictLabel }}
+        </n-text>
+      </n-flex>
+      <n-flex align="center">
+        <n-input-number v-model:value="enumValue" :min="0" />
+        <n-text type="info">
+          Enum回显结果 {{ enumLabel }}
         </n-text>
       </n-flex>
     </n-flex>