feat:完善用户表单页面对接

2024-08-30 17:36:33 +08:00
parent 60ef93b510
commit 6e9dd669ba
11 changed files with 69 additions and 76 deletions
--- a/Yi.Pure.Vue3/src/api/system.ts
+++ b/Yi.Pure.Vue3/src/api/system.ts
@@ -1,27 +1,23 @@
 import { http } from "@/utils/http";

 type Result = {
-  success: boolean;
+  status: number;
  data?: Array<any>;
 };

 type ResultTable = {
-  success: boolean;
+  status: number;
  data?: {
    /** 列表数据 */
-    list: Array<any>;
+    items: Array<any>;
    /** 总条目数 */
-    total?: number;
-    /** 每页显示条目个数 */
-    pageSize?: number;
-    /** 当前页数 */
-    currentPage?: number;
+    totalCount?: number;
  };
 };

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

 /** 系统管理-用户管理-获取所有角色列表 */
@@ -46,7 +42,7 @@ export const getMenuList = (data?: object) => {

 /** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<Result>("post", "/dept", { data });
+  return http.request<ResultTable>("get", "/dept", { data });
 };

 /** 获取系统监控-在线用户列表 */
--- a/Yi.Pure.Vue3/src/api/user.ts
+++ b/Yi.Pure.Vue3/src/api/user.ts
@@ -21,14 +21,17 @@ export type LoginResult = {
 export type UserResult = {
  status: number;
  data: {
+    user: {
      /** 头像 */
-    avatar: string;
+      icon: string;
      /** 用户名 */
-    username: string;
+      userName: string;
      /** 昵称 */
      nick: string;
+    };
+
    /** 当前登录用户的角色 */
-    roles: Array<string>;
+    roleCodes: Array<string>;
    /** 按钮级别权限 */
    permissions: Array<string>;
    /** `token` */
--- a/Yi.Pure.Vue3/src/store/modules/user.ts
+++ b/Yi.Pure.Vue3/src/store/modules/user.ts
@@ -90,11 +90,10 @@ export const useUserStore = defineStore({
              };
              setToken(storeData);
              getUserInfo().then(resInfo => {
-                storeData.username = resInfo.data.username;
-                storeData.avatar = resInfo.data.avatar;
-                storeData.nickname = resInfo.data.nick;
-                storeData.roles = resInfo.data.roles;
-                storeData.accessToken = resInfo.data.accessToken;
+                storeData.username = resInfo.data.user.userName;
+                storeData.avatar = resInfo.data.user.icon;
+                storeData.nickname = resInfo.data.user.nick;
+                storeData.roles = resInfo.data.roleCodes;
                setToken(storeData);
                resolve(resInfo);
              });
--- a/Yi.Pure.Vue3/src/utils/auth.ts
+++ b/Yi.Pure.Vue3/src/utils/auth.ts
@@ -84,7 +84,7 @@ export function setToken(data: DataInfo<Date>) {
      permissions
    });
  }
-
+  console.log(data,"storeData");
  if (data.username && data.roles) {
    const { username, roles } = data;
    setUserKey({
--- a/Yi.Pure.Vue3/src/views/system/user/form/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/user/form/index.vue
@@ -10,13 +10,13 @@ const props = withDefaults(defineProps<FormProps>(), {
    title: "新增",
    higherDeptOptions: [],
    parentId: 0,
-    nickname: "",
-    username: "",
+    nick: "",
+    userName: "",
    password: "",
    phone: "",
    email: "",
    sex: "",
-    status: 1,
+    state: 1,
    remark: ""
  })
 });
@@ -51,18 +51,18 @@ defineExpose({ getRef });
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="用户昵称" prop="nickname">
+        <el-form-item label="用户昵称" prop="nick">
          <el-input
-            v-model="newFormInline.nickname"
+            v-model="newFormInline.nick"
            clearable
            placeholder="请输入用户昵称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="用户名称" prop="username">
+        <el-form-item label="用户名称" prop="userName">
          <el-input
-            v-model="newFormInline.username"
+            v-model="newFormInline.userName"
            clearable
            placeholder="请输入用户名称"
          />
@@ -151,10 +151,10 @@ defineExpose({ getRef });
      >
        <el-form-item label="用户状态">
          <el-switch
-            v-model="newFormInline.status"
+            v-model="newFormInline.state"
            inline-prompt
-            :active-value="1"
-            :inactive-value="0"
+            :active-value="true"
+            :inactive-value="false"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
--- a/Yi.Pure.Vue3/src/views/system/user/form/role.vue
+++ b/Yi.Pure.Vue3/src/views/system/user/form/role.vue
@@ -5,8 +5,8 @@ import { RoleFormProps } from "../utils/types";

 const props = withDefaults(defineProps<RoleFormProps>(), {
  formInline: () => ({
-    username: "",
-    nickname: "",
+    userName: "",
+    nick: "",
    roleOptions: [],
    ids: []
  })
@@ -18,14 +18,9 @@ const newFormInline = ref(props.formInline);
 <template>
  <el-form :model="newFormInline">
    <el-row :gutter="30">
-      <!-- <re-col>
-        <el-form-item label="用户名称" prop="username">
-          <el-input disabled v-model="newFormInline.username" />
-        </el-form-item>
-      </re-col> -->
      <re-col>
-        <el-form-item label="用户昵称" prop="nickname">
-          <el-input v-model="newFormInline.nickname" disabled />
+        <el-form-item label="用户昵称" prop="nick">
+          <el-input v-model="newFormInline.nick" disabled />
        </el-form-item>
      </re-col>
      <re-col>
--- a/Yi.Pure.Vue3/src/views/system/user/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/user/index.vue
@@ -68,9 +68,9 @@ const {
        :model="form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
      >
-        <el-form-item label="用户名称：" prop="username">
+        <el-form-item label="用户名称：" prop="userName">
          <el-input
-            v-model="form.username"
+            v-model="form.userName"
            placeholder="请输入用户名称"
            clearable
            class="!w-[180px]"
@@ -84,15 +84,15 @@ const {
            class="!w-[180px]"
          />
        </el-form-item>
-        <el-form-item label="状态：" prop="status">
+        <el-form-item label="状态：" prop="state">
          <el-select
-            v-model="form.status"
+            v-model="form.state"
            placeholder="请选择"
            clearable
            class="!w-[180px]"
          >
-            <el-option label="已开启" value="1" />
-            <el-option label="已关闭" value="0" />
+            <el-option label="已开启" :value="true" />
+            <el-option label="已关闭" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
--- a/Yi.Pure.Vue3/src/views/system/user/tree.vue
+++ b/Yi.Pure.Vue3/src/views/system/user/tree.vue
@@ -31,7 +31,7 @@ const highlightMap = ref({});
 const { proxy } = getCurrentInstance();
 const defaultProps = {
  children: "children",
-  label: "name"
+  label: "deptName"
 };
 const buttonClass = computed(() => {
  return [
--- a/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
@@ -45,9 +45,9 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
  const form = reactive({
    // 左侧部门树的id
    deptId: "",
-    username: "",
+    userName: "",
    phone: "",
-    status: ""
+    state: true
  });
  const formRef = ref();
  const ruleFormRef = ref();
@@ -77,7 +77,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    {
      label: "用户编号",
      prop: "id",
-      width: 90
+      width: 200
    },
    {
      label: "用户头像",
@@ -95,12 +95,12 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    },
    {
      label: "用户名称",
-      prop: "username",
+      prop: "userName",
      minWidth: 130
    },
    {
      label: "用户昵称",
-      prop: "nickname",
+      prop: "nick",
      minWidth: 130
    },
    {
@@ -119,7 +119,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    },
    {
      label: "部门",
-      prop: "dept.name",
+      prop: "deptName",
      minWidth: 90
    },
    {
@@ -130,15 +130,15 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    },
    {
      label: "状态",
-      prop: "status",
+      prop: "state",
      minWidth: 90,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
          loading={switchLoadMap.value[scope.index]?.loading}
-          v-model={scope.row.status}
-          active-value={1}
-          inactive-value={0}
+          v-model={scope.row.state}
+          active-value={true}
+          inactive-value={false}
          active-text="已启用"
          inactive-text="已停用"
          inline-prompt
@@ -273,10 +273,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
  async function onSearch() {
    loading.value = true;
    const { data } = await getUserList(toRaw(form));
-    dataList.value = data.list;
-    pagination.total = data.total;
-    pagination.pageSize = data.pageSize;
-    pagination.currentPage = data.currentPage;
+    dataList.value = data.items;
+    pagination.total = data.totalCount;
+    // pagination.pageSize = data.pageSize;
+    // pagination.currentPage = data.currentPage;

    setTimeout(() => {
      loading.value = false;
@@ -316,13 +316,13 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
          title,
          higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
          parentId: row?.dept.id ?? 0,
-          nickname: row?.nickname ?? "",
-          username: row?.username ?? "",
+          nickname: row?.nick ?? "",
+          username: row?.userName ?? "",
          password: row?.password ?? "",
          phone: row?.phone ?? "",
          email: row?.email ?? "",
          sex: row?.sex ?? "",
-          status: row?.status ?? 1,
+          status: row?.state ?? false,
          remark: row?.remark ?? ""
        }
      },
@@ -336,7 +336,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;
        function chores() {
-          message(`您${title}了用户名称为${curData.username}的这条数据`, {
+          message(`您${title}了用户名称为${curData.userName}的这条数据`, {
            type: "success"
          });
          done(); // 关闭弹框
@@ -498,8 +498,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

    // 归属部门
    const { data } = await getDeptList();
-    higherDeptOptions.value = handleTree(data);
-    treeData.value = handleTree(data);
+    higherDeptOptions.value = handleTree(data.items);
+    treeData.value = handleTree(data.items);
    treeLoading.value = false;

    // 角色列表
--- a/Yi.Pure.Vue3/src/views/system/user/utils/rule.ts
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/rule.ts
@@ -4,8 +4,8 @@ import { isPhone, isEmail } from "@pureadmin/utils";

 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  nickname: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
-  username: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
+  nick: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
+  userName: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
  password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
  phone: [
    {
--- a/Yi.Pure.Vue3/src/views/system/user/utils/types.ts
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/types.ts
@@ -4,13 +4,13 @@ interface FormItemProps {
  title: string;
  higherDeptOptions: Record<string, unknown>[];
  parentId: number;
-  nickname: string;
-  username: string;
+  nick: string;
+  userName: string;
  password: string;
  phone: string | number;
  email: string;
  sex: string | number;
-  status: number;
+  state: boolean;
  dept?: {
    id?: number;
    name?: string;
@@ -22,8 +22,8 @@ interface FormProps {
 }

 interface RoleFormItemProps {
-  username: string;
-  nickname: string;
+  userName: string;
+  nick: string;
  /** 角色列表 */
  roleOptions: any[];
  /** 选中的角色列表 */