Skip to content

E
EMS
提交 9ee0f0de authored 作者: hejie's avatar hejie
浏览文件
操作

feat: 建立系统管理模块之间的关联关系

上级 e5bd2c64
隐藏空白字符变更
内嵌 并排
正在显示 包含 159 行增加 和 67 行删除
src/api/role.ts
浏览文件 @ 9ee0f0de
......@@ -32,6 +32,12 @@ export const getRoleList = (data?: object) => {
});
};
/** 获取系统管理-不分页查询角色管理列表 */
export const getRoleListNoPage = () => {
// return http.request<ResultTable>("post", "/role", { data });
return http.request<ResultTable>("post", "/api/role/get-role-list");
};
// 系统管理-删除角色
export const deleteRole = (id: string) => {
return http.request<Result>("post", `/api/role/delete-role/${id}`);
......@@ -44,3 +50,12 @@ export const addRole = (data?: object) => {
export const updateRole = (data?: object) => {
return http.request<Result>("post", "/api/role/modify-role", { data });
};
// 系统管理-根据用户id查询角色列表
export const getRoleListByUserId = (id: string | number) => {
return http.request<Result>("post", `/api/role/get-role-by-user/${id}`);
};
// 系统管理 - 根据用户id绑定角色
export const bindRoleByUserId = (data?: object) => {
return http.request<Result>("post", "/api/role/bind-role-by-user", { data });
};
src/api/system.ts
浏览文件 @ 9ee0f0de
......@@ -3,6 +3,7 @@ import { http } from "@/utils/http";
type Result = {
success: boolean;
data?: Array<any>;
code?: string;
};
type ResultTable = {
......@@ -44,7 +45,7 @@ export const getRoleList = (data?: object) => {
/** 获取系统管理-菜单管理列表 */
export const getMenuList = (data?: object) => {
return http.request<Result>("post", "/api/menu/find-menu-list-by-page", {
return http.request<ResultTable>("post", "/api/menu/find-menu-list-by-page", {
data
});
};
......@@ -64,6 +65,16 @@ export const deleteMenu = (data?: { id: number }) => {
return http.request<Result>("post", `/api/menu/delete-menu/${data.id}`);
};
// 根据角色ID获取菜单列表
export const getMenuListByRoleId = (roleId: number) => {
return http.request<Result>("post", `/api/menu/get-menu-by-role/${roleId}`);
};
// 给角色绑定菜单
export const bindMenuByRoleId = (data?: object) => {
return http.request<Result>("post", "/api/role/add-role-menu", { data });
};
/** 获取系统管理-部门管理列表 */
export const getDeptList = (data?: object) => {
return http.request<ResultTable>(
......
src/api/user.ts
浏览文件 @ 9ee0f0de
......@@ -104,12 +104,17 @@ export const updateUser = (data?: object) => {
});
};
/** 系统管理-用户管理-删除用户 */
export const deleteUser = (data?: object) => {
return http.request<UserInfoResult>("post", "/api/user/delete-user", {
/** 系统管理-用户管理-给用户绑定上角色 */
export const addUserRole = (data?: object) => {
return http.request<UserInfoResult>("post", "/api/user/add-user-role", {
data
});
};
/** 系统管理-用户管理-删除用户 */
export const deleteUser = (id: number | string) => {
return http.request<UserInfoResult>("post", `/api/user/delete-user/${id}`);
};
/** 系统管理-用户管理-重置密码 */
export const resetPassword = (data?: object) => {
return http.request<UserInfoResult>("post", "/api/user/reset-password", {
......
src/views/systems/role/utils/hook.tsx
浏览文件 @ 9ee0f0de
......@@ -8,8 +8,12 @@ import { transformI18n } from "@/plugins/i18n";
import { addDialog } from "@/components/ReDialog";
import type { FormItemProps } from "../utils/types";
import type { PaginationProps } from "@pureadmin/table";
import { getKeyList, deviceDetection } from "@pureadmin/utils";
import { getRoleMenu, getRoleMenuIds } from "@/api/system";
import { deviceDetection } from "@pureadmin/utils";
import {
getMenuListByRoleId,
getMenuList,
bindMenuByRoleId
} from "@/api/system";
import { getRoleList, addRole, updateRole, deleteRole } from "@/api/role";
import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
......@@ -36,7 +40,7 @@ export function useRole(treeRef: Ref) {
const { switchStyle } = usePublicHooks();
const treeProps = {
value: "id",
label: "title",
label: "name",
children: "children"
};
const pagination = reactive<PaginationProps>({
......@@ -291,8 +295,9 @@ export function useRole(treeRef: Ref) {
if (id) {
curRow.value = row;
isShow.value = true;
const { data } = await getRoleMenuIds({ id });
treeRef.value.setCheckedKeys(data);
const { data } = await getMenuListByRoleId(id);
treeRef.value.setCheckedKeys(data?.map(item => item.id) ?? []);
console.log("treeRef.value", treeRef.value, data);
} else {
curRow.value = null;
isShow.value = false;
......@@ -311,9 +316,16 @@ export function useRole(treeRef: Ref) {
function handleSave() {
const { id, name } = curRow.value;
// 根据用户 id 调用实际项目中菜单权限修改接口
console.log(id, treeRef.value.getCheckedKeys());
message(`角色名称为${name}的菜单权限修改成功`, {
type: "success"
// 添加给角色绑定菜单接口
const params = {
roleId: id,
menuIds: treeRef.value.getCheckedKeys()
};
console.log("params", params);
bindMenuByRoleId(params).then(res => {
if (res.code === "0") {
message(`角色名称为${name}的菜单权限修改成功`, { type: "success" });
}
});
}
......@@ -330,9 +342,9 @@ export function useRole(treeRef: Ref) {
onMounted(async () => {
onSearch();
const { data } = await getRoleMenu();
treeIds.value = getKeyList(data, "id");
treeData.value = handleTree(data);
const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
// treeIds.value = getKeyList(data, "id");
treeData.value = handleTree(data.records);
});
watch(isExpandAll, val => {
......
src/views/systems/user/form/index.vue
浏览文件 @ 9ee0f0de
......@@ -70,7 +70,7 @@ defineExpose({ getRef });
</el-form-item>
</re-col>
<re-col
<!-- <re-col
v-if="newFormInline.title === '新增'"
:value="12"
:xs="24"
......@@ -83,7 +83,7 @@ defineExpose({ getRef });
placeholder="请输入用户密码"
/>
</el-form-item>
</re-col>
</re-col> -->
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="手机号" prop="mobile">
<el-input
......@@ -144,7 +144,7 @@ defineExpose({ getRef });
</el-cascader>
</el-form-item>
</re-col>
<re-col
<!-- <re-col
v-if="newFormInline.title === '新增'"
:value="12"
:xs="24"
......@@ -161,7 +161,7 @@ defineExpose({ getRef });
:style="switchStyle"
/>
</el-form-item>
</re-col>
</re-col> -->
<re-col>
<el-form-item label="备注">
......
src/views/systems/user/index.vue
浏览文件 @ 9ee0f0de
......@@ -180,22 +180,23 @@ const {
>
修改
</el-button>
<el-popconfirm
<!-- <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 #reference> -->
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(Delete)"
@click="handleDelete(row)"
>
删除
</el-button>
<!-- </template>
</el-popconfirm> -->
<el-dropdown>
<el-button
class="ml-3! mt-[2px]!"
......
src/views/systems/user/utils/hook.tsx
浏览文件 @ 9ee0f0de
......@@ -18,13 +18,13 @@ import {
deviceDetection
} from "@pureadmin/utils";
import {
getRoleIds,
// getRoleIds,
getDeptList,
getUserList
// getAllRoleList
} from "@/api/system";
import { addUser, updateUser } from "@/api/user";
import { getRoleList } from "@/api/role";
import { addUser, updateUser, deleteUser, addUserRole } from "@/api/user";
import { getRoleListNoPage, getRoleListByUserId } from "@/api/role";
import {
ElForm,
ElInput,
......@@ -47,10 +47,10 @@ import {
export function useUser(tableRef: Ref, treeRef: Ref) {
const form = reactive({
// 左侧部门树的id
// deptId: "",
// username: "",
// mobile: "",
// status: "",
deptId: null,
username: null,
mobile: null,
status: null,
pageNum: 1,
pageSize: 10
});
......@@ -237,8 +237,33 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
}
function handleDelete(row) {
message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
onSearch();
// 添加删除功能
ElMessageBox.confirm(
`确认要删除<strong style='color:var(--el-color-primary)'>${
row.username
}</strong>用户吗?`,
"系统提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
}
)
.then(() => {
deleteUser(row.id).then(res => {
if (res.code === "0") {
onSearch();
message(`您删除了用户编号为${row.id}的这条数据`, {
type: "success"
});
} else {
message("删除失败", { type: "error" });
}
});
})
.catch(() => {});
}
function handleSizeChange(val: number) {
......@@ -301,26 +326,29 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
onSearch();
}
// function formatHigherDeptOptions(treeList) {
// // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
// if (!treeList || !treeList.length) return;
// const newTreeList = [];
// for (let i = 0; i < treeList.length; i++) {
// treeList[i].disabled = treeList[i].status === 0 ? true : false;
// formatHigherDeptOptions(treeList[i].children);
// newTreeList.push(treeList[i]);
// }
// return newTreeList;
// }
function formatHigherDeptOptions(treeList) {
// 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
if (!treeList || !treeList.length) return;
const newTreeList = [];
for (let i = 0; i < treeList.length; i++) {
treeList[i].disabled = treeList[i].status === 0 ? true : false;
formatHigherDeptOptions(treeList[i].children);
newTreeList.push(treeList[i]);
}
return newTreeList;
}
function openDialog(title = "新增", row?: FormItemProps) {
const depts = formatHigherDeptOptions(higherDeptOptions.value); // 处理上级部门数据,获取选择的部门层级数组
addDialog({
title: `${title}用户`,
props: {
formInline: {
title,
// higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
deptId: row?.deptId ?? 0,
higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
// deptId: row?.deptId ?? 0,
deptId: (row?.deptId || depts[depts.length - 1].id) ?? 0,
dependencies: row?.deptId ?? 0,
nickname: row?.nickname ?? "",
username: row?.username ?? "",
password: row?.password ?? "",
......@@ -362,25 +390,35 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
mobile,
name,
nickname,
username
username,
higherDeptOptions
} = curData;
const params = {
avatar,
console.log("higherDeptOptions", higherDeptOptions);
const params: {
avatar: string;
deptId: number;
email: string;
gender: string | number;
mobile: string | number;
name: string;
nickname: string;
username: string;
id?: number; // Add optional id property
} = {
avatar: avatar,
deptId,
email,
gender,
mobile,
name,
name: name || username,
nickname,
username,
id: title === "新增" ? null : curData.id
username
};
if (title === "新增") {
// 实际开发先调用新增接口，再进行下面操作
// 新增用户
addUser(params).then(res => {
if (res.code === 200) {
if (res.code === "0") {
message("新增用户成功", { type: "success" });
chores();
} else {
......@@ -409,7 +447,6 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
}
});
}
const cropRef = ref();
/** 上传头像 */
function handleUpload(row) {
......@@ -517,7 +554,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
/** 分配角色 */
async function handleRole(row) {
// TODO 选中的角色列表
const ids = (await getRoleIds({ id: row.id })).data ?? [];
const ids = (await getRoleListByUserId(row.id)).data?.map(i => i.id) ?? [];
addDialog({
title: `分配 ${row.username} 用户的角色`,
props: {
......@@ -538,6 +575,19 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
const curData = options.props.formInline as RoleFormItemProps;
console.log("curIds", curData.ids);
// 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可
// 调用用户绑定角色接口
addUserRole({
userId: row.id,
roleIds: curData.ids
}).then(res => {
if (res.code === "0") {
message("分配角色成功", { type: "success" });
done(); // 关闭弹框
onSearch(); // 刷新表格数据
} else {
message("分配角色失败", { type: "error" });
}
});
done(); // 关闭弹框
}
});
......@@ -554,9 +604,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
treeLoading.value = false;
// 角色列表
roleOptions.value = (
await getRoleList({ pageNum: 1, pageSize: 100 })
).data.records;
roleOptions.value = (await getRoleListNoPage()).data ?? [];
});
return {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论