From ae542e33fd8dd21f0bd53e4544b8a743e0f12aea Mon Sep 17 00:00:00 2001
From: caiyuchao <caiyuchao@agrandtech.com>
Date: Thu, 3 Jul 2025 17:31:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=84=E4=BB=B6-?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=A4=9A=E4=B8=AA=E5=AD=97=E5=85=B8=E5=80=BC?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/adapter/vxe-table.ts        | 18 ++++-
 .../components/dict-tag/dict-tag-group.vue    | 76 +++++++++++++++++++
 .../web-antd/src/components/dict-tag/index.ts |  1 +
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 apps/web-antd/src/components/dict-tag/dict-tag-group.vue

diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 1903e1c..d06b2f6 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -13,7 +13,7 @@ import { isFunction, isString } from '@vben/utils';
 
 import { Button, Image, Popconfirm, Switch } from 'ant-design-vue';
 
-import { DictTag } from '#/components/dict-tag';
+import { DictTag, DictTagGroup } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
@@ -102,6 +102,22 @@ setupVbenVxeTable({
       },
     });
 
+    // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} },
+    vxeUI.renderer.add('CellDictGroup', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        if (!props) {
+          return '';
+        }
+        // 使用 DictTag 组件替代原来的实现
+        return h(DictTagGroup, {
+          type: props.type,
+          value: row[column.field],
+        });
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellSwitch', props: { beforeChange: () => {} } },
     // add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L97-L123
     vxeUI.renderer.add('CellSwitch', {
diff --git a/apps/web-antd/src/components/dict-tag/dict-tag-group.vue b/apps/web-antd/src/components/dict-tag/dict-tag-group.vue
new file mode 100644
index 0000000..a8fc370
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/components/dict-tag/index.ts b/apps/web-antd/src/components/dict-tag/index.ts
index 881265a..9f69453 100644
--- a/apps/web-antd/src/components/dict-tag/index.ts
+++ b/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';