From 8e522f127f0c3fed102362d12171b72239531966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=82=E4=BB=8A?=
 <11555891+metabytes@user.noreply.gitee.com>
Date: Mon, 7 Apr 2025 10:19:33 +0000
Subject: [PATCH] =?UTF-8?q?update=20src/components/Dict/DictLabel.vue.=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E4=B8=AA=E5=AD=97=E5=85=B8=E5=80=BC?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E4=BE=8B=E5=A6=82=EF=BC=9A=E4=BC=A0?=
 =?UTF-8?q?=E5=85=A5=20modelValue=20=E6=98=AF=E4=B8=80=E4=B8=AA=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84=EF=BC=88['1',=20'2',=20'3']=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=A4=9A=E4=B8=AA=E6=A0=87=E7=AD=BE=EF=BC=88?=
 =?UTF-8?q?el-tag=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 如今 <11555891+metabytes@user.noreply.gitee.com>
---
 src/components/Dict/DictLabel.vue | 54 ++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/Dict/DictLabel.vue b/src/components/Dict/DictLabel.vue
index b68ee155..c0a2cfba 100644
--- a/src/components/Dict/DictLabel.vue
+++ b/src/components/Dict/DictLabel.vue
@@ -1,9 +1,18 @@
 <template>
-  <template v-if="tagType">
-    <el-tag :type="tagType" :size="tagSize">{{ label }}</el-tag>
+  <template v-if="Array.isArray(modelValue)">
+    <el-tag
+      v-for="(tag, index) in tagList"
+      :key="index"
+      :type="tag.tagType"
+      :size="tagSize"
+      class="me-1"
+    >
+      {{ tag.label }}
+    </el-tag>
   </template>
   <template v-else>
-    <span>{{ label }}</span>
+    <el-tag v-if="tagType" :type="tagType" :size="tagSize">{{ label }}</el-tag>
+    <span v-else>{{ label }}</span>
   </template>
 </template>
 <script setup lang="ts">
@@ -11,16 +20,20 @@ import { useDictStore } from "@/store";
 
 const props = defineProps({
   code: String, // 字典编码
-  modelValue: [String, Number], // 字典项的值
+  modelValue: [String, Number, Array], // 字典项的值
   size: {
     type: String,
     default: "default", // 标签大小
   },
 });
 const label = ref("");
-const tagType = ref<"success" | "warning" | "info" | "primary" | "danger" | undefined>(); // 标签类型
+type TagType = "success" | "info" | "warning" | "danger" | "primary";
+const tagType = ref<TagType | undefined>(undefined);
 const tagSize = ref<"default" | "large" | "small">(props.size as "default" | "large" | "small"); // 标签大小
 
+// 多个标签时使用
+const tagList = ref<Array<{ label: string; tagType?: TagType }>>([]);
+
 const dictStore = useDictStore();
 /**
  * 根据字典项的值获取对应的 label 和 tagType
@@ -36,24 +49,27 @@ const getLabelAndTagByValue = async (dictCode: string, value: any) => {
   // 查找对应的字典项
   const dictItem = dictItems.find((item) => item.value == value);
   return {
-    label: dictItem?.label || "",
-    tagType: dictItem?.tagType,
+    label: dictItem?.label || String(value),
+    tagType: dictItem?.tagType as TagType,
   };
 };
-/**
- * 更新 label 和 tagType
- */
+
 const updateLabelAndTag = async () => {
-  console.log("updateLabelAndTag", props.code, props.modelValue);
-  if (!props.code || props.modelValue === undefined) return;
-  const { label: newLabel, tagType: newTagType } = await getLabelAndTagByValue(
-    props.code,
-    props.modelValue
-  );
-  label.value = newLabel;
-  tagType.value = newTagType as typeof tagType.value;
-};
+  if (!props.code || props.modelValue === undefined || props.modelValue === null) return;
+
+  await dictStore.loadDictItems(props.code);
 
+  if (Array.isArray(props.modelValue)) {
+    const results = await Promise.all(
+      props.modelValue.map((val) => getLabelAndTagByValue(props.code!, val))
+    );
+    tagList.value = results;
+  } else {
+    const result = await getLabelAndTagByValue(props.code, props.modelValue);
+    label.value = result.label;
+    tagType.value = result.tagType as typeof tagType.value;
+  }
+};
 watch([() => props.code, () => props.modelValue], updateLabelAndTag);
 
 onMounted(updateLabelAndTag);
-- 
Gitee