From 5fd62c26feb835152ed6aa2863cd055006c65d3c Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Mon, 28 Aug 2023 23:18:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E5=85=BC=E5=AE=B9=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E4=B8=8B=E6=8B=89=E6=95=B0=E6=8D=AE=E6=BA=90=E5=92=8C?=
 =?UTF-8?q?=E5=9B=9E=E6=98=BE=E5=80=BC=E7=B1=BB=E5=9E=8B=E4=B8=8D=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E5=9C=BA=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 9823b72487d02b4286249fd783a1bc836f1f3b5b
---
 src/components/Dictionary/index.vue | 52 ++++++++++++++++++-----------
 src/views/demo/dict.vue             |  4 +--
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/Dictionary/index.vue b/src/components/Dictionary/index.vue
index 855ad4e1..b2e01d0f 100644
--- a/src/components/Dictionary/index.vue
+++ b/src/components/Dictionary/index.vue
@@ -1,20 +1,18 @@
 <template>
-  <div>
-    <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>
-  </div>
+  <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">
@@ -29,8 +27,7 @@ const props = defineProps({
     required: true,
   },
   modelValue: {
-    type: String,
-    default: "",
+    type: [String, Number],
   },
   placeholder: {
     type: String,
@@ -46,9 +43,24 @@ const emits = defineEmits(["update:modelValue"]); // 父组件监听事件，同
 
 const options: Ref<OptionType[]> = ref([]); // 字典下拉数据源
 
-const selectedValue = computed(() => props.modelValue.toString()); // 将父组件的值统一转化String和下拉数据源进行比较，避免值的类型不一致导致回显失败
+const selectedValue = ref<string | number | undefined>();
 
-function handleChange(val?: string) {
+watch([options, () => props.modelValue], ([newOptions, newModelValue]) => {
+  if (newOptions.length === 0) return; // 下拉数据源加载未完成不回显
+  if (newModelValue == undefined) {
+    selectedValue.value = undefined;
+    return;
+  }
+  if (typeof newOptions[0].value === "number") {
+    selectedValue.value = Number(newModelValue);
+  } else if (typeof newOptions[0].value === "string") {
+    selectedValue.value = String(newModelValue);
+  } else {
+    selectedValue.value = newModelValue;
+  }
+});
+
+function handleChange(val?: string | number | undefined) {
   emits("update:modelValue", val);
 }
 
diff --git a/src/views/demo/dict.vue b/src/views/demo/dict.vue
index bcd594da..fcb6e060 100644
--- a/src/views/demo/dict.vue
+++ b/src/views/demo/dict.vue
@@ -1,7 +1,7 @@
 <!-- 字典组件示例 -->
 <script setup lang="ts">
 const stringValue = ref("1"); // 性别(值为String)
-const nmberValue = ref(1); // 性别(值为Number)
+const numberValue = ref(1); // 性别(值为Number)
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const nmberValue = ref(1); // 性别(值为Number)
       </el-form-item>
 
       <el-form-item label="性别">
-        <dictionary v-model="nmberValue" type-code="gender" />
+        <dictionary v-model="numberValue" type-code="gender" />
         <el-link :underline="false" type="success" class="ml-5"
           >值为Number: const value = ref(1);
         </el-link>