fj-dc-ui/.svn/pristine/1e/1edeca30dfc82540b419466c6c0fd78c613a092e.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"
            check-strictly
            ref="treeCols"
            :props="defaultProps"
            :expand-on-click-node="false"
            node-key="adCode"
            default-expand-all
            :default-checked-keys="keyArr"
            lazy
            show-checkbox
            :load="loadAddvData"
            @check-change="handleCheckChange"></el-tree>
        </el-option>
      </el-select>
    </div>
</template>

<script>

import { getAdXBaseData} from "../api/duChaAPI.js";
export default {
    name:"addvSelectMul",
    props:[],
    components: {},
    data() {
        return {
            keyArr:[],
            mineStatus: [],
            opValue:"",
            treeLabel:[],
            treeValue:[],
            initTreeLoading:true,
            data: [],
            defaultProps:{
                children: 'children',
                label: 'adName',
                disabled: false,
                expandOnClickNode: false ,
                first:true,
            }
        };
    },
    //监听属性 类似于data概念
    computed: {
        organCode(){
            return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
        },
        organNm(){
            return localStorage.getItem('currentOrgNm') ? localStorage.getItem('currentOrgNm') : ''
        }
    },
    //监控data中的数据变化
    watch: {
    },
    //方法集合
    methods: {
        loadAddvData(node, resolve) {
            if(node.data.adGrad=="4"){
                resolve([]);
                return false;
            }
            if(!node.data.adCode){
                this.data = [{
                    adCode: this.organCode,
                    adFullName: this.organNm,
                    adGrad: "1",
                    adName: this.organNm,
                }];
            }else{
                getAdXBaseData(node.data.adCode).then((res)=>{
                    if(res.data){
                        resolve(res.data);
                    }
                })
            }
        },
        setCheck(ids,nms){
          this.keyArr = ids;
          this.treeLabel = nms;
        },
        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.adName);
                    this.treeValue.push(item.adCode);
                });
                this.$refs.treeCols.setCheckedKeys(this.treeValue);
                this.$emit('changeAddv',{adNames:this.treeLabel.join(","),adCodes:this.treeValue.join(","),level:this.level})
            })

        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    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>