- 删除 mock 中系统管理路由冗余数据,前端统一路由管理 - 飞书登录接口响应数据结构重构,新增登录状态及用户信息查询方法 - 重构系统接口模块,新增权限、角色、用户、部门、菜单等完整类型及API实现 - 新增项目初始化相关接口及数据类型支持 - 调整登录页及相关调用,适配飞书登录新接口返回 - 统一接口响应状态码判定,修正多处 code === 0 为 code === 200 - 新增系统管理路由模块,包含用户、角色、权限、菜单、部门页面 - 账号设置页面新增角色与权限展示,丰富用户信息显示 - 权限管理页面新增增删改查功能,提供表单校验与列表操作 - 优化权限表格展示和操作体验,支持批量删除及树形结构显示 - 兼容性优化,调整部门与菜单管理hook中code判断,避免误判 - 新增菜单和部门管理相关接口及类型定义 - 更新 OpenAPI 配置,规范角色菜单权限相关接口定义 - 新增权限管理表单组件及校验规则,支持增删改权限项 - 规范权限管理模块代码结构及变量命名,提高维护性
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -20,3 +20,7 @@ tests/**/coverage/
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
tsconfig.tsbuildinfo
|
tsconfig.tsbuildinfo
|
||||||
|
|
||||||
|
#qoder
|
||||||
|
|
||||||
|
**.qoder**
|
||||||
@@ -1,60 +1,12 @@
|
|||||||
// 模拟后端动态生成路由
|
// 模拟后端动态生成路由
|
||||||
import { defineFakeRoute } from "vite-plugin-fake-server/client";
|
import { defineFakeRoute } from "vite-plugin-fake-server/client";
|
||||||
import { system, monitor, permission, frame, tabs } from "@/router/enums";
|
import { monitor, permission, frame, tabs } from "@/router/enums";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* roles:页面级别权限,这里模拟二种 "admin"、"common"
|
* roles:页面级别权限,这里模拟二种 "admin"、"common"
|
||||||
* admin:管理员角色
|
* admin:管理员角色
|
||||||
* common:普通角色
|
* common:普通角色
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const systemManagementRouter = {
|
|
||||||
path: "/system",
|
|
||||||
meta: {
|
|
||||||
icon: "ri:settings-3-line",
|
|
||||||
title: "menus.pureSysManagement",
|
|
||||||
rank: system
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: "/system/user/index",
|
|
||||||
name: "SystemUser",
|
|
||||||
meta: {
|
|
||||||
icon: "ri:admin-line",
|
|
||||||
title: "menus.pureUser",
|
|
||||||
roles: ["admin"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/system/role/index",
|
|
||||||
name: "SystemRole",
|
|
||||||
meta: {
|
|
||||||
icon: "ri:admin-fill",
|
|
||||||
title: "menus.pureRole",
|
|
||||||
roles: ["admin"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/system/menu/index",
|
|
||||||
name: "SystemMenu",
|
|
||||||
meta: {
|
|
||||||
icon: "ep:menu",
|
|
||||||
title: "menus.pureSystemMenu",
|
|
||||||
roles: ["admin"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/system/dept/index",
|
|
||||||
name: "SystemDept",
|
|
||||||
meta: {
|
|
||||||
icon: "ri:git-branch-line",
|
|
||||||
title: "menus.pureDept",
|
|
||||||
roles: ["admin"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const systemMonitorRouter = {
|
const systemMonitorRouter = {
|
||||||
path: "/monitor",
|
path: "/monitor",
|
||||||
meta: {
|
meta: {
|
||||||
@@ -328,13 +280,7 @@ export default defineFakeRoute([
|
|||||||
return {
|
return {
|
||||||
code: 0,
|
code: 0,
|
||||||
message: "操作成功",
|
message: "操作成功",
|
||||||
data: [
|
data: [systemMonitorRouter, permissionRouter, frameRouter, tabsRouter]
|
||||||
systemManagementRouter,
|
|
||||||
systemMonitorRouter,
|
|
||||||
permissionRouter,
|
|
||||||
frameRouter,
|
|
||||||
tabsRouter
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,30 @@
|
|||||||
import { http } from "@/utils/http";
|
import { http } from "@/utils/http";
|
||||||
|
|
||||||
|
/** 飞书登录响应数据 */
|
||||||
|
export type FeishuLoginData = {
|
||||||
|
/** 真实姓名 */
|
||||||
|
realName: string;
|
||||||
|
/** 手机号 */
|
||||||
|
phone: string;
|
||||||
|
/** token名称 */
|
||||||
|
tokenName: string;
|
||||||
|
/** 头像 */
|
||||||
|
avatar: string;
|
||||||
|
/** 用户ID */
|
||||||
|
userId: number;
|
||||||
|
/** 邮箱 */
|
||||||
|
email: string;
|
||||||
|
/** token */
|
||||||
|
token: string;
|
||||||
|
/** 用户名 */
|
||||||
|
username: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 飞书登录响应结果 */
|
||||||
export type FeishuLoginResult = {
|
export type FeishuLoginResult = {
|
||||||
code: number;
|
code: number;
|
||||||
|
data: FeishuLoginData;
|
||||||
message: string;
|
message: string;
|
||||||
data: {
|
|
||||||
/** 是否登录成功 */
|
|
||||||
isLogin: boolean;
|
|
||||||
/** 用户ID */
|
|
||||||
userId: string | number;
|
|
||||||
/** 用户名 */
|
|
||||||
username: string;
|
|
||||||
/** 真实姓名 */
|
|
||||||
realName: string;
|
|
||||||
/** 头像 */
|
|
||||||
avatar: string;
|
|
||||||
/** 手机号 */
|
|
||||||
phone: string;
|
|
||||||
/** 邮箱 */
|
|
||||||
email: string;
|
|
||||||
/** token */
|
|
||||||
token: string;
|
|
||||||
/** token名称 */
|
|
||||||
tokenName: string;
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 飞书OAuth登录接口(前端回调后调用) */
|
/** 飞书OAuth登录接口(前端回调后调用) */
|
||||||
@@ -31,3 +33,21 @@ export const getFeishuLogin = (code: string) => {
|
|||||||
params: { code }
|
params: { code }
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 检查当前登录状态 */
|
||||||
|
export const checkFeishuLoginStatus = () => {
|
||||||
|
return http.request<{
|
||||||
|
code: number;
|
||||||
|
data: Record<string, any>;
|
||||||
|
message: string;
|
||||||
|
}>("get", "/api/v1/auth/feishu/check");
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取当前登录用户信息 */
|
||||||
|
export const getFeishuUserInfo = () => {
|
||||||
|
return http.request<{
|
||||||
|
code: number;
|
||||||
|
data: Record<string, any>;
|
||||||
|
message: string;
|
||||||
|
}>("get", "/api/v1/auth/feishu/user/info");
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,17 +1,19 @@
|
|||||||
import { http } from "@/utils/http";
|
import { http } from "@/utils/http";
|
||||||
|
|
||||||
type Result = {
|
/** 通用响应结果 */
|
||||||
|
type Result<T = any> = {
|
||||||
code: number;
|
code: number;
|
||||||
message: string;
|
message: string;
|
||||||
data?: Array<any>;
|
data?: T;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ResultTable = {
|
/** 分页响应结果 */
|
||||||
|
type ResultTable<T = any> = {
|
||||||
code: number;
|
code: number;
|
||||||
message: string;
|
message: string;
|
||||||
data?: {
|
data?: {
|
||||||
/** 列表数据 */
|
/** 列表数据 */
|
||||||
list: Array<any>;
|
list: Array<T>;
|
||||||
/** 总条目数 */
|
/** 总条目数 */
|
||||||
total?: number;
|
total?: number;
|
||||||
/** 每页显示条目个数 */
|
/** 每页显示条目个数 */
|
||||||
@@ -21,34 +23,444 @@ type ResultTable = {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统管理-用户管理列表 */
|
/** 后端分页数据结构 */
|
||||||
export const getUserList = (data?: object) => {
|
type PageResult<T = any> = {
|
||||||
return http.request<ResultTable>("post", "/user", { data });
|
records: Array<T>;
|
||||||
|
total: number;
|
||||||
|
size: number;
|
||||||
|
current: number;
|
||||||
|
pages?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 系统管理-用户管理-获取所有角色列表 */
|
/** 后端分页响应 */
|
||||||
|
type BasePageResponse<T = any> = {
|
||||||
|
code: number;
|
||||||
|
message: string;
|
||||||
|
data: PageResult<T>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 权限管理 ====================
|
||||||
|
|
||||||
|
/** 权限对象 */
|
||||||
|
export type SysPermission = {
|
||||||
|
id?: number;
|
||||||
|
parentId?: number;
|
||||||
|
permissionCode?: string;
|
||||||
|
permissionName?: string;
|
||||||
|
permissionType?: number;
|
||||||
|
path?: string;
|
||||||
|
component?: string;
|
||||||
|
icon?: string;
|
||||||
|
apiUrl?: string;
|
||||||
|
apiMethod?: string;
|
||||||
|
sortOrder?: number;
|
||||||
|
visible?: number;
|
||||||
|
status?: number;
|
||||||
|
createTime?: string;
|
||||||
|
updateTime?: string;
|
||||||
|
deleted?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 分页查询权限列表 */
|
||||||
|
export const getPermissionList = (params?: {
|
||||||
|
pageNum?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
keyword?: string;
|
||||||
|
}) => {
|
||||||
|
return http.request<BasePageResponse<SysPermission>>(
|
||||||
|
"get",
|
||||||
|
"/api/v1/system/permission/list",
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 查询权限树 */
|
||||||
|
export const getPermissionTree = () => {
|
||||||
|
return http.request<Result<SysPermission[]>>(
|
||||||
|
"get",
|
||||||
|
"/api/v1/system/permission/tree"
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 根据ID查询权限 */
|
||||||
|
export const getPermissionById = (id: number) => {
|
||||||
|
return http.request<Result<SysPermission>>(
|
||||||
|
"get",
|
||||||
|
`/api/v1/system/permission/${id}`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 新增权限 */
|
||||||
|
export const addPermission = (data: SysPermission) => {
|
||||||
|
return http.request<Result<number>>("post", "/api/v1/system/permission", {
|
||||||
|
data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 修改权限 */
|
||||||
|
export const updatePermission = (data: SysPermission) => {
|
||||||
|
return http.request<Result<void>>("put", "/api/v1/system/permission", {
|
||||||
|
data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 删除权限 */
|
||||||
|
export const deletePermission = (id: number) => {
|
||||||
|
return http.request<Result<void>>(
|
||||||
|
"delete",
|
||||||
|
`/api/v1/system/permission/${id}`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 角色管理 ====================
|
||||||
|
|
||||||
|
/** 角色对象 */
|
||||||
|
export type SysRole = {
|
||||||
|
id?: number;
|
||||||
|
roleCode?: string;
|
||||||
|
roleName?: string;
|
||||||
|
roleType?: string;
|
||||||
|
description?: string;
|
||||||
|
dataScope?: number;
|
||||||
|
sortOrder?: number;
|
||||||
|
status?: number;
|
||||||
|
createBy?: number;
|
||||||
|
createTime?: string;
|
||||||
|
updateBy?: number;
|
||||||
|
updateTime?: string;
|
||||||
|
deleted?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 分页查询角色列表 */
|
||||||
|
export const getRoleList = (params?: {
|
||||||
|
pageNum?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
keyword?: string;
|
||||||
|
}) => {
|
||||||
|
return http.request<BasePageResponse<SysRole>>(
|
||||||
|
"get",
|
||||||
|
"/api/v1/system/role/list",
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 查询所有角色(用于下拉选择) */
|
||||||
export const getAllRoleList = () => {
|
export const getAllRoleList = () => {
|
||||||
return http.request<Result>("get", "/list-all-role");
|
return http.request<Result<SysRole[]>>("get", "/api/v1/system/role/all");
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 系统管理-用户管理-根据userId,获取对应角色id列表(userId:用户id) */
|
/** 根据ID查询角色 */
|
||||||
export const getRoleIds = (data?: object) => {
|
export const getRoleById = (id: number) => {
|
||||||
return http.request<Result>("post", "/list-role-ids", { data });
|
return http.request<Result<SysRole>>("get", `/api/v1/system/role/${id}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统管理-角色管理列表 */
|
/** 新增角色 */
|
||||||
export const getRoleList = (data?: object) => {
|
export const addRole = (data: SysRole) => {
|
||||||
return http.request<ResultTable>("post", "/role", { data });
|
return http.request<Result<number>>("post", "/api/v1/system/role", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统管理-菜单管理列表 */
|
/** 修改角色 */
|
||||||
export const getMenuList = (data?: object) => {
|
export const updateRole = (data: SysRole) => {
|
||||||
return http.request<Result>("post", "/menu", { data });
|
return http.request<Result<void>>("put", "/api/v1/system/role", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统管理-部门管理列表 */
|
/** 删除角色 */
|
||||||
export const getDeptList = (data?: object) => {
|
export const deleteRole = (id: number) => {
|
||||||
return http.request<Result>("post", "/dept", { data });
|
return http.request<Result<void>>("delete", `/api/v1/system/role/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 查询角色的权限列表(返回完整权限对象列表) */
|
||||||
|
export const getRolePermissions = (id: number) => {
|
||||||
|
return http.request<Result<SysPermission[]>>(
|
||||||
|
"get",
|
||||||
|
`/api/v1/system/role/${id}/permissions`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 为角色分配权限 */
|
||||||
|
export const assignRolePermissions = (id: number, permissionIds: number[]) => {
|
||||||
|
return http.request<Result<void>>(
|
||||||
|
"post",
|
||||||
|
`/api/v1/system/role/${id}/permissions`,
|
||||||
|
{ data: permissionIds }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 用户管理 ====================
|
||||||
|
|
||||||
|
/** 用户对象 */
|
||||||
|
export type SysUser = {
|
||||||
|
id?: number;
|
||||||
|
username?: string;
|
||||||
|
password?: string;
|
||||||
|
realName?: string;
|
||||||
|
nickname?: string;
|
||||||
|
avatar?: string;
|
||||||
|
gender?: number;
|
||||||
|
phone?: string;
|
||||||
|
email?: string;
|
||||||
|
deptId?: number;
|
||||||
|
position?: string;
|
||||||
|
employeeNo?: string;
|
||||||
|
entryDate?: string;
|
||||||
|
status?: number;
|
||||||
|
lastLoginTime?: string;
|
||||||
|
lastLoginIp?: string;
|
||||||
|
createBy?: number;
|
||||||
|
createTime?: string;
|
||||||
|
updateBy?: number;
|
||||||
|
updateTime?: string;
|
||||||
|
deleted?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 分页查询用户列表 */
|
||||||
|
export const getUserList = (params?: {
|
||||||
|
pageNum?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
keyword?: string;
|
||||||
|
}) => {
|
||||||
|
return http.request<BasePageResponse<SysUser>>(
|
||||||
|
"get",
|
||||||
|
"/api/v1/system/user/list",
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 根据ID查询用户 */
|
||||||
|
export const getUserById = (id: number) => {
|
||||||
|
return http.request<Result<SysUser>>("get", `/api/v1/system/user/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 新增用户 */
|
||||||
|
export const addUser = (data: SysUser) => {
|
||||||
|
return http.request<Result<number>>("post", "/api/v1/system/user", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 修改用户 */
|
||||||
|
export const updateUser = (data: SysUser) => {
|
||||||
|
return http.request<Result<void>>("put", "/api/v1/system/user", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 删除用户 */
|
||||||
|
export const deleteUser = (id: number) => {
|
||||||
|
return http.request<Result<void>>("delete", `/api/v1/system/user/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 查询用户的角色列表 */
|
||||||
|
export const getUserRoles = (id: number) => {
|
||||||
|
return http.request<Result<SysRole[]>>(
|
||||||
|
"get",
|
||||||
|
`/api/v1/system/user/${id}/roles`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 为用户绑定角色 */
|
||||||
|
export const assignUserRoles = (id: number, roleIds: number[]) => {
|
||||||
|
return http.request<Result<void>>("post", `/api/v1/system/user/${id}/roles`, {
|
||||||
|
data: roleIds
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 查询用户角色ID列表(用于回显) */
|
||||||
|
export const getUserRoleIds = (id: number) => {
|
||||||
|
return http.request<Result<number[]>>(
|
||||||
|
"get",
|
||||||
|
`/api/v1/system/user/${id}/roleIds`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 项目初始化 ====================
|
||||||
|
|
||||||
|
/** 项目信息 */
|
||||||
|
export type ProjectInfo = {
|
||||||
|
project_name?: string;
|
||||||
|
project_type?: string;
|
||||||
|
description?: string;
|
||||||
|
objectives?: string;
|
||||||
|
plan_start_date?: string;
|
||||||
|
plan_end_date?: string;
|
||||||
|
budget?: number;
|
||||||
|
currency?: string;
|
||||||
|
priority?: string;
|
||||||
|
tags?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 里程碑信息 */
|
||||||
|
export type MilestoneInfo = {
|
||||||
|
milestone_name?: string;
|
||||||
|
description?: string;
|
||||||
|
plan_date?: string;
|
||||||
|
deliverables?: string;
|
||||||
|
owner_role?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 任务信息 */
|
||||||
|
export type TaskInfo = {
|
||||||
|
task_id?: string;
|
||||||
|
task_name?: string;
|
||||||
|
parent_task_id?: string;
|
||||||
|
description?: string;
|
||||||
|
plan_start_date?: string;
|
||||||
|
plan_end_date?: string;
|
||||||
|
estimated_hours?: number;
|
||||||
|
priority?: string;
|
||||||
|
assignee_role?: string;
|
||||||
|
dependencies?: string[];
|
||||||
|
deliverables?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 成员信息 */
|
||||||
|
export type MemberInfo = {
|
||||||
|
name?: string;
|
||||||
|
role_code?: string;
|
||||||
|
responsibility?: string;
|
||||||
|
department?: string;
|
||||||
|
weekly_hours?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 资源信息 */
|
||||||
|
export type ResourceInfo = {
|
||||||
|
resource_name?: string;
|
||||||
|
resource_type?: string;
|
||||||
|
quantity?: number;
|
||||||
|
unit?: string;
|
||||||
|
unit_price?: number;
|
||||||
|
supplier?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 风险信息 */
|
||||||
|
export type RiskInfo = {
|
||||||
|
risk_name?: string;
|
||||||
|
category?: string;
|
||||||
|
description?: string;
|
||||||
|
probability?: number;
|
||||||
|
impact?: number;
|
||||||
|
mitigation_plan?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 时间节点信息 */
|
||||||
|
export type TimelineNodeInfo = {
|
||||||
|
node_name?: string;
|
||||||
|
node_type?: string;
|
||||||
|
plan_date?: string;
|
||||||
|
description?: string;
|
||||||
|
kb_scope?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 项目初始化结果 */
|
||||||
|
export type ProjectInitResult = {
|
||||||
|
project: ProjectInfo;
|
||||||
|
milestones: MilestoneInfo[];
|
||||||
|
tasks: TaskInfo[];
|
||||||
|
members: MemberInfo[];
|
||||||
|
resources: ResourceInfo[];
|
||||||
|
risks: RiskInfo[];
|
||||||
|
timeline_nodes: TimelineNodeInfo[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 上传文件并生成项目初始化预览数据 */
|
||||||
|
export const previewProjectInit = (file: File) => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file", file);
|
||||||
|
return http.request<Result<ProjectInitResult>>(
|
||||||
|
"post",
|
||||||
|
"/api/v1/project-init/preview",
|
||||||
|
{ data: formData }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 确认并保存项目初始化数据 */
|
||||||
|
export const confirmProjectInit = (data: ProjectInitResult) => {
|
||||||
|
return http.request<Result<ProjectInitResult>>(
|
||||||
|
"post",
|
||||||
|
"/api/v1/project-init/confirm",
|
||||||
|
{ data }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 部门管理 ====================
|
||||||
|
|
||||||
|
/** 部门对象 */
|
||||||
|
export type SysDept = {
|
||||||
|
id?: number;
|
||||||
|
parentId?: number;
|
||||||
|
deptName?: string;
|
||||||
|
deptCode?: string;
|
||||||
|
leader?: string;
|
||||||
|
phone?: string;
|
||||||
|
email?: string;
|
||||||
|
sortOrder?: number;
|
||||||
|
status?: number;
|
||||||
|
createTime?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取部门列表(树形结构) */
|
||||||
|
export const getDeptList = () => {
|
||||||
|
return http.request<Result<SysDept[]>>("get", "/api/v1/system/dept/tree");
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取部门详情 */
|
||||||
|
export const getDeptById = (id: number) => {
|
||||||
|
return http.request<Result<SysDept>>("get", `/api/v1/system/dept/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 新增部门 */
|
||||||
|
export const addDept = (data: SysDept) => {
|
||||||
|
return http.request<Result<number>>("post", "/api/v1/system/dept", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 修改部门 */
|
||||||
|
export const updateDept = (data: SysDept) => {
|
||||||
|
return http.request<Result<void>>("put", "/api/v1/system/dept", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 删除部门 */
|
||||||
|
export const deleteDept = (id: number) => {
|
||||||
|
return http.request<Result<void>>("delete", `/api/v1/system/dept/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== 菜单管理 ====================
|
||||||
|
|
||||||
|
/** 菜单对象 */
|
||||||
|
export type SysMenu = {
|
||||||
|
id?: number;
|
||||||
|
parentId?: number;
|
||||||
|
menuName?: string;
|
||||||
|
menuType?: number;
|
||||||
|
icon?: string;
|
||||||
|
path?: string;
|
||||||
|
component?: string;
|
||||||
|
permission?: string;
|
||||||
|
sortOrder?: number;
|
||||||
|
status?: number;
|
||||||
|
visible?: number;
|
||||||
|
keepAlive?: number;
|
||||||
|
createTime?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取菜单列表(树形结构) */
|
||||||
|
export const getMenuList = () => {
|
||||||
|
return http.request<Result<SysMenu[]>>("get", "/api/v1/system/menu/tree");
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取菜单详情 */
|
||||||
|
export const getMenuById = (id: number) => {
|
||||||
|
return http.request<Result<SysMenu>>("get", `/api/v1/system/menu/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 新增菜单 */
|
||||||
|
export const addMenu = (data: SysMenu) => {
|
||||||
|
return http.request<Result<number>>("post", "/api/v1/system/menu", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 修改菜单 */
|
||||||
|
export const updateMenu = (data: SysMenu) => {
|
||||||
|
return http.request<Result<void>>("put", "/api/v1/system/menu", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 删除菜单 */
|
||||||
|
export const deleteMenu = (id: number) => {
|
||||||
|
return http.request<Result<void>>("delete", `/api/v1/system/menu/${id}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取系统监控-在线用户列表 */
|
/** 获取系统监控-在线用户列表 */
|
||||||
@@ -77,11 +489,23 @@ export const getSystemLogsDetail = (data?: object) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/** 获取角色管理-权限-菜单权限 */
|
/** 获取角色管理-权限-菜单权限 */
|
||||||
export const getRoleMenu = (data?: object) => {
|
export const getRoleMenu = () => {
|
||||||
return http.request<Result>("post", "/role-menu", { data });
|
return http.request<Result<SysMenu[]>>("get", "/api/v1/system/menu/tree");
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
|
/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
|
||||||
export const getRoleMenuIds = (data?: object) => {
|
export const getRoleMenuIds = (roleId: number) => {
|
||||||
return http.request<Result>("post", "/role-menu-ids", { data });
|
return http.request<Result<number[]>>(
|
||||||
|
"get",
|
||||||
|
`/api/v1/system/role/${roleId}/menu-ids`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 为角色分配菜单权限 */
|
||||||
|
export const assignRoleMenus = (roleId: number, menuIds: number[]) => {
|
||||||
|
return http.request<Result<void>>(
|
||||||
|
"post",
|
||||||
|
`/api/v1/system/role/${roleId}/menus`,
|
||||||
|
{ data: menuIds }
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -7,20 +7,30 @@
|
|||||||
},
|
},
|
||||||
"tags": [],
|
"tags": [],
|
||||||
"paths": {
|
"paths": {
|
||||||
"/api/v1/auth/feishu/login": {
|
"/api/v1/system/role/{id}/menu-ids": {
|
||||||
"post": {
|
"get": {
|
||||||
"summary": "飞书OAuth登录接口(前端回调后调用)",
|
"summary": "查询角色的菜单权限ID列表(只返回菜单类型的权限)",
|
||||||
"deprecated": false,
|
"deprecated": false,
|
||||||
"description": "前端从飞书回调中获取code,然后调用此接口完成登录",
|
"description": "",
|
||||||
"tags": [],
|
"tags": [],
|
||||||
"parameters": [
|
"parameters": [
|
||||||
{
|
{
|
||||||
"name": "code",
|
"name": "id",
|
||||||
"in": "query",
|
"in": "path",
|
||||||
"description": "飞书授权码",
|
"description": "",
|
||||||
"required": true,
|
"required": true,
|
||||||
"schema": {
|
"schema": {
|
||||||
"type": "string"
|
"type": "integer"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Authorization",
|
||||||
|
"in": "header",
|
||||||
|
"description": "",
|
||||||
|
"example": "Bearer 000b7e25-53b2-42a3-a39b-9f4cb03644ba",
|
||||||
|
"schema": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "Bearer 000b7e25-53b2-42a3-a39b-9f4cb03644ba"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -30,8 +40,7 @@
|
|||||||
"content": {
|
"content": {
|
||||||
"application/json": {
|
"application/json": {
|
||||||
"schema": {
|
"schema": {
|
||||||
"$ref": "#/components/schemas/BaseResponseMapObject",
|
"$ref": "#/components/schemas/BaseResponseListLong"
|
||||||
"description": "登录结果(包含token和用户信息)"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -43,7 +52,7 @@
|
|||||||
},
|
},
|
||||||
"components": {
|
"components": {
|
||||||
"schemas": {
|
"schemas": {
|
||||||
"BaseResponseMapObject": {
|
"BaseResponseListLong": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
"code": {
|
"code": {
|
||||||
@@ -51,26 +60,17 @@
|
|||||||
"description": ""
|
"description": ""
|
||||||
},
|
},
|
||||||
"data": {
|
"data": {
|
||||||
"type": "object",
|
"type": "array",
|
||||||
"properties": {
|
"items": {
|
||||||
"isLogin": {
|
"type": "integer"
|
||||||
"type": "boolean"
|
|
||||||
},
|
|
||||||
"userId": {
|
|
||||||
"$ref": "#/components/schemas/userId"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"description": ""
|
"description": ""
|
||||||
},
|
},
|
||||||
"message": {
|
"message": {
|
||||||
"description": "",
|
"type": "string",
|
||||||
"type": "null"
|
"description": ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"userId": {
|
|
||||||
"type": "object",
|
|
||||||
"properties": {}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"responses": {},
|
"responses": {},
|
||||||
|
|||||||
64
src/router/modules/system.ts
Normal file
64
src/router/modules/system.ts
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import { $t } from "@/plugins/i18n";
|
||||||
|
import { system } from "@/router/enums";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
path: "/system",
|
||||||
|
redirect: "/system/user",
|
||||||
|
meta: {
|
||||||
|
icon: "ri:settings-3-line",
|
||||||
|
title: $t("menus.pureSysManagement"),
|
||||||
|
rank: system
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/system/user",
|
||||||
|
name: "SystemUser",
|
||||||
|
component: () => import("@/views/system/user/index.vue"),
|
||||||
|
meta: {
|
||||||
|
icon: "ri:admin-line",
|
||||||
|
title: $t("menus.pureUser"),
|
||||||
|
roles: ["admin"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/system/role",
|
||||||
|
name: "SystemRole",
|
||||||
|
component: () => import("@/views/system/role/index.vue"),
|
||||||
|
meta: {
|
||||||
|
icon: "ri:admin-fill",
|
||||||
|
title: $t("menus.pureRole"),
|
||||||
|
roles: ["admin"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/system/permission",
|
||||||
|
name: "SystemPermission",
|
||||||
|
component: () => import("@/views/system/permission/index.vue"),
|
||||||
|
meta: {
|
||||||
|
icon: "ep:key",
|
||||||
|
title: "权限管理",
|
||||||
|
roles: ["admin"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/system/menu",
|
||||||
|
name: "SystemMenu",
|
||||||
|
component: () => import("@/views/system/menu/index.vue"),
|
||||||
|
meta: {
|
||||||
|
icon: "ep:menu",
|
||||||
|
title: $t("menus.pureSystemMenu"),
|
||||||
|
roles: ["admin"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/system/dept",
|
||||||
|
name: "SystemDept",
|
||||||
|
component: () => import("@/views/system/dept/index.vue"),
|
||||||
|
meta: {
|
||||||
|
icon: "ri:git-branch-line",
|
||||||
|
title: $t("menus.pureDept"),
|
||||||
|
roles: ["admin"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} satisfies RouteConfigsTable;
|
||||||
@@ -24,7 +24,15 @@ const userInfos = reactive({
|
|||||||
nickname: "",
|
nickname: "",
|
||||||
email: "",
|
email: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
description: ""
|
description: "",
|
||||||
|
realName: "",
|
||||||
|
username: "",
|
||||||
|
gender: 0,
|
||||||
|
position: "",
|
||||||
|
employeeNo: "",
|
||||||
|
deptName: "",
|
||||||
|
roles: [] as string[],
|
||||||
|
permissions: [] as string[]
|
||||||
});
|
});
|
||||||
|
|
||||||
const rules = reactive<FormRules<UserInfo>>({
|
const rules = reactive<FormRules<UserInfo>>({
|
||||||
@@ -74,7 +82,7 @@ const handleSubmitImage = () => {
|
|||||||
});
|
});
|
||||||
formUpload(formData)
|
formUpload(formData)
|
||||||
.then(({ code }) => {
|
.then(({ code }) => {
|
||||||
if (code === 0) {
|
if (code === 200) {
|
||||||
message("更新头像成功", { type: "success" });
|
message("更新头像成功", { type: "success" });
|
||||||
handleClose();
|
handleClose();
|
||||||
} else {
|
} else {
|
||||||
@@ -100,7 +108,7 @@ const onSubmit = async (formEl: FormInstance) => {
|
|||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const { code, data } = await getMine();
|
const { code, data } = await getMine();
|
||||||
if (code === 0) {
|
if (code === 200) {
|
||||||
Object.assign(userInfos, data);
|
Object.assign(userInfos, data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -162,6 +170,48 @@ onMounted(async () => {
|
|||||||
show-word-limit
|
show-word-limit
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-divider />
|
||||||
|
|
||||||
|
<h4 class="mb-4">角色与权限</h4>
|
||||||
|
<el-form-item label="所属部门">
|
||||||
|
<el-input v-model="userInfos.deptName" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="职位">
|
||||||
|
<el-input v-model="userInfos.position" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工号">
|
||||||
|
<el-input v-model="userInfos.employeeNo" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色">
|
||||||
|
<el-tag
|
||||||
|
v-for="role in userInfos.roles"
|
||||||
|
:key="role"
|
||||||
|
class="mr-2"
|
||||||
|
type="primary"
|
||||||
|
>
|
||||||
|
{{ role }}
|
||||||
|
</el-tag>
|
||||||
|
<span v-if="!userInfos.roles?.length" class="text-gray-400"
|
||||||
|
>暂无角色</span
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="权限">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<el-tag
|
||||||
|
v-for="perm in userInfos.permissions"
|
||||||
|
:key="perm"
|
||||||
|
size="small"
|
||||||
|
type="info"
|
||||||
|
>
|
||||||
|
{{ perm }}
|
||||||
|
</el-tag>
|
||||||
|
<span v-if="!userInfos.permissions?.length" class="text-gray-400"
|
||||||
|
>暂无权限</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-button type="primary" @click="onSubmit(userInfoFormRef)">
|
<el-button type="primary" @click="onSubmit(userInfoFormRef)">
|
||||||
更新信息
|
更新信息
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ const handleFeishuCallback = async (code: string) => {
|
|||||||
feishuLoading.value = true;
|
feishuLoading.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await getFeishuLogin(code);
|
const res = await getFeishuLogin(code);
|
||||||
if (res.code === 0 && res.data?.isLogin) {
|
if (res.code === 200 && res.data?.token) {
|
||||||
const { data } = res;
|
const { data } = res;
|
||||||
// 设置token(适配后端返回的字段名)
|
// 设置token(适配后端返回的字段名)
|
||||||
setToken({
|
setToken({
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ export function useDept() {
|
|||||||
async function onSearch() {
|
async function onSearch() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const { code, data } = await getDeptList(); // 这里是返回一维数组结构,前端自行处理成树结构,返回格式要求:唯一id加父节点parentId,parentId取父节点id
|
const { code, data } = await getDeptList(); // 这里是返回一维数组结构,前端自行处理成树结构,返回格式要求:唯一id加父节点parentId,parentId取父节点id
|
||||||
if (code === 0) {
|
if (code === 200) {
|
||||||
let newData = data;
|
let newData = data;
|
||||||
if (!isAllEmpty(form.name)) {
|
if (!isAllEmpty(form.name)) {
|
||||||
// 前端搜索部门名称
|
// 前端搜索部门名称
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export function useMenu() {
|
|||||||
async function onSearch() {
|
async function onSearch() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const { code, data } = await getMenuList(); // 这里是返回一维数组结构,前端自行处理成树结构,返回格式要求:唯一id加父节点parentId,parentId取父节点id
|
const { code, data } = await getMenuList(); // 这里是返回一维数组结构,前端自行处理成树结构,返回格式要求:唯一id加父节点parentId,parentId取父节点id
|
||||||
if (code === 0) {
|
if (code === 200) {
|
||||||
let newData = data;
|
let newData = data;
|
||||||
if (!isAllEmpty(form.title)) {
|
if (!isAllEmpty(form.title)) {
|
||||||
// 前端搜索菜单名称
|
// 前端搜索菜单名称
|
||||||
|
|||||||
122
src/views/system/permission/form/index.vue
Normal file
122
src/views/system/permission/form/index.vue
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import { formRules } from "./rules";
|
||||||
|
import type { FormInstance, FormRules } from "element-plus";
|
||||||
|
import { FormItemProps } from "../utils/types";
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<FormItemProps>(), {
|
||||||
|
id: 0,
|
||||||
|
parentId: 0,
|
||||||
|
permissionName: "",
|
||||||
|
permissionCode: "",
|
||||||
|
permissionType: 1,
|
||||||
|
path: "",
|
||||||
|
component: "",
|
||||||
|
icon: "",
|
||||||
|
apiUrl: "",
|
||||||
|
apiMethod: "",
|
||||||
|
sortOrder: 0,
|
||||||
|
visible: 1,
|
||||||
|
status: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
const ruleFormRef = ref<FormInstance>();
|
||||||
|
const ruleForm = reactive<FormItemProps>({ ...props });
|
||||||
|
|
||||||
|
const getRef = () => ruleFormRef.value;
|
||||||
|
|
||||||
|
defineExpose({ getRef });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:model="ruleForm"
|
||||||
|
:rules="formRules as FormRules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="权限名称" prop="permissionName">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.permissionName"
|
||||||
|
placeholder="请输入权限名称"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="权限编码" prop="permissionCode">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.permissionCode"
|
||||||
|
placeholder="请输入权限编码"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="权限类型" prop="permissionType">
|
||||||
|
<el-radio-group v-model="ruleForm.permissionType">
|
||||||
|
<el-radio :label="1">菜单</el-radio>
|
||||||
|
<el-radio :label="2">按钮</el-radio>
|
||||||
|
<el-radio :label="3">接口</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="路由路径" prop="path">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.path"
|
||||||
|
placeholder="请输入路由路径"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="组件路径" prop="component">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.component"
|
||||||
|
placeholder="请输入组件路径"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图标" prop="icon">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.icon"
|
||||||
|
placeholder="请输入图标类名"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="API地址" prop="apiUrl">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.apiUrl"
|
||||||
|
placeholder="请输入API地址"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="请求方法" prop="apiMethod">
|
||||||
|
<el-select
|
||||||
|
v-model="ruleForm.apiMethod"
|
||||||
|
placeholder="请选择请求方法"
|
||||||
|
clearable
|
||||||
|
class="w-full"
|
||||||
|
>
|
||||||
|
<el-option label="GET" value="GET" />
|
||||||
|
<el-option label="POST" value="POST" />
|
||||||
|
<el-option label="PUT" value="PUT" />
|
||||||
|
<el-option label="DELETE" value="DELETE" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序" prop="sortOrder">
|
||||||
|
<el-input-number
|
||||||
|
v-model="ruleForm.sortOrder"
|
||||||
|
:min="0"
|
||||||
|
:max="999"
|
||||||
|
controls-position="right"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否可见" prop="visible">
|
||||||
|
<el-radio-group v-model="ruleForm.visible">
|
||||||
|
<el-radio :label="1">可见</el-radio>
|
||||||
|
<el-radio :label="0">隐藏</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-radio-group v-model="ruleForm.status">
|
||||||
|
<el-radio :label="1">启用</el-radio>
|
||||||
|
<el-radio :label="0">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
13
src/views/system/permission/form/rules.ts
Normal file
13
src/views/system/permission/form/rules.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import type { FormRules } from "element-plus";
|
||||||
|
|
||||||
|
export const formRules: FormRules = {
|
||||||
|
permissionName: [
|
||||||
|
{ required: true, message: "权限名称为必填项", trigger: "blur" }
|
||||||
|
],
|
||||||
|
permissionCode: [
|
||||||
|
{ required: true, message: "权限编码为必填项", trigger: "blur" }
|
||||||
|
],
|
||||||
|
permissionType: [
|
||||||
|
{ required: true, message: "权限类型为必填项", trigger: "change" }
|
||||||
|
]
|
||||||
|
};
|
||||||
200
src/views/system/permission/index.vue
Normal file
200
src/views/system/permission/index.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { usePermission } from "./utils/hook";
|
||||||
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
|
||||||
|
import Delete from "~icons/ep/delete";
|
||||||
|
import EditPen from "~icons/ep/edit-pen";
|
||||||
|
import AddFill from "~icons/ri/add-circle-line";
|
||||||
|
import Refresh from "~icons/ep/refresh";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "SystemPermission"
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const tableRef = ref();
|
||||||
|
|
||||||
|
const {
|
||||||
|
form,
|
||||||
|
loading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
selectedNum,
|
||||||
|
pagination,
|
||||||
|
buttonClass,
|
||||||
|
deviceDetection,
|
||||||
|
onSearch,
|
||||||
|
resetForm,
|
||||||
|
onbatchDel,
|
||||||
|
openDialog,
|
||||||
|
handleUpdate,
|
||||||
|
handleDelete,
|
||||||
|
handleSizeChange,
|
||||||
|
onSelectionCancel,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange
|
||||||
|
} = usePermission(tableRef);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:inline="true"
|
||||||
|
:model="form"
|
||||||
|
class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
|
||||||
|
>
|
||||||
|
<el-form-item label="权限名称:" prop="permissionName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.permissionName"
|
||||||
|
placeholder="请输入权限名称"
|
||||||
|
clearable
|
||||||
|
class="w-45!"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="权限编码:" prop="permissionCode">
|
||||||
|
<el-input
|
||||||
|
v-model="form.permissionCode"
|
||||||
|
placeholder="请输入权限编码"
|
||||||
|
clearable
|
||||||
|
class="w-45!"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态:" prop="status">
|
||||||
|
<el-select
|
||||||
|
v-model="form.status"
|
||||||
|
placeholder="请选择"
|
||||||
|
clearable
|
||||||
|
class="w-45!"
|
||||||
|
>
|
||||||
|
<el-option label="已开启" :value="1" />
|
||||||
|
<el-option label="已关闭" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="useRenderIcon('ri/search-line')"
|
||||||
|
:loading="loading"
|
||||||
|
@click="onSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<PureTableBar title="权限管理" :columns="columns" @refresh="onSearch">
|
||||||
|
<template #buttons>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="useRenderIcon(AddFill)"
|
||||||
|
@click="openDialog()"
|
||||||
|
>
|
||||||
|
新增权限
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
<div
|
||||||
|
v-if="selectedNum > 0"
|
||||||
|
v-motion-fade
|
||||||
|
class="bg-(--el-fill-color-light) w-full h-11.5 mb-2 pl-4 flex items-center"
|
||||||
|
>
|
||||||
|
<div class="flex-auto">
|
||||||
|
<span
|
||||||
|
style="font-size: var(--el-font-size-base)"
|
||||||
|
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||||
|
>
|
||||||
|
已选 {{ selectedNum }} 项
|
||||||
|
</span>
|
||||||
|
<el-button type="primary" text @click="onSelectionCancel">
|
||||||
|
取消选择
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||||
|
<template #reference>
|
||||||
|
<el-button type="danger" text class="mr-1!"> 批量删除 </el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</div>
|
||||||
|
<pure-table
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="id"
|
||||||
|
adaptive
|
||||||
|
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||||
|
align-whole="center"
|
||||||
|
table-layout="auto"
|
||||||
|
:loading="loading"
|
||||||
|
:size="size"
|
||||||
|
:data="dataList"
|
||||||
|
:columns="dynamicColumns"
|
||||||
|
:pagination="{ ...pagination, size }"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-fill-color-light)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||||
|
row-class-name="permission-table-row"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
@page-size-change="handleSizeChange"
|
||||||
|
@page-current-change="handleCurrentChange"
|
||||||
|
>
|
||||||
|
<template #operation="{ row }">
|
||||||
|
<el-button
|
||||||
|
class="reset-margin"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(EditPen)"
|
||||||
|
@click="openDialog('修改', row)"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-popconfirm
|
||||||
|
:title="`是否确认删除权限编号为${row.id}的这条数据`"
|
||||||
|
@confirm="handleDelete(row)"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
class="reset-margin"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Delete)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</pure-table>
|
||||||
|
</template>
|
||||||
|
</PureTableBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-button:focus-visible) {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin: 24px 24px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.permission-table-row) {
|
||||||
|
&.level-1 {
|
||||||
|
background-color: var(--el-fill-color-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
292
src/views/system/permission/utils/hook.tsx
Normal file
292
src/views/system/permission/utils/hook.tsx
Normal file
@@ -0,0 +1,292 @@
|
|||||||
|
import dayjs from "dayjs";
|
||||||
|
import { message } from "@/utils/message";
|
||||||
|
import { addDialog } from "@/components/ReDialog";
|
||||||
|
import type { PaginationProps } from "@pureadmin/table";
|
||||||
|
import type { FormItemProps } from "./types";
|
||||||
|
import editForm from "../form/index.vue";
|
||||||
|
import { getPermissionTree } from "@/api/system";
|
||||||
|
import { type Ref, h, ref, computed, reactive, onMounted } from "vue";
|
||||||
|
import { getKeyList, deviceDetection } from "@pureadmin/utils";
|
||||||
|
import { ElMessageBox } from "element-plus";
|
||||||
|
|
||||||
|
export function usePermission(tableRef: Ref) {
|
||||||
|
const form = reactive({
|
||||||
|
permissionName: "",
|
||||||
|
permissionCode: "",
|
||||||
|
status: undefined as number | undefined
|
||||||
|
});
|
||||||
|
const formRef = ref();
|
||||||
|
const dataList = ref([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const selectedNum = ref(0);
|
||||||
|
const switchLoadMap = ref({});
|
||||||
|
|
||||||
|
const pagination = reactive<PaginationProps>({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns: TableColumnList = [
|
||||||
|
{
|
||||||
|
label: "勾选列",
|
||||||
|
type: "selection",
|
||||||
|
fixed: "left",
|
||||||
|
reserveSelection: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "权限编号",
|
||||||
|
prop: "id",
|
||||||
|
width: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "权限名称",
|
||||||
|
prop: "permissionName",
|
||||||
|
minWidth: 150,
|
||||||
|
align: "left",
|
||||||
|
cellRenderer: ({ row }) => (
|
||||||
|
<span style={{ paddingLeft: `${(row.level || 0) * 20}px` }}>
|
||||||
|
{row.permissionName}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "权限编码",
|
||||||
|
prop: "permissionCode",
|
||||||
|
minWidth: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "权限类型",
|
||||||
|
prop: "permissionType",
|
||||||
|
minWidth: 100,
|
||||||
|
cellRenderer: ({ row }) => {
|
||||||
|
const typeMap = {
|
||||||
|
1: { text: "菜单", type: "primary" },
|
||||||
|
2: { text: "按钮", type: "warning" },
|
||||||
|
3: { text: "接口", type: "success" }
|
||||||
|
};
|
||||||
|
const typeInfo = typeMap[row.permissionType] || {
|
||||||
|
text: "未知",
|
||||||
|
type: "info"
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<el-tag type={typeInfo.type} effect="plain">
|
||||||
|
{typeInfo.text}
|
||||||
|
</el-tag>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "路径",
|
||||||
|
prop: "path",
|
||||||
|
minWidth: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "排序",
|
||||||
|
prop: "sortOrder",
|
||||||
|
width: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
minWidth: 90,
|
||||||
|
cellRenderer: scope => (
|
||||||
|
<el-switch
|
||||||
|
size={scope.props.size === "small" ? "small" : "default"}
|
||||||
|
loading={switchLoadMap.value[scope.index]?.loading}
|
||||||
|
v-model={scope.row.status}
|
||||||
|
active-value={1}
|
||||||
|
inactive-value={0}
|
||||||
|
active-text="已启用"
|
||||||
|
inactive-text="已停用"
|
||||||
|
inline-prompt
|
||||||
|
onChange={() => onChange(scope as any)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "创建时间",
|
||||||
|
minWidth: 120,
|
||||||
|
prop: "createTime",
|
||||||
|
formatter: ({ createTime }) =>
|
||||||
|
createTime ? dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") : "-"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: 180,
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const buttonClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"h-5!",
|
||||||
|
"reset-margin",
|
||||||
|
"text-gray-500!",
|
||||||
|
"dark:text-white!",
|
||||||
|
"dark:hover:text-primary!"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
function onChange({ row, index }) {
|
||||||
|
const action = row.status === 0 ? "停用" : "启用";
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
`确认要<strong>${action}</strong><strong style='color:var(--el-color-primary)'>${row.permissionName}</strong>权限吗?`,
|
||||||
|
"系统提示",
|
||||||
|
{
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
draggable: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
switchLoadMap.value[index] = { loading: true };
|
||||||
|
setTimeout(() => {
|
||||||
|
switchLoadMap.value[index] = { loading: false };
|
||||||
|
message(`已成功${action}权限`, { type: "success" });
|
||||||
|
}, 300);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
row.status = row.status === 0 ? 1 : 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(row) {
|
||||||
|
message(`您删除了权限编号为${row.id}的这条数据`, { type: "success" });
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSizeChange(val: number) {
|
||||||
|
console.log(`${val} items per page`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCurrentChange(val: number) {
|
||||||
|
console.log(`current page: ${val}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelectionChange(val) {
|
||||||
|
selectedNum.value = val.length;
|
||||||
|
tableRef.value?.setAdaptive();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSelectionCancel() {
|
||||||
|
selectedNum.value = 0;
|
||||||
|
tableRef.value?.getTableRef().clearSelection();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onbatchDel() {
|
||||||
|
const curSelected = tableRef.value?.getTableRef().getSelectionRows();
|
||||||
|
message(`已删除权限编号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
tableRef.value?.getTableRef().clearSelection();
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSearch() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const { code, data } = await getPermissionTree();
|
||||||
|
if (code === 200) {
|
||||||
|
dataList.value = data || [];
|
||||||
|
pagination.total = data?.length || 0;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = formEl => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.resetFields();
|
||||||
|
onSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
function openDialog(title = "新增", row?: FormItemProps) {
|
||||||
|
addDialog({
|
||||||
|
title: `${title}权限`,
|
||||||
|
props: {
|
||||||
|
formInline: {
|
||||||
|
title,
|
||||||
|
id: row?.id ?? "",
|
||||||
|
parentId: row?.parentId ?? 0,
|
||||||
|
permissionName: row?.permissionName ?? "",
|
||||||
|
permissionCode: row?.permissionCode ?? "",
|
||||||
|
permissionType: row?.permissionType ?? 1,
|
||||||
|
path: row?.path ?? "",
|
||||||
|
component: row?.component ?? "",
|
||||||
|
icon: row?.icon ?? "",
|
||||||
|
apiUrl: row?.apiUrl ?? "",
|
||||||
|
apiMethod: row?.apiMethod ?? "",
|
||||||
|
sortOrder: row?.sortOrder ?? 0,
|
||||||
|
visible: row?.visible ?? 1,
|
||||||
|
status: row?.status ?? 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
width: "46%",
|
||||||
|
draggable: true,
|
||||||
|
fullscreen: deviceDetection(),
|
||||||
|
fullscreenIcon: true,
|
||||||
|
closeOnClickModal: false,
|
||||||
|
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||||
|
beforeSure: (done, { options }) => {
|
||||||
|
const FormRef = formRef.value?.getRef();
|
||||||
|
const curData = options.props.formInline as FormItemProps;
|
||||||
|
function chores() {
|
||||||
|
message(`您${title}了权限名称为${curData.permissionName}的这条数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
done();
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
FormRef?.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
console.log("curData", curData);
|
||||||
|
if (title === "新增") {
|
||||||
|
chores();
|
||||||
|
} else {
|
||||||
|
chores();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdate(row) {
|
||||||
|
console.log(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
form,
|
||||||
|
loading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
selectedNum,
|
||||||
|
pagination,
|
||||||
|
buttonClass,
|
||||||
|
deviceDetection,
|
||||||
|
onSearch,
|
||||||
|
resetForm,
|
||||||
|
onbatchDel,
|
||||||
|
openDialog,
|
||||||
|
handleUpdate,
|
||||||
|
handleDelete,
|
||||||
|
handleSizeChange,
|
||||||
|
onSelectionCancel,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange
|
||||||
|
};
|
||||||
|
}
|
||||||
15
src/views/system/permission/utils/types.ts
Normal file
15
src/views/system/permission/utils/types.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
export interface FormItemProps {
|
||||||
|
id?: number;
|
||||||
|
parentId?: number;
|
||||||
|
permissionName?: string;
|
||||||
|
permissionCode?: string;
|
||||||
|
permissionType?: number;
|
||||||
|
path?: string;
|
||||||
|
component?: string;
|
||||||
|
icon?: string;
|
||||||
|
apiUrl?: string;
|
||||||
|
apiMethod?: string;
|
||||||
|
sortOrder?: number;
|
||||||
|
visible?: number;
|
||||||
|
status?: number;
|
||||||
|
}
|
||||||
@@ -5,9 +5,13 @@ import { FormProps } from "./utils/types";
|
|||||||
|
|
||||||
const props = withDefaults(defineProps<FormProps>(), {
|
const props = withDefaults(defineProps<FormProps>(), {
|
||||||
formInline: () => ({
|
formInline: () => ({
|
||||||
name: "",
|
roleName: "",
|
||||||
code: "",
|
roleCode: "",
|
||||||
remark: ""
|
roleType: "custom",
|
||||||
|
description: "",
|
||||||
|
dataScope: 1,
|
||||||
|
sortOrder: 0,
|
||||||
|
status: 1
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -28,26 +32,43 @@ defineExpose({ getRef });
|
|||||||
:rules="formRules"
|
:rules="formRules"
|
||||||
label-width="82px"
|
label-width="82px"
|
||||||
>
|
>
|
||||||
<el-form-item label="角色名称" prop="name">
|
<el-form-item label="角色名称" prop="roleName">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="newFormInline.name"
|
v-model="newFormInline.roleName"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入角色名称"
|
placeholder="请输入角色名称"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="角色标识" prop="code">
|
<el-form-item label="角色编码" prop="roleCode">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="newFormInline.code"
|
v-model="newFormInline.roleCode"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入角色标识"
|
placeholder="请输入角色编码"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="备注">
|
<el-form-item label="角色类型">
|
||||||
|
<el-radio-group v-model="newFormInline.roleType">
|
||||||
|
<el-radio label="system">系统角色</el-radio>
|
||||||
|
<el-radio label="custom">自定义角色</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据权限">
|
||||||
|
<el-select v-model="newFormInline.dataScope" placeholder="请选择数据权限">
|
||||||
|
<el-option :value="1" label="全部数据" />
|
||||||
|
<el-option :value="2" label="本部门及以下" />
|
||||||
|
<el-option :value="3" label="本部门" />
|
||||||
|
<el-option :value="4" label="仅本人" />
|
||||||
|
<el-option :value="5" label="自定义" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="描述">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="newFormInline.remark"
|
v-model="newFormInline.description"
|
||||||
placeholder="请输入备注信息"
|
placeholder="请输入描述信息"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|||||||
@@ -95,18 +95,18 @@ onMounted(() => {
|
|||||||
:model="form"
|
:model="form"
|
||||||
class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
|
class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
|
||||||
>
|
>
|
||||||
<el-form-item label="角色名称:" prop="name">
|
<el-form-item label="角色名称:" prop="roleName">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.name"
|
v-model="form.roleName"
|
||||||
placeholder="请输入角色名称"
|
placeholder="请输入角色名称"
|
||||||
clearable
|
clearable
|
||||||
class="w-45!"
|
class="w-45!"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="角色标识:" prop="code">
|
<el-form-item label="角色编码:" prop="roleCode">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.code"
|
v-model="form.roleCode"
|
||||||
placeholder="请输入角色标识"
|
placeholder="请输入角色编码"
|
||||||
clearable
|
clearable
|
||||||
class="w-45!"
|
class="w-45!"
|
||||||
/>
|
/>
|
||||||
@@ -144,7 +144,7 @@ onMounted(() => {
|
|||||||
<PureTableBar
|
<PureTableBar
|
||||||
:class="[isShow && !deviceDetection() ? 'w-[60vw]!' : 'w-full']"
|
:class="[isShow && !deviceDetection() ? 'w-[60vw]!' : 'w-full']"
|
||||||
style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
|
style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
|
||||||
title="角色管理(仅演示,操作后不生效)"
|
title="角色管理"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
@refresh="onSearch"
|
@refresh="onSearch"
|
||||||
>
|
>
|
||||||
@@ -191,7 +191,7 @@ onMounted(() => {
|
|||||||
修改
|
修改
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-popconfirm
|
<el-popconfirm
|
||||||
:title="`是否确认删除角色名称为${row.name}的这条数据`"
|
:title="`是否确认删除角色名称为${row.roleName}的这条数据`"
|
||||||
@confirm="handleDelete(row)"
|
@confirm="handleDelete(row)"
|
||||||
>
|
>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
@@ -214,7 +214,7 @@ onMounted(() => {
|
|||||||
:icon="useRenderIcon(Menu)"
|
:icon="useRenderIcon(Menu)"
|
||||||
@click="handleMenu(row)"
|
@click="handleMenu(row)"
|
||||||
>
|
>
|
||||||
权限
|
分配权限
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- <el-dropdown>
|
<!-- <el-dropdown>
|
||||||
<el-button
|
<el-button
|
||||||
@@ -279,7 +279,7 @@ onMounted(() => {
|
|||||||
<span :class="[iconClass, 'ml-2']">
|
<span :class="[iconClass, 'ml-2']">
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
v-tippy="{
|
v-tippy="{
|
||||||
content: '保存菜单权限'
|
content: '保存权限'
|
||||||
}"
|
}"
|
||||||
class="dark:text-white"
|
class="dark:text-white"
|
||||||
width="18px"
|
width="18px"
|
||||||
@@ -290,13 +290,13 @@ onMounted(() => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="font-bold truncate">
|
<p class="font-bold truncate">
|
||||||
菜单权限
|
权限设置
|
||||||
{{ `${curRow?.name ? `(${curRow.name})` : ""}` }}
|
{{ `${curRow?.roleName ? `(${curRow.roleName})` : ""}` }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="treeSearchValue"
|
v-model="treeSearchValue"
|
||||||
placeholder="请输入菜单进行搜索"
|
placeholder="请输入权限名称进行搜索"
|
||||||
class="mb-1"
|
class="mb-1"
|
||||||
clearable
|
clearable
|
||||||
@input="onQueryChanged"
|
@input="onQueryChanged"
|
||||||
@@ -316,7 +316,7 @@ onMounted(() => {
|
|||||||
:filter-method="filterMethod"
|
:filter-method="filterMethod"
|
||||||
>
|
>
|
||||||
<template #default="{ node }">
|
<template #default="{ node }">
|
||||||
<span>{{ transformI18n(node.label) }}</span>
|
<span>{{ node.label }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree-v2>
|
</el-tree-v2>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,13 +9,18 @@ import { addDialog } from "@/components/ReDialog";
|
|||||||
import type { FormItemProps } from "../utils/types";
|
import type { FormItemProps } from "../utils/types";
|
||||||
import type { PaginationProps } from "@pureadmin/table";
|
import type { PaginationProps } from "@pureadmin/table";
|
||||||
import { getKeyList, deviceDetection } from "@pureadmin/utils";
|
import { getKeyList, deviceDetection } from "@pureadmin/utils";
|
||||||
import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
|
import {
|
||||||
import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
|
getRoleList,
|
||||||
|
getPermissionList,
|
||||||
|
getRolePermissions,
|
||||||
|
assignRolePermissions
|
||||||
|
} from "@/api/system";
|
||||||
|
import { type Ref, reactive, ref, onMounted, h, watch } from "vue";
|
||||||
|
|
||||||
export function useRole(treeRef: Ref) {
|
export function useRole(treeRef: Ref) {
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
name: "",
|
roleName: "",
|
||||||
code: "",
|
roleCode: "",
|
||||||
status: ""
|
status: ""
|
||||||
});
|
});
|
||||||
const curRow = ref();
|
const curRow = ref();
|
||||||
@@ -33,7 +38,7 @@ export function useRole(treeRef: Ref) {
|
|||||||
const { switchStyle } = usePublicHooks();
|
const { switchStyle } = usePublicHooks();
|
||||||
const treeProps = {
|
const treeProps = {
|
||||||
value: "id",
|
value: "id",
|
||||||
label: "title",
|
label: "permissionName",
|
||||||
children: "children"
|
children: "children"
|
||||||
};
|
};
|
||||||
const pagination = reactive<PaginationProps>({
|
const pagination = reactive<PaginationProps>({
|
||||||
@@ -49,11 +54,23 @@ export function useRole(treeRef: Ref) {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "角色名称",
|
label: "角色名称",
|
||||||
prop: "name"
|
prop: "roleName"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "角色标识",
|
label: "角色编码",
|
||||||
prop: "code"
|
prop: "roleCode"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "角色类型",
|
||||||
|
prop: "roleType",
|
||||||
|
cellRenderer: ({ row }) => (
|
||||||
|
<el-tag
|
||||||
|
type={row.roleType === "system" ? "danger" : "info"}
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{row.roleType === "system" ? "系统角色" : "自定义角色"}
|
||||||
|
</el-tag>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "状态",
|
label: "状态",
|
||||||
@@ -74,8 +91,8 @@ export function useRole(treeRef: Ref) {
|
|||||||
minWidth: 90
|
minWidth: 90
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "备注",
|
label: "描述",
|
||||||
prop: "remark",
|
prop: "description",
|
||||||
minWidth: 160
|
minWidth: 160
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -107,7 +124,7 @@ export function useRole(treeRef: Ref) {
|
|||||||
`确认要<strong>${
|
`确认要<strong>${
|
||||||
row.status === 0 ? "停用" : "启用"
|
row.status === 0 ? "停用" : "启用"
|
||||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||||
row.name
|
row.roleName
|
||||||
}</strong>吗?`,
|
}</strong>吗?`,
|
||||||
"系统提示",
|
"系统提示",
|
||||||
{
|
{
|
||||||
@@ -134,7 +151,7 @@ export function useRole(treeRef: Ref) {
|
|||||||
loading: false
|
loading: false
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
|
message(`已${row.status === 0 ? "停用" : "启用"}${row.roleName}`, {
|
||||||
type: "success"
|
type: "success"
|
||||||
});
|
});
|
||||||
}, 300);
|
}, 300);
|
||||||
@@ -145,7 +162,7 @@ export function useRole(treeRef: Ref) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleDelete(row) {
|
function handleDelete(row) {
|
||||||
message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
|
message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "success" });
|
||||||
onSearch();
|
onSearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -163,12 +180,16 @@ export function useRole(treeRef: Ref) {
|
|||||||
|
|
||||||
async function onSearch() {
|
async function onSearch() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const { code, data } = await getRoleList(toRaw(form));
|
const { code, data } = await getRoleList({
|
||||||
if (code === 0) {
|
pageNum: pagination.currentPage,
|
||||||
dataList.value = data.list;
|
pageSize: pagination.pageSize,
|
||||||
|
keyword: form.roleName || form.roleCode || undefined
|
||||||
|
});
|
||||||
|
if (code === 200) {
|
||||||
|
dataList.value = data.records;
|
||||||
pagination.total = data.total;
|
pagination.total = data.total;
|
||||||
pagination.pageSize = data.pageSize;
|
pagination.pageSize = data.size;
|
||||||
pagination.currentPage = data.currentPage;
|
pagination.currentPage = data.current;
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -187,9 +208,13 @@ export function useRole(treeRef: Ref) {
|
|||||||
title: `${title}角色`,
|
title: `${title}角色`,
|
||||||
props: {
|
props: {
|
||||||
formInline: {
|
formInline: {
|
||||||
name: row?.name ?? "",
|
roleName: row?.roleName ?? "",
|
||||||
code: row?.code ?? "",
|
roleCode: row?.roleCode ?? "",
|
||||||
remark: row?.remark ?? ""
|
roleType: row?.roleType ?? "custom",
|
||||||
|
description: row?.description ?? "",
|
||||||
|
dataScope: row?.dataScope ?? 1,
|
||||||
|
sortOrder: row?.sortOrder ?? 0,
|
||||||
|
status: row?.status ?? 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
width: "40%",
|
width: "40%",
|
||||||
@@ -202,7 +227,7 @@ export function useRole(treeRef: Ref) {
|
|||||||
const FormRef = formRef.value.getRef();
|
const FormRef = formRef.value.getRef();
|
||||||
const curData = options.props.formInline as FormItemProps;
|
const curData = options.props.formInline as FormItemProps;
|
||||||
function chores() {
|
function chores() {
|
||||||
message(`您${title}了角色名称为${curData.name}的这条数据`, {
|
message(`您${title}了角色名称为${curData.roleName}的这条数据`, {
|
||||||
type: "success"
|
type: "success"
|
||||||
});
|
});
|
||||||
done(); // 关闭弹框
|
done(); // 关闭弹框
|
||||||
@@ -225,15 +250,18 @@ export function useRole(treeRef: Ref) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 菜单权限 */
|
/** 权限设置 */
|
||||||
async function handleMenu(row?: any) {
|
async function handleMenu(row?: any) {
|
||||||
const { id } = row;
|
const { id } = row;
|
||||||
if (id) {
|
if (id) {
|
||||||
curRow.value = row;
|
curRow.value = row;
|
||||||
isShow.value = true;
|
isShow.value = true;
|
||||||
const { code, data } = await getRoleMenuIds({ id });
|
// 获取该角色的权限列表
|
||||||
if (code === 0) {
|
const { code, data } = await getRolePermissions(id);
|
||||||
treeRef.value.setCheckedKeys(data);
|
if (code === 200) {
|
||||||
|
// 从返回的权限对象列表中提取已选中的权限ID
|
||||||
|
const checkedIds = data.map(item => item.id);
|
||||||
|
treeRef.value.setCheckedKeys(checkedIds);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
curRow.value = null;
|
curRow.value = null;
|
||||||
@@ -249,14 +277,19 @@ export function useRole(treeRef: Ref) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 菜单权限-保存 */
|
/** 权限保存 */
|
||||||
function handleSave() {
|
async function handleSave() {
|
||||||
const { id, name } = curRow.value;
|
const { id, roleName } = curRow.value;
|
||||||
// 根据用户 id 调用实际项目中菜单权限修改接口
|
const checkedKeys = treeRef.value.getCheckedKeys();
|
||||||
console.log(id, treeRef.value.getCheckedKeys());
|
const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();
|
||||||
message(`角色名称为${name}的菜单权限修改成功`, {
|
const permissionIds = [...checkedKeys, ...halfCheckedKeys];
|
||||||
type: "success"
|
|
||||||
});
|
const { code } = await assignRolePermissions(id, permissionIds);
|
||||||
|
if (code === 200) {
|
||||||
|
message(`角色名称为${roleName}的权限修改成功`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 数据权限 可自行开发 */
|
/** 数据权限 可自行开发 */
|
||||||
@@ -267,15 +300,20 @@ export function useRole(treeRef: Ref) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const filterMethod = (query: string, node) => {
|
const filterMethod = (query: string, node) => {
|
||||||
return transformI18n(node.title)!.includes(query);
|
return node.label?.includes(query);
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
onSearch();
|
onSearch();
|
||||||
const { code, data } = await getRoleMenu();
|
// 获取所有权限列表用于构建树
|
||||||
if (code === 0) {
|
const { code, data } = await getPermissionList({
|
||||||
treeIds.value = getKeyList(data, "id");
|
pageNum: 1,
|
||||||
treeData.value = handleTree(data);
|
pageSize: 1000
|
||||||
|
});
|
||||||
|
if (code === 200) {
|
||||||
|
treeIds.value = getKeyList(data.records, "id");
|
||||||
|
// 将权限数据转换为树形结构
|
||||||
|
treeData.value = handleTree(data.records);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,6 @@ import type { FormRules } from "element-plus";
|
|||||||
|
|
||||||
/** 自定义表单规则校验 */
|
/** 自定义表单规则校验 */
|
||||||
export const formRules = reactive(<FormRules>{
|
export const formRules = reactive(<FormRules>{
|
||||||
name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
|
roleName: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
|
||||||
code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
|
roleCode: [{ required: true, message: "角色编码为必填项", trigger: "blur" }]
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -2,11 +2,19 @@
|
|||||||
|
|
||||||
interface FormItemProps {
|
interface FormItemProps {
|
||||||
/** 角色名称 */
|
/** 角色名称 */
|
||||||
name: string;
|
roleName: string;
|
||||||
/** 角色编号 */
|
/** 角色编码 */
|
||||||
code: string;
|
roleCode: string;
|
||||||
/** 备注 */
|
/** 角色类型 */
|
||||||
remark: string;
|
roleType?: string;
|
||||||
|
/** 描述 */
|
||||||
|
description: string;
|
||||||
|
/** 数据权限 */
|
||||||
|
dataScope?: number;
|
||||||
|
/** 排序 */
|
||||||
|
sortOrder?: number;
|
||||||
|
/** 状态 */
|
||||||
|
status?: number;
|
||||||
}
|
}
|
||||||
interface FormProps {
|
interface FormProps {
|
||||||
formInline: FormItemProps;
|
formInline: FormItemProps;
|
||||||
|
|||||||
@@ -30,16 +30,7 @@ import {
|
|||||||
ElProgress,
|
ElProgress,
|
||||||
ElMessageBox
|
ElMessageBox
|
||||||
} from "element-plus";
|
} from "element-plus";
|
||||||
import {
|
import { type Ref, h, ref, watch, computed, reactive, onMounted } from "vue";
|
||||||
type Ref,
|
|
||||||
h,
|
|
||||||
ref,
|
|
||||||
toRaw,
|
|
||||||
watch,
|
|
||||||
computed,
|
|
||||||
reactive,
|
|
||||||
onMounted
|
|
||||||
} from "vue";
|
|
||||||
|
|
||||||
export function useUser(tableRef: Ref, treeRef: Ref) {
|
export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
@@ -187,11 +178,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
|
|
||||||
function onChange({ row, index }) {
|
function onChange({ row, index }) {
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm(
|
||||||
`确认要<strong>${
|
`确认要<strong>${row.status === 0 ? "停用" : "启用"}</strong><strong style='color:var(--el-color-primary)'>${row.username}</strong>用户吗?`,
|
||||||
row.status === 0 ? "停用" : "启用"
|
|
||||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
|
||||||
row.username
|
|
||||||
}</strong>用户吗?`,
|
|
||||||
"系统提示",
|
"系统提示",
|
||||||
{
|
{
|
||||||
confirmButtonText: "确定",
|
confirmButtonText: "确定",
|
||||||
@@ -272,12 +259,16 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
|
|
||||||
async function onSearch() {
|
async function onSearch() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const { code, data } = await getUserList(toRaw(form));
|
const { code, data } = await getUserList({
|
||||||
if (code === 0) {
|
pageNum: pagination.currentPage,
|
||||||
dataList.value = data.list;
|
pageSize: pagination.pageSize,
|
||||||
|
keyword: form.username || form.phone || undefined
|
||||||
|
});
|
||||||
|
if (code === 200) {
|
||||||
|
dataList.value = data.records;
|
||||||
pagination.total = data.total;
|
pagination.total = data.total;
|
||||||
pagination.pageSize = data.pageSize;
|
pagination.pageSize = data.size;
|
||||||
pagination.currentPage = data.currentPage;
|
pagination.currentPage = data.current;
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -500,7 +491,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
|||||||
|
|
||||||
// 归属部门
|
// 归属部门
|
||||||
const { code, data } = await getDeptList();
|
const { code, data } = await getDeptList();
|
||||||
if (code === 0) {
|
if (code === 200) {
|
||||||
higherDeptOptions.value = handleTree(data);
|
higherDeptOptions.value = handleTree(data);
|
||||||
treeData.value = handleTree(data);
|
treeData.value = handleTree(data);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user