之前表格左右选择的升级版

与上篇文章不同的是多了个子集的选中与取消于是我们就不能单纯的再使用保存id的方法，每个item也要对应的保存下来

<template>
  <div class="dialog-root">
    <div class="search-wrap">
      <SearchForm
        :isNeedExpand="true"
        :labelWidth="'80px'"
        @onReset="formOnReset"
        @onSubmit="getList"
        :formData="notSeleform"
        :formItem="notSeleItem"
      />
    </div>
    <div class="choosecontent">
      <div style="margin-right: 16px">
        <div style="font-weight: 700">全部督查项目：</div>
        <div class="table">
          <el-table
            :row-key="'__id'"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            class="table-class"
            ref="multipleTable"
            lazy
            @selection-change="handleSelectionChange"
            :load="load"
            :data="tableData"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="作业类型">
              <template slot-scope="scope">
                <span>{{
                  filterData(scope.row.jobType, "system_memeber_jobType")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="所属类别">
              <template slot-scope="scope">
                <span>{{
                  filterData(scope.row.category, "sys_member_category")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="supervisionItems"
              label="督查项目"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="supervisionContent"
              label="具体内容"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="useObject"
              label="适用对象"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="whetherToCheck"
              label="是否必查"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="riskControlLink"
              label="所属风险管控环节"
            >
            </el-table-column>
          </el-table>
        </div>
        <div>
          <pagination
            class="pagination"
            :total="notSeleform.total"
            :page.sync="notSeleform.current"
            :limit.sync="notSeleform.size"
            :page-size="notSeleform.size"
            @pagination="getList"
          />
        </div>
      </div>
      <div>
        <div style="font-weight: 700">已选择督查项目：</div>
        <el-table class="table-class" :data="tableDataRight">
          <el-table-column :show-overflow-tooltip="true" label="作业类型">
            <template slot-scope="scope">
              <span>{{
                filterData(scope.row.jobType, "system_memeber_jobType")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="所属类别">
            <template slot-scope="scope">
              <span>{{
                filterData(scope.row.category, "sys_member_category")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="supervisionItems"
            label="督查项目"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="supervisionContent"
            label="具体内容"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="useObject"
            label="适用对象"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="whetherToCheck"
            label="是否必查"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="riskControlLink"
            label="所属风险管控环节"
          >
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                class="delete-wrap"
                @click="delItemTable(scope.row)"
                plain
                size="mini"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="text-align: center; margin-top: 30px">
      <el-button size="mini" @click="cancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="conformSubmit"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import { supervisonGuideTemplatePage } from "@/api/system/sysInspector";
import SearchForm from "@/components/SearchForm";
import {v4 as uuidv4} from 'uuid';

export default {
  components: { SearchForm },
  dicts: [
    "systems_homework_type",
    "system_memeber_jobType",
    "sys_member_category",
  ],
  data() {
    return {
      notSeleform: {
        jobType: "",
        category: "",
        project: "",
        total: 10,
        current: 1,
        size: 10,
      },
      // 模板维护
      queryParamsTem: {
        current: 1,
        size: 10,
        total: 0,
        id: null,
        workProcessType: null,
        pid: null,
        isPage: true,
      },
      // 未选择Item
      notSeleItem: [
        {
          title: "作业类型",
          key: "jobType",
          type: "dictSelect",
          dicts: [],
        },
        {
          title: "所属类别",
          key: "category",
          type: "dictSelect",
          dicts: [],
        },
        // {
        //   title: "督查项目",
        //   key: "project",
        //   type: "dictSelect",
        //   dicts: [],
        // },
      ],
      tableData: [],
      tableDataRef: {}, // 引用 {__id : rowdata}
      tableDataRight: [],
      search: 0, // 1.搜索开始  0搜索结束
      tableDataRightCodes: [],
      leftCodes: [],
      rowId: null,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.notSeleItem[0].dicts = this.dict.type.system_memeber_jobType;
    this.notSeleItem[1].dicts = this.dict.type.sys_member_category;
  },
  methods: {
    load(row, treeNode, resolve) {
      supervisonGuideTemplatePage({
        id: null,
        isPage: false,
        pid: row.id,
        workProcessType: null,
      }).then((res) => {
        if (res.data.records && res.data.records.length > 0) {
          let arrdata = res.data.records.map((item, i) => {
              let newItem = {
                ...item,
                __id: uuidv4(),
                hasChildren: true, // 设置true就有折叠图标
              }
              this.tableDataRef[newItem.__id] = newItem;
              return newItem;
            });
          resolve(arrdata);
          console.log(this.tableDataRef, 'load。。。');
          this.leftCodes.push(arrdata.map((dev) => dev.__id));
          // this.defaultChoose(this.tableDataRight, this.tableData);
          this.defaultChoose2(this.tableDataRight, this.tableDataRef);
        } else {
          row.hasChildren = false;
          resolve([]);
        }
      });
    },
    conformSubmit() {
      this.$emit("submitConfirm", this.tableDataRight);
    },
    cancel() {
      this.$emit("cancel");
    },
    // 重置作业计划搜索表单
    formOnReset() {
      this.notSeleform.current = 1;
      this.notSeleform.size = 10;
      this.notSeleform.total = 0;
      this.notSeleform.category = "";
      this.notSeleform.jobType = "";
      this.queryParamsTem.current = 1;
      this.queryParamsTem.size = 10;
      this.queryParamsTem.total = 0;
      this.queryParamsTem.id = null;
      this.queryParamsTem.workProcessType = null;
      this.queryParamsTem.pid = null;
      this.queryParamsTem.isPage = true;
      this.getList();
    },
    // 右侧删除每一项
    delItemTable(row) {
      // tableDataRight 对应删除这条数据
      // 左侧列表也要对应删除这条数据
      this.tableDataRight.forEach((item, index) => {
        if (item.id == row.id) {
            this.tableDataRight.splice(index, 1);
            // this.defaultChoose([item], this.tableData, false);
            this.defaultChoose2([item], this.tableDataRef, false);
          }
      });
    },
    // // 已选择的设备需要默认勾选
    // defaultChoose(arr, tableArr, choose = true) {
    //   /*
    //   注意：这里不能直接遍历arr,element和item 他们在内存中的地址不同，所以他们是两份不同的数据，所以这么写 toggleRowSelection(element, true) 是不会回显选中的
    //    */
    //   for (let index = 0; index < tableArr.length; index++) {
    //     const item = tableArr[index];
    //     // if (item.children && item.children.length > 0) {
    //     //   this.defaultChoose(arr, item.children, choose);
    //     // }else{
    //       arr.forEach((element) => {
    //         if (element.id == item.id) {
    //           this.$nextTick(() => {
    //             this.$refs.multipleTable.toggleRowSelection(item, choose);
    //           });
    //         }
    //       });
    //     // }
    //   }
    // },
    defaultChoose2(chooseArr, tableDataRef, choose = true) {
      chooseArr.forEach(dev => {
        this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(tableDataRef[dev.__id], choose);
          });
      })
    },
    // 表格选中的数组
    handleSelectionChange(array) {
      if (this.search) return; //解决搜索右侧排序变化的问题
      // =================新增的情况====勾选复选框=========
      this.tableDataRightCodes = this.tableDataRight.map((dev) => dev.__id);

      array.forEach((dev) => {
        if (this.tableDataRightCodes.indexOf(dev.__id) < 0) {
          this.tableDataRight.push(dev);
        }
      });
      // =================取消选中左侧复选框的情况=============
      let changeCodes = array.map((dev) => dev.__id); //拿到当前被选中的全部id
      this.tableDataRight = this.tableDataRight.filter(
        (dev) =>
          !(
            this.leftCodes.indexOf(dev.__id) >= 0 &&
            changeCodes.indexOf(dev.__id) < 0
          )
      );
    },
    // 获取项目列表
    getList() {
      this.queryParamsTem.current = this.notSeleform.current;
      this.queryParamsTem.size = this.notSeleform.size;
      this.queryParamsTem.category = this.notSeleform.category;
      this.queryParamsTem.jobType = this.notSeleform.jobType;
      supervisonGuideTemplatePage(this.queryParamsTem).then((response) => {
        console.log(response, "response");
        this.tableData = response.data.records.map((item) => {
          let newItem = {
            ...item,
            __id: uuidv4(),
            hasChildren: true, // 设置true就有折叠图标
          }
          this.tableDataRef[newItem.__id] = newItem;
          return newItem;
        });
        this.notSeleform.total = response.data.total;
        this.notSeleform.current = response.data.current;

        console.log(this.tableDataRef, 'getlist');
        this.leftCodes = this.tableData.map((dev) => dev.__id);
        // this.defaultChoose(this.tableDataRight, this.tableData);
        this.defaultChoose2(this.tableDataRight, this.tableDataRef);
        this.$nextTick(() => {
          this.search = 0;
        });
      });
    },
    // 数据过滤
    filterData(type, name) {
      var a = this.dict.type[name].filter((item) => item.value == type);
      return a.length > 0 ? a[0].label : "";
    },
  },
};
</script>
<style scoped>
.table {
  background: none;
  border: 0;
  padding: 0;
}
::v-deep .el-table::before {
  height: 0;
}
.table-class {
  width: 100%;
  height: 360px;
  overflow-y: scroll;
}
.choosecontent {
  display: flex;
}
.choosecontent > div {
  flex: 1;
}
.pagination {
  margin: 0;
  height: 50px;
  background-color: #fff;
}
.dialog-root {
  /* border: 2px solid red; */
}
</style>