From 251a98df5cab434aa1bca1f156a56c7fe3641075 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Fri, 26 Jul 2024 10:32:13 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20DictTag=E7=BB=84=E4=BB=B6=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E4=BC=A0=E5=85=A5=E5=A4=9A=E4=B8=AA=E5=AD=97=E5=85=B8?=
 =?UTF-8?q?=E5=80=BC=E5=B1=95=E7=A4=BA=E5=A4=9A=E4=B8=AA=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 69 +++++++++++++++-----------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index db37f7140..8d6b4a0bd 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -1,8 +1,9 @@
 <script lang="tsx">
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 import { isHexColor } from '@/utils/color'
 import { ElTag } from 'element-plus'
 import { DictDataType, getDictOptions } from '@/utils/dict'
+import { isArray, isString, isNumber } from '@/utils/is'
 
 export default defineComponent({
   name: 'DictTag',
@@ -12,46 +13,56 @@ export default defineComponent({
       required: true
     },
     value: {
-      type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      type: [String, Number, Boolean, Array],
       required: true
     }
   },
   setup(props) {
-    const dictData = ref<DictDataType>()
-    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 = ''
-          }
-          dictData.value = dict
-        }
-      })
-    }
+    const valueArr: any = computed(() => {
+      // 1.是Number类型的情况
+      if (isNumber(props.value)) {
+        return [String(props.value)]
+      }
+      // 2.是字符串（进一步判断是否有','）
+      else if (isString(props.value)) {
+        return props.value.includes(',') ? props.value.split(',') : [String(props.value)]
+      }
+      // 3.数组
+      else if (isArray(props.value)) {
+        return props.value.map(String)
+      }
+    })
     const rederDictTag = () => {
       if (!props.type) {
         return null
       }
       // 解决自定义字典标签值为零时标签不渲染的问题
-      if (props.value === undefined || props.value === null) {
+      if (props.value === undefined || props.value === null || props.value === '') {
         return null
       }
-      getDictObj(props.type, props.value.toString())
-      // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+      const dictOptions = getDictOptions(props.type)
+
       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>
+        <div class="dict-tag">
+          {dictOptions.map((dict: DictDataType) => {
+            if (valueArr.value.includes(dict.value)) {
+              if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
+                dict.colorType = ''
+              }
+              return (
+                // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+                <ElTag
+                  style={dict?.cssClass ? 'color: #fff' : ''}
+                  type={dict?.colorType}
+                  color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
+                  disableTransitions={true}
+                >
+                  {dict?.label}
+                </ElTag>
+              )
+            }
+          })}
+        </div>
       )
     }
     return () => rederDictTag()

From c015b2e881821803545c73e4367a37901a55eaf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Fri, 26 Jul 2024 11:12:43 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dvue/return-in-comp?=
 =?UTF-8?q?uted-property=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index 8d6b4a0bd..faa5b926e 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -31,6 +31,7 @@ export default defineComponent({
       else if (isArray(props.value)) {
         return props.value.map(String)
       }
+      return []
     })
     const rederDictTag = () => {
       if (!props.type) {

From 6edd64f13bf8896f1eb5bd24a8f40f9277ad08b3 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sun, 4 Aug 2024 02:05:16 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20DictTag=E7=BB=84=E4=BB=B6=E5=8A=A0?=
 =?UTF-8?q?=E5=AD=97=E7=AC=A6=E4=B8=B2=E5=88=86=E9=9A=94=E7=AC=A6props?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E7=81=B5=E6=B4=BB=E5=AE=9A=E4=B9=89split?=
 =?UTF-8?q?=E5=AD=97=E7=AC=A6=E4=B8=B2=E7=9A=84=E5=88=86=E9=9A=94=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index faa5b926e..93e150534 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -15,6 +15,11 @@ export default defineComponent({
     value: {
       type: [String, Number, Boolean, Array],
       required: true
+    },
+    // 字符串分隔符 只有当 props.value 传入值为字符串时有效
+    sepSymbol: {
+      type: String as PropType<string>,
+      default: ','
     }
   },
   setup(props) {
@@ -23,9 +28,9 @@ export default defineComponent({
       if (isNumber(props.value)) {
         return [String(props.value)]
       }
-      // 2.是字符串（进一步判断是否有','）
+      // 2.是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
       else if (isString(props.value)) {
-        return props.value.includes(',') ? props.value.split(',') : [String(props.value)]
+        return props.value.split(props.sepSymbol)
       }
       // 3.数组
       else if (isArray(props.value)) {

From b5eb9e73a7bbd2875961e4dc5972442e6b32a7b3 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sun, 4 Aug 2024 12:14:01 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20DictTag=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0props=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=AF=8F=E4=B8=AAtag=E4=B9=8B=E9=97=B4=E7=9A=84=E9=97=B4?=
 =?UTF-8?q?=E9=9A=94=EF=BC=8C=E9=BB=98=E8=AE=A4=E4=B8=BA5px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index 93e150534..b82b97c35 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -20,6 +20,11 @@ export default defineComponent({
     sepSymbol: {
       type: String as PropType<string>,
       default: ','
+    },
+    // 每个tag之间的间隔，默认为5px
+    tagSpacing: {
+      type: String as PropType<string>,
+      default: '5px'
     }
   },
   setup(props) {
@@ -49,7 +54,15 @@ export default defineComponent({
       const dictOptions = getDictOptions(props.type)
 
       return (
-        <div class="dict-tag">
+        <div
+          class="dict-tag"
+          style={{
+            display: 'flex',
+            gap: props.tagSpacing,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+        >
           {dictOptions.map((dict: DictDataType) => {
             if (valueArr.value.includes(dict.value)) {
               if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {