在子任务展开部分添加完成截止日期显示(从接单开始计算+预计完成时间)

This commit is contained in:
Your Name 2026-01-14 10:33:52 +08:00
parent 665369bb17
commit 51264aef06
2 changed files with 51 additions and 0 deletions

View File

@ -67,6 +67,9 @@
<div v-for="(subTask, index) in task.subTasks" :key="subTask.id || index" class="subtask-item">
<span class="subtask-label">{{ subTask.itemNo || `子任务${index + 1}` }}:</span>
<span class="subtask-receiver">{{ subTask.receiverName || '待接单' }}</span>
<span v-if="getSubTaskDeadline(subTask)" class="subtask-deadline">
完成截止日期: {{ getSubTaskDeadline(subTask) }}
</span>
<span :class="['subtask-status', getSubTaskStatusClass(subTask.status)]">
{{ getSubTaskStatusText(subTask.status) }}
</span>
@ -162,6 +165,8 @@ interface TaskItem {
itemNo?: string
receiverName?: string
status: string
createTime?: string
estimatedHours?: number
}
interface Task {
@ -334,6 +339,17 @@ const getSubTaskStatusClass = (status: string) => {
}
return classMap[status] || ''
}
// 计算子任务完成截止日期(从接单开始计算+预计完成需要的时间)
const getSubTaskDeadline = (subTask: TaskItem) => {
if (!subTask.createTime || !subTask.estimatedHours) return null
// 从创建时间(接单时间)开始计算
const startTime = dayjs(subTask.createTime)
// 计算截止时间:创建时间 + 预计工时
const deadline = startTime.add(subTask.estimatedHours, 'hour')
// 格式化为"XX月XX日XX时"
return deadline.format('MM月DD日HH时')
}
</script>
<style lang="scss" scoped>
@ -485,6 +501,7 @@ const getSubTaskStatusClass = (status: string) => {
.subtask-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: $space-xs;
font-size: 12px;
padding: 4px 0;
@ -499,6 +516,13 @@ const getSubTaskStatusClass = (status: string) => {
.subtask-receiver {
color: $text-primary;
flex: 1;
min-width: 60px;
}
.subtask-deadline {
color: #31f08b;
font-size: 11px;
margin-left: $space-xs;
}
.subtask-status {
@ -506,6 +530,7 @@ const getSubTaskStatusClass = (status: string) => {
border-radius: $radius-sm;
font-size: 11px;
font-weight: 500;
margin-left: auto;
&.status-completed {
background: rgba(49, 240, 139, 0.2);

View File

@ -1013,6 +1013,9 @@
<div v-for="(subTask, index) in task.subTasks" :key="subTask.id || index" class="subtask-item">
<span class="subtask-label">{{ getSubTaskLabel(subTask, index) }}:</span>
<span class="subtask-receiver">{{ subTask.receiverName || '待接单' }}</span>
<span v-if="getSubTaskDeadline(subTask)" class="subtask-deadline">
完成截止日期: {{ getSubTaskDeadline(subTask) }}
</span>
<span :class="['subtask-status', getSubTaskStatusClass(subTask.status)]">
{{ getSubTaskStatusText(subTask.status) }}
</span>
@ -1763,6 +1766,9 @@
<div v-for="(subTask, index) in task.subTasks" :key="subTask.id || index" class="subtask-item">
<span class="subtask-label">{{ getSubTaskLabel(subTask, index) }}:</span>
<span class="subtask-receiver">{{ subTask.receiverName || '待接单' }}</span>
<span v-if="getSubTaskDeadline(subTask)" class="subtask-deadline">
完成截止日期: {{ getSubTaskDeadline(subTask) }}
</span>
<span :class="['subtask-status', getSubTaskStatusClass(subTask.status)]">
{{ getSubTaskStatusText(subTask.status) }}
</span>
@ -2903,6 +2909,17 @@ const getSubTaskStatusText = (status: string | undefined) => {
return statusMap[status || ''] || status || '未知'
}
// 计算子任务完成截止日期(从接单开始计算+预计完成需要的时间)
const getSubTaskDeadline = (subTask: any) => {
if (!subTask.createTime || !subTask.estimatedHours) return null
// 从创建时间(接单时间)开始计算
const startTime = dayjs(subTask.createTime)
// 计算截止时间:创建时间 + 预计工时
const deadline = startTime.add(subTask.estimatedHours, 'hour')
// 格式化为"XX月XX日XX时"
return deadline.format('MM月DD日HH时')
}
// 展开/折叠任务子任务详情
const expandedTaskSubtasks = ref<Record<number, boolean>>({})
const toggleTaskSubtasks = (taskId: number) => {
@ -6719,6 +6736,7 @@ onUnmounted(() => {
.subtask-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: $space-sm;
font-size: 12px;
padding: 4px 0;
@ -6733,6 +6751,13 @@ onUnmounted(() => {
.subtask-receiver {
color: $text-primary;
flex: 1;
min-width: 60px;
}
.subtask-deadline {
color: #31f08b;
font-size: 11px;
margin-left: $space-xs;
}
.subtask-status {
@ -6740,6 +6765,7 @@ onUnmounted(() => {
border-radius: $radius-sm;
font-size: 11px;
font-weight: 500;
margin-left: auto;
&.status-completed {
background: rgba(49, 240, 139, 0.2);