功能16：角色管理
功能15：用户管理
功能14：使用本地SVG图标库
功能13：侧边栏加入Logo
功能12：折叠/展开侧边栏
功能11：实现面包屑功能
功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目
前言
页面静态展示。
一.操作步骤
1.角色管理
新建文件src\views\system\role\index.vue
<template><div class="app-container"><el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px"><el-form-item label="角色名称" prop="roleName"><el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px"@keyup.enter="handleQuery" /></el-form-item><el-form-item label="权限字符" prop="roleKey"><el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px"@keyup.enter="handleQuery" /></el-form-item><el-form-item label="状态" prop="status"><el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px"><el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /></el-select></el-form-item><el-form-item label="创建时间" style="width: 308px"><el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button><el-button icon="Refresh" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button></el-col><el-col :span="1.5"><el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"v-hasPermi="['system:role:edit']">修改</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"v-hasPermi="['system:role:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="Download" @click="handleExport"v-hasPermi="['system:role:export']">导出</el-button></el-col><right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar></el-row><!-- 表格数据 --><el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="角色编号" prop="roleId" width="120" /><el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" /><el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" /><el-table-column label="显示顺序" prop="roleSort" width="100" /><el-table-column label="状态" align="center" width="100"><template #default="scope"><el-switch v-model="scope.row.status" active-value="0" inactive-value="1"@change="handleStatusChange(scope.row)"></el-switch></template></el-table-column><el-table-column label="创建时间" align="center" prop="createTime"><template #default="scope"><span>{{ parseTime(scope.row.createTime) }}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1"><el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:role:edit']"></el-button></el-tooltip><el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1"><el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"v-hasPermi="['system:role:remove']"></el-button></el-tooltip><el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1"><el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)"v-hasPermi="['system:role:edit']"></el-button></el-tooltip><el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1"><el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)"v-hasPermi="['system:role:edit']"></el-button></el-tooltip></template></el-table-column></el-table><pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"v-model:limit="queryParams.pageSize" @pagination="getList" /><!-- 添加或修改角色配置对话框 --><el-dialog :title="title" v-model="open" width="500px" append-to-body><el-form ref="roleRef" :model="form" :rules="rules" label-width="100px"><el-form-item label="角色名称" prop="roleName"><el-input v-model="form.roleName" placeholder="请输入角色名称" /></el-form-item><el-form-item prop="roleKey"><template #label><span><el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top"><el-icon><question-filled /></el-icon></el-tooltip>权限字符</span></template><el-input v-model="form.roleKey" placeholder="请输入权限字符" /></el-form-item><el-form-item label="角色顺序" prop="roleSort"><el-input-number v-model="form.roleSort" controls-position="right" :min="0" /></el-form-item><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label}}</el-radio></el-radio-group></el-form-item><el-form-item label="菜单权限"><el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox><el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox><el-checkbox v-model="form.menuCheckStrictly"@change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox><el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="id":check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候":props="{ label: 'label', children: 'children' }"></el-tree></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></template></el-dialog><!-- 分配角色数据权限对话框 --><el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body><el-form :model="form" label-width="80px"><el-form-item label="角色名称"><el-input v-model="form.roleName" :disabled="true" /></el-form-item><el-form-item label="权限字符"><el-input v-model="form.roleKey" :disabled="true" /></el-form-item><el-form-item label="权限范围"><el-select v-model="form.dataScope" @change="dataScopeSelectChange"><el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="数据权限" v-show="form.dataScope == 2"><el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox><el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox><el-checkbox v-model="form.deptCheckStrictly"@change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox><el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" node-key="id":check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候":props="{ label: 'label', children: 'children' }"></el-tree></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitDataScope">确 定</el-button><el-button @click="cancelDataScope">取 消</el-button></div></template></el-dialog></div>
</template><script setup name="Role">
import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
import { useRouter } from "vue-router";
import { ref, getCurrentInstance, reactive, toRefs } from "vue";
import { parseTime } from '@/utils/ruoyi'const router = useRouter();
const { proxy } = getCurrentInstance();
// const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const sys_normal_disable = [{ "value": "1", "label": "正常" }, { "value": "2", "label": "注销" }]
const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref([]);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);/** 数据范围选项*/
const dataScopeOptions = ref([{ value: "1", label: "全部数据权限" },{ value: "2", label: "自定数据权限" },{ value: "3", label: "本部门数据权限" },{ value: "4", label: "本部门及以下数据权限" },{ value: "5", label: "仅本人数据权限" }
]);const data = reactive({form: {},queryParams: {pageNum: 1,pageSize: 10,roleName: undefined,roleKey: undefined,status: undefined},rules: {roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]},
});const { queryParams, form, rules } = toRefs(data);/** 查询角色列表 */
function getList() {loading.value = true;listRole().then(response => {roleList.value = response.rows;total.value = response.total;loading.value = false;});
}/** 搜索按钮操作 */
function handleQuery() {queryParams.value.pageNum = 1;getList();
}/** 重置按钮操作 */
function resetQuery() {dateRange.value = [];proxy.resetForm("queryRef");handleQuery();
}/** 删除按钮操作 */
function handleDelete(row) {const roleIds = row.roleId || ids.value;proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {return delRole(roleIds);}).then(() => {getList();proxy.$modal.msgSuccess("删除成功");}).catch(() => { });
}/** 导出按钮操作 */
function handleExport() {proxy.download("system/role/export", {...queryParams.value,}, `role_${new Date().getTime()}.xlsx`);
}/** 多选框选中数据 */
function handleSelectionChange(selection) {ids.value = selection.map(item => item.roleId);single.value = selection.length != 1;multiple.value = !selection.length;
}/** 角色状态修改 */
function handleStatusChange(row) {let text = row.status === "0" ? "启用" : "停用";proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {return changeRoleStatus(row.roleId, row.status);}).then(() => {proxy.$modal.msgSuccess(text + "成功");}).catch(function () {row.status = row.status === "0" ? "1" : "0";});
}/** 更多操作 */
function handleCommand(command, row) {switch (command) {case "handleDataScope":handleDataScope(row);break;case "handleAuthUser":handleAuthUser(row);break;default:break;}
}/** 分配用户 */
function handleAuthUser(row) {router.push("/system/role-auth/user/" + row.roleId);
}/** 查询菜单树结构 */
function getMenuTreeselect() {menuTreeselect().then(response => {menuOptions.value = response.data;});
}/** 所有部门节点数据 */
function getDeptAllCheckedKeys() {// 目前被选中的部门节点let checkedKeys = deptRef.value.getCheckedKeys();// 半选中的部门节点let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);return checkedKeys;
}/** 重置新增的表单以及其他数据 */
function reset() {if (menuRef.value != undefined) {menuRef.value.setCheckedKeys([]);}menuExpand.value = false;menuNodeAll.value = false;deptExpand.value = true;deptNodeAll.value = false;form.value = {roleId: undefined,roleName: undefined,roleKey: undefined,roleSort: 0,status: "0",menuIds: [],deptIds: [],menuCheckStrictly: true,deptCheckStrictly: true,remark: undefined};proxy.resetForm("roleRef");
}/** 添加角色 */
function handleAdd() {reset();getMenuTreeselect();open.value = true;title.value = "添加角色";
}/** 修改角色 */
function handleUpdate(row) {reset();const roleId = row.roleId || ids.value;const roleMenu = getRoleMenuTreeselect(roleId);getRole(roleId).then(response => {form.value = response.data;form.value.roleSort = Number(form.value.roleSort);open.value = true;nextTick(() => {roleMenu.then((res) => {let checkedKeys = res.checkedKeys;checkedKeys.forEach((v) => {nextTick(() => {menuRef.value.setChecked(v, true, false);});});});});});title.value = "修改角色";
}/** 根据角色ID查询菜单树结构 */
function getRoleMenuTreeselect(roleId) {return roleMenuTreeselect(roleId).then(response => {menuOptions.value = response.menus;return response;});
}/** 根据角色ID查询部门树结构 */
function getDeptTree(roleId) {return deptTreeSelect(roleId).then(response => {deptOptions.value = response.depts;return response;});
}/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value, type) {if (type == "menu") {let treeList = menuOptions.value;for (let i = 0; i < treeList.length; i++) {menuRef.value.store.nodesMap[treeList[i].id].expanded = value;}} else if (type == "dept") {let treeList = deptOptions.value;for (let i = 0; i < treeList.length; i++) {deptRef.value.store.nodesMap[treeList[i].id].expanded = value;}}
}/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value, type) {if (type == "menu") {menuRef.value.setCheckedNodes(value ? menuOptions.value : []);} else if (type == "dept") {deptRef.value.setCheckedNodes(value ? deptOptions.value : []);}
}/** 树权限（父子联动） */
function handleCheckedTreeConnect(value, type) {if (type == "menu") {form.value.menuCheckStrictly = value ? true : false;} else if (type == "dept") {form.value.deptCheckStrictly = value ? true : false;}
}/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {// 目前被选中的菜单节点let checkedKeys = menuRef.value.getCheckedKeys();// 半选中的菜单节点let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);return checkedKeys;
}/** 提交按钮 */
function submitForm() {proxy.$refs["roleRef"].validate(valid => {if (valid) {if (form.value.roleId != undefined) {form.value.menuIds = getMenuAllCheckedKeys();updateRole(form.value).then(response => {proxy.$modal.msgSuccess("修改成功");open.value = false;getList();});} else {form.value.menuIds = getMenuAllCheckedKeys();addRole(form.value).then(response => {proxy.$modal.msgSuccess("新增成功");open.value = false;getList();});}}});
}/** 取消按钮 */
function cancel() {open.value = false;reset();
}/** 选择角色权限范围触发 */
function dataScopeSelectChange(value) {if (value !== "2") {deptRef.value.setCheckedKeys([]);}
}/** 分配数据权限操作 */
function handleDataScope(row) {reset();const deptTreeSelect = getDeptTree(row.roleId);getRole(row.roleId).then(response => {form.value = response.data;openDataScope.value = true;nextTick(() => {deptTreeSelect.then(res => {nextTick(() => {if (deptRef.value) {deptRef.value.setCheckedKeys(res.checkedKeys);}});});});});title.value = "分配数据权限";
}/** 提交按钮（数据权限） */
function submitDataScope() {if (form.value.roleId != undefined) {form.value.deptIds = getDeptAllCheckedKeys();dataScope(form.value).then(response => {proxy.$modal.msgSuccess("修改成功");openDataScope.value = false;getList();});}
}/** 取消按钮（数据权限）*/
function cancelDataScope() {openDataScope.value = false;reset();
}getList();
</script>2.请求接口
新建文件src\api\system\role.js，管理角色页面里用到的所有接口。
// 查询角色列表
export function listRole(query) {return new Promise((resolve, reject) => {const resp = {"total": 2,"rows": [{"createBy": null,"createTime": "2024-11-18 16:45:39","updateBy": null,"updateTime": null,"remark": "超级管理员","roleId": 1,"roleName": "超级管理员","roleKey": "admin","roleSort": 1,"dataScope": "1","menuCheckStrictly": true,"deptCheckStrictly": true,"status": "0","delFlag": "0","flag": false,"menuIds": null,"deptIds": null,"permissions": null,"admin": true},{"createBy": null,"createTime": "2024-11-18 16:45:39","updateBy": null,"updateTime": null,"remark": "普通角色","roleId": 2,"roleName": "普通角色","roleKey": "common","roleSort": 2,"dataScope": "2","menuCheckStrictly": true,"deptCheckStrictly": true,"status": "0","delFlag": "0","flag": false,"menuIds": null,"deptIds": null,"permissions": null,"admin": false}],"code": 200,"msg": "查询成功"}resolve(resp); // 状态变为 fulfilled
})
}// 查询角色详细
export function getRole(roleId) {}// 新增角色
export function addRole(data) {}// 修改角色
export function updateRole(data) {}// 角色数据权限
export function dataScope(data) {}// 角色状态修改
export function changeRoleStatus(roleId, status) {const data = {roleId,status}}// 删除角色
export function delRole(roleId) {}// 查询角色已授权用户列表
export function allocatedUserList(query) {}// 查询角色未授权用户列表
export function unallocatedUserList(query) {}// 取消用户授权角色
export function authUserCancel(data) {}// 批量取消用户授权角色
export function authUserCancelAll(data) {}// 授权用户选择
export function authUserSelectAll(data) {}// 根据角色ID查询部门树结构
export function deptTreeSelect(roleId) {}新建文件src\api\system\menu.js，管理菜单页面里用到的所有接口。
// 查询菜单列表
export function listMenu(query) {}// 查询菜单详细
export function getMenu(menuId) {}// 查询菜单下拉树结构
export function treeselect() {}// 根据角色ID查询菜单下拉树结构
export function roleMenuTreeselect(roleId) {}// 新增菜单
export function addMenu(data) {}// 修改菜单
export function updateMenu(data) {}// 删除菜单
export function delMenu(menuId) {}
二.功能验证
运行项目，浏览器访问http://localhost:5173/system/role
