datang-admin/src/views/privilegeManagement/role/permissions.vue

<template>
    <div class="grid-content">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item v-if="!add" label="角色名称">
                <el-input v-model="ruleName" :disabled="!isEdit" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item v-else label="角色名称">
                <el-input v-model="ruleName"  placeholder="名称"></el-input>
            </el-form-item>
        </el-form>

        <div class="detail">
            <span style="font-weight: bold;">{{title}}</span>
            <div style="text-align: right;display: inline-block">
                <el-button v-show="!add" @click="editPermission">编辑</el-button>
            </div>
        </div>
        <div v-if="!add" style="position: relative;">
            <div class="mask" @click="showTips" v-if="!isEdit">
               查看状态,无法编辑
            </div>
            <el-tree
                :props="props"
                :data="permissionsList"
                show-checkbox
                :default-checked-keys="checkedKey"
                default-expand-all
                ref="tree"
                node-key="permissionId"
            />
        </div>
        <div v-else>
            <el-tree
                :props="props"
                :data="permissionsList"
                show-checkbox
                :default-checked-keys="checkedKey"
                default-expand-all
                ref="treeAdd"
                node-key="permissionId"
            />
        </div>
        <div v-show="isEdit || add" class="detail" style="border-top: 1px solid #d9d9d9">
            <el-checkbox v-model="checkedAll" @change="handleCheckAllChange">选择全部</el-checkbox>
            <div style="text-align: right;display: inline-block;top: 7px;">
                <el-button v-show="!add" @click="cancelEdit">取消</el-button>
                <el-button type="primary" @click="confirmEdit">确认</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Alert from "@/utils/alert";
    import { GET_PERMISSION_ALL,UPDATE_ROLE,ROLE_ADD } from '@/api/jurisdiction'

    export default {
        name: "permissions",
        props: ['roleId', 'roleName'],
        data() {
            return {
                ruleName: '',
                title: '权限详情',
                add: false,
                isEdit: false,
                permissionsList: [],
                checkedAll: false,
                checkedKey: [],
                props: {
                    label: 'permissionName',
                    value: 'permissionId',
                    children: 'children',
                }
            }
        },
        beforeMount() {
            if (this.$route.query.add) {
                console.log(15654);
                this.isEdit = false;
                this.add = true;
                this.title = '设置权限';
            }
        },
        mounted() {
            this.getPermissions();
        },
        watch: {
            roleId() {
                this.getPermissions();
            },
            roleName() {
                this.ruleName = this.roleName
            },
            permissions() {
            }
        },
        methods: {
            showTips() {
                Alert.fail('点击编辑按钮即可开始编辑')
            },

            /**
             * 获取当前所有权限以及设置账户所拥有的权限
             */
            getPermissions() {
                this.ruleName = this.roleName;
                this.isEdit = false;
                const params = { roleId:this.roleId }
                GET_PERMISSION_ALL(params).then(res => {
                    if(res.code === 200) {
                        this.permissionsList = res.data
                        this.getDefault()
                    }
                })
            },

            /**
             * 设置默认选中的节点
             */
            getDefault() {
                let defaultList = this.getDefaultKeys(this.permissionsList)
                this.checkedKey = defaultList
            },

            /**
             * 递归
             * 设置全部选中
             */
            getDefaultKeys(list) {
                let keyList = []
                if(list && list.length) {
                    for(let i = 0; i < list.length; i++) {
                        if(list[i].own === 1) {
                            if(!list[i].children.length) {
                                keyList.push(list[i].permissionId)
                            } else {
                                const itemList = this.getDefaultKeys(list[i].children)
                                if(itemList.length) {
                                    for(let m=0;m<itemList.length;m++) {
                                        keyList.push(itemList[m])
                                    }
                                }
                            }
                        }
                    }
                }
                return keyList
            },

            /**
             * 编辑权限
             */
            editPermission() {
                this.isEdit = true
            },

            /**
             * 取消编辑
             */
            cancelEdit() {
                this.isEdit = false
            },


            /**
             * 确定编辑
             */
            confirmEdit() {
                if(this.add) {
                    this.establish();
                    return
                }
                let permissionIds = [];
                let list = this.$refs.tree.getCheckedNodes(false,true);
                if(list.length) {
                    for(let i=0;i< list.length;i++) {
                        permissionIds.push(list[i].permissionId)
                    }
                }
                if(!this.ruleName) {
                    Alert.fail('角色名称不能为空!')
                    return
                }
                if(!permissionIds.length) {
                    Alert.fail('权限不能为空!')
                    return
                }
                const params = {
                    roleId: this.roleId,
                    roleName: this.ruleName,
                    permissionIds,
                }
                UPDATE_ROLE(params).then(res => {
                    if(res.code === 200) {
                        Alert.success('编辑成功')
                        this.cancelEdit()
                        const showData = {
                            roleId: this.roleId,
                            roleName: this.ruleName,
                        }
                        this.$emit('getList',showData)
                    } else {
                        Alert.fail('编辑失败,请重试')
                    }
                })
            },

            /**
             * 创建新角色
             */
            establish() {
                let permissionIds = [];
                let list = this.$refs.treeAdd.getCheckedNodes(false,true);
                if(list.length) {
                    for(let i=0;i< list.length;i++) {
                        permissionIds.push(list[i].permissionId)
                    }
                }
                if(!this.ruleName) {
                    Alert.fail('角色名称不能为空!')
                    return
                }
                if(!permissionIds.length) {
                    Alert.fail('权限不能为空!')
                    return
                }
                const params = {
                    roleName: this.ruleName,
                    permissionIds
                }
                ROLE_ADD(params).then(res => {
                    if(res.code === 200) {
                        Alert.success('添加角色成功')
                    }
                })
            },

            /**
             * 全选
             */
            handleCheckAllChange() {
                let checkedKey = []
                if(this.checkedAll) {
                    checkedKey = this.getKeys(this.permissionsList)
                }
                if(!this.add) {
                    this.$refs.tree.setCheckedKeys(checkedKey)
                } else {
                    this.$refs.treeAdd.setCheckedKeys(checkedKey)
                }
            },

            /**
             * 递归
             * 设置全部选中
             */
            getKeys(list) {
                let keyList = []
                if(list && list.length) {
                    for(let i = 0; i < list.length; i++) {
                        keyList.push(list[i].permissionId)
                        if(list[i].children && list[i].children.length) {
                            const itemList = this.getKeys(list[i].children)
                            keyList.push([...itemList])
                        }
                    }
                }
                return keyList
            },
        }
    }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
    .mask {
        text-align: center;
        padding-top: 100px;
        color: #666;
        font-size: 24px;
        font-weight: bold;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(166,166,166,0.2);
        z-index: 100;
    }
    .grid-content {
        background: #fff;
        padding: 20px;
        border-right: 1px solid #d9d9d9;

        .option-span {
            color: #a90500;
            cursor: pointer;
        }
    }

    .detail {
        padding: 15px 10px;
        position: relative;
        border-bottom: 1px solid #d9d9d9;

        span {
            font-weight: bold;
        }

        div {
            position: absolute;
            top: 0px;
            right: 0;
        }


    }

    .grid-content {
        background: #fff;
        padding: 12px;

        .rowBg:nth-child(2n+1) .bg-purple-dark {
            background: rgba(233, 233, 233, 1);
            padding: 12px;
        }

        .bg-purple-dark {
            > .el-switch {
                min-width: 134px;
            }
        }
    }

    .child-item {
        display: inline-block;
        margin: 0 35px;
    }

</style>