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;
+      return <GroupTag value={row.approveName} />;
-
-      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>
-      );
     }
   },
   {

src/typings/components.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     FlowPreview: typeof import('./../components/custom/workflow/flow-preview.vue')['default']
     FormTip: typeof import('./../components/custom/form-tip.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
+    GroupTag: typeof import('./../components/custom/group-tag.vue')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
@@ -59,6 +60,7 @@ declare module 'vue' {
     'IconQuill:expand': typeof import('~icons/quill/expand')['default']
     'IconSimpleIcons:gitee': typeof import('~icons/simple-icons/gitee')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
+    InfoTag: typeof import('./../components/custom/info-tag.vue')['default']
     JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LeaveEdit: typeof import('./../components/custom/workflow/leave-edit/index.vue')['default']

src/views/workflow/task/all-task-waiting/index.vue

@@ -1,12 +1,15 @@
 <script setup lang="tsx">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, shallowRef, watch } from 'vue';
 import { NButton, NDivider, NEmpty, NInput, NRadioButton, NRadioGroup, NTag } from 'naive-ui';
-import { useLoading } from '@sa/hooks';
+import { useBoolean, useLoading } from '@sa/hooks';
 import { fetchGetAllFinishedTask, fetchGetAllWaitingTask } from '@/service/api/workflow/task';
 import { fetchGetCategoryTree } from '@/service/api/workflow/category';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { useDict } from '@/hooks/business/dict';
+import { loadDynamicComponent } from '@/utils/common';
+import GroupTag from '@/components/custom/group-tag.vue';
+import DictTag from '@/components/custom/dict-tag.vue';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import { $t } from '@/locales';
 import AllTaskWaitingSearch from './modules/all-task-waiting-search.vue';
@@ -24,7 +27,11 @@ defineOptions({
 });
 
 useDict('wf_business_status');
+useDict('wf_task_status');
 const appStore = useAppStore();
+const { bool: viewVisible, setTrue: showViewDrawer } = useBoolean(false);
+
+const dynamicComponent = shallowRef();
 
 const waitingStatus = ref<boolean>(true);
 const waitingStatusOptions = ref<WaitingStatusOption[]>([
@@ -32,13 +39,17 @@ const waitingStatusOptions = ref<WaitingStatusOption[]>([
   { label: '已办任务', value: false }
 ]);
 
-// Common column definitions to reduce duplication
-// Explicitly type as TableColumn<TaskOrHisTask> to ensure compatibility with both types
 const commonColumns: NaiveUI.TableColumn<TaskOrHisTask>[] = [
   { type: 'selection', align: 'center', width: 50 },
   { key: 'flowName', title: '流程定义名称', align: 'center', width: 120 },
   { key: 'flowCode', title: '流程定义编码', align: 'center', width: 120 },
-  { key: 'categoryName', title: '流程分类', align: 'center', width: 120 },
+  {
+    key: 'categoryName',
+    title: '流程分类',
+    align: 'center',
+    width: 120,
+    render: row => <NTag>{row.categoryName}</NTag>
+  },
   {
     key: 'version',
     title: '版本号',
@@ -48,35 +59,56 @@ const commonColumns: NaiveUI.TableColumn<TaskOrHisTask>[] = [
   },
   { key: 'nodeName', title: '任务名称', align: 'center', width: 120 },
   { key: 'createByName', title: '申请人', align: 'center', width: 120 },
-  { key: 'flowStatus', title: '流程状态', align: 'center', width: 120 }
+  {
+    key: 'flowStatus',
+    title: '流程状态',
+    align: 'center',
+    width: 120,
+    render: row => <DictTag size="small" value={row.flowStatus} dict-code="wf_business_status" />
+  }
 ];
 
-// Waiting task specific columns
 const waitingColumns = ref<NaiveUI.TableColumn<Api.Workflow.Task>[]>([
   ...(commonColumns as NaiveUI.TableColumn<Api.Workflow.Task>[]),
-  { key: 'assigneeNames', title: '办理人', align: 'center', width: 120 },
+  {
+    key: 'assigneeNames',
+    title: '办理人',
+    align: 'center',
+    width: 120,
+    render: row => <GroupTag value={row.assigneeNames} />
+  },
   { key: 'createTime', title: '创建时间', align: 'center', width: 120 }
 ]);
 
-// Finished task specific columns
 const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
   ...(commonColumns as NaiveUI.TableColumn<Api.Workflow.HisTask>[]),
   { key: 'approveName', title: '办理人', align: 'center', width: 120 },
-  { key: 'flowTaskStatus', title: '任务状态', align: 'center', width: 120 },
+  {
+    key: 'flowTaskStatus',
+    title: '任务状态',
+    align: 'center',
+    width: 120,
+    render: row => <DictTag size="small" value={row.flowTaskStatus} dict-code="wf_task_status" />
+  },
   { key: 'createTime', title: '创建时间', align: 'center', width: 120 }
 ]);
 
-// Operation column with optimized render function
 const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
   {
     key: 'operate',
     title: $t('common.operate'),
     align: 'center',
     fixed: 'right',
-    width: 120,
+    width: 100,
-    render: () => {
+    render: row => {
       const buttons = [
-        <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="查看" />
+        <ButtonIcon
+          text
+          type="info"
+          icon="material-symbols:visibility-outline"
+          tooltipContent="查看"
+          onClick={() => handleView(row)}
+        />
       ];
 
       if (waitingStatus.value) {
@@ -131,7 +163,6 @@ watch(waitingStatus, async () => {
   reloadColumns();
 });
 
-// Category tree handling
 const { loading: treeLoading, startLoading: startTreeLoading, endLoading: endTreeLoading } = useLoading();
 const categoryPattern = ref<string>();
 const categoryData = ref<Api.Common.CommonTreeRecord>([]);
@@ -149,6 +180,8 @@ async function getTreeData() {
   endTreeLoading();
 }
 
+getTreeData();
+
 function handleClickTree(keys: string[]) {
   searchParams.category = keys.length ? keys[0] : null;
   checkedRowKeys.value = [];
@@ -164,8 +197,17 @@ function handleResetSearch() {
   resetSearchParams();
   selectedKeys.value = [];
 }
+const modules = import.meta.glob('@/components/custom/workflow/**/*.vue');
+const businessId = ref<CommonType.IdType>();
 
-getTreeData();
+async function handleView(row: TaskOrHisTask) {
+  businessId.value = row.businessId;
+  const formPath = row.formPath;
+  if (formPath) {
+    dynamicComponent.value = await loadDynamicComponent(modules, formPath);
+    showViewDrawer();
+  }
+}
 </script>
 
 <template>
@@ -243,6 +285,7 @@ getTreeData();
           class="sm:h-full"
         />
       </NCard>
+      <component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
     </div>
   </TableSiderLayout>
 </template>