feat: 添加组件-表格多个字典值显示

apps/web-antd/src/components/dict-tag/dict-tag-group.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+// import { isHexColor } from '@/utils/color' // TODO @芋艿：【可优化】增加 cssClass 的处理 https://gitee.com/yudaocode/yudao-ui-admin-vben/blob/v2.4.1/src/components/DictTag/src/DictTag.vue#L60
+import { getDictObj } from '#/utils';
+
+interface DictTagGroupProps {
+  /**
+   * 字典类型
+   */
+  type: string;
+  /**
+   * 字典值
+   */
+  value: any[];
+  /**
+   * 图标
+   */
+  icon?: string;
+}
+
+const props = defineProps<DictTagGroupProps>();
+
+/** 获取字典标签 */
+const dictTag = computed(() => {
+  // 校验参数有效性
+  if (!props.type || props.value === undefined || props.value === null) {
+    return null;
+  }
+
+  const dictTagGroup: any[] = [];
+  props.value.forEach((value) => {
+    // 获取字典对象
+    const dict = getDictObj(props.type, String(value));
+    if (!dict) {
+      return null;
+    }
+
+    // 处理颜色类型
+    let colorType = dict.colorType;
+    switch (colorType) {
+      case 'danger': {
+        colorType = 'error';
+        break;
+      }
+      case 'info': {
+        colorType = 'default';
+        break;
+      }
+      case 'primary': {
+        colorType = 'processing';
+        break;
+      }
+      default: {
+        if (!colorType) {
+          colorType = 'default';
+        }
+      }
+    }
+    dictTagGroup.push({
+      label: dict.label || '',
+      colorType,
+    });
+  });
+
+  return dictTagGroup;
+});
+</script>
+
+<template>
+  <Tag v-for="(item, index) in dictTag" :color="item.colorType" :key="index">
+    {{ `${item.label} ` }}
+  </Tag>
+</template>

apps/web-antd/src/components/dict-tag/index.ts

@@ -1 +1,2 @@
+export { default as DictTagGroup } from './dict-tag-group.vue';
 export { default as DictTag } from './dict-tag.vue';