fj-dc-ui/.svn/pristine/ce/ce62ed8e7199a7094548475faf33825f8bafd0ff.svn-base

<template>
    <div style="overflow: hidden">
      <el-select v-model="treeLabel" placeholder="请选择" multiple collapse-tags>
        <el-option  :value="opValue" class="filter-tree">
          <el-tree :data="data"
                   v-loading="initTreeLoading"
                   show-checkbox
                   node-key="id"
                   ref="treeCols"
                   default-expand-all
                   :default-checked-keys="keyArr"
                   check-strictly
                   highlight-current
                   :props="defaultProps"
                   @check-change="handleCheckChange"></el-tree>
        </el-option>
      </el-select>
    </div>
</template>

<script>

import { getAddTree,getAddTrees} from "../api/duChaAPI.js";
export default {
    name:"addvMul",
    props:['rootAddCode','level'],
    components: {},
    data() {
        return {
            keyArr:[],
            mineStatus: [],
            opValue:"",
            treeLabel:[],
            treeValue:[],
            initTreeLoading:true,
            data: []
        };
    },
    //监听属性 类似于data概念
    computed: {
        defaultProps(){
            var _self = this;
            return  {
                children: 'children',
                    label: 'nm',
                    disabled:function(data,node){
                    if(_self.level=='3'){
                       if(data.level=='3'){
                          return true;
                       }
                    }
                }
            };
        }
    },
    //监控data中的数据变化
    watch: {
    },
    //方法集合
    methods: {
        setCheck(ids,nms){
          this.keyArr = ids;
          this.treeLabel = nms;
        },
        getAdDataList(adCodes,level) {

            if(adCodes && level=='3'){
              this.rootAddCode = adCodes;
              this.level = level
            }
            if(adCodes==""){
                this.rootAddCode = "";
                this.data = [];
            }
            var _self = this;
            if(this.level=="1" && this.rootAddCode){
                getAddTree(this.rootAddCode,this.level).then((res)=>{
                    if(res.data){
                        _self.data = res.data.children;
                        _self.initTreeLoading = false;
                    }
                })
            }
            else if(this.level=="3" && this.rootAddCode){
                getAddTrees(this.rootAddCode,this.level).then((res)=>{
                    if(res.data){
                        _self.data = res.data;
                        _self.initTreeLoading = false;
                    }
                })
            }else{
                _self.data = [] ;
                _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) {
            this.treeLabel = [];
            this.treeValue = []
            this.$nextTick(()=>{
                let res = this.$refs.treeCols.getCheckedNodes(false, false); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
                res.forEach(item => {
                    this.treeLabel.push(item.nm);
                    this.treeValue.push(item.id);
                });
                this.$refs.treeCols.setCheckedKeys(this.treeValue);
                this.$emit('changeAddv',{adNames:this.treeLabel.join(","),adCodes:this.treeValue.join(","),level:this.level})
            })

        },
        // 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;
  }
  .el-select /deep/ .el-tag__close{
    display: none;
  }
</style>