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

src/components/Dict/DictLabel.vue

@@ -0,0 +1,63 @@
+<template>
+  <template v-if="tagType">
+    <el-tag :type="tagType" :size="tagSize">{{ label }}</el-tag>
+  </template>
+  <template v-else>
+    <span>{{ label }}</span>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useDictStore } from "@/store";
+const dictStore = useDictStore();
+
+const props = defineProps({
+  code: String,
+  modelValue: [String, Number],
+  size: {
+    type: String,
+    default: "default",
+  },
+});
+
+const label = ref("");
+const tagType = ref<
+  "success" | "warning" | "info" | "primary" | "danger" | undefined
+>();
+
+const tagSize = ref(props.size as "default" | "large" | "small");
+
+const getLabelAndTagByValue = async (dictCode: string, value: any) => {
+  // 先从本地缓存中获取字典数据
+  const dictData = dictStore.getDictionary(dictCode);
+
+  // 查找对应的字典项
+  const dictEntry = dictData.find((item: any) => item.value == value);
+  return {
+    label: dictEntry ? dictEntry.label : "",
+    tag: dictEntry ? dictEntry.tagType : undefined,
+  };
+};
+
+// 监听 props 的变化，获取并更新 label 和 tag
+const fetchLabelAndTag = async () => {
+  const result = await getLabelAndTagByValue(
+    props.code as string,
+    props.modelValue
+  );
+  label.value = result.label;
+  tagType.value = result.tag as
+    | "success"
+    | "warning"
+    | "info"
+    | "primary"
+    | "danger"
+    | undefined;
+};
+
+// 首次挂载时获取字典数据
+onMounted(fetchLabelAndTag);
+
+// 当 modelValue 发生变化时重新获取
+watch(() => props.modelValue, fetchLabelAndTag);
+</script>

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>