From 8be36f088ba75dc76f4ecdd75dcecc4542e172f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com> Date: Sat, 31 Aug 2024 22:01:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9F=A5=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dtos/Config/ConfigGetListInputVo.cs | 6 +- Yi.Pure.Vue3/src/api/result.ts | 19 +++ Yi.Pure.Vue3/src/api/system.ts | 82 ++++++---- .../src/views/system/user/form/index.vue | 31 +++- .../src/views/system/user/form/role.vue | 48 ------ Yi.Pure.Vue3/src/views/system/user/index.vue | 19 +-- .../src/views/system/user/utils/hook.tsx | 146 ++++++++---------- .../src/views/system/user/utils/types.ts | 6 +- 8 files changed, 172 insertions(+), 185 deletions(-) create mode 100644 Yi.Pure.Vue3/src/api/result.ts delete mode 100644 Yi.Pure.Vue3/src/views/system/user/form/role.vue diff --git a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Config/ConfigGetListInputVo.cs b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Config/ConfigGetListInputVo.cs index e31d1ff1..0261aab0 100644 --- a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Config/ConfigGetListInputVo.cs +++ b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Config/ConfigGetListInputVo.cs @@ -4,17 +4,17 @@ using Yi.Framework.Ddd.Application.Contracts; namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Config { /// - /// òѯ + /// 配置查询参数 /// public class ConfigGetListInputVo : PagedAllResultRequestDto { /// - /// + /// 配置名称 /// public string? ConfigName { get; set; } /// - /// ü + /// 配置键 /// public string? ConfigKey { get; set; } diff --git a/Yi.Pure.Vue3/src/api/result.ts b/Yi.Pure.Vue3/src/api/result.ts new file mode 100644 index 00000000..8925761f --- /dev/null +++ b/Yi.Pure.Vue3/src/api/result.ts @@ -0,0 +1,19 @@ +export type ResultList = { + status: number; + data?: Array; +}; + +export type Result = { + status: number; + data?: any; +}; + +export type ResultPage = { + status: number; + data?: { + /** 列表数据 */ + items: Array; + /** 总条目数 */ + totalCount?: number; + }; +}; diff --git a/Yi.Pure.Vue3/src/api/system.ts b/Yi.Pure.Vue3/src/api/system.ts index 0d975c67..f7567afc 100644 --- a/Yi.Pure.Vue3/src/api/system.ts +++ b/Yi.Pure.Vue3/src/api/system.ts @@ -1,38 +1,58 @@ import { http } from "@/utils/http"; - -type Result = { - status: number; - data?: Array; -}; - -type ResultTable = { - status: number; - data?: { - /** 列表数据 */ - items: Array; - /** 总条目数 */ - totalCount?: number; - }; -}; +import type { Result, ResultList, ResultPage } from "./result.ts"; /** 获取系统管理-用户管理列表 */ export const getUserList = (data?: object) => { - return http.request("get", "/user", { params: data }); + return http.request("get", "/user", { params: data }); }; -/** 系统管理-用户管理-获取所有角色列表 */ -export const getAllRoleList = () => { - return http.request("get", "/list-all-role"); +/** 获取一个用户详细消息 */ +export const getUser = (userId: string) => { + return http.request("get", `/user/${userId}`, {}); }; -/** 系统管理-用户管理-根据userId，获取对应角色id列表（userId：用户id） */ -export const getRoleIds = (data?: object) => { - return http.request("post", "/list-role-ids", { data }); +/** 删除用户 */ +export const delUser = (userIds: string[]) => { + return http.request("delete", `/user`, { + params: { id: userIds } + }); +}; + +/** 用户密码重置 */ +export const resetUserPwd = (id: string, password: string) => { + return http.request("put", `/account/rest-password/${id}`, { + data: { password } + }); +}; + +/** 改变用户状态 */ +export const changeUserStatus = (userId: string, state: boolean) => { + return http.request("put", `/user/${userId}/${state}`, {}); +}; + +/** 修改用户 */ +export const updateUser = (id: string, data: any) => { + return http.request("put", `/user/${id}`, { data }); +}; + +/** 获取角色选择框列表 */ +export const getRoleOption = () => { + return http.request("get", `/role`, {}); +}; + +/** 新增角色 */ +export const addUser = (data: any) => { + return http.request("post", `/user`, { data }); +}; + +/** 新增角色 */ +export const addRole = (data: any) => { + return http.request("post", `/role`, { data }); }; /** 获取系统管理-角色管理列表 */ export const getRoleList = (data?: object) => { - return http.request("post", "/role", { data }); + return http.request("post", "/role", { data }); }; /** 获取系统管理-菜单管理列表 */ @@ -42,40 +62,40 @@ export const getMenuList = (data?: object) => { /** 获取系统管理-部门管理列表 */ export const getDeptList = (data?: object) => { - return http.request("get", "/dept", { data }); + return http.request("get", "/dept", { data }); }; /** 获取系统监控-在线用户列表 */ export const getOnlineLogsList = (data?: object) => { - return http.request("post", "/online-logs", { data }); + return http.request("post", "/online-logs", { data }); }; /** 获取系统监控-登录日志列表 */ export const getLoginLogsList = (data?: object) => { - return http.request("post", "/login-logs", { data }); + return http.request("post", "/login-logs", { data }); }; /** 获取系统监控-操作日志列表 */ export const getOperationLogsList = (data?: object) => { - return http.request("post", "/operation-logs", { data }); + return http.request("post", "/operation-logs", { data }); }; /** 获取系统监控-系统日志列表 */ export const getSystemLogsList = (data?: object) => { - return http.request("post", "/system-logs", { data }); + return http.request("post", "/system-logs", { data }); }; /** 获取系统监控-系统日志-根据 id 查日志详情 */ export const getSystemLogsDetail = (data?: object) => { - return http.request("post", "/system-logs-detail", { data }); + return http.request("post", "/system-logs-detail", { data }); }; /** 获取角色管理-权限-菜单权限 */ export const getRoleMenu = (data?: object) => { - return http.request("post", "/role-menu", { data }); + return http.request("post", "/role-menu", { data }); }; /** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */ export const getRoleMenuIds = (data?: object) => { - return http.request("post", "/role-menu-ids", { data }); + return http.request("post", "/role-menu-ids", { data }); }; diff --git a/Yi.Pure.Vue3/src/views/system/user/form/index.vue b/Yi.Pure.Vue3/src/views/system/user/form/index.vue index f22d1e67..aa9f9471 100644 --- a/Yi.Pure.Vue3/src/views/system/user/form/index.vue +++ b/Yi.Pure.Vue3/src/views/system/user/form/index.vue @@ -9,15 +9,17 @@ const props = withDefaults(defineProps(), { formInline: () => ({ title: "新增", higherDeptOptions: [], - parentId: 0, + deptId: "", nick: "", userName: "", password: "", phone: "", email: "", sex: "", - state: 1, - remark: "" + state: true, + remark: "", + roleIds: [], + roleOptions: [] }) }); @@ -123,7 +125,7 @@ defineExpose({ getRef }); + + + {{ item.roleName }} + + + + -import { ref } from "vue"; -import ReCol from "@/components/ReCol"; -import { RoleFormProps } from "../utils/types"; - -const props = withDefaults(defineProps(), { - formInline: () => ({ - userName: "", - nick: "", - roleOptions: [], - ids: [] - }) -}); - -const newFormInline = ref(props.formInline); - - - diff --git a/Yi.Pure.Vue3/src/views/system/user/index.vue b/Yi.Pure.Vue3/src/views/system/user/index.vue index 9599eddd..6f5bcb69 100644 --- a/Yi.Pure.Vue3/src/views/system/user/index.vue +++ b/Yi.Pure.Vue3/src/views/system/user/index.vue @@ -42,7 +42,6 @@ const { handleDelete, handleUpload, handleReset, - handleRole, handleSizeChange, onSelectionCancel, handleCurrentChange, @@ -110,11 +109,7 @@ const { - + diff --git a/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx index 24b772a0..ca94a1fb 100644 --- a/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx +++ b/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx @@ -1,6 +1,5 @@ import "./reset.css"; import dayjs from "dayjs"; -import roleForm from "../form/role.vue"; import editForm from "../form/index.vue"; import { zxcvbn } from "@zxcvbn-ts/core"; import { handleTree } from "@/utils/tree"; @@ -10,7 +9,7 @@ import { usePublicHooks } from "../../hooks"; import { addDialog } from "@/components/ReDialog"; import type { PaginationProps } from "@pureadmin/table"; import ReCropperPreview from "@/components/ReCropperPreview"; -import type { FormItemProps, RoleFormItemProps } from "../utils/types"; +import type { FormItemProps } from "../utils/types"; import { getKeyList, isAllEmpty, @@ -18,10 +17,15 @@ import { deviceDetection } from "@pureadmin/utils"; import { - getRoleIds, getDeptList, getUserList, - getAllRoleList + getUser, + getRoleOption, + addUser, + delUser, + resetUserPwd, + changeUserStatus, + updateUser } from "@/api/system"; import { ElForm, @@ -96,7 +100,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { width: 90 }, { - label: "用户名称", + label: "用户账号", prop: "userName", minWidth: 130 }, @@ -128,7 +132,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) { label: "手机号码", prop: "phone", minWidth: 90, - formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 }) + formatter: ({ phone }) => + phone == null ? "-" : hideTextAtIndex(phone, { start: 3, end: 6 }) }, { label: "状态", @@ -174,7 +179,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { }); // 重置的新密码 const pwdForm = reactive({ - newPwd: "" + password: "" }); const pwdProgress = [ { color: "#e74242", text: "非常弱" }, @@ -190,7 +195,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { function onChange({ row, index }) { ElMessageBox.confirm( `确认要${ - row.status === 0 ? "停用" : "启用" + row.state === 0 ? "停用" : "启用" }${ row.userName }用户吗?`, @@ -203,7 +208,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { draggable: true } ) - .then(() => { + .then(async () => { switchLoadMap.value[index] = Object.assign( {}, switchLoadMap.value[index], @@ -211,21 +216,22 @@ export function useUser(tableRef: Ref, treeRef: Ref) { loading: true } ); - setTimeout(() => { - switchLoadMap.value[index] = Object.assign( - {}, - switchLoadMap.value[index], - { - loading: false - } - ); - message("已成功修改用户状态", { - type: "success" - }); - }, 300); + + await changeUserStatus(row.id, row.state); + + switchLoadMap.value[index] = Object.assign( + {}, + switchLoadMap.value[index], + { + loading: false + } + ); + message("已成功修改用户状态", { + type: "success" + }); }) .catch(() => { - row.status === 0 ? (row.status = 1) : (row.status = 0); + row.state === 0 ? (row.state = 1) : (row.state = 0); }); } @@ -233,7 +239,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) { console.log(row); } - function handleDelete(row) { + async function handleDelete(row) { + await delUser([row.id]); message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" }); onSearch(); } @@ -263,11 +270,13 @@ export function useUser(tableRef: Ref, treeRef: Ref) { } /** 批量删除 */ - function onbatchDel() { + async function onbatchDel() { // 返回当前选中的行 const curSelected = tableRef.value.getTableRef().getSelectionRows(); + const delIds = getKeyList(curSelected, "id"); + await delUser(delIds); // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除 - message(`已删除用户编号为 ${getKeyList(curSelected, "id")} 的数据`, { + message(`已删除用户编号为 ${delIds} 的数据`, { type: "success" }); tableRef.value.getTableRef().clearSelection(); @@ -305,29 +314,36 @@ export function useUser(tableRef: Ref, treeRef: Ref) { if (!treeList || !treeList.length) return; const newTreeList = []; for (let i = 0; i < treeList.length; i++) { - treeList[i].disabled = treeList[i].status === 0 ? true : false; + treeList[i].disabled = treeList[i].state === 0 ? true : false; formatHigherDeptOptions(treeList[i].children); newTreeList.push(treeList[i]); } return newTreeList; } - - function openDialog(title = "新增", row?: FormItemProps) { + async function openDialog(title = "新增", row?: FormItemProps) { + let data: any = null; + //打开弹窗之前，如果是修改，还需进行查询详情 + if (title == "修改") { + const response = await getUser(row?.id); + data = response.data; + } addDialog({ title: `${title}用户`, props: { formInline: { title, higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value), - parentId: row?.deptId ?? 0, - nick: row?.nick ?? "", - userName: row?.userName ?? "", - password: row?.password ?? "", - phone: row?.phone ?? "", - email: row?.email ?? "", - sex: row?.sex ?? "", - state: row?.state ?? false, - remark: row?.remark ?? "" + deptId: data?.deptId ?? 0, + nick: data?.nick ?? "", + userName: data?.userName ?? "", + password: data?.password ?? "", + phone: data?.phone ?? "", + email: data?.email ?? "", + sex: data?.sex ?? "", + state: data?.state ?? true, + remark: data?.remark ?? "", + roleIds: data?.roles?.map(r => r.id), + roleOptions: roleOptions.value } }, width: "46%", @@ -339,6 +355,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { beforeSure: (done, { options }) => { const FormRef = formRef.value.getRef(); const curData = options.props.formInline as FormItemProps; + function chores() { message(`您${title}了用户名称为${curData.userName}的这条数据`, { type: "success" @@ -346,15 +363,17 @@ export function useUser(tableRef: Ref, treeRef: Ref) { done(); // 关闭弹框 onSearch(); // 刷新表格数据 } - FormRef.validate(valid => { + + FormRef.validate(async valid => { if (valid) { - console.log("curData", curData); // 表单规则校验通过 if (title === "新增") { // 实际开发先调用新增接口，再进行下面操作 + await addUser(curData); chores(); } else { // 实际开发先调用修改接口，再进行下面操作 + await updateUser(row?.id, curData); chores(); } } @@ -364,6 +383,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { } const cropRef = ref(); + /** 上传头像 */ function handleUpload(row) { addDialog({ @@ -389,14 +409,14 @@ export function useUser(tableRef: Ref, treeRef: Ref) { watch( pwdForm, - ({ newPwd }) => - (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score) + ({ password }) => + (curScore.value = isAllEmpty(password) ? -1 : zxcvbn(password).score) ); /** 重置密码 */ function handleReset(row) { addDialog({ - title: `重置 ${row.username} 用户的密码`, + title: `重置 ${row.userName} 用户的密码`, width: "30%", draggable: true, closeOnClickModal: false, @@ -405,7 +425,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { <> @@ -449,15 +469,15 @@ export function useUser(tableRef: Ref, treeRef: Ref) { ), - closeCallBack: () => (pwdForm.newPwd = ""), + closeCallBack: () => (pwdForm.password = ""), beforeSure: done => { - ruleFormRef.value.validate(valid => { + ruleFormRef.value.validate(async valid => { if (valid) { + await resetUserPwd(row.id, pwdForm.password); // 表单规则校验通过 message(`已成功重置 ${row.username} 用户的密码`, { type: "success" }); - console.log(pwdForm.newPwd); // 根据实际业务使用pwdForm.newPwd和row里的某些字段去调用重置用户密码接口即可 done(); // 关闭弹框 onSearch(); // 刷新表格数据 @@ -467,35 +487,6 @@ export function useUser(tableRef: Ref, treeRef: Ref) { }); } - /** 分配角色 */ - async function handleRole(row) { - // 选中的角色列表 - const ids = (await getRoleIds({ userId: row.id })).data ?? []; - addDialog({ - title: `分配 ${row.username} 用户的角色`, - props: { - formInline: { - username: row?.username ?? "", - nickname: row?.nickname ?? "", - roleOptions: roleOptions.value ?? [], - ids - } - }, - width: "400px", - draggable: true, - fullscreen: deviceDetection(), - fullscreenIcon: true, - closeOnClickModal: false, - contentRenderer: () => h(roleForm), - beforeSure: (done, { options }) => { - const curData = options.props.formInline as RoleFormItemProps; - console.log("curIds", curData.ids); - // 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可 - done(); // 关闭弹框 - } - }); - } - onMounted(async () => { treeLoading.value = true; onSearch(); @@ -507,7 +498,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) { treeLoading.value = false; // 角色列表 - roleOptions.value = (await getAllRoleList()).data; + roleOptions.value = (await getRoleOption()).data.items; }); return { @@ -530,7 +521,6 @@ export function useUser(tableRef: Ref, treeRef: Ref) { handleDelete, handleUpload, handleReset, - handleRole, handleSizeChange, onSelectionCancel, handleCurrentChange, diff --git a/Yi.Pure.Vue3/src/views/system/user/utils/types.ts b/Yi.Pure.Vue3/src/views/system/user/utils/types.ts index f9ec8f54..2d72821b 100644 --- a/Yi.Pure.Vue3/src/views/system/user/utils/types.ts +++ b/Yi.Pure.Vue3/src/views/system/user/utils/types.ts @@ -3,7 +3,7 @@ interface FormItemProps { /** 用于判断是`新增`还是`修改` */ title: string; higherDeptOptions: Record[]; - parentId: string; + deptId?: string; nick: string; userName: string; password: string; @@ -12,8 +12,10 @@ interface FormItemProps { sex: string | number; state: boolean; deptName?: string; - deptId?: string; remark: string; + + roleIds: string[]; + roleOptions: any[]; } interface FormProps { formInline: FormItemProps;