11

<template>
  <div>
    111111

    <!-- <Table border :context="self" :columns="columns7" :data="data6"></Table> -->
    <div class="box1">
      <div class="left">
        <Tree
          ref="tree"
          :data="baseData"
          show-checkbox
          check-strictly
          @on-check-change="changeBox"
        ></Tree>
      </div>
      <div class="middle" @click="selected">>></div>
      <div class="right">
        <span @click="empty">全部</span>
        <div class="item" v-for="(item, index) in selectedData" :key="index">
          <div>
            {{ item.title }}
          </div>
          <div class="icon" @click="deleted(item)">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedData: [],
      baseData: [
        {
          title: "parent 1",
          key: "parent 1",
          checked: false,
          expand: true,
          children: [
            {
              title: "parent 1-1",
              key: "parent 1-1",
              checked: false,
              expand: true,
              children: [
                {
                  title: "leaf 1-1-1",
                  key: "leaf 1-1-1",
                  checked: false,
                  expand: true,
                },
                {
                  title: "leaf 1-1-2",
                  key: "leaf 1-1-2",
                  checked: false,
                  expand: true,
                },
              ],
            },
            {
              title: "parent 1-2",
              key: "parent 1-2",
              checked: false,
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  key: "leaf 1-2-1",
                  checked: false,
                  expand: true,
                },
                {
                  title: "leaf 1-2-2",
                  key: "leaf 1-2-2",
                  checked: false,
                  expand: true,
                },
              ],
            },
          ],
        },
      ],
      temp: [],
    };
  },
  created() {
    const base = this.initData(this.baseData);
    this.temp = JSON.parse(JSON.stringify(base));
  },

  methods: {
    initData(result) {
      for (let i = 0; i < result.length; i++) {
        if (!result[i].children) {
          result[i].disabled = false;
        } else {
          result[i].disabled = true;
          this.initData(result[i].children);
        }
      }
      return result;
    },
    
    removeCheck(result) {
      for (let i = 0; i < result.length; i++) {
        result[i].checked = false;
        result[i].indeterminate = false;
        if (result[i].children) {
          this.removeCheck(result[i].children);
        }
      }
      return result;
    },
    changeBox(val) {
      for (let i = 0; i < 3; i++) {
        let base = this.deepChange(this.baseData);
        this.baseData = JSON.parse(JSON.stringify(base));
      }
    },
    deepChange(result) {
      for (let i = 0; i < result.length; i++) {
        if (result[i].children && result[i].children.length) {
          let checkedTrue = result[i].children.filter((item) => item.checked);
          let checkedFalse = result[i].children.filter(
            (item) => !item.checked && !item.indeterminate
          );
          // console.log("==============================");
          // console.log("indeterminate", indeterminate.length);
          // console.log("checkedTrue", checkedTrue.length);
          // console.log("checkedFalse", checkedFalse.length);
          // console.log("==============================");
          if (checkedFalse.length === result[i].children.length) {
            result[i].checked = false;
            result[i].indeterminate = false;
          } else if (checkedTrue.length === result[i].children.length) {
            result[i].indeterminate = false;
            result[i].checked = true;
          } else {
            result[i].checked = false;
            result[i].indeterminate = true;
          }
          // console.log("1111111111111111111111111", result[i]);

          this.deepChange(result[i].children);
        }
      }
      return result;
    },
    selected() {
      this.selectedData = this.$refs.tree
        .getCheckedNodes()
        .filter((item) => !item.children);
    },
    deleted(data) {
      this.selectedData = this.selectedData.filter(
        (x) => x.nodeKey != data.nodeKey
      );
      deep(this.baseData);
      function deep(result) {
        for (let i = 0; i < result.length; i++) {
          if (result[i].nodeKey === data.nodeKey) {
            console.log(JSON.parse(JSON.stringify(result[i])), 1);
            result[i].checked = false;
            console.log(result[i], 2);
            return;
          } else {
            if (result[i].children) {
              deep(result[i].children);
            }
          }
          // if(i.children){
          //   deep(i.children)
          // }
        }
      }
      this.changeBox();
    },
    empty() {
      this.selectedData = [];
      // this.baseData = [];
      // this.baseData = this.temp;
      this.removeCheck(this.baseData);
    },
  },
};
</script>

<style >
.box1 {
  width: 700px;
  height: 300px;
  display: flex;
  background: skyblue;
}
.middle {
  width: 100px;
  height: 30px;
  margin: 150px 20px 0 20px;
  background-color: black;
  color: #fff;
  text-align: center;
  line-height: 30pxs;
}
.left {
  width: 250px;
  border: 1px solid red;
}
.right {
  width: 250px;
  border: 1px solid red;
  padding: 10px;
}
.item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.icon {
  width: 50px;
  height: 50px;
}
</style>