从服务器获取字典

src/common/useDict.js

@@ -0,0 +1,45 @@
+// src/common/useDict.js
+import { ref, toRefs } from 'vue'
+import { useDictStore } from '@/store/modules/dict'
+import { getDicts } from '@/api/system/dict/data'
+
+export function useDict(...args) {
+  const res = ref({})
+
+  args.forEach((dictType) => {
+    res.value[dictType] = []
+
+    // 先尝试从缓存获取
+    const dicts = useDictStore().getDictSync(dictType)
+    if (dicts && dicts.length > 0) {
+      res.value[dictType] = [...dicts] // 使用展开运算符确保响应式更新
+    } else {
+      // 缓存中没有，从服务器获取
+      getDicts(dictType).then(resp => {
+        console.log('API返回数据:', resp) // 添加调试信息
+
+        // 由于request.js的拦截器，resp直接就是数组
+        let dictData = []
+        if (resp && Array.isArray(resp)) {
+          dictData = resp.map(p => ({
+            label: p.dictLabel,
+            value: p.dictValue,
+            elTagType: p.listClass,
+            elTagClass: p.cssClass
+          }))
+        } else {
+          console.error('字典数据格式错误:', resp)
+        }
+
+        res.value[dictType] = dictData
+        useDictStore().setDict(dictType, dictData)
+        console.log("字典处理后", dictData)
+      }).catch(err => {
+        console.error('获取字典数据失败:', dictType, err)
+        res.value[dictType] = []
+      })
+    }
+  })
+  console.log("字典处理后", res.value)
+  return toRefs(res.value)
+}