feat: 任务卡片需求人名字过长时显示省略号，鼠标悬停显示完整信息
1. 导入 Tooltip 组件 2. 添加 truncateText 辅助函数用于截断文本 3. 所有显示需求人名字的地方（一级需求人、需求部门发起人、发布人）： - 使用 truncateText 截断显示（最多8个字符） - 使用 Tooltip 组件鼠标悬停显示完整信息 - 添加 cursor: help 样式提示可悬停查看
This commit is contained in:
Your Name
parent
75a7a760a6
commit
9b5449cf75
@ -219,21 +219,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发布人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="!(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布人: {{ task.publisherName || '未知' }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发布人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发布人: {{ truncateText(task.publisherName, 8) || '未知' }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发布人: 未知</span>
|
||||
</div>
|
||||
<div v-if="task.attachmentUrl" class="detail-item detail-item-attachment">
|
||||
<span class="icon">
|
||||
@ -430,21 +437,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发起人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="!(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发起人: {{ task.publisherName || '--' }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发起人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发起人: {{ truncateText(task.publisherName, 8) || '--' }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发起人: --</span>
|
||||
</div>
|
||||
<div v-if="task._itemType !== 'taskGroup'" class="detail-item">
|
||||
<span class="icon">
|
||||
@ -528,21 +542,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发布人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="task.publisherName && !(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布人: {{ task.publisherName }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发布人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发布人: {{ truncateText(task.publisherName, 8) }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发布人: --</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -825,21 +846,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发布人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="task.publisherName && !(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布人: {{ task.publisherName }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发布人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发布人: {{ truncateText(task.publisherName, 8) }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发布人: --</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1050,21 +1078,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发起人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="!(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发起人: {{ task.publisherName || '--' }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发起人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发起人: {{ truncateText(task.publisherName, 8) || '--' }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发起人: --</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="icon">
|
||||
@ -1153,21 +1188,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发布人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="task.publisherName && !(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布人: {{ task.publisherName }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发布人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发布人: {{ truncateText(task.publisherName, 8) }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发布人: --</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1481,21 +1523,28 @@
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#faad14" />
|
||||
</span>
|
||||
<span style="color: #faad14;">一级需求人: {{ task.primaryPublisherName }} ({{ task.primaryPublisherDeptName || '一级部门' }})</span>
|
||||
<Tooltip :title="`一级需求人: ${task.primaryPublisherName} (${task.primaryPublisherDeptName || '一级部门'})`">
|
||||
<span style="color: #faad14; cursor: help;">一级需求人: {{ truncateText(task.primaryPublisherName, 8) }} ({{ truncateText(task.primaryPublisherDeptName, 8) || '一级部门' }})</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 明细完善人（一级需求任务且有明细完善人） -->
|
||||
<div v-if="task.isPrimaryTask === 1 && task.detailCompleterName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#52c41a" />
|
||||
</span>
|
||||
<span style="color: #52c41a;">需求部门发起人: {{ task.detailCompleterName }}</span>
|
||||
<Tooltip :title="`需求部门发起人: ${task.detailCompleterName}`">
|
||||
<span style="color: #52c41a; cursor: help;">需求部门发起人: {{ truncateText(task.detailCompleterName, 8) }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<!-- 发布人：非一级需求任务或一级需求任务无明细完善人时显示 -->
|
||||
<div v-if="task.publisherName && !(task.isPrimaryTask === 1 && task.detailCompleterName)" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布人: {{ task.publisherName }}</span>
|
||||
<Tooltip v-if="task.publisherName" :title="`发布人: ${task.publisherName}`">
|
||||
<span style="cursor: help;">发布人: {{ truncateText(task.publisherName, 8) }}</span>
|
||||
</Tooltip>
|
||||
<span v-else>发布人: --</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2414,7 +2463,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, onUnmounted, h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message, Modal, InputNumber, Textarea, Radio, RadioGroup, Button, Select, Space, Tag } from 'ant-design-vue'
|
||||
import { message, Modal, InputNumber, Textarea, Radio, RadioGroup, Button, Select, Space, Tag, Tooltip } from 'ant-design-vue'
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue'
|
||||
import Icon from '@/components/Icon.vue'
|
||||
import TaskFilters from '@/components/TaskFilters.vue'
|
||||
@ -2997,6 +3046,13 @@ const approveEstimatedScore = computed(() => {
|
||||
return formatScore(total)
|
||||
})
|
||||
|
||||
// 截断文本（用于显示长名字）
|
||||
const truncateText = (text: string | undefined, maxLength: number = 10): string => {
|
||||
if (!text) return '--'
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: string | undefined) => {
|
||||
if (!time) return '--'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user