fj-dc-ui/.svn/pristine/de/dec668478c85eebf10267b8cfaf4539f8d6185c9.svn-base

<!--
版本0.0.1
调用组件需要三个参数：
1、maxHeight 行政区划树选择面板的最大高度,类型：Number
2、maxWidth 行政区划树选择面板的宽度,类型：Number
3、rootAddCode
 -->
<template>
    <div>
        <el-input
            ref="myInput"
            v-model="addvInfoShow"
            @focus="showSelet()"
            @clear="clearEvent()"
            clearable
            placeholder="接收单位">
        </el-input>
        <div
            class="mySelectTree"
            v-if="showMenuTree"
            v-loading="treeLoading"
            :style="{'width': maxWidth +'px'}">
            <el-row>
                <el-button type="text" style="float:right;padding:0;" @click="closeTree()" icon="el-icon-circle-close"></el-button>
            </el-row>
            <el-row>
                <el-tree
                    :style="{'max-height': maxHeight +'px'}"
                    style="overflow:auto;"
                    class="filter-tree"
                    accordion
                    :props="defaultProps"
                    node-key="id"
                    :filter-node-method="filterNode"
                    @node-click = 'treeNodeClickHandler'
                    ref="tree"
                    lazy
                    :load="loadAddvData">
                </el-tree>
            </el-row>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getOrgByPid } from "@api/duChaAPI.js";
export default {
    //import引入的组件需要注入到对象中才能使用
    props:['maxWidth','maxHeight','rootAddCode','addvInfoShow'],
    components: {},
    data() {
    //这里存放数据
        return {
            addvInfoShow:"",
            addvInfo:"",
            showMenuTree:false,
            filterText: '',
            treeData: [],
            defaultProps: {
                label: "name",
                children: "children",
                disabled: false,
                expandOnClickNode: false ,
                first:true,
            },
            treeLoading:true,
        };
    },
    //监控data中的数据变化
    //方法集合
    methods: {
        showSelet(){
            this.showMenuTree = true;
            this.getAdDataList();
        },
        filterNode(value, data, node) {
            // 如果什么都没填就直接返回
            if (!value) return true;
            // 如果传入的value和data中的nm相同就是匹配到了
            if (data.name.indexOf(value) !== -1) {
                return true;
            }
            // 否则要去判断它是不是选中节点的子节点
            return this.checkBelongToChooseNode(value, data, node);
        },
        // 判断传入的节点是不是选中节点的子节点
        checkBelongToChooseNode(value, data, node) {
            const level = node.level;
            // 如果传入的节点本身就是一级节点就不用校验
            if (level === 1) {
                return false;
            }
            // 先取当前节点的父节点
            let parentData = node.parent;
            // 遍历当前节点的父节点
            let index = 0;
            while (index < level - 1) {
                // 如果匹配到直接返回
                if (parentData.data.name.indexOf(value) !== -1) {
                    return true;
                }
                // 否则的话再往上一层做匹配
                parentData = parentData.parent;
                index ++;
            }
                // 没匹配到返回false
            return false;
        },
        //获取行政区划树结构数据
        getAdDataList: function(node, resolve) {
            var _self = this;
            try {
                // if(this.rootAddCode){
                    getOrgByPid(this.rootAddCode).then((res) =>{
                        console.log(res);
                        let children = [];
                        res.data.forEach((element,index)=>{
                            children.push({
                                'code':element.orgId,
                                'name':element.orgNm
                            })
                        });
                        _self.treeData = children;
                        _self.treeLoading =false;
                        // if(children.length && children[0].code != '11' && children[0].code != '12'){
                        //   this.$emit("provTreeSelectChange", { code:children[0].code, name: children[0].name});
                        // }
                    },(err) =>{});
                // }

            } catch (e) {

            }
        },

        loadAddvData: function(node, resolve) {
            var _self = this;
            try {

                var code = "";
                if(node.data && node.data.code){
                    code = node.data.code;
                }
                getOrgByPid(code).then(
                    response => {
                        var data = response.data;
                        let children = [];
                        response.data.forEach((element,index)=>{
                            children.push({
                                'code':element.orgId,
                                'name':element.orgNm
                            })
                        });


                        resolve(children);
                    },
                    response => {}
                );
            } catch (e) {

            }
        },
        //树节点点击事件
        treeNodeClickHandler:function(data,node,tree){
            this.$emit("provTreeSelectChange", { code:data.code, name: data.name});
            this.addvInfo = data.name;
            this.addvInfoShow = data.name;
            this.showMenuTree = false;
        },
        //清除操作
        clearEvent:function(){
            this.addvInfo = "";
            this.$emit('inputClear',this.addvInfo);
        },
        //关闭面板
        closeTree(){
            this.showMenuTree = false;
        }
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style >
.mySelectTree{
    position: absolute;
    z-index: 20;
    width: 100%;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 5px 0;
    padding: 5px;
    background: #fff;
}

</style>