spfm-market-front/src/components/deptTreeUserNew.vue

<template>
    <div class="treebox" v-loading="loading">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree :highlight-current="true" :check-strictly="true" ref="tree" @check-change="handleCheckChange"
            :data="treeList" node-key="id" :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc"
            @node-click="handleNodeClick" :filter-node-method="filterNode">
            <span class="custom-tree-node" slot-scope="{ node, data }" @click="cs(node)">
                <em style="display: inline-block;width: 20px;" v-if="node.data.haveUserFlag == 'N'&& node.data.children.length == 0"></em>
                <i class="el-icon-caret-right" v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"></i>
                <el-checkbox style="margin-right: 10px" v-model="node.checked" v-if="node.data.type == 1"></el-checkbox>
                <span>{{ node.label }}</span>
            </span>
        </el-tree>
    </div>
</template>
<script>
    export default {
        props: ["defaultList", "type", "closeList","fillLists"],
        data() {
            return {
                treeList: [],
                opt: [],
                defaultProps: {
                    children: "children",
                    label: "label",
                },
                defaultListc: [],
                loading:false,
                filterText: '',
            };
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            cs(v){
                // console.log(v)
                
            },
            getTree(v) {
                this.loading = true;
                this.$http({
                    url: "/sysmgr/csysdept/queryAllList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        parentorgid: v,
                    },
                }).then((res) => {
                    this.treeList = res.data;
                    this.loading = false;
                });
            },
            handleCheckChange(v) {
                let opt = [];
                let list = this.$refs.tree.getCheckedNodes();
                for (let i = 0; i < list.length; i++) {
                    if (list[i].type == 1) {
                        opt.push({
                            receiveNo: list[i].loginNoStr,
                            receiveName: list[i].label,
                            deptName: list[i].displayname,
                            deptCode: list[i].groupId,
                            id: list[i].id,
                            type: list[i].type,
                            label: list[i].label
                        });
                    }
                }
                this.$emit("treeCheck", opt);
            },
           async handleNodeClick(v,node) {
                let s = false;
                if (v.children && v.children.length == 0) {
                    s = true;
                }
                if (v.type) {
                    return;
                }
                if (
                    v.children &&
                    v.children.length > 0 &&
                    v.children[v.children.length - 1].type == 1
                ) {
                    return;
                }
                
                await this.$http({
                    url: "/sysmgr/sysuserinfo/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        groupId: v.o,
                    },
                }).then((res) => {
                    res.data.forEach((item) => {
                       v.children.push({
                            id: item.id,
                            label: item.loginNameStr,
                            type: 1,
                            displayname: v.displayname,
                            groupId: item.groupId,
                            loginNoStr: item.loginNoStr,
                        });
                       
                    });
                
                    
                });
                 
                    node.childNodes.forEach(m=>{
                         this.fillLists.forEach(n=>{
                            if(m.data.loginNoStr == n.fillNo){
                                m.checked = true
                            }
                         })
                     })
                     
                for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
                    if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
                        this.$refs.tree.store._getAllNodes()[i].expanded = true;
                        return;
                    }
                }
            },
        },
        created() {
            this.getTree();
            this.defaultListc = this.defaultList;
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
            type() {
                this.defaultListc = this.defaultList;
                this.$forceUpdate();
            },
            defaultList() {
                this.$forceUpdate();
            },
            closeList() {
                this.$refs.tree.setCheckedNodes(this.closeList);
            },
        },
    };
</script>

<style scoped lang="scss">
    .el-icon-caret-right{
        color: #ccc;
        margin:0 5px;
    }
    .treebox {
        border: 1px solid #ddd;
    }
</style>