feat(projects): 实现用户管理页面

mock/api/management.ts

@@ -1,48 +1,31 @@
+import { mock } from 'mockjs';
 import type { MockMethod } from 'vite-plugin-mock';
 
 const apis: MockMethod[] = [
   {
     url: '/mock/getUserManagementList',
     method: 'post',
     response: (): Service.MockServiceResult<ApiUserManagement.UserTable[]> => {
-      const data: ApiUserManagement.UserTable[] = [
-        {
-          id: '1',
-          name: '张三',
-          age: 24,
-          gender: null,
-          createTime: '2022-04-13',
-          updateTime: '2022-07-29'
-        },
-        {
-          id: '2',
-          name: '李四',
-          age: 22,
-          gender: '1',
-          createTime: '2022-05-13',
-          updateTime: '2022-06-29'
-        },
-        {
-          id: '3',
-          name: '王五',
-          gender: '1',
-          createTime: '2022-04-18',
-          updateTime: '2022-07-30'
-        },
-        {
-          id: '4',
-          name: '王小梅',
-          age: 20,
-          gender: '0',
-          createTime: '2022-05-18',
-          updateTime: '2022-07-30'
-        }
-      ];
+      const data = mock({
+        'list|1000': [
+          {
+            id: '@id',
+            name: '@cname',
+            'age|20-36': 36,
+            'gender|1': ['0', '1', null],
+            phone:
+              /^[1](([3][0-9])|([4][01456789])|([5][012356789])|([6][2567])|([7][0-8])|([8][0-9])|([9][012356789]))[0-9]{8}$/,
+            email: '@email("qq.com")',
+            'role|1': ['super', 'admin', 'user'],
+            'disabled|1': true
+          }
+        ]
+      });
 
       return {
         code: 200,
         message: 'ok',
-        data
+        data: data.list
       };
     }
   }

src/config/regexp.ts

@@ -1,6 +1,6 @@
 /** 手机号码正则 */
 export const REGEXP_PHONE =
-  /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
+  /^[1](([3][0-9])|([4][01456789])|([5][012356789])|([6][2567])|([7][0-8])|([8][0-9])|([9][012356789]))[0-9]{8}$/;
 
 /** 邮箱正则 */
 export const REGEXP_EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

src/layouts/common/GlobalTab/components/ReloadButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <hover-container class="w-64px h-full" tooltip-content="重新加载" placement="bottom-end" @click="handleRefresh">
-    <icon-mdi-refresh class="text-18px" :class="{ 'animate-spin': loading }" />
+    <icon-mdi-refresh class="text-22px" :class="{ 'animate-spin': loading }" />
   </hover-container>
 </template>
 

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -2,7 +2,7 @@
   <n-button
     type="primary"
     :class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
-    class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
+    class="fixed top-360px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
     @click="app.toggleSettingDrawerVisible"
   >
     <icon-ant-design-close-outlined v-if="app.settingDrawerVisible" class="text-24px" />

src/service/api/management.adapter.ts

@@ -2,8 +2,7 @@ import { EnumGender } from '@/enum';
 import { isUndefined } from '@/utils';
 
 export function adapterOfFetchUserManagementList(
-  requestData: ApiUserManagement.UserTable[],
-  adminId: string
+  requestData: ApiUserManagement.UserTable[]
 ): UserManagement.UserTable[] {
   const genderMap: Record<
     NonNullable<ApiUserManagement.UserTable['gender']>,
@@ -17,21 +16,25 @@ export function adapterOfFetchUserManagementList(
   // 2. 接口定义的字段有可能为null, 例如 预期是数组却返回了null，导致调用数组方法报错
   // 3. 字段可能丢失
 
-  return requestData.map(item => {
-    const { id, name, age, gender } = item;
-
-    const userName = name + (adminId === id ? '(管理员)' : '');
+  return requestData.map((item, index) => {
+    const { id, name: userName, age, gender, phone: userPhone, email: userEmail, role: userRole, disabled } = item;
 
     const userAge = isUndefined(age) ? '无' : String(age);
 
     const userGender = gender !== null ? genderMap[gender] : 'null';
 
     const result: UserManagement.UserTable = {
+      index: index + 1,
+      key: id,
       id,
       userName,
       userAge,
       userGender,
-      userGenderLabel: EnumGender[userGender]
+      userGenderLabel: EnumGender[userGender],
+      userPhone,
+      userEmail,
+      userRole,
+      disabled
     };
 
     return result;

src/service/api/management.ts

@@ -8,15 +8,5 @@ import { adapterOfFetchUserManagementList } from './management.adapter';
 export async function fetchUserManagementList() {
   const data = await mockRequest.post<ApiUserManagement.UserTable[]>('/getUserManagementList');
 
-  const id = '2';
-
-  return adapter(adapterOfFetchUserManagementList, data, { error: null, data: id });
+  return adapter(adapterOfFetchUserManagementList, data);
 }
-
-// export async function fetchFilterUserManagementList(
-//   filterKey: keyof UserManagement.UserTable,
-//   mode: 'fontEnd' | 'backEnd',
-//   source: UserManagement.UserTable[]
-// ) {
-
-// }

src/typings/api.d.ts

@@ -36,16 +36,20 @@ declare namespace ApiUserManagement {
     /** 用户名 */
     name: string;
     /** 用户年龄 */
-    age?: number;
+    age: number;
     /**
      * 用户性别
      * - 男 1
      * - 女 0
      */
     gender: '0' | '1' | null;
-    /** 创建时间 */
-    createTime: string;
-    /** 更新时间 */
-    updateTime: string;
+    /** 用户手机号码 */
+    phone: string;
+    /** 用户邮箱 */
+    email: string;
+    /** 用户角色 */
+    role: Auth.RoleType;
+    /** 是否禁用用户 */
+    disabled: boolean;
   }
 }

src/typings/business.d.ts

@@ -67,6 +67,10 @@ declare namespace Message {
 declare namespace UserManagement {
   /** 用户表格 */
   interface UserTable {
+    /** 序号 */
+    index: number;
+    /** 数据的key(id) */
+    key: string;
     /** 用户id */
     id: string;
     /** 用户名 */
@@ -80,5 +84,13 @@ declare namespace UserManagement {
      */
     userGender: keyof typeof import('@/enum').EnumGender;
     userGenderLabel: import('@/enum').EnumGender;
+    /** 用户手机号 */
+    userPhone: string;
+    /** 用户邮箱 */
+    userEmail: string;
+    /** 用户角色 */
+    userRole: Auth.RoleType;
+    /** 是否禁用用户 */
+    disabled: boolean;
   }
 }

src/views/management/user/components/TableActionModal.vue

@@ -0,0 +1,124 @@
+<template>
+  <n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
+    <n-form label-placement="left" :label-width="80" :model="formModel">
+      <n-grid :cols="24" :x-gap="18">
+        <n-form-item-grid-item :span="12" label="用户名" path="userName">
+          <n-input v-model:value="formModel.userName" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="年龄" path="userAge">
+          <n-input v-model:value="formModel.userAge" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="性别" path="userGender">
+          <n-input v-model:value="formModel.userGender" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="手机号" path="userPhone">
+          <n-input v-model:value="formModel.userPhone" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="邮箱" path="userEmail">
+          <n-input v-model:value="formModel.userEmail" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="角色" path="userRole">
+          <n-input v-model:value="formModel.userRole" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="状态" path="disabled">
+          <n-switch v-model:value="formModel.disabled" />
+        </n-form-item-grid-item>
+      </n-grid>
+    </n-form>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch } from 'vue';
+
+defineOptions({ name: 'TableActionModal' });
+
+type ModalType = 'add' | 'edit';
+
+interface Props {
+  /** 弹窗可见性 */
+  visible: boolean;
+  /** 弹窗类型 */
+  type?: ModalType;
+  /** 编辑的表格行数据 */
+  editData?: UserManagement.UserTable | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'add',
+  editData: null
+});
+
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const modalVisible = computed({
+  get() {
+    return props.visible;
+  },
+  set(visible) {
+    emit('update:visible', visible);
+  }
+});
+
+const title = computed(() => {
+  const titles: Record<ModalType, string> = {
+    add: '添加用户',
+    edit: '编辑用户'
+  };
+  return titles[props.type];
+});
+
+type FormModel = Pick<
+  UserManagement.UserTable,
+  'userName' | 'userAge' | 'userGender' | 'userPhone' | 'userEmail' | 'userRole' | 'disabled'
+>;
+
+const formModel = reactive<FormModel>(createDefaultFormModel());
+
+function createDefaultFormModel(): FormModel {
+  return {
+    userName: '',
+    userAge: '',
+    userGender: 'null',
+    userPhone: '',
+    userEmail: '',
+    userRole: 'user',
+    disabled: true
+  };
+}
+
+function handleUpdateFormModel(model: Partial<FormModel>) {
+  Object.assign(formModel, model);
+}
+
+function handleUpdateFormModelByModalType() {
+  const handlers: Record<ModalType, () => void> = {
+    add: () => {
+      const defaultFormModel = createDefaultFormModel();
+      handleUpdateFormModel(defaultFormModel);
+    },
+    edit: () => {
+      if (props.editData) {
+        handleUpdateFormModel(props.editData);
+      }
+    }
+  };
+
+  handlers[props.type]();
+}
+
+watch(
+  () => props.visible,
+  newValue => {
+    if (newValue) {
+      handleUpdateFormModelByModalType();
+    }
+  }
+);
+</script>
+
+<style scoped></style>

src/views/management/user/components/index.ts

@@ -0,0 +1,3 @@
+import TableActionModal from './TableActionModal.vue';
+
+export { TableActionModal };