fj-dc-ui/.svn/pristine/c0/c037cda3c55fa9849d002fbc0916ac6166ddb192.svn-base

<!-- 
版本0.0.1
调用组件需要三个参数：
1、maxHeight 行政区划树选择面板的最大高度,类型：Number
2、maxWidth 行政区划树选择面板的宽度,类型：Number
3、rootAddCode 行政区划树的根节点，全国是12个0，类型String
4、level 行政区划树的查询深度等级，例如：根节点是全国，"3"是查到县级,类型String
5、nameOrCode 父组件需要的是行政区划名称或行政区划编码
 -->
<template>
    <div>
        <el-input 
            ref="myInput"
            v-model="addvInfoShow"
            @input="addvInfo"
            @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"
                    :data="treeData"
                    accordion
                    :props="defaultProps"
                    node-key="id"
                    :filter-node-method="filterNode"
                    @node-click = 'treeNodeClickHandler'
                    ref="tree">
                </el-tree>
            </el-row>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getAddTree} from "../api/duChaAPI.js";
export default {
    //import引入的组件需要注入到对象中才能使用
    props:['maxWidth','maxHeight','rootAddCode','level','value','nameOrCode',"ifInstitutions"],
    components: {},
    data() {
    //这里存放数据
        return {
            addvInfoShow:"",
            addvInfo:"",
            showMenuTree:false,
            filterText: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'nm'
            },
            treeLoading:true,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        addvInfo(val) {
            if(this.$refs.tree){
                this.$refs.tree.filter(val);
            }
            this.$emit('input',this.addvInfo);
        },
        value:function(){
            this.addvInfoShow = this.value;
        }
    },
    //方法集合
    methods: {
        showSelet(){
            // alert(1);
            this.showMenuTree = true;
            this.getAdDataList();
        },
        filterNode(value, data, node) {
            // 如果什么都没填就直接返回
            if (!value) return true;
            // 如果传入的value和data中的nm相同就是匹配到了
            if (data.nm.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.nm.indexOf(value) !== -1) {
                    return true;
                }
                // 否则的话再往上一层做匹配
                parentData = parentData.parent;
                index ++;
            }
                // 没匹配到返回false
            return false;
        },
        //获取行政区划树结构数据
        getAdDataList: function(node, resolve) {
            var _self = this;
            try {
                getAddTree(_self.rootAddCode,_self.level).then((res)=>{
                    if(res.data){
                        _self.treeData = res.data.children;
                        _self.treeLoading =false;
                    }
                })
            } catch (e) {
            
            }
        },
        //树节点点击事件
        treeNodeClickHandler:function(data,node,tree){
            //机构管理默认展示行政区划代码
            if(this.ifInstitutions === "adCode"){
                this.addvInfoShow = data.id;
            }else if(this.ifInstitutions === "rlCode"){
                this.addvInfoShow = data.pid;
            }else{
                //判断父组件需要的是行政区名称或者编码
                if(this.nameOrCode == 'name'){
                    this.addvInfo = data.nm;
                    this.addvInfoShow = data.nm;
                }else{
                    this.addvInfo = data.id;
                    this.addvInfoShow = data.nm;
                }
            }
            this.$emit('addvTreeNodeClick',data);
            this.showMenuTree = false;
        },
        //清除操作
        clearEvent:function(){
            // this.$emit('addvTreeNodeClick',"");
            this.addvInfo = "";
            this.$emit('input',this.addvInfo);
        },
        //关闭面板
        closeTree(){
            this.showMenuTree = false;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.addvInfo = this.value;
        this.$refs.myInput.$el;
    },
    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>