From 68ec32eedffb67fffc5e3edf647f1bfe0eb5a1a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=96=AA=E5=90=8D?= <942005050@qq.com>
Date: Wed, 22 Nov 2023 13:45:19 +0800
Subject: [PATCH] =?UTF-8?q?table=E4=B8=8B=E6=8B=89=E6=A1=86=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E5=9B=9E=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 83 +++++++++++++++++++-------
 1 file changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index db37f7140..b4d096efb 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -18,16 +18,34 @@ export default defineComponent({
   },
   setup(props) {
     const dictData = ref<DictDataType>()
+    let dictDataList:any[] = []
     const getDictObj = (dictType: string, value: string) => {
-      const dictOptions = getDictOptions(dictType)
-      dictOptions.forEach((dict: DictDataType) => {
-        if (dict.value === value) {
-          if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
-            dict.colorType = ''
+      // 判断 是否多个回显标签
+      if (value.indexOf(',') == -1) {
+        const dictOptions = getDictOptions(dictType)
+        dictOptions.forEach((dict: DictDataType) => {
+          if (dict.value === value) {
+            if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+              dict.colorType = ''
+            }
+            dictData.value = dict
           }
-          dictData.value = dict
-        }
-      })
+        })
+      } else {
+        dictDataList = []
+        value.split(',').forEach(item => {
+          const dictOptions = getDictOptions(dictType)
+          dictOptions.forEach((dict: DictDataType) => {
+            if (dict.value === item) {
+              if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+                dict.colorType = ''
+              }
+              dictData.value = dict
+              dictDataList.push(dictData.value)
+            }
+          })
+        })
+      }
     }
     const rederDictTag = () => {
       if (!props.type) {
@@ -39,20 +57,41 @@ export default defineComponent({
       }
       getDictObj(props.type, props.value.toString())
       // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
-      return (
-        <ElTag
-          style={dictData.value?.cssClass ? 'color: #fff' : ''}
-          type={dictData.value?.colorType}
-          color={
-            dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
-              ? dictData.value?.cssClass
-              : ''
-          }
-          disableTransitions={true}
-        >
-          {dictData.value?.label}
-        </ElTag>
-      )
+      // 根据 dictDataList 进行区分 是否多个
+      if (!dictDataList) {
+        return (
+          <ElTag
+            style={dictData.value?.cssClass ? 'color: #fff' : ''}
+            type={dictData.value?.colorType}
+            color={
+              dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
+                ? dictData.value?.cssClass
+                : ''
+            }
+            disableTransitions={true}
+          >
+            {dictData.value?.label}
+          </ElTag>
+        )
+      } else {
+        return (
+          dictDataList.map(item => {
+            return <ElTag
+                    style={item?.cssClass ? 'color: #fff' : ''}
+                    type={item?.colorType}
+                    color={
+                      item?.cssClass && isHexColor(item?.cssClass)
+                        ? item?.cssClass
+                        : ''
+                    }
+                    disableTransitions={true}
+                  >
+                    {item?.label}
+                  </ElTag>
+          })
+        )
+      }
+      
     }
     return () => rederDictTag()
   }