wanda-editer/src/components/edit/leftbar_components/itemTree.vue

<template>
  <div class="treeList">
    <div class="tree-body">
      <a-spin :spinning="spinning">
        <Tree
                :multiple="true"
                :notNull="true"
                :returnParentNode="false"
                :data="treeData"
                @change="onChange"
        />
<!--      <a-tree-->
<!--        v-model="checkedKeys"-->
<!--        show-checkbox-->
<!--        checkable-->
<!--        :expanded-keys="expandedKeys"-->
<!--        :auto-expand-parent="autoExpandParent"-->
<!--        :selected-keys="selectedKeys"-->
<!--        :tree-data="treeData"-->
<!--        node-key="id"-->
<!--        @expand="onExpand"-->
<!--        @select="onSelect"-->
<!--        @check="onCheck"-->
<!--      />-->
      </a-spin>
    </div>

    <div class="btn-list">
      <a-button type="link" @click="getSelectId('rest')">恢复默认</a-button>
      <a-button @click="getSelectId('cancel')">取消</a-button>
      <a-button type="primary" @click="getSelectId(checkedKeys)" style="margin-left: 10px;">确定</a-button>
    </div>
  </div>
</template>
<script>
import { queryInfoSystem} from "@/api/editer.js";
const treeData = [];
export default {
  data() {
    return {
      expandedKeys: ["", ""],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData,
      spinning:false
    };
  },
  props:{
    categoryIdS:Array,
    // categoryId:String,
    drawerVisible:Boolean
  },
  watch: {
    checkedKeys(val) {
      this.checkedKeys = val;
    },
    drawerVisible(val){
      if(!val){
        this.checkedKeys =this.categoryIdS;
      }
    }
  },
  methods: {
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys,b) {
      console.log("onCheck", checkedKeys,b.node);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
      onChange(id){
          console.log(id);
          this.checkedKeys = id.checkedIds;
      },
    queryByGroup() {
      this.spinning = true;
      const data = {
        "Orders": "orderId asc",
      }
      queryInfoSystem(data).then(res => {
        this.spinning = false;
        this.treeData = this.mapTree(res.Content);
        this.checkedKeys = this.categoryIdS;
      });
    },
    mapTree(tree) {
      const newTree = [];
      tree.forEach(item => {
        if (item.Category && item.Category.length) {
          const children = this.mapTree(item.Category);
          newTree.push({
            title: item.Name,
            name: item.Name,
            id: item.Id,
            key:item.Id,
            checked: 'uncheck',
            children
          });
        } else {
          newTree.push({
            title: item.Name,
            name: item.Name,
            id: item.Id,
            key:item.Id,
            checked: 'uncheck',
            children: []
          });
        }
      });
      // newTree.push({
      //   title: '其他分组',
      //   name: '其他分组',
      //   id: '#',
      //   key:'#',
      //     checked: 'uncheck',
      //   children: []
      // })
      return newTree;
    },
    //确定
    getSelectId(data){
      if(data == 'cancel'){
        this.checkedKeys = this.categoryIdS;
          this.treeData.map(item=>{
              if(this.categoryIdS.indexOf(item.id)>-1){
                  item.checked = 'checked'
              }else{
                  item.checked = 'uncheck'

              }
          })
      }else if(data == 'rest'){
        // this.checkedKeys = [this.categoryId];
        this.checkedKeys = [];
          this.treeData.map(item=>{
              item.checked = 'uncheck'
          })
      }else{
        this.checkedKeys =data;
      }

      this.$emit('getSelectId',this.checkedKeys)
    }
  },

  created() {
    this.queryByGroup();
  }
};
</script>
<style lang="less">
.treeList {
  width: 240px;
  .tree-body {
    height: 420px;
    overflow-y: auto;
    /deep/ .p-tree-node-content{
      padding-left: 0 !important;
    }
  }
}
</style>