任务分配该五个tab页来回切换,内容还是上次编辑的回显

tabs页的切换,及时获取绑定值

activaName是当前tabs页的绑定值,但是可能渲染的慢一点(异步)导致不准确,推荐使用@tab-click="handleClick" 通过里面的属性来获取当前准确的页面

 handlePersonCodeChange(item.chapterId, value)">
 handleTemplateChange(item.chapterId, value)">
 handleDepartmentChange(item.chapterId, row, value)">
 handlePersonChange(item.chapterId, row, value)">
取消
保存

通过函数来获取数据结构中的绑定值

change事件传递value值

当模版发生改变时会把模版下的章节赋值给下面的数据,

为什么返回来的返回值给他赋值会影响到原始数据?

这涉及到引用 与 拷贝的事

因为返回的。value对应的属性是对象,是一种引用传递

新增任务分配时任务分配是怎么保存的?

// 处理模板选择变化
const handleTemplateChange = (tabId, value) => {
console.log('选择的模板ID:', value, 'tabId:', tabId)
const tabData = getTabData(tabId)
tabData.professionalTaskId = value
if (value) {
// 根据选择的模板ID查询相关数据
queryTemplateData(tabId, value)
}
saveTabData(tabId)
}

这个有点多此一举了,可以直接返回 tabSelection的

// 保存指定tab的数据到任务分配数据结构中
const saveTabData = (tabId) => {
const tabData = getTabData(tabId)
// 同时保存到任务分配数据结构中
if (!taskAssignmentData.value.assignments[tabId]) {
taskAssignmentData.value.assignments[tabId] = {
tabId: tabId,
personCode: '',
professionalTaskId: '',
chapterList: []
}
}
taskAssignmentData.value.assignments[tabId] = {
tabId: tabId,
personCode: tabData.personCode || '',
professionalTaskId: tabData.professionalTaskId || '',
chapterList: tabData.chapterList || []
}
}

承担人的变化会触发这个方法

数据都维护在getTabData()函数中,chapterList是一个大块,所以我们要递归遍历找到,子节点,返回的也是引用

任务分配是如何进行回显的?

const allotTask = (item) => {
allotTaskdialogVisible.value = true
thisProject.value = item.projectId
taskAssignmentData.value.projectId = item.projectId
tabSelections.value = {};
// 重置选择的模板
templateList.value = ''
// 向后端获取任务分配情况
axiosUtil.get(`/api/v1/kfjc/getTaskAllotByProjectId/${thisProject.value}`)
.then(response => {
taskAllotData.value = response.data
// 遍历获取到的任务分配数据,填充到tabSelections中
if (taskAllotData.value && Array.isArray(taskAllotData.value)) {
taskAllotData.value.forEach(assignment => {
const tabId = parseInt(assignment.tabId)
tabSelections.value[tabId] = {
tabId: tabId,
personCode: assignment.personCode, // 专业负责人
professionalTaskId: assignment.professionalTaskId, // 研究内容模版ID
chapterList: assignment.chapterList || [] // 业务节点列表
}
})
}
})
.catch(error => {
})
// 获取第一个tabs页的模版
axiosUtil.get('/api/v1/kfjc/getTemplate',
{
type: activeName.value,
})
.then(response => {
templateList.value = response.data
})
.catch(error => {
})
};

为什么可以这样取数据【】,而不是 .属性名

解释

posted @ 2025-08-23 16:35  wzzkaifa  阅读(11)  评论(0)    收藏  举报