管理后台菜单权限分角色控制，前端+后端+ER设计

二九筒

已于 2023-10-28 13:15:51 修改

阅读量1.3k

点赞数 1

文章标签：前端后端 vue.js mysql spring boot

于 2023-10-26 17:54:20 首次发布

本文链接：https://blog.csdn.net/qq_53266140/article/details/134029502

版权

一、ER数据库设计

数据库设计主要是四张表：

1. menu表存菜单相关信息

CREATE TABLE `menu` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键自增id',
  `parent_id` int DEFAULT NULL COMMENT '上级菜单id',
  `menu_name` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '菜单名称',
  `page_index` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '路径',
  `first_sorted` int NOT NULL COMMENT '主菜单排序',
  `second_sorted` int NOT NULL COMMENT '子菜单排序',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC;

2. permission 权限菜单，存角色权限组

CREATE TABLE `permission` (
  `permission_id` int NOT NULL AUTO_INCREMENT COMMENT '权限组id',
  `permission_name` varchar(25) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '权限组名称',
  `info` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '备注',
  `is_del` int NOT NULL DEFAULT '0' COMMENT '删除',
  `is_hide` int NOT NULL DEFAULT '0' COMMENT '隐藏',
  `created_time` datetime NOT NULL COMMENT '创建时间',
  `modefied_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  PRIMARY KEY (`permission_id`) USING BTREE,
  UNIQUE KEY `permission_id` (`permission_id`) USING BTREE,
  UNIQUE KEY `permission_name` (`permission_name`) USING BTREE COMMENT '权限名称索引'
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC;

3. permission_menu表存permission权限组中对应的菜单权限，menu_id对应menu表中的id，permission_id对应permission表中的id

CREATE TABLE `permission_menu` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '自增主键id',
  `menu_id` int NOT NULL COMMENT '菜单id',
  `permission_id` int NOT NULL COMMENT '权限id',
  `is_used` int NOT NULL COMMENT '是否使用',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `menu_id` (`menu_id`,`permission_id`) USING BTREE COMMENT '菜单id和权限id唯一索引',
  CONSTRAINT `menu_id` FOREIGN KEY (`menu_id`) REFERENCES `menu` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE=InnoDB AUTO_INCREMENT=97 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC;

4. permission_account表存的是每个账号对应的权限组，permission_id对应permission表中的id，account_id对应登录账号表中id

CREATE TABLE `permission_account` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '自增主键id',
  `account_id` int NOT NULL COMMENT '用户id',
  `permission_id` int NOT NULL COMMENT '权限组id',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC;

二、后端代码实现

后端代码主要实现五个功能：权限组的新增、修改、删除、给每个账号添加权限组、账号获取对应权限组菜单

实体类：创建每张表的实体类

Mapper层

PermissionMapper.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.manageapi.dao.sysMapper.PermissionMapper">

    <!--    菜单权限组结果集-->
    <resultMap id="menuMap" type="com.example.manageapi.entity.sysEntity.Menu">
        <id column="id" property="id" jdbcType="BIGINT" />
        <result column="parentId" jdbcType="BIGINT" property="parentId" />
        <result column="menuName" jdbcType="VARCHAR" property="menuName" />
        <result column="firstSorted" property="firstSorted" jdbcType="BIGINT" />
        <result column="secondSorted" property="secondSorted" jdbcType="BIGINT" />
        <association property="permissionMenu" javaType="com.example.manageapi.entity.sysEntity.PermissionMenu">
            <result column="permissionId" property="permissionId" jdbcType="BIGINT" />
            <result column="isUsed" property="isUsed" jdbcType="BIGINT" />
        </association>
    </resultMap>


    <!--    获取所有已启用权限组-->
    <select id="getPermission" parameterType="String" resultType="Permission" timeout="10">
        SELECT
            permission_id permissionID,
            permission_name permissionName,
            info
        FROM
        base.permission
        <where>
            <if test="permissionName!=null">
                permission_name LIKE CONCAT('%',#{permissionName},'%')
            </if>
            AND is_del = 0
            AND is_hide != 1
        </where>
    </select>

    <!--    获取所有菜单   -->
    <select id="getAllMenu" resultType="Menu" timeout="10">
        SELECT
            id,
            parent_id parentId,
            menu_name menuName,
            first_sorted firstSorted,
            second_sorted secondSorted
        FROM
            base.menu
        ORDER BY
            first_sorted ASC,
            second_sorted ASC
    </select>

    <!--    获取权限组的菜单   -->
    <select id="getPermissionMenu" parameterType="int" resultMap="menuMap" timeout="10">
        SELECT
            m.id,
            m.parent_id parentId,
            m.menu_name menuName,
            m.first_sorted firstSorted,
            m.second_sorted secondSorted,
            IFNULL( pm.permission_id, #{permissionId} ) permissionId,
            IFNULL( pm.is_used, 0 ) isUsed
        FROM
            base.menu m
                LEFT JOIN ( SELECT * FROM base.permission_menu WHERE permission_id = #{permissionId} ) pm ON m.id = pm.menu_id
                LEFT JOIN base.permission p ON p.permission_id = pm.permission_id
        ORDER BY
            m.first_sorted ASC,
            m.second_sorted ASC
    </select>

    <!--    新增权限组-->
    <insert id="addPermission" parameterType="Permission" useGeneratedKeys="true" keyProperty="permissionId" timeout="10">
        INSERT INTO base.permission
        <trim prefix="(" suffix=")" suffixOverrides=",">
            permission_name,
            <if test="info!=null">info,</if>
            created_time
        </trim>
        <trim prefix="VALUES (" suffix=")" suffixOverrides=",">
            #{permissionName},
            <if test="info!=null">#{info},</if>
           #{createdTime}
        </trim>
    </insert>

    <!--    插入权限组菜单-->
    <insert id="insertPermissionMenu" parameterType="PermissionMenu" timeout="10">
        INSERT INTO base.permission_menu(menu_id,permission_id,is_used)
        VALUES
            (#{menuId},#{permissionId},#{isUsed}) ON DUPLICATE KEY UPDATE is_used = #{isUsed}
    </insert>

    <!--    修改权限组信息-->
    <update id="changePermission" parameterType="Permission" timeout="10">
        UPDATE base.permission
        <set>
            <trim suffixOverrides=",">
                <if test="permissionName!=null">permission_name=#{permissionName},</if>
                <if test="info!=null">info=#{info},</if>
            </trim>
        </set>
        WHERE permission_id=#{permissionId}
    </update>

    <!--    删除权限组-->
    <update id="delPermission" parameterType="int" timeout="10">
        UPDATE base.permission
        SET is_del = 1
        WHERE permission_id = #{permissionId}
    </update>

</mapper>

Dao层

PermissionMapper.java

package com.example.manageapi.dao.sysMapper;

import com.example.manageapi.entity.sysEntity.Menu;
import com.example.manageapi.entity.sysEntity.Permission;
import com.example.manageapi.entity.sysEntity.PermissionMenu;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;
import java.util.Map;

@Mapper
public interface PermissionMapper {

    List<Permission> getPermission(String permissionName);

    List<Menu> getAllMenu();

    List<Menu> getPermissionMenu(int permissionId);

    Boolean addPermission(Permission permission);

    Boolean insertPermissionMenu(int permissionId, int menuId, int isUsed);

    Boolean changePermission(int permissionId,String permissionName, String info);

    Boolean delPermission(int permissionId);


}

Service层

PermissionService.java:

package com.example.manageapi.service.services.sysService;

import com.example.manageapi.entity.sysEntity.Permission;
import java.util.List;
import java.util.Map;

public interface PermissionService {

    List<Permission> getPermission(String permissionName);

    List<Map<String,Object>> getAllMenu() throws IllegalAccessException;

    List<Map<String,Object>> getPermissionMenu(int permissionId) throws IllegalAccessException;

    Boolean addPermission(String permissionName, String info, List<Map<String,Integer>> menuList);

    Boolean changePermission(int permissionId,String permissionName, String info, List<Map<String,Integer>> menuList);

    Boolean delPermission(int permissionId);


}

PermissionServiceImpl.java：

package com.example.manageapi.service.implement.sysServiceImpl;

import com.example.manageapi.dao.sysMapper.PermissionMapper;
import com.example.manageapi.entity.sysEntity.Menu;
import com.example.manageapi.entity.sysEntity.Permission;
import com.example.manageapi.service.services.sysService.PermissionService;
import com.example.manageapi.tools.ChangeType; //工具类 类型转换
import com.example.manageapi.tools.Time; //工具类 获取时间
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.*;

@Service
public class PermissionServiceImpl implements PermissionService {

    @Resource
    private PermissionMapper permissionMapper;

    /**
     * 获取所有权限组
     * @param permissionName
     * @return
     */
    @Override
    public List<Permission> getPermission(String permissionName) {
        return permissionMapper.getPermission(permissionName);
    }

    /**
     * 新增权限组时获取所有菜单
     * @return
     */
    @Override
    public List<Map<String,Object>> getAllMenu() throws IllegalAccessException{
            List<Map<String,Object>> resData = new ArrayList<>();
            List<Menu> menu = permissionMapper.getAllMenu();
            //循环每个菜单，分出是否为一级菜单
            for (Menu firstItem:menu) {
                //定义一级菜单，储存循环出的一级菜单
                Map<String,Object> menuData = ChangeType.entityToMap(firstItem);
                //判断当前菜单为一级菜单
                if (Objects.equals(firstItem.getParentId(),null)) {
                    //定义二级菜单集合，是一级菜单的子集菜单才储存
                    List<Menu> childMenu = new ArrayList<>();
                    //再次循环每个菜单
                    for (Menu secondItem: menu) {
                        //取出属于一级菜单的每个子集菜单
                        if (Objects.equals(secondItem.getParentId(), firstItem.getId())) {
                            childMenu.add(secondItem);
                        }
                    }
                    //二级菜单储存完成后放入一级菜单里面
                    menuData.put("childMenu",childMenu);
                    //一级菜单放入总的list
                    resData.add(menuData);
                }
            }
            return resData;
    }


    /**
     * 获取菜单权限组
     * @param permissionId
     * @return
     */
    @Override
    public List<Map<String,Object>> getPermissionMenu(int permissionId) {
        List<Map<String,Object>> resData = new ArrayList<>();
        List<Menu> menu = permissionMapper.getPermissionMenu(permissionId);
        for (Menu firstItem:menu) {
            //定义一级菜单，储存循环出的一级菜单
            Map<String,Object> firstData = ChangeType.entityToMap(firstItem);
            //移除掉permissionMenu
            firstData.remove("permissionMenu");
            //取出isUsed放入map中
            firstData.put("isUsed",firstItem.getPermissionMenu().getIsUsed());
            //判断当前菜单为一级菜单
            if (Objects.equals(firstItem.getParentId(),null)) {
                //定义二级菜单集合，是一级菜单的子集菜单才储存
                List<Map<String,Object>> childMenu = new ArrayList<>();
                for (Menu secondItem: menu) {
                    //取出属于一级菜单的每个子集菜单
                    if (Objects.equals(secondItem.getParentId(), firstItem.getId())) {
                        //定义二级菜单
                        Map<String,Object> secondData = ChangeType.entityToMap(secondItem);
                        //移除掉permissionMenu
                        secondData.remove("permissionMenu");
                        //取出isUsed放入map中
                        secondData.put("isUsed",secondItem.getPermissionMenu().getIsUsed());
                        //二级菜单放入到子集list中
                        childMenu.add(secondData);
                    }
                }
                //子集菜单放入一级菜单中
                firstData.put("childMenu",childMenu);
                //所有一级菜单放入返回的list中
                resData.add(firstData);
            }
        }
        return resData;
    }

    /**
     * 添加权限
     * @param permissionName
     * @param info
     * @param menuList
     * @return
     */
    @Override
    @Transactional
    public Boolean addPermission(String permissionName, String info, List<Map<String,Integer>> menuList) {
        Permission permission = new Permission();
        permission.setCreatedTime(Time.getTime("yyyy-MM-dd HH:mm:ss"));
        if(permissionMapper.addPermission(permission)) {
            for (Map<String,Integer> item : menuList) {
                item.put("permissionId",item.put("permissinId",permission.getPermissionId()));
               permissionMapper.insertPermissionMenu(item.get("permissionName"),item.get("menuId"),item.get("permissinId"));
            }
        }   return false;
    }

    /**
     * 修改权限
     * @param permissionName
     * @param info
     * @param menuList
     * @return
     */
    @Transactional
    @Override
    public Boolean changePermission(int permissionId,String permissionName, String info, List<Map<String,Integer>> menuList) {
        if (permissionMapper.changePermission(permissionId,permissionName,info)) {
            for (Map<String,Integer> item : menuList) {
                permissionMapper.insertPermissionMenu(item.get("permissionName"),item.get("menuId"),permissionId);
            } return true;
        } return false;
    }

    /**
     * 删除权限组
     * @param permissionId
     * @return
     */
    @Override
    public Boolean delPermission(int permissionId) {
        return permissionMapper.delPermission(permissionId);
    }
}

controller

permissionApi.java

package com.example.manageapi.controller.sysApi;

import com.example.manageapi.annotation.PassToken;
import com.example.manageapi.annotation.UseToken;
import com.example.manageapi.entity.sysEntity.Permission;
import com.example.manageapi.global.JsonResult;
import com.example.manageapi.service.implement.sysServiceImpl.PermissionServiceImpl;
import jakarta.annotation.Resource;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/permission")
public class PermissionApi {

    @Resource
    private PermissionServiceImpl permissionService;


    /**
     *新增权限是获取所有菜单API
     * @return
     */
    @PassToken //不需要token
    @GetMapping("/getPermission")
    public JsonResult getPermission(String permissionName) {
        return JsonResult.success(permissionService.getPermission(permissionName));
    }


    /**
     *新增权限组是获取所有菜单API
     * @return
     * @throws IllegalAccessException
     */
    @PassToken
    @GetMapping("/getAllMenu")
    public JsonResult getAllMenu() throws IllegalAccessException {
        return JsonResult.success(permissionService.getAllMenu());
    }

    /**
     * 权限分组菜单API
     * @param permissionId
     * @return
     */
    @PassToken
    @GetMapping("/getPermissionMenu")
    public  JsonResult getPermissionMenu(@RequestParam int permissionId) {
        return JsonResult.success(permissionService.getPermissionMenu(permissionId));
    }

    /**
     * 添加权限API
     * @param permissionName
     * @param info
     * @param menuList
     * @return
     */
    @PassToken
    @PostMapping("/addPermission")
    public JsonResult addPermission(
            @RequestParam(value = "permissionName") String permissionName,
            @RequestParam(value = "info") String info,
            @RequestParam(value = "menuList") List<Map<String,Integer>> menuList) {
        System.out.println(menuList);
        try {
            if(permissionService.addPermission(permissionName,info,menuList))
                return JsonResult.success("添加成功！");
            return JsonResult.fail("添加失败！");
        }catch (DuplicateKeyException e) {
            return JsonResult.fail("权限组已存在！");
        }
    }

    /**
     * 修改权限API
     * @param permissionId
     * @param permissionName
     * @param info
     * @param menuList
     * @return
     */
    @PassToken
    @PostMapping("/changePermission")
    public JsonResult chanegPermission(
            @RequestParam(value = "permissionId") int permissionId,
            @RequestParam(value = "permissionName") String permissionName,
            @RequestParam(value = "info") String info,
            @RequestParam(value = "menuList") List<Map<String,Integer>> menuList) {
        if(permissionService.changePermission(permissionId,permissionName,info,menuList))
            return JsonResult.success("更改成功！");
        return JsonResult.fail("更改失败！");
    }

    /**
     *删除权限组API
     * @param permissionId
     * @return
     */
    @PassToken
    @DeleteMapping("/delPermission")
    public JsonResult delPermission(int permissionId) {
        if(permissionService.delPermission(permissionId))
            return JsonResult.success("删除成功！");
        return JsonResult.fail("删除失败！");
    }
}

三、前端代码实现

<template>
    <div class="permissionView">
        <div class="searchBox">
            <div class="searchInner">
                <div>
                    <el-input v-model="searchData" style="width: 250px;" placeholder="输入权限名称搜索" maxlength="20" clearable></el-input>
                </div>
                <div>
                    <el-button @click="getPermission">搜索</el-button>
                </div>
                <div style="margin-left: 20px;">
                    <el-button style="background: rgb(202, 202, 235);font-size: 18px;border-radius: 5px;" @click="addPermission">新增权限</el-button>
                </div>
            </div>
        </div>
        <div class="permissionFrame" v-loading="loading">
            <div class="permissionBox" v-for="(item,index) in permissionData" :key="index">
                <div class="innerBox" :style="setBackground(index)" >
                    <div class="permissionHead">
                        <div @click="openPermissionDialog(item.permissionId,item.permissionName,item.info)" class="setButton">
                            <span>配置</span>
                            <el-icon><Tools /></el-icon>
                        </div>
                    </div>
                    <div class="permissionTail">
                        <text>{{ permissionNameHandle(item.permissionName) }}</text>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="setDialogData.setIndexShow" 
        :title="setDialogData.title" 
        center 
        width="600px" 
        :before-close="closeSetDialog">
            <div>
                <div>
                    <el-form ref="inputData" :model="setDialogData" :rules="rules" label-position="right" label-width="120px">
                        <el-form-item label="权限名称" prop="permissionName">
                            <el-input v-model="setDialogData.permissionName" style="width: 300px;" maxlength="10" clearable />
                        </el-form-item>
                        <el-form-item label="权限说明">
                            <el-input v-model="setDialogData.info" style="width: 300px;" type="textarea" rows="2" />
                        </el-form-item>
                    </el-form>
                </div>
                <div style="height: 300px;overflow-y: scroll;">
                    <el-tree
                    style="margin-left: 100px;"
                     ref="tree" 
                    :data="setDialogData.data" 
                    node-key="id" 
                    :props="setDialogData.props" 
                    :default-checked-keys="setDialogData.defaltCheckNode"
                    @check="getCheckedNodes" 
                    show-checkbox 
                    />
                </div>
                <div style="margin-top: 50px;text-align: center;">
                    <el-popconfirm title="确认删除该权限?" @confirm="delPermission">
                        <template #reference>
                            <el-button>删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button @click="closeSetDialog">取消</el-button>
                    <el-button style="background: rgb(202, 202, 235);" @click="savePermissions">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                permissionData: [],
                searchData:"",
                loading: true,
                imgList: {
                    "img_0": require("../../assets/permissionImg/0.png"),
                    "img_1": require("../../assets/permissionImg/1.png"),
                    "img_2": require("../../assets/permissionImg/2.png"),
                    "img_3": require("../../assets/permissionImg/3.png"),
                    "img_4": require("../../assets/permissionImg/4.png"),
                    "img_5": require("../../assets/permissionImg/5.png"),
                    "img_6": require("../../assets/permissionImg/6.png"),
                    "img_7": require("../../assets/permissionImg/7.png"),
                    "img_8": require("../../assets/permissionImg/8.png"),
                    "img_9": require("../../assets/permissionImg/9.png"),
                },
                setDialogData:{
                    setIndexShow: false,
                    dialogTitle:"",
                    dialogType:"",
                    permissionId: "",
                    permissionName: "",
                    info:"",
                    //默认勾选数据
                    defaltCheckNode:[],
                    //操作控件后的数据
                    checkNodeData:[],
                    //控件配置项
                    props: {id:"id",label:"menuName",children:"childMenu"},
                    //控件渲染数据
                    data: [],
                },
                rules: {
                    permissionName: [{required: true, message: '请输入权限名称', trigger: 'blur' }]
                }
            }
        },activated() {
            this.getPermission();


        },methods: {


            //获取权限组
            getPermission() {
                this.$request("/api/sys/getPermission","GET",{"permissionName":this.searchData}).then(res=>{
                    this.loading = false;
                    this.permissionData = res.data.data;
                })
            },

            //权限名称超长处理
            permissionNameHandle(val) {
                if(val.length>4) {
                    return val.slice(0,4) + "...";
                }else {
                    return val;
                }
            },

            //配置弹窗
            openPermissionDialog(permissionId,permissionName,info) {
                this.setDialogData.setIndexShow = true;
                this.setDialogData.dialogType="change";
                this.setDialogData.permissionId = permissionId;
                this.setDialogData.permissionName = permissionName;
                this.setDialogData.title = this.permissionNameHandle(permissionName);
                this.setDialogData.info = info;
                this.getPermissionMenuData();
            },


            //动态背景图
            setBackground(index) {
                let num = String(index).split("");
                let Index = 'img_' + num[num.length-1]
                return {background:'url(' + this.imgList[Index] + ') center / contain'}
            },


            //新增弹窗
            addPermission() {
                this.setDialogData.setIndexShow = true;
                this.setDialogData.dialogType="add";
                this.setDialogData.dialogTitle = "新增权限";
                this.getAllMenu();

            },


            //关闭弹窗
            closeSetDialog() {
                this.setDialogData.setIndexShow = false;
                this.setDialogData.permissionId = "";
                this.setDialogData.permissionName = "";
                this.setDialogData.info = "";
                this.setDialogData.title = "";
                this.setDialogData.info = "";
                this.setDialogData.defaltCheckNode = [];
                this.setDialogData.checkNodeData = [];
                this.setDialogData.data = [];
                this.setDialogData.dialogType="";
            },


            //获取权限组菜单数据
            getPermissionMenuData() {
                this.$request("/api/sys/getPermissionMenu","GET",{"permissionId":parseInt(this.setDialogData.permissionId)}).then(res=>{
                    this.setDialogData.data = res.data.data;
                    let defaltData = [];
                    res.data.data.forEach(element => {
                        //默认勾选值
                        if(element.isMainMenu!==1 &&element.isUsed===1) {
                            this.setDialogData.defaltCheckNode.push(element.id)
                        }else {
                            element.childMenu.forEach(element=>{
                                if(element.isUsed===1) {
                                    this.setDialogData.defaltCheckNode.push(element.id)
                                }
                            })
                        }
                        //默认check传入值
                        if(element.isUsed===1) {
                            defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":1})
                        }else{
                            defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":0})
                        }
                        if(element.isMainMenu===1) {
                            element.childMenu.forEach(element=>{
                                if(element.isUsed===1) {
                                    defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":1})
                                }else{
                                    defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":0})
                                }
                            })
                        }
                    });
                    this.setDialogData.checkNodeData = defaltData;
                })
            },


            //新增权限组是获取所有menu
            getAllMenu() {
                this.$request("/api/sys/getAllMenu","GET").then(res=>{
                    this.setDialogData.data = res.data.data;
                    let defaltData = [];
                    res.data.data.forEach(element => {
                        //默认勾选值
                        if(element.isMainMenu!==1 &&element.isUsed===1) {
                            this.setDialogData.defaltCheckNode.push(element.id)
                        }else {
                            element.childMenu.forEach(element=>{
                                if(element.isUsed===1) {
                                    this.setDialogData.defaltCheckNode.push(element.id)
                                }
                            })
                        }
                        //默认check传入值
                        if(element.isUsed===1) {
                            defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":1})
                        }else{
                            defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":0})
                        }
                        if(element.isMainMenu===1) {
                            element.childMenu.forEach(element=>{
                                if(element.isUsed===1) {
                                    defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":1})
                                }else{
                                    defaltData.push({"permissionId":this.setDialogData.permissionId,"menuId":element.id,"isUsed":0})
                                }
                            })
                        }
                    });
                    this.setDialogData.checkNodeData = defaltData;
                })
            },



            //树形控件选择数据处理
            getCheckedNodes(checkNode,allCheckNode) {
                let allCheckId = allCheckNode.checkedKeys.concat(allCheckNode.halfCheckedKeys); 
                this.setDialogData.checkNodeData=[];
                this.setDialogData.data.forEach(element=>{
                    if(allCheckId.indexOf(element.id,0)!==-1) {
                        this.setDialogData.checkNodeData.push({"permissionId":parseInt(this.setDialogData.permissionId),"menuId":parseInt(element.id),"isUsed":1})
                    }else {
                        this.setDialogData.checkNodeData.push({"permissionId":parseInt(this.setDialogData.permissionId),"menuId":parseInt(element.id),"isUsed":0})
                    }
                    if(element.isMainMenu===1) {
                        element.childMenu.forEach(element=>{
                            if(allCheckId.indexOf(element.id,0)!==-1) {
                            this.setDialogData.checkNodeData.push({"permissionId":parseInt(this.setDialogData.permissionId),"menuId":parseInt(element.id),"isUsed":1})
                        }else {
                            this.setDialogData.checkNodeData.push({"permissionId":parseInt(this.setDialogData.permissionId),"menuId":parseInt(element.id),"isUsed":0})
                            }
                        })
                    }                    

                })
            },

            //保存权限
            savePermissions() {
                let api = "";
                if(this.setDialogData.dialogType ==="add") {
                    api = "/api/sys/addPermission"
                }else if(this.setDialogData.dialogType ==="change") {
                    api = "/api/sys/changePermission"
                }
                this.$refs.inputData.validate((isValid,invalidFields)=>{
                    if(isValid) {
                        this.$request(api,"POST",{
                            "permissionId":this.setDialogData.permissionId,
                            "permissionName":this.setDialogData.permissionName,
                            "info":this.setDialogData.info,
                            "menuList":this.setDialogData.checkNodeData
                        }).then(res=>{
                            if(res.data.status==="ok") {
                                this.$ElMessage({
                                    type: "success",
                                    message: res.data.msg
                                })
                                this.closeSetDialog();
                                this.getPermission();
                            }else {
                                this.$ElMessage({
                                    type: "error",
                                    message: res.data.msg
                                })
                            }
                        })
                    }
                })
            },
            
            //删除权限
            delPermission() {
                this.$request("/api/sys/delPermission","DELETE",{"permissionId":this.setDialogData.permissionId}).then(res=>{
                    if(res.data.status==="ok") {
                        this.$ElMessage({
                            type: "success",
                            message: res.data.msg
                        })
                        this.getPermission();
                        this.closeSetDialog();
                    }else {
                        this.$ElMessage({
                            type: "error",
                            message: res.data.msg
                        })
                    }
                })
            }


        }
    }
</script>
<style lang="scss" scoped>
    .permissionView {
        width: 100%;
        height: auto;

    .searchBox {
        height: 80px;
        border-bottom: 1px solid rgb(224, 224, 236);
    
    .searchInner {
        display: flex;
        float: right;
        margin-top: 10px;
        align-items: center;
        margin-right: 50px;
    }
    }
    
    .permissionFrame {
        width: 98%;
        height: 98%;
        margin: 1%;

    .permissionBox {
        width: 250px;
        height: 250px;
        margin: 10px;
        float: left;
    .innerBox {
        width: 246px;
        height: 246px;
        margin: 2px;
        border-radius: 20px;
        position: relative;
        border: solid 1px beige;

    .permissionHead {
        width: 100%;
        height: 40px;

    .setButton {
        color: rgb(44, 59, 143);
        float: right;
        margin-top: 10px;
        margin-right: 10px;
    }

    .setButton:hover {
        color: rgb(224, 38, 78);
    }
    }

    .permissionTail {
        width: 100%;
        height: 35px;
        position: absolute;
        bottom: 0px;
        text-align: center;
        font-size: 22px;
        font-weight: 800;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        color: #ff69b4;
    }
        }

    .addBox {
        width: 246px;
        height: 246px;
        margin: 2px;
        border-radius: 20px;
        background: hsl(0, 7%, 97%);
        

    .iconStyle {
        width: 100%;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fontStyle {
        font-size: 22px;
        text-align: center;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: 800;
        }
    }

    .addBox:hover {
        color: rgb(238, 80, 80);
        background-color: rgb(238, 217, 218);
    }
        }

    }

        }
</style>

最终做出来的效果

二九筒

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
管理后台菜单权限分角色控制，前端+后端+ER设计

数据库设计主要是四张表：1. menu表存菜单相关信息2. permission 权限菜单，存角色权限组3. permission_menu表存permission权限组中对应的菜单权限，menu_id对应menu表中的id，permission_id对应permission表中的id4. permission_account表存的是每个账号对应的权限组，permission_id对应permission表中的id，account_id对应登录账号表中id。
复制链接

扫一扫