feat: 完成用户页面查询

2024-08-31 22:01:55 +08:00
parent e39d381f08
commit 8be36f088b
8 changed files with 172 additions and 185 deletions
--- a/Yi.Pure.Vue3/src/api/result.ts
+++ b/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;
+  };
+};
--- 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<any>;
-};
-
-type ResultTable = {
-  status: number;
-  data?: {
-    /** 列表数据 */
-    items: Array<any>;
-    /** 总条目数 */
-    totalCount?: number;
-  };
-};
+import type { Result, ResultList, ResultPage } from "./result.ts";

 /** 获取系统管理-用户管理列表 */
 export const getUserList = (data?: object) => {
-  return http.request<ResultTable>("get", "/user", { params: data });
+  return http.request<ResultPage>("get", "/user", { params: data });
 };

-/** 系统管理-用户管理-获取所有角色列表 */
-export const getAllRoleList = () => {
-  return http.request<Result>("get", "/list-all-role");
+/** 获取一个用户详细消息 */
+export const getUser = (userId: string) => {
+  return http.request<Result>("get", `/user/${userId}`, {});
 };

-/** 系统管理-用户管理-根据userId，获取对应角色id列表（userId：用户id） */
-export const getRoleIds = (data?: object) => {
-  return http.request<Result>("post", "/list-role-ids", { data });
+/** 删除用户 */
+export const delUser = (userIds: string[]) => {
+  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 });
 };
--- 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<FormProps>(), {
  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 });
      <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
--- a/Yi.Pure.Vue3/src/views/system/user/form/role.vue
+++ b/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>
--- 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 {
        </el-form-item>
      </el-form>

-      <PureTableBar
-        title="用户管理（仅演示，操作后不生效）"
-        :columns="columns"
-        @refresh="onSearch"
-      >
+      <PureTableBar 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>
--- 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(
      `确认要<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(
-            {},
-            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) {
        <>
          <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,
--- 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<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;