<template>
  <el-table
    ref="tableRef"
    v-loading="listLoading"
    border
    :data="list"
    :indent="24"
    lazy
    :load="load"
    row-key="task_guid"
    :scrollbar-always-on="true"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >...
  </el-table>
</template>


<script setup>

 const listLoading = ref(false)
 // 保存节点映射的 Map
 const maps = reactive(new Map())

 const load = async (row, treeNode, resolve) => {
        const pid = row.id
        maps.set(pid, { row, treeNode, resolve })
        const post_data = {
          parent_id: row.id,
        }
        listLoading.value = true
       ...
       接口调用成功
        if (success == true) {
          if (list.length > 0) {
            resolve(list)
          } else {
            row.hasChildren = false
          }
        } else {
          showMsgError(msg)
        }
        listLoading.value = false
  }

  const tableRef = ref()
      //重新获取数据，并保留上次的展开状态
      const maintainStatus = async () => {

        //拷贝更新前的表格数据状态
        const oldTreeData = JSON.parse(
          JSON.stringify(state['tableRef'].store.states)
        )
             //重新获取数据
        await fetchData()
        nextTick(() => {
                 //将旧节点的展开状态赋给新节点
          for (const item in oldTreeData.treeData._value) {
            if (state['tableRef'].store.states.treeData.value[item]) {
              state['tableRef'].store.states.treeData.value[item] =
                oldTreeData.treeData._value[item]
            }
          }
        })
      }


  //删除
      const onDelete = (_row) => {
        if (_row.task_guid) {
            state.listLoading = true
           //调用删除接口
            if (success == true) {
                //进行删除成功提示
                if (_row.parent_id == '0') {
                 //若删除的数据为根节点数据，需要重新获取数据，否则页面显示条数会不匹配，如显示一页显示20条数据，但是删除之后只剩19条数据
                  maintainStatus()
                } else {
                 //若删除的为非根节点数据，只需更新删除节点的父节点数据即可
                  const pid = _row.parent_id //取出当前删除行的pid
                  const { row, treeNode, resolve } = maps.get(pid) //根据pid取出对应的节点数据
                  state['tableRef'].store.states.lazyTreeNodeMap.value[pid] = []
                  await load(row, treeNode, resolve)
                }
              maps.delete(_row.id)
                       
            } else {
             //进行错误提示
            }
            state.listLoading = false

        }
      }

//新增根节点数据
const addRootData = (_row) => {
     maintainStatus()
 }

//编辑数据
const editData = (_row) => {
    const objs = maps.get(_row.parent_id)
          if (objs !== undefined && objs !== '') {
            //如果是子节点数据，先进行更新子节点数据
            const { row, treeNode, resolve } = maps.get(_row.parent_task_guid)
            await load(row, treeNode, resolve) //await 为了确保执行将节点数据赋值给oldTreeData时，已经是更新了的数据
          } else {
            maintainStatus()
          }
 }

//新增子节点数据
const addSubData = (_row) => {
            if (_row.parent_id == '0') {
              // 若新增子节点的父节点为根节点
              const objs = maps.get(_row.id)
              if (objs == undefined || objs == '') {
              // 新增子节点后，其父节点原来可能没有子节点数据不可暂开，现在变为有子节点的数据，故需要重新获取页面数据，才能显示>进行展开
                maintainStatus()
              } else {
                const { row, treeNode, resolve } = maps.get(
                  _row.id
                )
                await load(row, treeNode, resolve)
              }
            } else {
                         // 若新增子节点的父节点不为根节点，则只需更新其父节点数据
              const { row, treeNode, resolve } = maps.get(
                _row.parent_id
              )
              await load(row, treeNode, resolve)
            }
 }