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

<template>
    <div class="treebox" v-loading="loading">
        <el-tree :highlight-current="true" :check-strictly="true" ref="tree" :data="treeList" node-key="o"
            :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc" @node-click="handleNodeClick">

            <span class="custom-tree-node" slot-scope="{ node, data }">
                <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 @change="handleCheckChange(node)" 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"],
        data() {
            return {
                treeList: [],
                opt: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                defaultListc: [],
                loading:false
            };
        },
        methods: {
            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;
                });
            },
            handleNodeClick(v) {
                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
                }
                console.log(v)
                this.$http({
                    url: "/sysmgr/sysuserinfo/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        groupId: v.o
                    },
                }).then((res) => {
                    v.children = v.children?v.children:[];
                    res.data.forEach(item=>{
                        v.children.push({
                            id:item.groupId,
                            label:item.loginNameStr,
                            type:1,
                            displayname:v.displayname,
                            loginNoStr:item.loginNoStr,
                            o:item.id,
                        });
                    })
                });
                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;
                    }
                }
            },
            handleCheckChange(v){
                console.log(v)
                let opt = {
                    leaderAuditNo:v.data.loginNoStr,
                    leaderAuditName:v.data.label,
                    displayname:v.data.displayname,
                    groupId:v.data.o
                }
                this.$emit("treeCheck", opt);
                for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
                    if(v.data.o == this.$refs.tree.store._getAllNodes()[i].data.o){
                        this.$refs.tree.store._getAllNodes()[i].checked = true;
                    }else{
                        this.$refs.tree.store._getAllNodes()[i].checked = false;
                    }
                }
                this.$forceUpdate()
            }
        },
        created() {
            this.getTree();
            this.defaultListc = this.defaultList;
        },
        watch: {
            type() {
                this.defaultListc = this.defaultList;
                this.$forceUpdate()
            },
            defaultList() {
                this.$forceUpdate()
            },
            closeList() {
                this.$refs.tree.setCheckedNodes([]);
            },
        }
    };
</script>

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