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

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

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

<el-dialog v-model="allotTaskdialogVisible" title="任务分配" width="1000" :before-close="handleClose">
         <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane  v-for="(item,index) in rootChapter" :name="item.chapterId" :label="item.chapterName">
                <el-form :inline="true" :model="getTabData(item.chapterId)" class="demo-form-inline">
                    <el-form-item label="本专业负责人">
                        <el-select v-model="getTabData(item.chapterId).personCode" placeholder="请选择本专业负责人" clearable @change="(value) => handlePersonCodeChange(item.chapterId, value)">
                            <el-option label="张三" value="zhangsan" />
                            <el-option label="李四" value="lisi" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="研究内容模版">
                        <el-select v-model="getTabData(item.chapterId).professionalTaskId" placeholder="请选择模版" clearable @change="(value) => handleTemplateChange(item.chapterId, value)">
                          <el-option
                              v-for="templateItem in templateList"
                              :key="templateItem.templateId"
                              :label="templateItem.templateName"
                              :value="templateItem.templateId"
                              />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-table :data="getTabData(item.chapterId).chapterList" row-key="chapterId" :tree-props="{ children: 'childrenList', hasChildren: 'true' }" stripe border style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column prop="chapterName" label="业务节点"  align="center">
                    </el-table-column>
                    <el-table-column prop="departmentCode" label="承担部门"  align="center">
                        <template #default="{ row }">
                            <el-select v-model="row.departmentCode" placeholder="请选择模版" clearable @change="(value) => handleDepartmentChange(item.chapterId, row, value)">
                                <el-option label="油气部门1" value="youqibumen1" />
                                <el-option label="油气部门2" value="youqibumen2" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="personCode" label="承担人"  align="center">
                        <template #default="{ row }">
                            <el-select v-model="row.personCode" placeholder="请选择承担人" clearable @change="(value) => handlePersonChange(item.chapterId, row, value)">
                                <el-option label="王五" value="wangwu" />
                                <el-option label="刘毅" value="liuyi" />
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelAllot">取消</el-button>
                <el-button type="primary" @click="submitAllot">
                保存
                </el-button>
            </div>
        </template>
    </el-dialog>

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

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 => {
      })
};

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

解释