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/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>