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