打开dialog弹窗选择表格数据后与原表格数据合并

业务背景

• 表格内得数据为选中得弹窗内得数据
• 表格内得数据是格式化后的弹窗数据
• 替换表格式数据时，未替换得数据状态任然保留

表格数据

弹窗数据

保存按钮得逻辑代码

// 左侧指显示表格数据 data
// 右侧指弹窗数据 list

async function handleSelection(list: any) {
  // 删除
  // 左侧与右侧对比 左侧有 右侧无 左侧删除
  // 获取右侧ids
  if (!list.length) return (data.value = [])
  const listids = list.map((item: any) => item.id)
  let result = data.value.filter((item: any) => {
    return listids.includes(item.id)
  })
  data.value = [...result]
  // 新增
  // 左侧与右侧对比 左侧无 右侧有 左侧新增
  // 获取左侧ids
  const dataids = data.value.map((item: any) => item.id)
  let mdata = transformFields(list)
  let arr: any[] = []
  mdata.forEach((item) => {
    const isAdd = dataids.includes(item.id)
    if (!isAdd) {
      arr.push(item)
    }
  })
  data.value.push(...arr)
}

// 格式化弹窗数据展示成表格数据

function transformFields(list: any) {
  const result = []
  for (const field of list) {
    const obj = {
      ...field,
      per: 0.0
    }
    result.push(obj)
  }
  return result
}