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

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', {

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';