fix: 修复子任务拖拽排序不生效的问题,为每个任务类型项添加唯一ID

This commit is contained in:
Your Name 2026-01-16 13:26:49 +08:00
parent 7b6d7a3fe1
commit 417281083f

View File

@ -68,7 +68,7 @@
<div class="task-types-list">
<div
v-for="(item, index) in formData.taskTypes"
:key="item.id || index"
:key="item.id"
class="task-type-item"
:class="{ 'dragging': dragIndex === index, 'drag-over': dragOverIndex === index }"
@dragover.prevent="handleDragOver($event, index)"
@ -630,6 +630,7 @@ const previewUploading = ref(false)
// 任务类型项接口
interface TaskTypeItem {
id?: string // 唯一标识符,用于拖拽排序
taskTypeId: number | undefined
taskTypePath?: (string | number)[] // 级联选择路径 [level1Id, level2Id, level3Id]
quantity: number
@ -653,12 +654,17 @@ const designersCache = reactive<Record<string, any[]>>({})
const dragIndex = ref<number | null>(null)
const dragOverIndex = ref<number | null>(null)
// 生成唯一ID
const generateTaskTypeId = () => {
return `task-type-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
}
// 表单数据
const formData = reactive({
title: '',
isPipeline: true, // 固定为流水线任务
pipelineMode: 'sequential' as 'sequential' | 'parallel', // 固定为顺序流水线
taskTypes: [{ taskTypeId: undefined, taskTypePath: undefined, quantity: 1, receiverId: undefined, selectedDeptId: undefined }] as TaskTypeItem[], // 任务类型数组
taskTypes: [{ id: generateTaskTypeId(), taskTypeId: undefined, taskTypePath: undefined, quantity: 1, receiverId: undefined, selectedDeptId: undefined }] as TaskTypeItem[], // 任务类型数组
taskSubType: '', // 动态加载,初始为空
brandId: undefined,
platformId: undefined,
@ -928,6 +934,7 @@ const getDesignersForItem = (item: TaskTypeItem) => {
// 添加任务类型
const addTaskType = () => {
formData.taskTypes.push({
id: generateTaskTypeId(),
taskTypeId: undefined,
taskTypePath: undefined,
quantity: 1,
@ -1012,8 +1019,12 @@ const handleDrop = (e: DragEvent, targetIndex: number) => {
console.log('拖拽排序:', sourceIndex, '->', targetIndex)
// 交换位置 - 使用 splice 原地修改数组以确保响应式更新
const [removed] = formData.taskTypes.splice(sourceIndex, 1)
formData.taskTypes.splice(targetIndex, 0, removed)
const newTaskTypes = [...formData.taskTypes]
const [removed] = newTaskTypes.splice(sourceIndex, 1)
newTaskTypes.splice(targetIndex, 0, removed)
// 直接替换整个数组以触发 Vue 的响应式更新
formData.taskTypes = newTaskTypes
// 重新计算积分(pipelineGroups 是 computed,会自动更新)
calculateScore()
@ -1896,6 +1907,7 @@ const loadTaskForEdit = async (taskId: number) => {
for (const detail of details) {
taskTypeItems.push({
id: generateTaskTypeId(),
taskTypeId: detail.typeId,
quantity: detail.quantity || 1,
receiverId: detail.receiverId || subTask.receiverId,
@ -1906,6 +1918,7 @@ const loadTaskForEdit = async (taskId: number) => {
console.warn('解析typeDetails失败:', e)
// 解析失败时使用子任务的基本信息
taskTypeItems.push({
id: generateTaskTypeId(),
taskTypeId: subTask.taskTypeId,
quantity: subTask.quantity || 1,
receiverId: subTask.receiverId,
@ -1915,6 +1928,7 @@ const loadTaskForEdit = async (taskId: number) => {
} else {
// 没有typeDetails时使用子任务的基本信息
taskTypeItems.push({
id: generateTaskTypeId(),
taskTypeId: subTask.taskTypeId,
quantity: subTask.quantity || 1,
receiverId: subTask.receiverId,