protable组件抽取，并绘制demo界面

2024-10-15 15:37:50 +08:00
parent 9957857be0
commit 7c8d5644f7
18 changed files with 628 additions and 156 deletions
--- a/frontend/src/api/config/serviceName.ts
+++ b/frontend/src/api/config/serviceName.ts
@@ -1,5 +1,9 @@

-// 系统&用户模块前缀
+// 系统模块前缀
 export const ADMIN = "/admin";

+// 用户模块前缀
+export const USER = "/user-boot";
+
+
 // todo... 其他业务模块前缀
--- a/frontend/src/api/interface/index.ts
+++ b/frontend/src/api/interface/index.ts
@@ -1,15 +1,34 @@
-// 请求响应参数（不包含data）
+/**
+ * 该接口声明文件用来声明通用的接口定义，比如 请求参数Base、响应Base、分页等
+ */
+
+/**
+ * 请求响应参数（不包含data）
+ */
 export interface Result {
  code: string;
  message: string;
 }

-// 请求响应参数（包含data）
+/**
+ * 请求响应参数（包含data）
+ */
 export interface ResultData<T = any> extends Result {
  data: T;
 }

-// 分页响应参数
+
+/**
+ * 分页请求参数
+ */
+export interface ReqPage {
+  pageNum: number;
+  pageSize: number;
+}
+
+/**
+ * 分页响应参数
+ */
 export interface ResPage<T> {
  list: T[];
  pageNum: number;
@@ -17,74 +36,18 @@ export interface ResPage<T> {
  total: number;
 }

-// 分页请求参数
-export interface ReqPage {
-  pageNum: number;
-  pageSize: number;
+/**
+ *  Dict 字典属性
+ *  id: 唯一标识
+ *  label: 名称
+ *  code: 类型下唯一标识
+ */
+export interface Dict {
+  id: string;
+  label: string;
+  code: string;
+  children?: Dict[];
 }

-// 文件上传模块
-export namespace Upload {
-  export interface ResFileUrl {
-    fileUrl: string;
-  }
-}

-// 登录模块
-export namespace Login {
-  export interface ReqLoginForm {
-    username: string;
-    password: string;
-  }
-  export interface ResLogin {
-    accessToken: string;
-  }
-  export interface ResAuthButtons {
-    [key: string]: string[];
-  }
-}

-// 用户管理模块
-export namespace User {
-  export interface ReqUserParams extends ReqPage {
-    username: string;
-    gender: number;
-    idCard: string;
-    email: string;
-    address: string;
-    createTime: string[];
-    status: number;
-  }
-  export interface ResUserList {
-    id: string;
-    username: string;
-    gender: number;
-    user: { detail: { age: number } };
-    idCard: string;
-    email: string;
-    address: string;
-    createTime: string;
-    status: number;
-    avatar: string;
-    photo: any[];
-    children?: ResUserList[];
-  }
-  export interface ResStatus {
-    userLabel: string;
-    userValue: number;
-  }
-  export interface ResGender {
-    genderLabel: string;
-    genderValue: number;
-  }
-  export interface ResDepartment {
-    id: string;
-    name: string;
-    children?: ResDepartment[];
-  }
-  export interface ResRole {
-    id: string;
-    name: string;
-    children?: ResDepartment[];
-  }
-}
--- a/frontend/src/api/modules/login.ts
+++ b/frontend/src/api/modules/login.ts
@@ -1,26 +0,0 @@
-import { Login } from "@/api/interface/index";
-import { ADMIN } from "@/api/config/serviceName";
-import http from "@/api";
-
-/**
- * @name 登录模块
- */
-// 用户登录
-export const loginApi = (params: Login.ReqLoginForm) => {
-  return http.post<Login.ResLogin>(ADMIN + `/login`, params, { loading: false }); // 正常 post json 请求  ==>  application/json
-};
-
-// 获取菜单列表
-export const getAuthMenuListApi = () => {
-  return http.get<Menu.MenuOptions[]>(ADMIN + `/menu/list`, {}, { loading: false });
-};
-
-// 获取按钮权限
-export const getAuthButtonListApi = () => {
-  return http.get<Login.ResAuthButtons>(ADMIN + `/auth/buttons`, {}, { loading: false });
-};
-
-// 用户退出登录
-export const logoutApi = () => {
-  return http.post(ADMIN + `/logout`);
-};
--- a/frontend/src/api/system/dictData.ts
+++ b/frontend/src/api/system/dictData.ts
@@ -0,0 +1,48 @@
+/**
+ * 模拟字典静态数据，有后端接口后，需要删除 todo...
+ */
+import { Dict } from '@/api/interface'
+
+const dictData: Dict[] = [
+  {
+    id: "1",
+    code: 'sex',
+    label: '性别',
+    children: [
+      {
+        id: "1",
+        label: '男',
+        code: 1,
+      },
+      {
+        id: "2",
+        label: '女',
+        code: 2,
+      },
+      {
+        id: "3",
+        label: '未知',
+        code: 3,
+      },
+    ],
+  },
+  {
+    id: "2",
+    code: 'status',
+    label: '状态',
+    children: [
+      {
+        id: "123456789",
+        label: '启用',
+        code: 1,
+      },
+      {
+        id: "987654321",
+        label: '禁用',
+        code: 0,
+      },
+    ],
+  },
+]
+
+export default dictData
--- a/frontend/src/api/user/interface/index.ts
+++ b/frontend/src/api/user/interface/index.ts
@@ -0,0 +1,68 @@
+// 登录模块
+import type { ReqPage } from '@/api/interface'
+
+export namespace Login {
+  export interface ReqLoginForm {
+    username: string;
+    password: string;
+  }
+  export interface ResLogin {
+    accessToken: string;
+  }
+  export interface ResAuthButtons {
+    [key: string]: string[];
+  }
+}
+
+
+// 用户管理模块
+export namespace User {
+
+  // 用户列表
+  export interface ResUserList {
+    id: string;
+    username: string;
+    gender: number;
+    age:number;
+    idCard: string;
+    email: string;
+    address: string;
+    createTime: string;
+    status: number;
+    avatar: string;
+    photo: any[];
+    children?: ResUserList[];
+  }
+
+  export interface ReqUserParams extends ReqPage {
+    username: string;
+    gender: number;
+    idCard: string;
+    email: string;
+    address: string;
+    createTime: string[];
+    status: number;
+  }
+
+  export interface ResStatus {
+    userLabel: string;
+    userValue: number;
+  }
+
+  export interface ResGender {
+    genderLabel: string;
+    genderValue: number;
+  }
+
+  export interface ResDepartment {
+    id: string;
+    name: string;
+    children?: ResDepartment[];
+  }
+
+  export interface ResRole {
+    id: string;
+    name: string;
+    children?: ResDepartment[];
+  }
+}
--- a/frontend/src/api/user/login.ts
+++ b/frontend/src/api/user/login.ts
@@ -0,0 +1,26 @@
+import { Login } from './interface'
+import { ADMIN as rePrefix } from '@/api/config/serviceName'
+import http from '@/api'
+
+/**
+ * @name 登录模块
+ */
+// 用户登录
+export const loginApi = (params: Login.ReqLoginForm) => {
+  return http.post<Login.ResLogin>(`${rePrefix}/login`, params, { loading: false })
+}
+
+// 获取菜单列表
+export const getAuthMenuListApi = () => {
+  return http.get<Menu.MenuOptions[]>(`${rePrefix}/menu/list`, {}, { loading: false })
+}
+
+// 获取按钮权限
+export const getAuthButtonListApi = () => {
+  return http.get<Login.ResAuthButtons>(`${rePrefix}/auth/buttons`, {}, { loading: false })
+}
+
+// 用户退出登录
+export const logoutApi = () => {
+  return http.post(`${rePrefix}/logout`)
+}
--- a/frontend/src/api/modules/user.ts
+++ b/frontend/src/api/modules/user.ts
@@ -1,71 +1,72 @@
-import { ResPage, User } from "@/api/interface/index";
-import { ADMIN } from "@/api/config/serviceName";
-import http from "@/api";
+import { ResPage } from '@/api/interface'
+import { User } from './interface'
+import { ADMIN as rePrefix } from '@/api/config/serviceName'
+import http from '@/api'

 /**
 * @name 用户管理模块
 */
 // 获取用户列表
 export const getUserList = (params: User.ReqUserParams) => {
-  return http.post<ResPage<User.ResUserList>>(ADMIN + `/user/list`, params);
-};
+  return http.post<ResPage<User.ResUserList>>(`${rePrefix}/user/list`, params)
+}

 // 获取树形用户列表
 export const getUserTreeList = (params: User.ReqUserParams) => {
-  return http.post<ResPage<User.ResUserList>>(ADMIN + `/user/tree/list`, params);
-};
+  return http.post<ResPage<User.ResUserList>>(`${rePrefix}/user/tree/list`, params)
+}

 // 新增用户
 export const addUser = (params: { id: string }) => {
-  return http.post(ADMIN + `/user/add`, params);
-};
+  return http.post(`${rePrefix}/user/add`, params)
+}

 // 批量添加用户
 export const BatchAddUser = (params: FormData) => {
-  return http.post(ADMIN + `/user/import`, params);
-};
+  return http.post(`${rePrefix}/user/import`, params)
+}

 // 编辑用户
 export const editUser = (params: { id: string }) => {
-  return http.post(ADMIN + `/user/edit`, params);
-};
+  return http.post(`${rePrefix}/user/edit`, params)
+}

 // 删除用户
 export const deleteUser = (params: { id: string[] }) => {
-  return http.post(ADMIN + `/user/delete`, params);
-};
+  return http.post(`${rePrefix}/user/delete`, params)
+}

 // 切换用户状态
 export const changeUserStatus = (params: { id: string; status: number }) => {
-  return http.post(ADMIN + `/user/change`, params);
-};
+  return http.post(`${rePrefix}/user/change`, params)
+}

 // 重置用户密码
 export const resetUserPassWord = (params: { id: string }) => {
-  return http.post(ADMIN + `/user/rest_password`, params);
-};
+  return http.post(`${rePrefix}/user/rest_password`, params)
+}

 // 导出用户数据
 export const exportUserInfo = (params: User.ReqUserParams) => {
-  return http.download(ADMIN + `/user/export`, params);
-};
+  return http.download(`${rePrefix}/user/export`, params)
+}

 // 获取用户状态字典
 export const getUserStatus = () => {
-  return http.get<User.ResStatus[]>(ADMIN + `/user/status`);
-};
+  return http.get<User.ResStatus[]>(`${rePrefix}/user/status`)
+}

 // 获取用户性别字典
 export const getUserGender = () => {
-  return http.get<User.ResGender[]>(ADMIN + `/user/gender`);
-};
+  return http.get<User.ResGender[]>(`${rePrefix}/user/gender`)
+}

 // 获取用户部门列表
 export const getUserDepartment = () => {
-  return http.get<User.ResDepartment[]>(ADMIN + `/user/department`);
-};
+  return http.get<User.ResDepartment[]>(`${rePrefix}/user/department`)
+}

 // 获取用户角色字典
 export const getUserRole = () => {
-  return http.get<User.ResRole[]>(ADMIN + `/user/role`);
-};
+  return http.get<User.ResRole[]>(`${rePrefix}/user/role`)
+}
--- a/frontend/src/api/user/userData.ts
+++ b/frontend/src/api/user/userData.ts
@@ -0,0 +1,148 @@
+const data = [
+  {
+    'id': '623689732233728549',
+    'username': '薛霞',
+    'gender': 2,
+    'age': 14,
+    'idCard': '623689732233728549',
+    'email': 'k.ckfkzrnhd@voyvhqubs.sl',
+    'address': '浙江省 温州市',
+    'createTime': '1985-04-15 15:42:29',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '621003764863621316',
+    'username': '冯敏',
+    'gender': 1,
+    'age': 16,
+    'idCard': '621003764863621316',
+    'email': 'h.obqq@cpyirry.bt',
+    'address': '内蒙古自治区 兴安盟',
+    'createTime': '2003-03-24 22:30:36',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+  {
+    'id': '652286556713195552',
+    'username': '潘霞',
+    'gender': 1,
+    'age': 28,
+    'idCard': '652286556713195552',
+    'email': 'b.ttcn@xrxuorb.gov.cn',
+    'address': '河南省 安阳市',
+    'createTime': '1998-01-16 11:23:33',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '373930342176416776',
+    'username': '郝秀英',
+    'gender': 1,
+    'age': 17,
+    'idCard': '373930342176416776',
+    'email': 'x.fatyfu@udqgch.tv',
+    'address': '黑龙江省 哈尔滨市',
+    'createTime': '1987-09-22 06:43:43',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
+  },
+  {
+    'id': '429621442453555775',
+    'username': '吕洋',
+    'gender': 1,
+    'age': 22,
+    'idCard': '429621442453555775',
+    'email': 's.uirhkbc@bkkvzztn.cv',
+    'address': '天津 天津市',
+    'createTime': '1982-10-31 09:42:09',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
+  },
+  {
+    'id': '387231964476618937',
+    'username': '江磊',
+    'gender': 1,
+    'age': 28,
+    'idCard': '387231964476618937',
+    'email': 'c.pbov@vusetqkrnx.net',
+    'address': '香港特别行政区 九龙',
+    'createTime': '1999-12-24 09:06:37',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '604013348875476647',
+    'username': '姚静',
+    'gender': 1,
+    'age': 15,
+    'idCard': '604013348875476647',
+    'email': 'g.nplhpxqmm@bttefv.ru',
+    'address': '西藏自治区 昌都地区',
+    'createTime': '2020-08-05 12:22:15',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
+  },
+  {
+    'id': '028222596330483467',
+    'username': '龙艳',
+    'gender': 1,
+    'age': 17,
+    'idCard': '028222596330483467',
+    'email': 'e.acjsi@bbjk.ci',
+    'address': '云南省 普洱市',
+    'createTime': '1971-03-07 06:13:10',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '739427478368274267',
+    'username': '武涛',
+    'gender': 1,
+    'age': 18,
+    'idCard': '739427478368274267',
+    'email': 'x.hlwyeply@bcvejqss.bt',
+    'address': '香港特别行政区 香港岛',
+    'createTime': '1975-09-27 01:24:19',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
+  },
+  {
+    'id': '448686878612127243',
+    'username': '孙芳',
+    'gender': 1,
+    'age': 17,
+    'idCard': '448686878612127243',
+    'email': 'j.cmwtpc@xovygkdk.sc',
+    'address': '云南省 西双版纳傣族自治州',
+    'createTime': '1987-04-22 14:09:59',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+  {
+    'id': '448686878612127244',
+    'username': '孙芳1',
+    'gender': 1,
+    'age': 17,
+    'idCard': '448686878612127243',
+    'email': 'j.cmwtpc@xovygkdk.sc',
+    'address': '云南省 西双版纳傣族自治州',
+    'createTime': '1987-04-22 14:09:59',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+  {
+    'id': '448686878612127245',
+    'username': '孙芳2',
+    'gender': 1,
+    'age': 17,
+    'idCard': '448686878612127243',
+    'email': 'j.cmwtpc@xovygkdk.sc',
+    'address': '云南省 西双版纳傣族自治州',
+    'createTime': '1987-04-22 14:09:59',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+]
+
+export default data