用户管理等
This commit is contained in:
132
schoolNewsWeb/src/apis/system/dept.ts
Normal file
132
schoolNewsWeb/src/apis/system/dept.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* @description 部门相关API
|
||||
* @author yslg
|
||||
* @since 2025-10-06
|
||||
*/
|
||||
|
||||
import { api } from '@/apis/index';
|
||||
import type { SysDept, SysRole, DeptRoleVO, SysDeptRole } from '@/types';
|
||||
|
||||
/**
|
||||
* 部门API服务
|
||||
*/
|
||||
export const deptApi = {
|
||||
/**
|
||||
* @description 查询所有部门
|
||||
* @returns Promise<SysDept[]> 部门列表
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async getAllDepts(): Promise<SysDept[]> {
|
||||
const response = await api.post<SysDept>('/depts/all');
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 查询部门列表
|
||||
* @param filter 过滤条件
|
||||
* @returns Promise<SysDept[]> 部门列表
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async getDeptList(filter: SysDept): Promise<SysDept[]> {
|
||||
const response = await api.post<SysDept>('/depts/list', filter);
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 查询部门
|
||||
* @param dept 部门信息
|
||||
* @returns Promise<SysDept> 部门信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async getDeptById(dept: SysDept): Promise<SysDept> {
|
||||
const response = await api.post<SysDept>('/depts/id', dept);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 创建部门
|
||||
* @param dept 部门信息
|
||||
* @returns Promise<SysDept> 部门信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async createDept(dept: SysDept): Promise<SysDept> {
|
||||
const response = await api.post<SysDept>('/depts/dept', dept);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 更新部门
|
||||
* @param dept 部门信息
|
||||
* @returns Promise<SysDept> 部门信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async updateDept(dept: SysDept): Promise<SysDept> {
|
||||
const response = await api.put<SysDept>('/depts/dept', dept);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 删除部门
|
||||
* @param dept 部门信息
|
||||
* @returns Promise<SysDept> 部门信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async deleteDept(dept: SysDept): Promise<SysDept> {
|
||||
const response = await api.delete<SysDept>('/depts/dept', dept);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 查询部门绑定角色
|
||||
* @param dept 部门信息
|
||||
* @returns Promise<SysRole[]> 角色列表
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async getDeptByRole(dept: SysDept): Promise<SysRole[]> {
|
||||
const response = await api.post<SysRole>('/depts/role', dept);
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 查询部门角色列表
|
||||
* @param dept 部门角色信息
|
||||
* @returns Promise<SysDeptRole[]> 部门角色列表
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async getDeptRoleList(dept: SysDeptRole): Promise<SysDeptRole[]> {
|
||||
const response = await api.post<SysDeptRole>('/depts/role/list', dept);
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 绑定部门角色
|
||||
* @param deptRole 部门角色VO
|
||||
* @returns Promise<SysDeptRole> 部门角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async bindDeptRole(deptRole: DeptRoleVO): Promise<SysDeptRole> {
|
||||
const response = await api.post<SysDeptRole>('/depts/bind/role', deptRole);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 解绑部门角色
|
||||
* @param deptRole 部门角色VO
|
||||
* @returns Promise<SysDeptRole> 部门角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-06
|
||||
*/
|
||||
async unbindDeptRole(deptRole: DeptRoleVO): Promise<SysDeptRole> {
|
||||
const response = await api.post<SysDeptRole>('/depts/unbind/role', deptRole);
|
||||
return response.data.data!;
|
||||
}
|
||||
};
|
||||
@@ -1,16 +1,96 @@
|
||||
/**
|
||||
* @description 角色相关API
|
||||
* @author yslg
|
||||
* @since 2025-10-09
|
||||
*/
|
||||
|
||||
import { api } from '@/apis/index';
|
||||
import type { SysRole } from '@/types';
|
||||
import type { SysPermission, SysRole, SysRolePermission } from '@/types';
|
||||
|
||||
/**
|
||||
* 菜单API服务
|
||||
* 角色API服务
|
||||
*/
|
||||
export const roleApi = {
|
||||
/**
|
||||
* 获取所有角色列表
|
||||
* @returns Promise<SysRole[]>
|
||||
*/
|
||||
async getRoleList(): Promise<SysRole[]> {
|
||||
const response = await api.post<SysRole>('/roles/all');
|
||||
return response.data.dataList!;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @description 获取所有角色
|
||||
* @returns Promise<SysRole[]> 角色列表
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async getAllRoles(): Promise<SysRole[]> {
|
||||
const response = await api.post<SysRole>('/roles/all');
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 根据角色ID获取角色
|
||||
* @param role 角色信息
|
||||
* @returns Promise<SysRole> 角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async getRoleById(role: SysRole): Promise<SysRole> {
|
||||
const response = await api.post<SysRole>('/roles/id', role);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 根据过滤条件获取角色列表
|
||||
* @param filter 过滤条件
|
||||
* @returns Promise<SysRole[]> 角色列表
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async getRoleList(filter: SysRole): Promise<SysRole[]> {
|
||||
const response = await api.post<SysRole>('/roles/list', filter);
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 创建角色
|
||||
* @param role 角色信息
|
||||
* @returns Promise<SysRole> 角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async createRole(role: SysRole): Promise<SysRole> {
|
||||
const response = await api.post<SysRole>('/roles/role', role);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 更新角色
|
||||
* @param role 角色信息
|
||||
* @returns Promise<SysRole> 角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async updateRole(role: SysRole): Promise<SysRole> {
|
||||
const response = await api.put<SysRole>('/roles/role', role);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 删除角色
|
||||
* @param role 角色信息
|
||||
* @returns Promise<SysRole> 角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async deleteRole(role: SysRole): Promise<SysRole> {
|
||||
const response = await api.delete<SysRole>('/roles/role', role);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取角色绑定权限列表
|
||||
* @param role 角色信息
|
||||
* @returns Promise<SysRole> 角色信息
|
||||
* @author yslg
|
||||
* @ since 2025-10-09
|
||||
*/
|
||||
async getRolePermission(role: SysRole): Promise<SysPermission[]> {
|
||||
const response = await api.post<SysPermission>('/roles/permission', role);
|
||||
return response.data.dataList!;
|
||||
}
|
||||
};
|
||||
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
import { api } from '@/apis/index';
|
||||
import type { SysUser, SysUserInfo, UserVO, PageDomain, PageParam } from '@/types';
|
||||
import type { SysUser, SysUserInfo, UserVO, UserDeptRoleVO, SysUserDeptRole } from '@/types';
|
||||
|
||||
/**
|
||||
* 用户API服务
|
||||
@@ -16,7 +16,7 @@ export const userApi = {
|
||||
* @returns Promise<UserVO>
|
||||
*/
|
||||
async getCurrentUser(): Promise<UserVO> {
|
||||
const response = await api.get<UserVO>('/user/current');
|
||||
const response = await api.get<UserVO>('/users/current');
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -26,7 +26,7 @@ export const userApi = {
|
||||
* @returns Promise<boolean>
|
||||
*/
|
||||
async updateCurrentUser(user: SysUser): Promise<boolean> {
|
||||
const response = await api.put<boolean>('/user/current', user);
|
||||
const response = await api.put<boolean>('/users/current', user);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -36,7 +36,7 @@ export const userApi = {
|
||||
* @returns Promise<boolean>
|
||||
*/
|
||||
async updateUserInfo(userInfo: SysUserInfo): Promise<boolean> {
|
||||
const response = await api.put<boolean>('/user/info', userInfo);
|
||||
const response = await api.put<boolean>('/users/info', userInfo);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -47,7 +47,7 @@ export const userApi = {
|
||||
* @returns Promise<boolean>
|
||||
*/
|
||||
async changePassword(oldPassword: string, newPassword: string): Promise<boolean> {
|
||||
const response = await api.post<boolean>('/user/change-password', {
|
||||
const response = await api.post<boolean>('/users/change-password', {
|
||||
oldPassword,
|
||||
newPassword
|
||||
});
|
||||
@@ -55,55 +55,72 @@ export const userApi = {
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取用户列表（分页）
|
||||
* @param pageParam 分页参数
|
||||
* @returns Promise<PageDomain<SysUser>>
|
||||
* 获取用户列表
|
||||
* @param filter 过滤条件
|
||||
* @returns Promise<SysUser[]>
|
||||
*/
|
||||
async getUserList(pageParam: PageParam): Promise<PageDomain<SysUser>> {
|
||||
const response = await api.get<SysUser>('/user/list', {
|
||||
params: pageParam
|
||||
});
|
||||
return response.data.pageDomain!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据ID获取用户
|
||||
* @param userId 用户ID
|
||||
* @returns Promise<SysUser>
|
||||
*/
|
||||
async getUserById(userId: string): Promise<SysUser> {
|
||||
const response = await api.get<SysUser>(`/user/${userId}`);
|
||||
return response.data.data!;
|
||||
async getUserList(filter: SysUser): Promise<SysUser[]> {
|
||||
const response = await api.post<SysUser>('/users/list', filter);
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建用户
|
||||
* @param user 用户信息
|
||||
* @returns Promise<string> 返回用户ID
|
||||
* @returns Promise<SysUser>
|
||||
*/
|
||||
async createUser(user: SysUser): Promise<string> {
|
||||
const response = await api.post<string>('/user', user);
|
||||
async createUser(user: SysUser): Promise<SysUser> {
|
||||
const response = await api.post<SysUser>('/users/user', user);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新用户
|
||||
* @param userId 用户ID
|
||||
* @param user 用户信息
|
||||
* @returns Promise<boolean>
|
||||
* @returns Promise<SysUser>
|
||||
*/
|
||||
async updateUser(userId: string, user: SysUser): Promise<boolean> {
|
||||
const response = await api.put<boolean>(`/user/${userId}`, user);
|
||||
async updateUser(user: SysUser): Promise<SysUser> {
|
||||
const response = await api.put<SysUser>('/users/user', user);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除用户
|
||||
* @param userId 用户ID
|
||||
* @returns Promise<boolean>
|
||||
* @param user 用户信息
|
||||
* @returns Promise<SysUser>
|
||||
*/
|
||||
async deleteUser(userId: string): Promise<boolean> {
|
||||
const response = await api.delete<boolean>(`/user/${userId}`);
|
||||
async deleteUser(user: SysUser): Promise<SysUser> {
|
||||
const response = await api.delete<SysUser>('/users/user', user);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取用户部门角色绑定信息
|
||||
* @param user 用户信息
|
||||
* @returns Promise<UserDeptRoleVO>
|
||||
*/
|
||||
async getUserDeptRole(user: SysUserDeptRole): Promise<SysUserDeptRole[]> {
|
||||
const response = await api.post<SysUserDeptRole>('/users/bind/deptrole/list', user);
|
||||
return response.data.dataList!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 绑定用户部门角色
|
||||
* @param userDeptRoleVO 用户部门角色绑定信息
|
||||
* @returns Promise<UserDeptRoleVO>
|
||||
*/
|
||||
async bindUserDeptRole(userDeptRoleVO: UserDeptRoleVO): Promise<UserDeptRoleVO> {
|
||||
const response = await api.post<UserDeptRoleVO>('/users/bind/deptrole', userDeptRoleVO);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
/**
|
||||
* 解绑用户部门角色
|
||||
* @param userDeptRoleVO 用户部门角色解绑信息
|
||||
* @returns Promise<UserDeptRoleVO>
|
||||
*/
|
||||
async unbindUserDeptRole(userDeptRoleVO: UserDeptRoleVO): Promise<UserDeptRoleVO> {
|
||||
const response = await api.post<UserDeptRoleVO>('/users/unbind/deptrole', userDeptRoleVO);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -113,7 +130,7 @@ export const userApi = {
|
||||
* @returns Promise<boolean>
|
||||
*/
|
||||
async batchDeleteUsers(userIds: string[]): Promise<boolean> {
|
||||
const response = await api.post<boolean>('/user/batch-delete', { userIds });
|
||||
const response = await api.post<boolean>('/users/batch-delete', { userIds });
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -124,7 +141,7 @@ export const userApi = {
|
||||
* @returns Promise<boolean>
|
||||
*/
|
||||
async changeUserStatus(userId: string, status: number): Promise<boolean> {
|
||||
const response = await api.patch<boolean>(`/user/${userId}/status`, { status });
|
||||
const response = await api.patch<boolean>(`/users/${userId}/status`, { status });
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -134,7 +151,7 @@ export const userApi = {
|
||||
* @returns Promise<string> 返回新密码
|
||||
*/
|
||||
async resetPassword(userId: string): Promise<string> {
|
||||
const response = await api.post<string>(`/user/${userId}/reset-password`);
|
||||
const response = await api.post<string>(`/users/${userId}/reset-password`);
|
||||
return response.data.data!;
|
||||
},
|
||||
|
||||
@@ -146,7 +163,7 @@ export const userApi = {
|
||||
async uploadAvatar(file: File): Promise<string> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const response = await api.upload<string>('/user/avatar', formData);
|
||||
const response = await api.upload<string>('/users/avatar', formData);
|
||||
return response.data.data!;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -23,6 +23,8 @@ export interface SysDept extends BaseDTO {
|
||||
creator?: string;
|
||||
/** 更新人 */
|
||||
updater?: string;
|
||||
/** 子部门列表（前端使用） */
|
||||
children?: SysDept[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -33,12 +35,15 @@ export interface DeptRoleVO {
|
||||
dept?: SysDept;
|
||||
/** 角色信息 */
|
||||
role?: SysRole;
|
||||
depts?: SysDept[];
|
||||
roles?: SysRole[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 部门角色关联
|
||||
*/
|
||||
export interface SysDeptRole extends BaseDTO {
|
||||
id?: string;
|
||||
/** 部门ID */
|
||||
deptID?: string;
|
||||
/** 角色ID */
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
*/
|
||||
|
||||
import { BaseDTO } from '../base';
|
||||
|
||||
import { SysDept } from '../dept';
|
||||
import { SysRole } from '../role';
|
||||
/**
|
||||
* 系统用户
|
||||
*/
|
||||
@@ -88,3 +89,15 @@ export interface SysUserDeptRole extends BaseDTO {
|
||||
roleID?: string;
|
||||
}
|
||||
|
||||
export interface UserDeptRoleVO extends BaseDTO {
|
||||
/** 单个用户信息 */
|
||||
user?: SysUser;
|
||||
/** 用户列表 */
|
||||
users?: SysUser[];
|
||||
/** 部门列表 */
|
||||
depts?: SysDept[];
|
||||
/** 角色列表 */
|
||||
roles?: SysRole[];
|
||||
/** 用户部门角色关联列表 */
|
||||
userDeptRoles?: SysUserDeptRole[];
|
||||
}
|
||||
@@ -1,13 +1,572 @@
|
||||
<template>
|
||||
<div>
|
||||
部门管理
|
||||
<div class="dept-manage">
|
||||
<div class="header">
|
||||
<h2>部门管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增部门
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="deptList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
row-key="deptID"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="name" label="部门名称" min-width="200" />
|
||||
<el-table-column prop="deptID" label="部门ID" min-width="150" />
|
||||
<el-table-column prop="description" label="部门描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorName" label="创建人" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleAddChild(row)"
|
||||
link
|
||||
>
|
||||
新增子部门
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleEdit(row)"
|
||||
link
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindRole(row)"
|
||||
link
|
||||
>
|
||||
绑定角色
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(row)"
|
||||
link
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑部门' : '新增部门'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="父部门" prop="parentID">
|
||||
<el-cascader
|
||||
v-model="formData.parentID"
|
||||
:options="parentDeptOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择父部门"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入部门描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定角色对话框 -->
|
||||
<el-dialog v-model="bindRoleDialogVisible" title="绑定角色" width="800px" @close="resetBindList">
|
||||
<div class="role-binding-container">
|
||||
<!-- 部门信息显示 -->
|
||||
<div class="dept-info" v-if="currentDept">
|
||||
<h4>部门信息：{{ currentDept.name }}</h4>
|
||||
<p>部门ID：{{ currentDept.deptID }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 角色绑定状态表格 -->
|
||||
<el-table :data="roleList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isRoleSelected(row.roleID) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isRoleSelected(row.roleID) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="角色名称" min-width="150" />
|
||||
<el-table-column prop="roleID" label="角色ID" min-width="120" />
|
||||
<el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isRoleSelected(row.roleID) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleRoleSelection(row)"
|
||||
>
|
||||
{{ isRoleSelected(row.roleID) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedRoles.length} 个角色，未绑定 ${roleList.length - selectedRoles.length} 个角色`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindRoleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveRoleBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { deptApi } from '@/apis/system/dept';
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import { SysDept, SysRole } from '@/types';
|
||||
import { ref, onMounted, reactive, computed } from 'vue';
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 数据状态
|
||||
const deptList = ref<SysDept[]>([]);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
|
||||
// 角色绑定相关数据
|
||||
const roleList = ref<SysRole[]>([]);
|
||||
const selectedRoles = ref<string[]>([]);
|
||||
const currentDept = ref<SysDept | null>(null);
|
||||
const bindList = ref<{ roles: SysRole[] }>({
|
||||
roles: []
|
||||
});
|
||||
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const bindRoleDialogVisible = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<SysDept>({
|
||||
name: '',
|
||||
description: '',
|
||||
parentID: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入部门名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '部门名称长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ max: 200, message: '部门描述不能超过 200 个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = {
|
||||
value: 'deptID',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
checkStrictly: true
|
||||
};
|
||||
|
||||
// 父部门选项
|
||||
const parentDeptOptions = computed(() => {
|
||||
return buildParentDeptOptions(deptList.value);
|
||||
});
|
||||
|
||||
// 构建父部门选项
|
||||
function buildParentDeptOptions(depts: SysDept[]): any[] {
|
||||
return depts.map(dept => ({
|
||||
deptID: dept.deptID,
|
||||
name: dept.name,
|
||||
children: dept.children ? buildParentDeptOptions(dept.children) : undefined
|
||||
}));
|
||||
}
|
||||
|
||||
// 加载部门列表
|
||||
async function loadDeptList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
deptList.value = await deptApi.getAllDepts();
|
||||
} catch (error) {
|
||||
console.error('加载部门列表失败:', error);
|
||||
ElMessage.error('加载部门列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增部门
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
formData.parentID = undefined;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 新增子部门
|
||||
function handleAddChild(row: SysDept) {
|
||||
isEdit.value = false;
|
||||
formData.parentID = row.deptID;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑部门
|
||||
function handleEdit(row: SysDept) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, row);
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除部门
|
||||
async function handleDelete(row: SysDept) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除部门 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
|
||||
await deptApi.deleteDept(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除部门失败:', error);
|
||||
ElMessage.error('删除部门失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await deptApi.updateDept(formData);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await deptApi.createDept(formData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
if (error !== false) { // 表单验证失败时error为false
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
description: '',
|
||||
parentID: undefined
|
||||
});
|
||||
}
|
||||
|
||||
// 查看绑定角色
|
||||
async function handleBindRole(row: SysDept) {
|
||||
currentDept.value = row;
|
||||
|
||||
try {
|
||||
// 获取所有角色
|
||||
roleList.value = await roleApi.getAllRoles();
|
||||
|
||||
// 获取已绑定的角色
|
||||
const bindingResult = await deptApi.getDeptByRole(row);
|
||||
bindList.value.roles = bindingResult || [];
|
||||
|
||||
// 设置已选中的角色
|
||||
selectedRoles.value = bindList.value.roles.map(role => role.roleID).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的角色:', bindList.value.roles);
|
||||
console.log('所有角色:', roleList.value);
|
||||
bindRoleDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取角色绑定信息失败:', error);
|
||||
ElMessage.error('获取角色绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 重置绑定列表
|
||||
function resetBindList() {
|
||||
bindList.value = {
|
||||
roles: []
|
||||
};
|
||||
selectedRoles.value = [];
|
||||
currentDept.value = null;
|
||||
}
|
||||
|
||||
// 检查角色是否已选中
|
||||
function isRoleSelected(roleID: string | undefined): boolean {
|
||||
return roleID ? selectedRoles.value.includes(roleID) : false;
|
||||
}
|
||||
|
||||
// 切换角色选择状态
|
||||
function toggleRoleSelection(role: SysRole) {
|
||||
if (!role.roleID) return;
|
||||
|
||||
const index = selectedRoles.value.indexOf(role.roleID);
|
||||
if (index > -1) {
|
||||
selectedRoles.value.splice(index, 1);
|
||||
} else {
|
||||
selectedRoles.value.push(role.roleID);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存角色绑定
|
||||
async function saveRoleBinding() {
|
||||
if (!currentDept.value || !currentDept.value.deptID) {
|
||||
ElMessage.error('部门信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的角色ID
|
||||
const currentBoundRoles = (bindList.value.roles || []).map(role => role.roleID).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的角色（新增的）
|
||||
const rolesToBind = selectedRoles.value.filter(roleID => !currentBoundRoles.includes(roleID));
|
||||
|
||||
// 找出需要解绑的角色（移除的）
|
||||
const rolesToUnbind = currentBoundRoles.filter(roleID => !selectedRoles.value.includes(roleID));
|
||||
|
||||
// 构建需要绑定的角色对象数组
|
||||
if (rolesToBind.length > 0) {
|
||||
const rolesToBindObjects = rolesToBind.map(roleID => {
|
||||
const role = roleList.value.find(r => r.roleID === roleID);
|
||||
return role || { roleID: roleID };
|
||||
});
|
||||
|
||||
const bindDept = {
|
||||
dept: currentDept.value,
|
||||
depts: [{deptID: currentDept.value.deptID}],
|
||||
roles: rolesToBindObjects,
|
||||
};
|
||||
await deptApi.bindDeptRole(bindDept);
|
||||
}
|
||||
|
||||
// 构建需要解绑的角色对象数组
|
||||
if (rolesToUnbind.length > 0) {
|
||||
const rolesToUnbindObjects = rolesToUnbind.map(roleID => {
|
||||
const role = roleList.value.find(r => r.roleID === roleID);
|
||||
return role || { roleID: roleID };
|
||||
});
|
||||
|
||||
const unbindDept = {
|
||||
dept: currentDept.value,
|
||||
roles: rolesToUnbindObjects,
|
||||
depts: [{deptID: currentDept.value.deptID}]
|
||||
};
|
||||
await deptApi.unbindDeptRole(unbindDept);
|
||||
}
|
||||
|
||||
ElMessage.success('角色绑定保存成功');
|
||||
bindRoleDialogVisible.value = false;
|
||||
|
||||
// 刷新部门列表
|
||||
await loadDeptList();
|
||||
} catch (error) {
|
||||
console.error('保存角色绑定失败:', error);
|
||||
ElMessage.error('保存角色绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取部门列表
|
||||
onMounted(() => {
|
||||
loadDeptList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dept-manage {
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
&.is-link {
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 角色绑定容器样式
|
||||
.role-binding-container {
|
||||
.dept-info {
|
||||
background: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.binding-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -346,7 +346,7 @@ async function handleBindRole(row: SysPermission) {
|
||||
bindList.value.roles = bindingResult.roles || [];
|
||||
|
||||
// 获取所有角色
|
||||
roleList.value = await roleApi.getRoleList();
|
||||
roleList.value = await roleApi.getAllRoles();
|
||||
|
||||
// 设置已选中的角色
|
||||
selectedRoles.value = bindList.value.roles.map(role => role.id).filter((id): id is string => !!id);
|
||||
|
||||
@@ -1,13 +1,530 @@
|
||||
<template>
|
||||
<div>
|
||||
角色管理
|
||||
<div class="role-manage">
|
||||
<div class="header">
|
||||
<h2>角色管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增角色
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="roleList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="name" label="角色名称" min-width="200" />
|
||||
<el-table-column prop="roleID" label="角色ID" min-width="150" />
|
||||
<el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorName" label="创建人" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleEdit(row)"
|
||||
link
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindPermission(row)"
|
||||
link
|
||||
>
|
||||
绑定权限
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(row)"
|
||||
link
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑角色' : '新增角色'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入角色描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定权限对话框 -->
|
||||
<el-dialog v-model="bindPermissionDialogVisible" title="绑定权限" width="800px" @close="resetBindList">
|
||||
<div class="permission-binding-container">
|
||||
<!-- 角色信息显示 -->
|
||||
<div class="role-info" v-if="currentRole">
|
||||
<h4>角色信息：{{ currentRole.name }}</h4>
|
||||
<p>角色ID：{{ currentRole.roleID }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 权限绑定状态表格 -->
|
||||
<el-table :data="permissionList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isPermissionSelected(row.permissionID) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isPermissionSelected(row.permissionID) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="权限名称" min-width="150" />
|
||||
<el-table-column prop="permissionID" label="权限ID" min-width="120" />
|
||||
<el-table-column prop="code" label="权限编码" min-width="150" />
|
||||
<el-table-column prop="description" label="权限描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isPermissionSelected(row.permissionID) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="togglePermissionSelection(row)"
|
||||
>
|
||||
{{ isPermissionSelected(row.permissionID) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="binding-stats">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedPermissions.length} 个权限，未绑定 ${permissionList.length - selectedPermissions.length} 个权限`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindPermissionDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="savePermissionBinding" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import { permissionApi } from '@/apis/system/permission';
|
||||
import { SysRole, SysPermission } from '@/types';
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 数据状态
|
||||
const roleList = ref<SysRole[]>([]);
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
|
||||
// 权限绑定相关数据
|
||||
const permissionList = ref<SysPermission[]>([]);
|
||||
const selectedPermissions = ref<string[]>([]);
|
||||
const currentRole = ref<SysRole | null>(null);
|
||||
const bindList = ref<{ permissions: SysPermission[] }>({
|
||||
permissions: []
|
||||
});
|
||||
|
||||
// 对话框状态
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const bindPermissionDialogVisible = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<SysRole>({
|
||||
name: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '角色名称长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
description: [
|
||||
{ max: 200, message: '角色描述不能超过 200 个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 加载角色列表
|
||||
async function loadRoleList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
roleList.value = await roleApi.getAllRoles();
|
||||
} catch (error) {
|
||||
console.error('加载角色列表失败:', error);
|
||||
ElMessage.error('加载角色列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增角色
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑角色
|
||||
function handleEdit(row: SysRole) {
|
||||
isEdit.value = true;
|
||||
Object.assign(formData, row);
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除角色
|
||||
async function handleDelete(row: SysRole) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除角色 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
|
||||
await roleApi.deleteRole(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadRoleList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除角色失败:', error);
|
||||
ElMessage.error('删除角色失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await roleApi.updateRole(formData);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await roleApi.createRole(formData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
await loadRoleList();
|
||||
} catch (error) {
|
||||
if (error !== false) { // 表单验证失败时error为false
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
description: ''
|
||||
});
|
||||
}
|
||||
|
||||
// 查看绑定权限
|
||||
async function handleBindPermission(row: SysRole) {
|
||||
currentRole.value = row;
|
||||
|
||||
try {
|
||||
// 获取所有权限
|
||||
let permission: SysPermission = {
|
||||
permissionID: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
description: undefined,
|
||||
};
|
||||
permissionList.value = await permissionApi.getPermissionList(permission);
|
||||
|
||||
// 获取已绑定的权限
|
||||
const bindingResult = await roleApi.getRolePermission({
|
||||
roleID: row.roleID
|
||||
});
|
||||
console.log('已绑定的权限:', bindingResult);
|
||||
bindList.value.permissions = bindingResult || [];
|
||||
|
||||
// 设置已选中的权限
|
||||
selectedPermissions.value = bindList.value.permissions.map(permission => permission.permissionID).filter((id): id is string => !!id);
|
||||
|
||||
console.log('已绑定的权限:', bindList.value.permissions);
|
||||
console.log('所有权限:', permissionList.value);
|
||||
bindPermissionDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('获取权限绑定信息失败:', error);
|
||||
ElMessage.error('获取权限绑定信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 重置绑定列表
|
||||
function resetBindList() {
|
||||
bindList.value = {
|
||||
permissions: []
|
||||
};
|
||||
selectedPermissions.value = [];
|
||||
currentRole.value = null;
|
||||
}
|
||||
|
||||
// 检查权限是否已选中
|
||||
function isPermissionSelected(permissionID: string | undefined): boolean {
|
||||
return permissionID ? selectedPermissions.value.includes(permissionID) : false;
|
||||
}
|
||||
|
||||
// 切换权限选择状态
|
||||
function togglePermissionSelection(permission: SysPermission) {
|
||||
if (!permission.permissionID) return;
|
||||
|
||||
const index = selectedPermissions.value.indexOf(permission.permissionID);
|
||||
if (index > -1) {
|
||||
selectedPermissions.value.splice(index, 1);
|
||||
} else {
|
||||
selectedPermissions.value.push(permission.permissionID);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存权限绑定
|
||||
async function savePermissionBinding() {
|
||||
if (!currentRole.value || !currentRole.value.roleID) {
|
||||
ElMessage.error('角色信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的权限ID
|
||||
const currentBoundPermissions = (bindList.value.permissions || []).map(permission => permission.permissionID).filter((id): id is string => !!id);
|
||||
|
||||
// 找出需要绑定的权限（新增的）
|
||||
const permissionsToBind = selectedPermissions.value.filter(permissionID => !currentBoundPermissions.includes(permissionID));
|
||||
|
||||
// 找出需要解绑的权限（移除的）
|
||||
const permissionsToUnbind = currentBoundPermissions.filter(permissionID => !selectedPermissions.value.includes(permissionID));
|
||||
|
||||
// 构建需要绑定的权限对象数组
|
||||
if (permissionsToBind.length > 0) {
|
||||
const permissionsToBindObjects = permissionsToBind.map(permissionID => {
|
||||
const permission = permissionList.value.find(p => p.permissionID === permissionID);
|
||||
return permission || { permissionID: permissionID };
|
||||
});
|
||||
|
||||
const bindRole = {
|
||||
...currentRole.value,
|
||||
permissions: permissionsToBindObjects,
|
||||
roles: [{ roleID: currentRole.value.roleID }]
|
||||
};
|
||||
await permissionApi.bindRole(bindRole);
|
||||
}
|
||||
|
||||
// 构建需要解绑的权限对象数组
|
||||
if (permissionsToUnbind.length > 0) {
|
||||
const permissionsToUnbindObjects = permissionsToUnbind.map(permissionID => {
|
||||
const permission = permissionList.value.find(p => p.permissionID === permissionID);
|
||||
return permission || { permissionID: permissionID };
|
||||
});
|
||||
|
||||
const unbindRole = {
|
||||
...currentRole.value,
|
||||
permissions: permissionsToUnbindObjects,
|
||||
roles: [{ roleID: currentRole.value.roleID }]
|
||||
};
|
||||
await permissionApi.unbindRole(unbindRole);
|
||||
}
|
||||
|
||||
ElMessage.success('权限绑定保存成功');
|
||||
bindPermissionDialogVisible.value = false;
|
||||
|
||||
// 刷新角色列表
|
||||
await loadRoleList();
|
||||
} catch (error) {
|
||||
console.error('保存权限绑定失败:', error);
|
||||
ElMessage.error('保存权限绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取角色列表
|
||||
onMounted(() => {
|
||||
loadRoleList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.role-manage {
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
box-shadow: 0 0 0 1px #dcdfe6 inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #c0c4cc inset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px #409eff inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
&.is-link {
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 权限绑定容器样式
|
||||
.permission-binding-container {
|
||||
.role-info {
|
||||
background: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.binding-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
514
schoolNewsWeb/src/views/manage/system/UserManageView.vue
Normal file
514
schoolNewsWeb/src/views/manage/system/UserManageView.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<div class="user-manage">
|
||||
<div class="header">
|
||||
<h2>用户管理</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="userList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
row-key="userID"
|
||||
>
|
||||
<el-table-column prop="username" label="用户名" min-width="120" />
|
||||
<el-table-column prop="email" label="邮箱" min-width="180" />
|
||||
<el-table-column prop="phone" label="手机号" min-width="120" />
|
||||
<el-table-column prop="realName" label="真实姓名" min-width="100" />
|
||||
<el-table-column prop="nickname" label="昵称" min-width="100" />
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 0 ? 'success' : 'danger'">
|
||||
{{ row.status === 0 ? '正常' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="creatorName" label="创建人" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleEdit(row)"
|
||||
link
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindDeptRole(row)"
|
||||
link
|
||||
>
|
||||
绑定部门角色
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleDelete(row)"
|
||||
link
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/编辑用户对话框 -->
|
||||
<el-dialog
|
||||
v-model="userDialogVisible"
|
||||
:title="isEdit ? '编辑用户' : '新增用户'"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="userFormRef"
|
||||
:model="currentUser"
|
||||
:rules="userFormRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="currentUser.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password" v-if="!isEdit">
|
||||
<el-input
|
||||
v-model="currentUser.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="currentUser.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="currentUser.phone" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名" prop="realName">
|
||||
<el-input v-model="currentUser.realName" placeholder="请输入真实姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model="currentUser.nickname" placeholder="请输入昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="currentUser.status" placeholder="请选择状态">
|
||||
<el-option label="正常" :value="0" />
|
||||
<el-option label="禁用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="userDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveUser" :loading="submitting">
|
||||
{{ isEdit ? '更新' : '创建' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 绑定部门角色对话框 -->
|
||||
<el-dialog
|
||||
v-model="bindDeptRoleDialogVisible"
|
||||
title="绑定部门角色"
|
||||
width="800px"
|
||||
@close="resetBindForm"
|
||||
>
|
||||
<div class="bind-info">
|
||||
<el-alert
|
||||
:title="`用户：${currentUser.username} (${currentUser.realName})`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-table :data="bindList" style="width: 100%" border stripe>
|
||||
<el-table-column width="80" label="绑定状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="isSelected(row) ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ isSelected(row) ? '已绑定' : '未绑定' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deptName" label="部门" min-width="150" />
|
||||
<el-table-column prop="roleName" label="角色" min-width="150" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
:type="isSelected(row) ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleSelection(row)"
|
||||
>
|
||||
{{ isSelected(row) ? '解绑' : '绑定' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="bind-stats" style="margin-top: 20px">
|
||||
<el-alert
|
||||
:title="`已绑定 ${selectedBindings.length} 个部门角色，未绑定 ${bindList.length - selectedBindings.length} 个部门角色`"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="bindDeptRoleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveBindings" :loading="submitting">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { userApi } from '@/apis/system/user';
|
||||
import { deptApi } from '@/apis/system/dept';
|
||||
import { roleApi } from '@/apis/system/role';
|
||||
import type { SysUser, UserDeptRoleVO, UserVO, SysDeptRole} from '@/types';
|
||||
|
||||
// 扩展部门角色类型，包含绑定状态和显示信息
|
||||
interface DeptRoleBindItem extends SysDeptRole {
|
||||
deptName?: string;
|
||||
roleName?: string;
|
||||
isBound?: boolean;
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const userList = ref<UserVO[]>([]);
|
||||
|
||||
// 对话框控制
|
||||
const userDialogVisible = ref(false);
|
||||
const bindDeptRoleDialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
|
||||
// 当前操作的用户
|
||||
const currentUser = ref<SysUser & { realName?: string; nickname?: string }>({});
|
||||
|
||||
// 绑定相关数据
|
||||
const bindList = ref<DeptRoleBindItem[]>([]);
|
||||
const selectedBindings = ref<string[]>([]); // 存储选中的绑定项的唯一标识
|
||||
|
||||
// 表单验证规则
|
||||
const userFormRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 生成唯一标识
|
||||
function getBindingKey(item: DeptRoleBindItem): string {
|
||||
return `${item.deptID}_${item.roleID}`;
|
||||
}
|
||||
|
||||
// 检查是否已选中
|
||||
function isSelected(item: DeptRoleBindItem): boolean {
|
||||
return selectedBindings.value.includes(getBindingKey(item));
|
||||
}
|
||||
|
||||
// 切换选择状态
|
||||
function toggleSelection(item: DeptRoleBindItem) {
|
||||
const key = getBindingKey(item);
|
||||
const index = selectedBindings.value.indexOf(key);
|
||||
|
||||
if (index > -1) {
|
||||
selectedBindings.value.splice(index, 1);
|
||||
} else {
|
||||
selectedBindings.value.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户列表
|
||||
async function loadUserList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
const users = await userApi.getUserList({id: ""});
|
||||
userList.value = users;
|
||||
} catch (error) {
|
||||
console.error('加载用户列表失败:', error);
|
||||
ElMessage.error('加载用户列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门和角色数据用于名称映射
|
||||
async function loadDeptAndRoleData() {
|
||||
try {
|
||||
const [depts, roles] = await Promise.all([
|
||||
deptApi.getAllDepts(),
|
||||
roleApi.getAllRoles()
|
||||
]);
|
||||
|
||||
const deptMap = new Map(depts.map(d => [d.deptID, d.name || '未知部门']));
|
||||
const roleMap = new Map(roles.map(r => [r.roleID, r.name || '未知角色']));
|
||||
|
||||
return { deptMap, roleMap };
|
||||
} catch (error) {
|
||||
console.error('加载部门角色数据失败:', error);
|
||||
return { deptMap: new Map(), roleMap: new Map() };
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门角色绑定列表
|
||||
async function loadDeptRoleList(): Promise<DeptRoleBindItem[]> {
|
||||
try {
|
||||
const [deptRoles, { deptMap, roleMap }] = await Promise.all([
|
||||
deptApi.getDeptRoleList({id: ""}),
|
||||
loadDeptAndRoleData()
|
||||
]);
|
||||
|
||||
return deptRoles.map(item => ({
|
||||
...item,
|
||||
deptName: deptMap.get(item.deptID || '') || `部门${item.deptID}`,
|
||||
roleName: roleMap.get(item.roleID || '') || `角色${item.roleID}`,
|
||||
isBound: false // 初始状态为未绑定，需要根据实际绑定情况设置
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('加载部门角色列表失败:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 新增用户
|
||||
function handleAdd() {
|
||||
isEdit.value = false;
|
||||
currentUser.value = {};
|
||||
userDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 编辑用户
|
||||
function handleEdit(row: UserVO) {
|
||||
isEdit.value = true;
|
||||
// 将UserVO转换为SysUser
|
||||
currentUser.value = {
|
||||
id: row.id,
|
||||
username: row.username,
|
||||
email: row.email,
|
||||
phone: row.phone,
|
||||
wechatID: row.wechatID,
|
||||
status: row.status,
|
||||
createTime: row.createTime,
|
||||
updateTime: row.updateTime,
|
||||
deleteTime: row.deleteTime,
|
||||
deleted: row.deleted,
|
||||
realName: row.realName,
|
||||
nickname: row.nickname
|
||||
};
|
||||
userDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
async function handleDelete(row: UserVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除用户 "${row.username}" 吗？`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
);
|
||||
|
||||
await userApi.deleteUser(row);
|
||||
ElMessage.success('删除成功');
|
||||
await loadUserList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除用户失败:', error);
|
||||
ElMessage.error('删除用户失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保存用户
|
||||
async function saveUser() {
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
if (isEdit.value) {
|
||||
await userApi.updateUser(currentUser.value);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await userApi.createUser(currentUser.value);
|
||||
ElMessage.success('创建成功');
|
||||
}
|
||||
|
||||
userDialogVisible.value = false;
|
||||
await loadUserList();
|
||||
} catch (error) {
|
||||
console.error('保存用户失败:', error);
|
||||
ElMessage.error('保存用户失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定部门角色
|
||||
async function handleBindDeptRole(row: UserVO) {
|
||||
// 将UserVO转换为SysUser
|
||||
currentUser.value = {
|
||||
id: row.id,
|
||||
username: row.username,
|
||||
email: row.email,
|
||||
phone: row.phone,
|
||||
wechatID: row.wechatID,
|
||||
status: row.status,
|
||||
createTime: row.createTime,
|
||||
updateTime: row.updateTime,
|
||||
deleteTime: row.deleteTime,
|
||||
deleted: row.deleted
|
||||
};
|
||||
|
||||
try {
|
||||
// 加载全部部门和角色数据
|
||||
bindList.value = await loadDeptRoleList();
|
||||
|
||||
// 加载已绑定部门角色
|
||||
const deptRoles = await userApi.getUserDeptRole({userID: currentUser.value.id});
|
||||
|
||||
// 初始化选中状态为已绑定的项
|
||||
selectedBindings.value = bindList.value
|
||||
.filter(item => deptRoles.some(deptRole =>
|
||||
deptRole.deptID === item.deptID && deptRole.roleID === item.roleID
|
||||
))
|
||||
.map(item => getBindingKey(item));
|
||||
|
||||
bindDeptRoleDialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error('加载绑定数据失败:', error);
|
||||
ElMessage.error('加载绑定数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 保存绑定设置
|
||||
async function saveBindings() {
|
||||
if (!currentUser.value || !currentUser.value.id) {
|
||||
ElMessage.error('用户信息不完整');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true;
|
||||
|
||||
// 获取当前已绑定的部门角色
|
||||
const currentBoundItems = await userApi.getUserDeptRole({userID: currentUser.value.id});
|
||||
const currentBoundKeys = currentBoundItems.map(item => `${item.deptID}_${item.roleID}`);
|
||||
|
||||
// 找出需要绑定的项（新增的）
|
||||
const itemsToBind = bindList.value.filter(item => {
|
||||
const key = getBindingKey(item);
|
||||
return selectedBindings.value.includes(key) && !currentBoundKeys.includes(key);
|
||||
});
|
||||
|
||||
// 找出需要解绑的项（移除的）
|
||||
const itemsToUnbind = bindList.value.filter(item => {
|
||||
const key = getBindingKey(item);
|
||||
return !selectedBindings.value.includes(key) && currentBoundKeys.includes(key);
|
||||
});
|
||||
|
||||
// 执行绑定操作 - 一次性发送所有绑定项
|
||||
if (itemsToBind.length > 0) {
|
||||
const userDeptRoleVO: UserDeptRoleVO = {
|
||||
user: currentUser.value,
|
||||
users: [currentUser.value],
|
||||
userDeptRoles: itemsToBind.map(item => ({
|
||||
deptID: item.deptID,
|
||||
roleID: item.roleID
|
||||
}))
|
||||
};
|
||||
await userApi.bindUserDeptRole(userDeptRoleVO);
|
||||
}
|
||||
|
||||
// 执行解绑操作 - 一次性发送所有解绑项
|
||||
if (itemsToUnbind.length > 0) {
|
||||
const userDeptRoleVO: UserDeptRoleVO = {
|
||||
user: currentUser.value,
|
||||
users: [currentUser.value],
|
||||
userDeptRoles: itemsToUnbind.map(item => ({
|
||||
deptID: item.deptID,
|
||||
roleID: item.roleID
|
||||
}))
|
||||
};
|
||||
await userApi.unbindUserDeptRole(userDeptRoleVO);
|
||||
}
|
||||
|
||||
ElMessage.success('部门角色绑定保存成功');
|
||||
bindDeptRoleDialogVisible.value = false;
|
||||
|
||||
// 刷新用户列表
|
||||
await loadUserList();
|
||||
} catch (error) {
|
||||
console.error('保存部门角色绑定失败:', error);
|
||||
ElMessage.error('保存部门角色绑定失败');
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
function resetForm() {
|
||||
currentUser.value = {};
|
||||
}
|
||||
|
||||
// 重置绑定表单
|
||||
function resetBindForm() {
|
||||
bindList.value = [];
|
||||
selectedBindings.value = [];
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
loadUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-manage {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bind-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bind-stats {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user