protable组件抽取，并绘制demo界面
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
|
||||
// 系统&用户模块前缀
|
||||
// 系统模块前缀
|
||||
export const ADMIN = "/admin";
|
||||
|
||||
// 用户模块前缀
|
||||
export const USER = "/user-boot";
|
||||
|
||||
|
||||
// todo... 其他业务模块前缀
|
||||
@@ -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[];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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`);
|
||||
};
|
||||
48
frontend/src/api/system/dictData.ts
Normal file
48
frontend/src/api/system/dictData.ts
Normal file
@@ -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
|
||||
68
frontend/src/api/user/interface/index.ts
Normal file
68
frontend/src/api/user/interface/index.ts
Normal file
@@ -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[];
|
||||
}
|
||||
}
|
||||
26
frontend/src/api/user/login.ts
Normal file
26
frontend/src/api/user/login.ts
Normal file
@@ -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`)
|
||||
}
|
||||
@@ -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`)
|
||||
}
|
||||
148
frontend/src/api/user/userData.ts
Normal file
148
frontend/src/api/user/userData.ts
Normal file
@@ -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
|
||||
@@ -52,13 +52,13 @@ const style = computed(() => {
|
||||
let offset = props[breakPoint.value]?.offset ?? props.offset;
|
||||
if (props.suffix) {
|
||||
return {
|
||||
gridColumnStart: cols.value - span - offset + 1,
|
||||
gridColumnStart: cols.value - span - offset + 2,
|
||||
gridColumnEnd: `span ${span + offset}`,
|
||||
marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
|
||||
gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset }/span ${
|
||||
span + offset > cols.value ? cols.value : span + offset
|
||||
}`,
|
||||
marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
import { ref } from "vue";
|
||||
import { LOGIN_URL } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import { logoutApi } from "@/api/modules/login";
|
||||
import { logoutApi } from "@/api/user/login";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import InfoDialog from "./InfoDialog.vue";
|
||||
|
||||
@@ -14,3 +14,6 @@ export const TABS_STORE_KEY = "cn-tabs";
|
||||
// pinia中user store的key
|
||||
export const USER_STORE_KEY = "cn-user";
|
||||
|
||||
// pinia中dict store的key
|
||||
export const DICT_STORE_KEY = "cn-dictData";
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { AuthState } from "@/stores/interface";
|
||||
import { getAuthButtonListApi, getAuthMenuListApi } from "@/api/modules/login";
|
||||
import { getAuthButtonListApi, getAuthMenuListApi } from "@/api/user/login";
|
||||
import {
|
||||
getFlatMenuList,
|
||||
getShowMenuList,
|
||||
|
||||
22
frontend/src/stores/modules/dict.ts
Normal file
22
frontend/src/stores/modules/dict.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import piniaPersistConfig from '@/stores/helper/persist'
|
||||
import { DICT_STORE_KEY } from '@/stores/constant'
|
||||
// 模拟数据
|
||||
import dictData from '@/api/system/dictData'
|
||||
|
||||
export const useDictStore = defineStore({
|
||||
id: DICT_STORE_KEY,
|
||||
state: () => ({
|
||||
dictData,
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
// 获取字典数据数组，如果为空则返回空数组
|
||||
getDictData(code: string) {
|
||||
const dict = this.dictData.find(item => item.code === code )
|
||||
return dict?.children || []
|
||||
},
|
||||
// 初始化获取全部字典数据并缓存
|
||||
},
|
||||
persist: piniaPersistConfig(DICT_STORE_KEY),
|
||||
})
|
||||
213
frontend/src/views/demo/proTable/index.vue
Normal file
213
frontend/src/views/demo/proTable/index.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class='table-box'>
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:data='userData'
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader='scope'>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增用户</el-button>
|
||||
<el-button type='primary' :icon='Upload' plain @click='batchAdd'>批量添加用户</el-button>
|
||||
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出用户数据</el-button>
|
||||
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
|
||||
@click='batchDelete(scope.selectedListIds)'>
|
||||
批量删除用户
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation='scope'>
|
||||
<el-button v-if='scope.row.status === 1' type='primary' link :icon='View'
|
||||
@click="openDrawer('查看', scope.row)">查看
|
||||
</el-button>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
|
||||
</template>
|
||||
|
||||
</ProTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='tsx' name='useProTable'>
|
||||
import { User } from '@/api/user/interface'
|
||||
import { useHandleData } from '@/hooks/useHandleData'
|
||||
import { useDownload } from '@/hooks/useDownload'
|
||||
import { useAuthButtons } from '@/hooks/useAuthButtons'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import ImportExcel from '@/components/ImportExcel/index.vue'
|
||||
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
|
||||
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
|
||||
import userDataList from '@/api/user/userData'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
|
||||
const dictStore = useDictStore()
|
||||
|
||||
import {
|
||||
getUserList,
|
||||
deleteUser,
|
||||
changeUserStatus,
|
||||
resetUserPassWord,
|
||||
exportUserInfo,
|
||||
BatchAddUser,
|
||||
getUserStatus,
|
||||
} from '@/api/user/user'
|
||||
|
||||
const userData = userDataList
|
||||
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
|
||||
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
||||
const initParam = reactive({ type: 1 })
|
||||
|
||||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
|
||||
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
||||
const dataCallback = (data: any) => {
|
||||
return {
|
||||
list: data.list,
|
||||
total: data.total,
|
||||
}
|
||||
}
|
||||
|
||||
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params))
|
||||
newParams.createTime && (newParams.startTime = newParams.createTime[0])
|
||||
newParams.createTime && (newParams.endTime = newParams.createTime[1])
|
||||
delete newParams.createTime
|
||||
return getUserList(newParams)
|
||||
}
|
||||
|
||||
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
|
||||
const { BUTTONS } = useAuthButtons()
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'username',
|
||||
label: '用户姓名',
|
||||
search: { el: 'input', tooltip: '我是搜索提示' },
|
||||
},
|
||||
{
|
||||
prop: 'gender',
|
||||
label: '性别',
|
||||
// 字典数据（本地数据）
|
||||
enum: dictStore.getDictData('sex'),
|
||||
search: { el: 'select', props: { filterable: true } },
|
||||
fieldNames: { label: 'label', value: 'code' },
|
||||
},
|
||||
{
|
||||
prop: 'age',
|
||||
label: '年龄',
|
||||
search: {
|
||||
// 自定义 search 显示内容
|
||||
render: ({ searchParam }) => {
|
||||
return (
|
||||
<div class='flx-center'>
|
||||
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
|
||||
<span class='mr10 ml10'>-</span>
|
||||
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
},
|
||||
{ prop: 'idCard', label: '身份证号', search: { el: 'input' } },
|
||||
{ prop: 'email', label: '邮箱' },
|
||||
{ prop: 'address', label: '居住地址' },
|
||||
{
|
||||
prop: 'status',
|
||||
label: '用户状态',
|
||||
enum: dictStore.getDictData('status'),
|
||||
search: { el: 'tree-select', props: { filterable: true } },
|
||||
fieldNames: { label: 'userLabel', value: 'userStatus' },
|
||||
render: scope => {
|
||||
return (
|
||||
<>
|
||||
{BUTTONS.value.status ? (
|
||||
<el-switch
|
||||
model-value={scope.row.status}
|
||||
active-text={scope.row.status ? '启用' : '禁用'}
|
||||
active-value={1}
|
||||
inactive-value={0}
|
||||
onClick={() => changeStatus(scope.row)}
|
||||
/>
|
||||
) : (
|
||||
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
width: 180,
|
||||
search: {
|
||||
el: 'date-picker',
|
||||
span: 1,
|
||||
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
|
||||
defaultValue: ['2024-11-12', '2024-12-12'],
|
||||
},
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
|
||||
])
|
||||
|
||||
// 删除用户信息
|
||||
const deleteAccount = async (params: User.ResUserList) => {
|
||||
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 批量删除用户信息
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deleteUser, { id }, '删除所选用户信息')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 重置用户密码
|
||||
const resetPass = async (params: User.ResUserList) => {
|
||||
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 切换用户状态
|
||||
const changeStatus = async (row: User.ResUserList) => {
|
||||
await useHandleData(changeUserStatus, {
|
||||
id: row.id,
|
||||
status: row.status == 1 ? 0 : 1,
|
||||
}, `切换【${row.username}】用户状态`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
// 导出用户列表
|
||||
const downloadFile = async () => {
|
||||
ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
|
||||
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
|
||||
)
|
||||
}
|
||||
|
||||
// 批量添加用户
|
||||
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
|
||||
const batchAdd = () => {
|
||||
const params = {
|
||||
title: '用户',
|
||||
tempApi: exportUserInfo,
|
||||
importApi: BatchAddUser,
|
||||
getTableList: proTable.value?.getTableList,
|
||||
}
|
||||
dialogRef.value?.acceptParams(params)
|
||||
}
|
||||
|
||||
// 打开 drawer(新增、查看、编辑)
|
||||
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@@ -58,7 +58,7 @@ import { HOME_URL } from "@/config";
|
||||
import { getTimeState } from "@/utils";
|
||||
import { Login } from "@/api/interface";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { loginApi } from "@/api/modules/login";
|
||||
import { loginApi } from "@/api/user/login";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
import { useTabsStore } from "@/stores/modules/tabs";
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>检测脚本</div>
|
||||
<div>检测脚本</div>
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
onMounted(()=>{
|
||||
console.log()
|
||||
console.log()
|
||||
})
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
||||
@@ -9,12 +9,14 @@
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"alwaysStrict": true,
|
||||
"strictFunctionTypes": true,
|
||||
"target": "esnext",
|
||||
"declaration": true,
|
||||
"useDefineForClassFields": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "Node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "vue",
|
||||
"allowJs": true,
|
||||
|
||||
Reference in New Issue
Block a user