auth-web/src/pages/data-auth-manage/components/set-auth-tree.vue

<!--
权限授权树组件
@Author: linqian
@Date: 2021-04-02 15：48
-->
<template>
    <div>
        <div class="tree">
            <p class="tree__title">
                {{ treeData.label
                }}<span v-if="showCheckbox"
                    >(<span style="color: red">{{ selectNodesNum }}</span
                    >/{{ treeData.total }})</span
                >
            </p>
            <div class="tree__content">
                <dg-tree
                    ref="authTree"
                    node-key="id"
                    :props="props"
                    :expand-on-click-node="true"
                    :show-checkbox="showCheckbox"
                    v-model="selectkeys"
                    :data="treeData.nodes"
                    :highlight-current="false"
                    :default-expanded-keys="defaultExpandKeys"
                    @check="handleCheckTree"
                >
                    <span slot-scope="{ data }" class="tree-node">
                        <span>
                            <i class="el-icon-folder-opened" v-if="data.treeNode"></i>
                            <i class="el-icon-document" v-else></i>
                            <span>
                                <span class="tree-node__name">{{ data.label }}</span>
                                <!-- <span
                                    class="tree-node__operate"
                                    v-if="!data.treeNode && tab == 'TABLE'"
                                    @click="handleViewCheckList($event, data)"
                                    >查看数据资源</span
                                > -->
                                <el-popover placement="top-start" width="400" trigger="hover" :open-delay="1000">
                                    <div class="tip-box">
                                        <h3>{{ data.label }}</h3>
                                        <p>{{ data.desc }}</p>
                                    </div>
                                    <span slot="reference" v-if="data.desc"> （{{ data.desc }}</span>
                                </el-popover>
                            </span>
                        </span>
                    </span>
                </dg-tree>
            </div>
        </div>
    </div>
</template>

<script>
import tableCheckLayer from "./table-check-layer";
import { reactTree } from "@/api/data-auth"
export default {
    props: {
        treeData: {
            type: Object
        },
        // true = 可勾选，数据授权使用
        // false = 只读。 授权查询使用
        showCheckbox: {
            type: Boolean,
            default: true
        },
        // 列授权 || 表授权
        tab: String,
        idcard: {
            type: String,
            default: ""
        },
        reactTree: Boolean,
    },
    activated() {},
    components: {},
    data() {
        return {
            props: {
                value: "id",
                label: "label",
                children: "child",
                isLeaf(data) {
                    return data.treeNode !== true;
                }
            },
            selectkeys: [],
            selectNodesNum: 0,
            // 默认展开的节点
            defaultExpandKeys: []
        };
    },
    computed: {},
    watch: {
        // treeData: {
        //     deep: true,
        //     handler(val){
        //         debugger
        //         this.selectkeys = val.selectNodes ? val.selectNodes.map((item) => item.dataId) : [];
        //         this.selectNodesNum = this.selectkeys.length;
        //         console.log("selectkeys",this.selectkeys)
        //     }
        // }
    },
    methods: {
        /**
         * @description: 复选框选中值
         * @param {object} data 当前选中数据
         * @param {array} checkedKeys 当前选中key集合
         */
        handleCheckTree(data, params) {
            this.getSelectKeys();

            // 勾选联动，点击数据资源分类和字段分类的数据会联动，点击其他的不联动
            if (data.classifyCode !== "DATA_LEVEL" && data.classifyCode !== "COLUMN_SECURITY_LEVEL" && data.classifyCode !== "COLUMN_RELATION_CATALOG") {
                let vo = {
                    operateType: "",
                    operateList: [],
                    authList: []
                }
                console.log(this.oldSelectNodes)
                const currentCheckNodes = this.$refs.authTree.getCheckedNodes(true);
                if (currentCheckNodes.length > this.oldSelectNodes.length) {
                  // 说明是新增节点
                  vo.operateType = "ADD";
                   for (let i = 0; i < currentCheckNodes.length; i++) {
                    const {id, code, classifyCode} = currentCheckNodes[i];
                    if (this.oldSelectNodes.filter(item => item.id == id) < 1) {
                        vo.operateList.push({
                            dataId: id,
                            dataCode: code,
                            classifyCode
                        })
                    }                   
                   }
                   
                } else {
                 // 说明是取消节点 
                 vo.operateType = "DEL";
                   for (let i = 0; i < this.oldSelectNodes.length; i++) {
                    const {id, code, classifyCode} = this.oldSelectNodes[i];
                    if (currentCheckNodes.filter(item => item.id == id) < 1) {
                        vo.operateList.push({
                            dataId: id,
                            dataCode: code,
                            classifyCode
                        })
                    }                   
                   }
                }
                this.oldSelectNodes = currentCheckNodes;                
               this.$emit("checkChange", vo)
            }
        },
        /**
         * @description: 获取选中的节点key
         */
        getSelectKeys() {
            this.selectkeys = this.$refs.authTree.getCheckedKeys(true);
            const selectNodes = this.$refs.authTree.getCheckedNodes(true);
            this.selectNodesNum = this.selectkeys.length;
            const nodes = selectNodes.map((item) => {
                return {
                    dataCode: item.code,
                    dataId: item.id,
                    classifyCode: item.classifyCode
                };
            });
            this.$emit("getSelectNodes", {
                type: this.treeData.id,
                selectNodes: nodes
            });
            // return nodes
        },

        // 查看清单
        handleViewCheckList(e, data) {
            e.stopPropagation();
            const vm = this;
            const layer = this.$dgLayer({
                title: "数据资源列表",
                content: tableCheckLayer,
                props: {
                    tab: vm.tab,
                   resourceId: data.id
                },
                on: {
                    success(params) {
                        layer.close(layer.dialogIndex);
                    }
                },
                cancel: function (index, layero) {
                    // 关闭对应弹窗的ID
                    layer.close(index);
                    return false;
                },
                area: ["900px", "800px"]
            });
        }
    },
    created() {
        this.selectkeys = this.treeData.selectNodes ? this.treeData.selectNodes.map((item) => item.dataId) : [];
        const oldSelectNodes = this.$lodash.cloneDeep(this.treeData.selectNodes || []);
        this.oldSelectNodes = oldSelectNodes.map(item => {
            return {
                id: item.dataId,
                code: item.dataCode,
                classifyCode: item.classifyCode
            }
        })
        this.selectNodesNum = this.selectkeys.length;
        this.defaultExpandKeys = this.treeData.nodes[0] ? [this.treeData.nodes[0].id] : [];
    },
    mounted() {}
};
</script>

<style lang='scss' scoped>
.tree {
    &__title {
        font-weight: bold;
        font-size: 16px;
        line-height: 56px;
    }
    .tip-box {
        h3 {
            font-weight: bold;
            font-size: 16px;
        }
        p {
            font-size: 14px;
        }
    }
    .tree-node {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 92%;
        &__name {
            font-weight: bold;
        }
        &__operate {
            color: #1890ff;
            cursor: pointer;
            margin-left: 50px;
        }
    }
}
/deep/ .el-tree {
    margin-bottom: 10px;
}

</style>