fix: 修复子任务拖拽排序不生效的问题,为每个任务类型项添加唯一ID
This commit is contained in:
parent
7b6d7a3fe1
commit
417281083f
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user