角色切换

guoshilong

2023-10-27 a670ec13e889e4ca6d5435c7504962677338e3c3

角色切换

 api/system/role.js

@@ -9,10 +9,10 @@
    })
}

// 角色管理全部
export const getAll = (params) => {
// 获取当前用户所有角色
export const getRoleListByIds = (params) => {
    return http.request({
        url: '/api/blade-system/role/all',
        url: '/blade-system/role/getRoleListByIds',
        method: 'GET',
        params
    })
@@ -77,13 +77,12 @@
    })
}

export const dynamicMenu = (roleId, flag) => {
export const dynamicMenu = (roleId) => {
    return http.request({
        url: '/api/blade-system/menu/dynamicMenu',
        url: '/blade-system/menu/dynamicMenu',
        method: 'GET',
        params: {
            roleId,
            flag
            roleId
        }
    })
}

 subPackage/user/views/roleSelect.vue

New file
@@ -0,0 +1,136 @@
<template>
    <view class="container">
        <view class="main">
            <view @click="activeRole(item)" v-for="(item,index) in roleList" :key="index" class="df-ac cell"
                :class="item.active?'active':''">

                <view class="df-ac prefix">
                    <u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
                    <view class="label">{{item.roleName}}</view>
                </view>

                <view v-if="item.active" class="suffix">
                    <u-icon name="checkbox-mark" color="#2979ff" size="22"></u-icon>
                </view>

            </view>
        </view>

        <view class="submit-btn">
            <u-button @click="submit" type="primary" text="确认"></u-button>
        </view>


    </view>
</template>

<script>
    import store from "@/store/index.js"
    import {
        dynamicMenu,
        getRoleListByIds,
    } from "@/api/system/role.js"
    export default {
        data() {
            return {
                roleList: [],
                selectRole: {},
            }
        },
        created() {
            this.getUserRole()

            console.log(this.activeRoleId)
        },
        mounted() {

        },
        onLoad(option) {

        },
        onShow() {

        },
        methods: {
            //获取当前角色的所有权限列表
            async getUserRole() {
                const res = await getRoleListByIds({
                    roleIds: this.userInfo.role_id
                })

                let data = res.data
                data.forEach(e => {
                    if (e.id == this.activeRoleId) {
                        e.active = true
                    } else {
                        e.active = false
                    }
                })

                this.roleList = res.data
            },

            //启用角色
            activeRole(item) {
                this.selectRole = item
                this.roleList.forEach(role => {
                    if (role.id == item.id) {
                        role.active = true
                    } else {
                        role.active = false
                    }
                })
            },

            async submit() {
                //保存当前激活的角色
                store.commit("setActiveRoleId", this.selectRole.id)

                //获取角色菜单
                const res = await dynamicMenu(this.selectRole.id)

                console.log(res, "--------------")
                this.$u.func.showToast("切换角色成功")

            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        background-color: #fafafa;
        height: 100%;

        .main {
            .cell {
                background-color: #ffffff;
                margin: 20rpx 0;
                padding: 30rpx 20rpx;
                justify-content: space-between;
                height: 30rpx;

                .label {
                    font-size: 28rpx;
                }
            }
        }

        .submit-btn {
            padding: 30rpx;
            position: relative;
            top: 50%;
        }


    }

    .df-ac {
        display: flex;
        align-items: center;
    }

    .active {
        background-color: #e8effb !important;
    }
</style>