feat: 完成用户页面查询

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
 {
     /// <summary>
-    /// <EFBFBD><EFBFBD><EFBFBD>ò<EFBFBD>ѯ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+    /// 配置查询参数
     /// </summary>
     public class ConfigGetListInputVo : PagedAllResultRequestDto
     {
         /// <summary>
-        /// <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+        /// 配置名称
         /// </summary>
         public string? ConfigName { get; set; }
 
         /// <summary>
-        /// <EFBFBD><EFBFBD><EFBFBD>ü<EFBFBD>
+        /// 配置键
         /// </summary>
         public string? ConfigKey { get; set; }
 

Yi.Pure.Vue3/src/api/result.ts

@@ -0,0 +1,19 @@
+export type ResultList = {
+  status: number;
+  data?: Array<any>;
+};
+
+export type Result = {
+  status: number;
+  data?: any;
+};
+
+export type ResultPage = {
+  status: number;
+  data?: {
+    /** 列表数据 */
+    items: Array<any>;
+    /** 总条目数 */
+    totalCount?: number;
+  };
+};

Yi.Pure.Vue3/src/api/system.ts

@@ -1,38 +1,58 @@
 import { http } from "@/utils/http";
-
+import type { Result, ResultList, ResultPage } from "./result.ts";
-type Result = {
-  status: number;
-  data?: Array<any>;
-};
-
-type ResultTable = {
-  status: number;
-  data?: {
-    /** 列表数据 */
-    items: Array<any>;
-    /** 总条目数 */
-    totalCount?: number;
-  };
-};
 
 /** 获取系统管理-用户管理列表 */
 export const getUserList = (data?: object) => {
-  return http.request<ResultTable>("get", "/user", { params: data });
+  return http.request<ResultPage>("get", "/user", { params: data });
 };
 
-/** 系统管理-用户管理-获取所有角色列表 */
+/** 获取一个用户详细消息 */
-export const getAllRoleList = () => {
+export const getUser = (userId: string) => {
-  return http.request<Result>("get", "/list-all-role");
+  return http.request<Result>("get", `/user/${userId}`, {});
 };
 
-/** 系统管理-用户管理-根据userId，获取对应角色id列表（userId：用户id） */
+/** 删除用户 */
-export const getRoleIds = (data?: object) => {
+export const delUser = (userIds: string[]) => {
-  return http.request<Result>("post", "/list-role-ids", { data });
+  return http.request<Result>("delete", `/user`, {
+    params: { id: userIds }
+  });
+};
+
+/** 用户密码重置 */
+export const resetUserPwd = (id: string, password: string) => {
+  return http.request<Result>("put", `/account/rest-password/${id}`, {
+    data: { password }
+  });
+};
+
+/** 改变用户状态 */
+export const changeUserStatus = (userId: string, state: boolean) => {
+  return http.request<Result>("put", `/user/${userId}/${state}`, {});
+};
+
+/** 修改用户 */
+export const updateUser = (id: string, data: any) => {
+  return http.request<Result>("put", `/user/${id}`, { data });
+};
+
+/** 获取角色选择框列表 */
+export const getRoleOption = () => {
+  return http.request<ResultPage>("get", `/role`, {});
+};
+
+/** 新增角色 */
+export const addUser = (data: any) => {
+  return http.request<Result>("post", `/user`, { data });
+};
+
+/** 新增角色 */
+export const addRole = (data: any) => {
+  return http.request<Result>("post", `/role`, { data });
 };
 
 /** 获取系统管理-角色管理列表 */
 export const getRoleList = (data?: object) => {
-  return http.request<ResultTable>("post", "/role", { data });
+  return http.request<ResultPage>("post", "/role", { data });
 };
 
 /** 获取系统管理-菜单管理列表 */
@@ -42,40 +62,40 @@ export const getMenuList = (data?: object) => {
 
 /** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<ResultTable>("get", "/dept", { data });
+  return http.request<ResultPage>("get", "/dept", { data });
 };
 
 /** 获取系统监控-在线用户列表 */
 export const getOnlineLogsList = (data?: object) => {
-  return http.request<ResultTable>("post", "/online-logs", { data });
+  return http.request<ResultPage>("post", "/online-logs", { data });
 };
 
 /** 获取系统监控-登录日志列表 */
 export const getLoginLogsList = (data?: object) => {
-  return http.request<ResultTable>("post", "/login-logs", { data });
+  return http.request<ResultPage>("post", "/login-logs", { data });
 };
 
 /** 获取系统监控-操作日志列表 */
 export const getOperationLogsList = (data?: object) => {
-  return http.request<ResultTable>("post", "/operation-logs", { data });
+  return http.request<ResultPage>("post", "/operation-logs", { data });
 };
 
 /** 获取系统监控-系统日志列表 */
 export const getSystemLogsList = (data?: object) => {
-  return http.request<ResultTable>("post", "/system-logs", { data });
+  return http.request<ResultPage>("post", "/system-logs", { data });
 };
 
 /** 获取系统监控-系统日志-根据 id 查日志详情 */
 export const getSystemLogsDetail = (data?: object) => {
-  return http.request<Result>("post", "/system-logs-detail", { data });
+  return http.request<ResultList>("post", "/system-logs-detail", { data });
 };
 
 /** 获取角色管理-权限-菜单权限 */
 export const getRoleMenu = (data?: object) => {
-  return http.request<Result>("post", "/role-menu", { data });
+  return http.request<ResultList>("post", "/role-menu", { data });
 };
 
 /** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
 export const getRoleMenuIds = (data?: object) => {
-  return http.request<Result>("post", "/role-menu-ids", { data });
+  return http.request<ResultList>("post", "/role-menu-ids", { data });
 };

Yi.Pure.Vue3/src/views/system/user/form/index.vue

@@ -9,15 +9,17 @@ const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
     title: "新增",
     higherDeptOptions: [],
-    parentId: 0,
+    deptId: "",
     nick: "",
     userName: "",
     password: "",
     phone: "",
     email: "",
     sex: "",
-    state: 1,
+    state: true,
-    remark: ""
+    remark: "",
+    roleIds: [],
+    roleOptions: []
   })
 });
 
@@ -123,7 +125,7 @@ defineExpose({ getRef });
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="归属部门">
           <el-cascader
-            v-model="newFormInline.parentId"
+            v-model="newFormInline.deptId"
             class="w-full"
             :options="newFormInline.higherDeptOptions"
             :props="{
@@ -161,7 +163,26 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-
+      <re-col>
+        <el-form-item label="角色列表" prop="ids">
+          <el-select
+            v-model="newFormInline.roleIds"
+            placeholder="请选择"
+            class="w-full"
+            clearable
+            multiple
+          >
+            <el-option
+              v-for="(item, index) in newFormInline.roleOptions"
+              :key="index"
+              :value="item.id"
+              :label="item.roleName"
+            >
+              {{ item.roleName }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </re-col>
       <re-col>
         <el-form-item label="备注">
           <el-input

Yi.Pure.Vue3/src/views/system/user/form/role.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import ReCol from "@/components/ReCol";
-import { RoleFormProps } from "../utils/types";
-
-const props = withDefaults(defineProps<RoleFormProps>(), {
-  formInline: () => ({
-    userName: "",
-    nick: "",
-    roleOptions: [],
-    ids: []
-  })
-});
-
-const newFormInline = ref(props.formInline);
-</script>
-
-<template>
-  <el-form :model="newFormInline">
-    <el-row :gutter="30">
-      <re-col>
-        <el-form-item label="用户昵称" prop="nick">
-          <el-input v-model="newFormInline.nick" disabled />
-        </el-form-item>
-      </re-col>
-      <re-col>
-        <el-form-item label="角色列表" prop="ids">
-          <el-select
-            v-model="newFormInline.ids"
-            placeholder="请选择"
-            class="w-full"
-            clearable
-            multiple
-          >
-            <el-option
-              v-for="(item, index) in newFormInline.roleOptions"
-              :key="index"
-              :value="item.id"
-              :label="item.name"
-            >
-              {{ item.name }}
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </re-col>
-    </el-row>
-  </el-form>
-</template>

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 {
         </el-form-item>
       </el-form>
 
-      <PureTableBar
+      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
-        title="用户管理（仅演示，操作后不生效）"
-        :columns="columns"
-        @refresh="onSearch"
-      >
         <template #buttons>
           <el-button
             type="primary"
@@ -231,18 +226,6 @@ const {
                         重置密码
                       </el-button>
                     </el-dropdown-item>
-                    <el-dropdown-item>
-                      <el-button
-                        :class="buttonClass"
-                        link
-                        type="primary"
-                        :size="size"
-                        :icon="useRenderIcon(Role)"
-                        @click="handleRole(row)"
-                      >
-                        分配角色
-                      </el-button>
-                    </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>

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(
       `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
+        row.state === 0 ? "停用" : "启用"
       }</strong><strong style='color:var(--el-color-primary)'>${
         row.userName
       }</strong>用户吗?`,
@@ -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(
+        await changeUserStatus(row.id, row.state);
-            {},
+
-            switchLoadMap.value[index],
+        switchLoadMap.value[index] = Object.assign(
-            {
+          {},
-              loading: false
+          switchLoadMap.value[index],
-            }
+          {
-          );
+            loading: false
-          message("已成功修改用户状态", {
+          }
-            type: "success"
+        );
-          });
+        message("已成功修改用户状态", {
-        }, 300);
+          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;
   }
-
+  async function openDialog(title = "新增", row?: FormItemProps) {
-  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,
+          deptId: data?.deptId ?? 0,
-          nick: row?.nick ?? "",
+          nick: data?.nick ?? "",
-          userName: row?.userName ?? "",
+          userName: data?.userName ?? "",
-          password: row?.password ?? "",
+          password: data?.password ?? "",
-          phone: row?.phone ?? "",
+          phone: data?.phone ?? "",
-          email: row?.email ?? "",
+          email: data?.email ?? "",
-          sex: row?.sex ?? "",
+          sex: data?.sex ?? "",
-          state: row?.state ?? false,
+          state: data?.state ?? true,
-          remark: row?.remark ?? ""
+          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 }) =>
+    ({ password }) =>
-      (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
+      (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) {
         <>
           <ElForm ref={ruleFormRef} model={pwdForm}>
             <ElFormItem
-              prop="newPwd"
+              prop="password"
               rules={[
                 {
                   required: true,
@@ -418,7 +438,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
                 clearable
                 show-password
                 type="password"
-                v-model={pwdForm.newPwd}
+                v-model={pwdForm.password}
                 placeholder="请输入新密码"
               />
             </ElFormItem>
@@ -449,15 +469,15 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
           </div>
         </>
       ),
-      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,

Yi.Pure.Vue3/src/views/system/user/utils/types.ts

@@ -3,7 +3,7 @@ interface FormItemProps {
   /** 用于判断是`新增`还是`修改` */
   title: string;
   higherDeptOptions: Record<string, unknown>[];
-  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;