auth-web/src/pages/data-auth-manage/components/table-column-auth.vue

<!--
表权限 - 标签授权、人员授权、机构授权 -公用
@Author: linqian
@Date: 2021-04-19 15:46 
-->
<template>
    <div>
        <div v-if="subId">
            <div style="height: calc(100vh - 22rem)">
                <dg-scrollbar :key="key">
                    <set-auth-tree
                        :ref="'authTree_'+index"
                        :tab="tab"
                        v-for="(item, index) in authData"
                        :key="index"
                        :treeData="item"
                        :reactTree="reactTree"
                        @getSelectNodes="getSelectNodes"
                        @checkChange="checkChange"
                    ></set-auth-tree>
                </dg-scrollbar>
            </div>
         
        </div>
        <div v-else>
            <p v-if="subType == 'BUSINESS'">请选择标签。</p>
            <p v-else-if="subType == 'ORG'">请选择机构。</p>
            <p v-else>请选择人员。</p>
        </div>
    </div>
</template>

<script>
import * as api from "@/api/data-auth.js";
import setAuthTree from "./set-auth-tree";
import checkList from "./check-list";

export default {
    props: {
        subId: String,
        subType: String,
        saveApi: String,
        tab: String,
        reactTree:Boolean,
        singleAuthData: Array
    },
    components: {
        setAuthTree
    },
    data() {
        return {
            authData: [],
            showCheckListBtn: false,
            saveAuthVoList: {},
            key:0
        };
    },
    computed: {},
    watch: {
        singleAuthData: {
            deep: true,
            handler(val) {
              if (this.reactTree) {
                let _authData = this.$lodash.cloneDeep(this.authData);
                for (let i = 0; i < val.length; i++) {
                        const { id, tickedDatas } = val[i];
                        for (let j = 0; j < _authData.length; j++) {
                            let element = _authData[j];
                            if (element.id == id) {
                                element.selectNodes = tickedDatas.map((item) => {
                                    const { dataId, dataType, dataCode, classifyCode } = item;
                                    return {
                                        dataId,
                                        classifyCode,
                                        dataCode
                                    };
                                });
                            }
                        }
                    }
                    this.authData = _authData;
                    this.key++
                    console.log("authData",this.authData);
              }
            }
        }
    },
    methods: {
        handleViewAuthList() {
            const vm = this;
            const layer = this.$dgLayer({
                title: "授权清单",
                content: checkList,
                props: {
                    type: vm.tab,
                    authTree: vm.authTree
                },
                on: {
                    success(params) {
                        layer.close(layer.dialogIndex);
                    }
                },
                cancel: function (index, layero) {
                    // 关闭对应弹窗的ID
                    layer.close(index);
                    return false;
                },
                area: ["1150px", "850px"]
            });
        },
        /**
         * @description: 重置授权
         */
        handleReset() {
            this.$emit("submitReset", this.tab)
        },
        /**
         * @description: 保存授权
         */
        handleSave() {        
            // 保存的树节点
            // let authVoList = [];
            // for (const key in this.saveAuthVoList) {
            //     const element = this.saveAuthVoList[key];
            //     authVoList = [...authVoList, ...element];
            // }
            // // 数组去重
            // let obj = {};
            // const _authVoList = authVoList.reduce((cur, next) => {
            //     obj[next.dataId] ? "" : (obj[next.dataId] = true && cur.push(next));
            //     return cur;
            // }, []);

            //  return _authVoList
            let attr = []
            for (let i = 0; i < this.authData.length; i++) {
                const selectNode = this.$refs['authTree_'+i][0].$refs.authTree.getCheckedNodes(true);
                attr = [...attr, ...selectNode]
            }
            console.log("attr",attr)              

            return attr.map(item => {
                return {
                    dataId: item.id,
                    dataCode: item.code,
                    classifyCode: item.classifyCode
                }
            })
           
        },

        // 获取勾选的节点
        getSelectNodes({ type, selectNodes }) {
            this.saveAuthVoList[type] = selectNodes;
        },
        checkChange(vo) {
            this.$emit("checkChange", vo)
        },
        // 查询单个主体相关数据权限
        getSubDataAuth() {
            return new Promise((resolve) => {
                const { subId, subType } = this;
                const params = {
                    authType: this.tab,
                    subId,
                    subType
                };
                api.getSubDataAuth(params).then((res) => {
                    resolve(res.data.content);
                });
            });
        },
        getAllDataTree() {
            // 获取表权限
            return new Promise((resolve) => {
                api.getAllDataTree({ attrType: this.tab }).then((res) => {
                    resolve(res.data.content);
                });
            });
        },
        async initAuthTree() {
            if (this.subId) {
                const singleAuthData = await this.getSubDataAuth();
                let authTree = await this.getAllDataTree();
                if (singleAuthData.length > 0) {
                    this.showCheckListBtn = true;
                    for (let i = 0; i < singleAuthData.length; i++) {
                        const { id, tickedDatas } = singleAuthData[i];
                        for (let j = 0; j < authTree.length; j++) {
                            let element = authTree[j];
                            if (element.id == id) {
                                this.saveAuthVoList[id] = element.selectNodes = tickedDatas.map((item) => {
                                    const { dataId, dataType, dataCode, classifyCode } = item;
                                    return {
                                        dataId,
                                        classifyCode,
                                        dataCode
                                    };
                                });
                            }
                        }
                    }
                } else {
                    this.showCheckListBtn = false;
                }
                console.log("saveAuthVoList", this.saveAuthVoList);
                this.authData = authTree;
            }
        }
    },
    created() {
        console.log("初始化");
        this.initAuthTree();
    },
    mounted() {}
};
</script>

<style lang='scss'>
</style>