feat(projects): 新增group-tag组件，待办任务查看功能

src/components/custom/group-tag.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NPopover, NSpace, NTag } from 'naive-ui';
+
+interface Props {
+  value: string | any[];
+  type?: NaiveUI.ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  size: 'small',
+  placeholder: '无'
+});
+
+// 统一解析 value 成数组
+const tags = computed(() => {
+  if (!props.value) return [];
+  return Array.isArray(props.value) ? props.value : props.value.split(',');
+});
+</script>
+
+<template>
+  <template v-if="tags.length === 0">
+    <NTag :size="size">
+      {{ placeholder }}
+    </NTag>
+  </template>
+
+  <template v-else-if="tags.length === 1">
+    <NTag :type="type" :size="size">
+      {{ tags[0] }}
+    </NTag>
+  </template>
+
+  <template v-else>
+    <NPopover trigger="hover" placement="bottom">
+      <template #trigger>
+        <NTag :type="type" :size="size" class="cursor-pointer">{{ tags[0] }}...({{ tags.length }})</NTag>
+      </template>
+      <NSpace vertical size="small">
+        <NTag v-for="tag in tags" :key="tag" :type="type" :size="size">
+          {{ tag }}
+        </NTag>
+      </NSpace>
+    </NPopover>
+  </template>
+</template>

src/components/custom/workflow/approval-info-panel.vue

@@ -7,6 +7,7 @@ import { fetchGetOssListByIds } from '@/service/api/system/oss';
 import { useDict } from '@/hooks/business/dict';
 import { useDownload } from '@/hooks/business/download';
 import DictTag from '@/components/custom/dict-tag.vue';
+import GroupTag from '@/components/custom/group-tag.vue';
 
 defineOptions({
   name: 'ApprovalInfoPanel'
@@ -38,37 +39,7 @@ const columns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
     align: 'center',
     width: 100,
     render: row => {
-      if (!row.approveName) return null;
-
-      const approveNames = row.approveName.split(',');
-
-      if (approveNames.length <= 1) {
-        return (
-          <NTag size="small" type="info">
-            {row.approveName}
-          </NTag>
-        );
-      }
-      return (
-        <NPopover trigger="hover" placement="bottom">
-          {{
-            trigger: () => (
-              <NTag size="small" type="info" class="cursor-pointer">
-                {approveNames[0]}...({approveNames.length})
-              </NTag>
-            ),
-            default: () => (
-              <NSpace vertical size="small">
-                {approveNames.map(name => (
-                  <NTag key={name} size="small" type="info">
-                    {name}
-                  </NTag>
-                ))}
-              </NSpace>
-            )
-          }}
-        </NPopover>
-      );
+      return <GroupTag value={row.approveName} />;
     }
   },
   {