update 优化 工作流页面 封装办理人展示组件 支持展示三行 超过三行隐藏 鼠标悬停展示

src/components/Process/UserNameDisplay.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-tooltip :disabled="!displayText" :content="displayText || emptyText" effect="dark" placement="top-start">
+    <div class="user-name-display" :style="{ '--user-name-max-lines': maxLines }">
+      {{ displayText || emptyText }}
+    </div>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    content?: string | null;
+    emptyText?: string;
+    maxLines?: number;
+  }>(),
+  {
+    content: '',
+    emptyText: '无',
+    maxLines: 3
+  }
+);
+
+const displayText = computed(() =>
+  props.content
+    ?.split(',')
+    .map(item => item.trim())
+    .filter(Boolean)
+    .join('、') ?? ''
+);
+</script>
+
+<style lang="scss" scoped>
+.user-name-display {
+  display: -webkit-box;
+  overflow: hidden;
+  width: 100%;
+  line-height: 20px;
+  max-height: calc(20px * var(--user-name-max-lines));
+  white-space: normal;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--user-name-max-lines);
+}
+</style>

src/components/Process/approvalRecord.vue

@@ -17,14 +17,9 @@
             <el-table :data="historyList" style="width: 100%" border fit>
               <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
               <el-table-column prop="nodeName" label="任务名称" sortable align="center"></el-table-column>
-              <el-table-column prop="approveName" :show-overflow-tooltip="true" label="办理人" sortable align="center">
+              <el-table-column prop="approveName" label="办理人" sortable align="center" min-width="180">
                 <template #default="scope">
-                  <template v-if="scope.row.approveName">
-                    <el-tag v-for="(item, index) in scope.row.approveName.split(',')" :key="index" type="success">
-                      {{ item }}
-                    </el-tag>
-                  </template>
-                  <template v-else><el-tag type="success">无</el-tag></template>
+                  <UserNameDisplay :content="scope.row.approveName" />
                 </template>
               </el-table-column>
               <el-table-column prop="flowStatus" label="状态" width="80" sortable align="center">
@@ -101,6 +96,7 @@
 import { listByIds } from '@/api/system/oss';
 import { flowHisTaskList } from '@/api/workflow/instance';
 import FlowChart from '@/components/Process/flowChart.vue';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import download from '@/plugins/download';
 import { useDict } from '@/utils/dict';
 import { propTypes } from '@/utils/propTypes';

src/views/workflow/task/allTaskWaiting.vue

@@ -107,20 +107,13 @@
             :show-overflow-tooltip="true"
             label="申请人"
           ></el-table-column>
-          <el-table-column align="center" label="办理人">
+          <el-table-column align="center" label="办理人" min-width="180">
             <template #default="scope">
               <template v-if="tab === 'waiting'">
-                <template v-if="scope.row.assigneeNames">
-                  <el-tag v-for="(name, index) in scope.row.assigneeNames.split(',')" :key="index" type="success">
-                    {{ name }}
-                  </el-tag>
+                <UserNameDisplay :content="scope.row.assigneeNames" />
               </template>
               <template v-else>
-                  <el-tag type="success">无</el-tag>
-                </template>
-              </template>
-              <template v-else>
-                <el-tag type="success">{{ scope.row.approveName }}</el-tag>
+                <UserNameDisplay :content="scope.row.approveName" />
               </template>
             </template>
           </el-table-column>
@@ -184,6 +177,7 @@ import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 import messageType from '@/components/Process/MessageType.vue';
 import processMeddle from '@/components/Process/processMeddle.vue';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';

src/views/workflow/task/taskFinish.vue

@@ -80,11 +80,9 @@
           :show-overflow-tooltip="true"
           label="申请人"
         ></el-table-column>
-        <el-table-column align="center" prop="approverName" label="办理人">
+        <el-table-column align="center" prop="approverName" label="办理人" min-width="180">
           <template #default="scope">
-            <el-tag type="success">
-              {{ scope.row.approveName || '无' }}
-            </el-tag>
+            <UserNameDisplay :content="scope.row.approveName" />
           </template>
         </el-table-column>
         <el-table-column align="center" label="流程状态" prop="flowStatus" min-width="80">
@@ -135,6 +133,7 @@ import { pageByTaskFinish } from '@/api/workflow/task';
 import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
 import { useDict } from '@/utils/dict';
 

src/views/workflow/task/taskWaiting.vue

@@ -72,16 +72,9 @@
         <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
         <el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
         <el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
-        <el-table-column align="center" label="办理人">
+        <el-table-column align="center" label="办理人" min-width="180">
           <template #default="scope">
-            <template v-if="scope.row.assigneeNames">
-              <el-tag v-for="(name, index) in scope.row.assigneeNames.split(',')" :key="index" type="success">
-                {{ name }}
-              </el-tag>
-            </template>
-            <template v-else>
-              <el-tag type="success">无</el-tag>
-            </template>
+            <UserNameDisplay :content="scope.row.assigneeNames" />
           </template>
         </el-table-column>
         <el-table-column align="center" label="流程状态" prop="flowStatusName" min-width="70">
@@ -121,6 +114,7 @@ import { pageByTaskWait } from '@/api/workflow/task';
 import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
 import { useDict } from '@/utils/dict';