fj-dc-ui/.svn/pristine/b9/b98d1a2e7b4d9452713d87ff5cbaf0c583cf475f.svn-base

<template>
    <div style="overflow: hidden">
      <el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags @change="selectChange">
        <el-option  :value="mineStatusValue" class="filter-tree">
          <el-tree :data="data"
                   v-loading="initTreeLoading"
                   show-checkbox
                   node-key="id"
                   ref="tree"
                   highlight-current
                   :props="defaultProps"
                   @check-change="handleCheckChange"></el-tree>
        </el-option>
      </el-select>
    </div>
</template>

<script>

import { getAddTree} from "../api/duChaAPI.js";
export default {
    name:"addvTree",
    props:['rootAddCode','level'],
    components: {},
    data() {
        return {
            mineStatus: [],
            mineStatusValue:"",
            initTreeLoading:true,
            data: [],
            defaultProps: {
                children: 'children',
                label: 'nm'
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
    },
    //方法集合
    methods: {
        getAdDataList() {
            var _self = this;
            getAddTree(this.rootAddCode,this.level).then((res)=>{
                if(res.data){
                    _self.data = res.data.children;
                    _self.initTreeLoading = false;
                }
            })
        },
        selectChange(e){
            var arrNew = [];
            var dataLength = this.mineStatusValue.length;
            var eleng = e.length;
            for(let i = 0; i< dataLength ;i++){
                for(let j = 0; j < eleng; j++){
                    if(e[j] === this.mineStatusValue[i].nm){
                        arrNew.push(this.mineStatusValue[i])
                    }
                }
            }
            this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
        },
        handleCheckChange(data, checked, node) {

            let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [];
            let arrId = [];
            let arr = [];
            res.forEach(item => {
                arrLabel.push(item.nm);
                arrId.push(item.id);
                arr.push(item);
            });
            this.mineStatusValue = arr;
            this.mineStatus = arrLabel;
            console.log('arr:'+JSON.stringify(arr))
            console.log('arrLabel:'+arrLabel)
            this.$emit('checkchange',arrId.join(","));
        },
        // changeSelect(data, check) {
        //
        //     var parentNm = [];
        //     var currNm = [];
        //     //getCheckedNodes 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
        //     this.TreeList= this.$refs.tree.getCheckedNodes(false, true).map(i => i.id);
        //     if(check.halfCheckedNodes && check.halfCheckedNodes.length>0){
        //         check.halfCheckedNodes.forEach((item)=>{
        //             parentNm.push(item.nm);
        //         })
        //     }
        //     if(check.checkedNodes && check.checkedNodes.length>0){
        //         check.checkedNodes.forEach((item)=>{
        //             currNm.push(parentNm.join("-")+"-"+item.nm);
        //         })
        //     }
        //     this.mineStatus = currNm;
        // }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getAdDataList();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
  .filter-tree{
    height:auto;
    overflow-y:auto;
    max-height: 200px;
    padding: 0;
    background: white;
  }
</style>