feat: 可接任务Tab同时显示普通任务和子任务,并添加子任务标签

This commit is contained in:
Your Name 2026-01-02 19:28:21 +08:00
parent ea4b6a8dc5
commit b44a7e744f

View File

@ -204,6 +204,10 @@
<div class="task-header">
<h3 class="task-title">{{ task.title }}</h3>
<div class="task-badges">
<span v-if="task.isSubTask" class="badge badge-subtask">
<Icon name="layers" size="sm" color="#1890ff" style="margin-right: 4px; vertical-align: middle;" />
子任务
</span>
<span v-if="isNewTask(task)" class="badge badge-new">
<Icon name="sparkles" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
新发布
@ -1738,6 +1742,7 @@
<div class="detail-section">
<h3>{{ selectedTask.title }}</h3>
<div class="detail-badges">
<span v-if="selectedTask.isSubTask" class="badge badge-subtask">子任务</span>
<span v-if="isNewTask(selectedTask)" class="badge badge-new">新发布</span>
<span v-if="isHighScoreTask(selectedTask)" class="badge badge-high-score">高分</span>
<span v-if="selectedTask.isUrgent" class="badge badge-urgent">紧急</span>
@ -1747,11 +1752,16 @@
<div class="detail-section">
<h4>基本信息</h4>
<a-descriptions :column="2" bordered>
<a-descriptions-item label="任务编号">{{ selectedTask.taskNo }}</a-descriptions-item>
<a-descriptions-item label="任务编号">
{{ selectedTask.isSubTask ? selectedTask.subTaskNo : selectedTask.taskNo }}
</a-descriptions-item>
<a-descriptions-item v-if="selectedTask.isSubTask" label="所属主任务">
{{ selectedTask.taskNo || '--' }}
</a-descriptions-item>
<a-descriptions-item label="任务类型">{{ getTaskTypeName(selectedTask.taskTypeId) }}</a-descriptions-item>
<a-descriptions-item label="预估积分">{{ selectedTask.score }} 分</a-descriptions-item>
<a-descriptions-item label="预估工时">{{ selectedTask.estimatedHours || '--' }} 小时</a-descriptions-item>
<a-descriptions-item label="数量">{{ selectedTask.quantity || '--' }} 个</a-descriptions-item>
<a-descriptions-item v-if="!selectedTask.isSubTask" label="数量">{{ selectedTask.quantity || '--' }} 个</a-descriptions-item>
<a-descriptions-item label="截止时间">{{ formatDeadline(selectedTask.deadline) }}</a-descriptions-item>
</a-descriptions>
</div>
@ -1865,16 +1875,24 @@
<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, h } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal, InputNumber, Textarea, Input } from 'ant-design-vue'
import { message, Modal, InputNumber, Textarea } from 'ant-design-vue'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import Icon from '@/components/Icon.vue'
import * as taskApi from '@/api/task'
import * as configApi from '@/api/config'
import type { Task, TaskApprovalDTO } from '@/api/task'
import type { DemandType, Brand, Platform, Category } from '@/api/config'
import { useConfigStore } from '@/stores/config'
import dayjs from 'dayjs'
// 扩展Task类型以支持子任务字段
interface TaskOrSubTask extends Task {
isSubTask?: boolean // 是否为子任务
itemId?: number // 子任务ID
subTaskNo?: string // 子任务编号
groupNo?: number // 子任务组号
taskDescription?: string // 主任务描述
submitTime?: string // 提交时间
}
const router = useRouter()
// 全局配置store
@ -1897,10 +1915,10 @@ const isDepartmentLeader = computed(() => {
// 状态
const loading = ref(false)
const taskList = ref<Task[]>([])
const taskList = ref<TaskOrSubTask[]>([])
const total = ref(0)
const detailDrawerVisible = ref(false)
const selectedTask = ref<Task | null>(null)
const selectedTask = ref<TaskOrSubTask | null>(null)
// 已完成任务状态
const completedLoading = ref(false)
@ -2070,7 +2088,7 @@ const formatDeadline = (deadline: string | undefined) => {
* @param task 任务对象
* @returns 流程阶段文本
*/
const getProcessStage = (task: Task): string => {
const getProcessStage = (task: TaskOrSubTask): string => {
// 1. 需求负责人审核阶段
if (task.approvalStatus === 'pending_demand_approval' && task.currentApproverRole === 'demand_leader') {
return `需求负责人:${task.currentApproverName || '未知'}审核`
@ -2109,7 +2127,7 @@ const getProcessStage = (task: Task): string => {
}
// 判断是否为新发布任务(1小时内)
const isNewTask = (task: Task) => {
const isNewTask = (task: TaskOrSubTask) => {
if (!task.createTime) return false
const createTime = dayjs(task.createTime)
const now = dayjs()
@ -2117,7 +2135,7 @@ const isNewTask = (task: Task) => {
}
// 判断是否为高分任务(积分 >= 500)
const isHighScoreTask = (task: Task) => {
const isHighScoreTask = (task: TaskOrSubTask) => {
return task.score && task.score >= 500
}
@ -2130,7 +2148,7 @@ const loadConfigs = async () => {
}
}
// 加载任务列表
// 加载任务列表(同时加载普通任务和子任务)
const loadTasks = async () => {
loading.value = true
try {
@ -2153,12 +2171,57 @@ const loadTasks = async () => {
if (filters.timeRange) params.timeRange = filters.timeRange
if (filters.sortBy) params.sortBy = filters.sortBy
const response = await taskApi.getTaskHall(params)
// 同时获取普通任务和子任务
const [taskResponse, itemResponse] = await Promise.all([
taskApi.getTaskHall(params),
taskApi.getAvailableTaskItems(params)
])
if (response.code === 200) {
taskList.value = response.data.records || []
total.value = response.data.total || 0
let allTasks: any[] = []
let totalCount = 0
// 处理普通任务
if (taskResponse.code === 200) {
const tasks = (taskResponse.data.records || []).map((task: any) => ({
...task,
isSubTask: false // 标记为普通任务
}))
allTasks = [...allTasks, ...tasks]
totalCount += taskResponse.data.total || 0
}
// 处理子任务
if (itemResponse.code === 200) {
const items = (itemResponse.data.records || []).map((item: any) => ({
// 将子任务字段映射到任务字段
...item,
id: item.id, // 保持子任务的ID
itemId: item.id, // 额外保存子任务ID
title: item.taskTitle || item.title, // 使用主任务标题
subTaskNo: item.itemNo, // 子任务编号
isSubTask: true, // 标记为子任务
taskId: item.taskId, // 保存主任务ID
// 保留子任务的其他字段
groupNo: item.groupNo,
taskTypeId: item.taskTypeId,
score: item.score,
estimatedHours: item.estimatedHours,
description: item.description || item.taskDescription
}))
allTasks = [...allTasks, ...items]
totalCount += itemResponse.data.total || 0
}
// 按创建时间排序
allTasks.sort((a, b) => {
const timeA = new Date(a.createTime || 0).getTime()
const timeB = new Date(b.createTime || 0).getTime()
return timeB - timeA // 降序
})
taskList.value = allTasks
total.value = totalCount
} catch (error) {
console.error('加载任务失败:', error)
message.error('加载任务失败')
@ -2845,24 +2908,37 @@ const handleViewTaskDetail = (task: Task) => {
}
// 任务点击
const handleTaskClick = (task: Task) => {
const handleTaskClick = (task: TaskOrSubTask) => {
selectedTask.value = task
detailDrawerVisible.value = true
}
// 抢单
const handleGrab = async (task: Task) => {
// 抢单(支持普通任务和子任务)
const handleGrab = async (task: TaskOrSubTask) => {
const isSubTask = task.isSubTask
const taskType = isSubTask ? '子任务' : '任务'
const taskNo = isSubTask ? task.subTaskNo : task.taskNo
Modal.confirm({
title: '确认抢单',
content: `确定要抢单"${task.title}"吗?`,
title: `确认抢单${taskType}`,
content: `确定要抢单${taskType}"${task.title}"吗?${taskNo ? `(编号:${taskNo})` : ''}`,
okText: '确认',
cancelText: '取消',
onOk: async () => {
try {
const response = await taskApi.grabTask(task.id!)
let response
if (isSubTask) {
// 抢子任务
response = await taskApi.grabTaskItem(task.itemId || task.id!)
} else {
// 抢普通任务
response = await taskApi.grabTask(task.id!)
}
if (response.code === 200) {
message.success('抢单成功!')
message.success(`${taskType}抢单成功!`)
loadTasks() // 刷新列表
loadAllTabCounts() // 刷新所有Tab数量
}
} catch (error: any) {
console.error('抢单失败:', error)
@ -3382,6 +3458,12 @@ onUnmounted(() => {
white-space: nowrap;
}
.badge-subtask {
background: rgba(24, 144, 255, 0.1);
border: 1px solid rgba(24, 144, 255, 0.3);
color: #1890ff;
}
.badge-new {
background: rgba($color-success, 0.1);
border: 1px solid rgba($color-success, 0.3);