// vue3表格-有树结构-有子集的数据的给个标识

vue3表格-有树结构-有子集的数据的给个标识

    <el-table
      v-loading="loading"
      :data="getSlice(dataList)"
      style="width: 100%"
      row-key="taskID"
      max-height="440"
      default-expand-all
      :tree-props="{ children: 'children' }"
      :header-cell-style="{ color: '#ECECEC', backgroundColor: 'rgba(21, 29, 27, 1)', borderColor: 'rgba(40, 58, 51, 1)' }"
      :row-class-name="tableRowClassName"
      @row-click="rowDblclick"
    >
      <!-- <el-table-column type="index" label="序号" align="center" width="60" /> -->
      <el-table-column prop="typeName" label="任务" align="center" width="200">
        <template #default="scope">
          <span v-if="scope.row.childrenFlag" class="ziji">子</span>
          <!-- {{ getValue(scope?.row?.actionType, taskTypeList) }} -->
          {{ scope?.row?.typeName }}
        </template>
      </el-table-column>
      <el-table-column prop="taskID" label="任务ID" align="center" />
      <el-table-column prop="startTime" label="起始时间" align="center" width="160" />
      <el-table-column prop="endTime" label="结束时间" align="center" width="160" />
      <el-table-column prop="source" label="任务来源" align="center">
        <template #default="scope">
          {{ getValue(scope?.row?.source, laiYuanType) }}
        </template>
      </el-table-column>
      <el-table-column prop="decomposed" label="是否分解" align="center">
        <template #default="scope">
          {{ getValue(scope?.row?.decomposed, XiaFaType) }}
        </template>
      </el-table-column>
      <el-table-column prop="planed" label="是否规划" align="center">
        <template #default="scope">
          {{ getValue(scope?.row?.planed, guiHuaType) }}
        </template>
      </el-table-column>
      <el-table-column prop="distributed" label="是否下发" align="center">
        <template #default="scope">
          {{ getValue(scope?.row?.distributed, XiaFaType) }}
        </template>
      </el-table-column>
      <el-table-column prop="executed" label="执行状态" align="center">
        <template #default="scope">
          {{ getValue(scope?.row?.executed, RenWuType) }}
        </template>
      </el-table-column>
      <el-table-column prop="indeedStartTime" label="实际开始执行时间" align="center" width="160" />
      <el-table-column prop="indeedEndTime" label="实际结束执行时间" align="center" width="160" />
      <el-table-column prop="percent" label="任务执行百分比" align="center" width="180">
        <template #default="scope">
          <el-progress :percent="scope?.row?.percent" color="#1cb16f" :stroke-width="10" />
        </template>
      </el-table-column>
    </el-table>
    
    const state = reactive<any>({
  loading: false,
  dataList: [],
  treeList: [],
  queryParams: {
    current: 1,
    size: 10,
    total: 0,
  },
});
    
    // 前端分页
    const getSlice = (arr: any) => {
  return arr?.slice((state.queryParams.current - 1) * state.queryParams.size, state.queryParams.current * state.queryParams.size);
};
    
    // 有树结构-有子集的数据的给个标识
export const formatting = (data: any) => {
  const newData = data.map((item: any) => {
    return {
      ...item,
      children: item?.children?.map((pl: any) => ({
        ...pl,
        childrenFlag: true,
      })),
    };
  });
  return newData;
};

// 任务列表-新版本
const getNewData = async () => {
  state.loading = true;
  let type='01';
  const res: any = await taskNewList(type);
  // if (res?.code === 200) {
  state.loading = false;
  // const list = res.content || [];
  const list: any = [];
  const arr = [
    // 模拟树数据
    {
      taskID: 66,
      typeName: '任务',
      taskCode: 2166,
      decomposed: 4,
      executed: 0,
      percent: 99,
      planedChildrenNum: 99,
      distributedChildrenNum: 99,
      planed: 2,
      vmf: 4293,
      startTime: '2022-04-02 12:00:00',
      endTime: '2022-04-02 12:00:00',
      children: [
        { taskID: 77, typeName: '任务1', vmf: 4293, taskCode: 2177, decomposed: 4, executed: 0, percent: 66 },
        { taskID: 88, typeName: '任务2', vmf: 4293, taskCode: 2188, decomposed: 4, executed: 0, percent: 88 },
      ],
    },
  ];
  const list2 = arr.concat(list);
  state.dataList = formatting(list2);
  state.queryParams.total = state.dataList.length;
};