refactor: ♻️ 字典加载调整为登陆后缓存作为数据源

2024-10-18 21:54:49 +08:00
parent 42150877a3
commit f0e045599b
8 changed files with 386 additions and 195 deletions
--- a/src/components/Dictionary/DictLabel.vue
+++ b/src/components/Dictionary/DictLabel.vue
@@ -8,9 +8,8 @@
 </template>

 <script setup lang="ts">
-import DictDataAPI from "@/api/dict-data";
-import Cache from "@/utils/cache";
-import requestCache from "@/utils/requestCache"; // 导入共享的缓存
+import { useDictStore } from "@/store";
+const dictStore = useDictStore();

 const props = defineProps({
  code: String,
@@ -28,40 +27,15 @@ const tagType = ref<

 const tagSize = ref(props.size as "default" | "large" | "small");

-const dictCache = new Cache("dict_");
-
 const getLabelAndTagByValue = async (dictCode: string, value: any) => {
  // 先从本地缓存中获取字典数据
-  let dictData = dictCache.getCache(dictCode);
-
-  // 如果本地缓存没有数据，则检查是否已经发起请求
-  if (!dictData) {
-    if (!requestCache.has(dictCode)) {
-      // 发起请求并存入请求缓存，确保后续请求能复用此 Promise
-      const requestPromise = DictDataAPI.getOptions(dictCode)
-        .then((data) => {
-          dictCache.setCache(dictCode, data, 3 * 60 * 1000); // 缓存 3 分钟
-          requestCache.delete(dictCode); // 请求完成后删除请求缓存
-          return data;
-        })
-        .catch((error) => {
-          requestCache.delete(dictCode); // 出错时也要删除缓存
-          throw error;
-        });
-
-      // 将当前请求存入请求缓存
-      requestCache.set(dictCode, requestPromise);
-    }
-
-    // 等待请求完成并获取数据
-    dictData = await requestCache.get(dictCode);
-  }
+  const dictData = dictStore.getDictionary(dictCode);

  // 查找对应的字典项
  const dictEntry = dictData.find((item: any) => item.value == value);
  return {
    label: dictEntry ? dictEntry.label : "",
-    tag: dictEntry ? dictEntry.tag : undefined,
+    tag: dictEntry ? dictEntry.tagType : undefined,
  };
 };

@@ -72,7 +46,13 @@ const fetchLabelAndTag = async () => {
    props.modelValue
  );
  label.value = result.label;
-  tagType.value = result.tag;
+  tagType.value = result.tag as
+    | "success"
+    | "warning"
+    | "info"
+    | "primary"
+    | "danger"
+    | undefined;
 };

 // 首次挂载时获取字典数据
--- a/src/components/Dict/index.vue
+++ b/src/components/Dict/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-select
+    v-if="type === 'select'"
+    v-model="selectedValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    clearable
+    :style="style"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    />
+  </el-select>
+
+  <el-radio-group
+    v-else-if="type === 'radio'"
+    v-model="selectedValue"
+    :disabled="disabled"
+    :style="style"
+    @change="handleChange"
+  >
+    <el-radio
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    >
+      {{ option.label }}
+    </el-radio>
+  </el-radio-group>
+
+  <el-checkbox-group
+    v-else-if="type === 'checkbox'"
+    v-model="selectedValue"
+    :disabled="disabled"
+    :style="style"
+    @change="handleChange"
+  >
+    <el-checkbox
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    >
+      {{ option.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeMount } from "vue";
+import { useDictStore } from "@/store";
+
+const dictStore = useDictStore();
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Array],
+    required: false,
+  },
+  type: {
+    type: String,
+    default: "select",
+    validator: (value: string) =>
+      ["select", "radio", "checkbox"].includes(value),
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  style: {
+    type: Object,
+    default: () => {
+      return {
+        width: "300px",
+      };
+    },
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const options = ref<Array<{ label: string; value: string | number }>>([]);
+
+const selectedValue = ref<any>(
+  typeof props.modelValue === "string" || typeof props.modelValue === "number"
+    ? props.modelValue
+    : Array.isArray(props.modelValue)
+      ? props.modelValue
+      : undefined
+);
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (props.type === "checkbox") {
+      selectedValue.value = Array.isArray(newValue) ? newValue : [];
+    } else {
+      selectedValue.value = newValue;
+    }
+  }
+);
+
+// 监听 selectedValue 的变化并触发 update:modelValue
+function handleChange(val: any) {
+  emit("update:modelValue", val);
+}
+
+// 获取字典数据
+onBeforeMount(async () => {
+  options.value = await dictStore.getDictionary(props.code);
+
+  if (props.modelValue !== undefined) {
+    if (props.type === "checkbox") {
+      selectedValue.value = Array.isArray(props.modelValue)
+        ? props.modelValue
+        : [];
+    } else {
+      selectedValue.value = props.modelValue;
+    }
+  }
+});
+</script>
--- a/src/components/Dictionary/index.vue
+++ b/src/components/Dictionary/index.vue
@@ -1,78 +0,0 @@
-<template>
-  <el-select
-    v-model="selectedValue"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    clearable
-    @change="handleChange"
-  >
-    <el-option
-      v-for="option in options"
-      :key="option.value"
-      :label="option.label"
-      :value="option.value"
-    />
-  </el-select>
-</template>
-
-<script setup lang="ts">
-import DictDataAPI from "@/api/dict-data";
-
-const props = defineProps({
-  code: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: [String, Number],
-    required: false,
-  },
-  placeholder: {
-    type: String,
-    default: "请选择",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-// 使用 defineEmits 声明 emits
-const emit = defineEmits(["update:modelValue"]);
-
-// 下拉框选项
-const options = ref<Array<{ label: string; value: string | number }>>([]);
-const selectedValue = ref<string | number | undefined>(props.modelValue);
-
-// 监听 modelValue 变化
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    // 类型转换确保 selectedValue 和 option.value 类型一致
-    if (typeof options.value[0]?.value === "number") {
-      selectedValue.value = Number(newValue);
-    } else {
-      selectedValue.value = String(newValue);
-    }
-  }
-);
-
-// 监听 selectedValue 的变化并触发 update:modelValue
-function handleChange(val?: string | number) {
-  emit("update:modelValue", val);
-}
-
-// 获取字典数据
-onBeforeMount(async () => {
-  const data = await DictDataAPI.getOptions(props.code);
-  options.value = data;
-  // 初次加载时处理类型一致性
-  if (props.modelValue !== undefined) {
-    if (typeof options.value[0]?.value === "number") {
-      selectedValue.value = Number(props.modelValue);
-    } else {
-      selectedValue.value = String(props.modelValue);
-    }
-  }
-});
-</script>