Compare commits
2 Commits
14f6af35d8
...
1638643811
| Author | SHA1 | Date | |
|---|---|---|---|
 ZhuRui
|
1638643811 | ||
|
ZhuRui
|
7276425abf |
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Banner 管理 API
|
||||
*/
|
||||
import { get, post } from '@/utils/request';
|
||||
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
|
||||
import { MOCK_BANNER_LIST } from '@/config/mock/bannerList';
|
||||
import type {
|
||||
BannerListQueryParams,
|
||||
BannerSaveParams,
|
||||
BannerDelParams,
|
||||
BannerActiveParams,
|
||||
TournamentAdminBannerListVO,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
export type {
|
||||
TournamentAdminBannerListVO,
|
||||
BannerListQueryParams,
|
||||
BannerSaveParams,
|
||||
BannerDelParams,
|
||||
BannerActiveParams,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
/** GET /manager/banner/list — Banner 列表 */
|
||||
export async function getBannerList(
|
||||
params: BannerListQueryParams,
|
||||
): Promise<ApiResult<TournamentAdminBannerListVO[]>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
return { code: 200, msg: 'success', data: MOCK_BANNER_LIST };
|
||||
}
|
||||
return get('/manager/banner/list', params as Record<string, any>);
|
||||
}
|
||||
|
||||
/** POST /manager/banner/del — 删除 Banner */
|
||||
export function delBanner(id: string): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/del', { id });
|
||||
}
|
||||
|
||||
/** POST /manager/banner/save — 新增 Banner */
|
||||
export function saveBanner(params: BannerSaveParams): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/save', params);
|
||||
}
|
||||
|
||||
/** POST /manager/banner/update �� 编辑 Banner */
|
||||
export function updateBanner(params: BannerSaveParams): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/update', params);
|
||||
}
|
||||
|
||||
/** POST /manager/banner/active — 启用/禁用 Banner */
|
||||
export function toggleBannerActive(
|
||||
params: BannerActiveParams,
|
||||
): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/active', params);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Banner 管理 — 类型定义
|
||||
*/
|
||||
|
||||
/** Banner 列表项 */
|
||||
export interface TournamentAdminBannerListVO {
|
||||
id: string;
|
||||
img: string;
|
||||
title: string;
|
||||
type: string;
|
||||
linkUrl: string;
|
||||
area: string;
|
||||
showTimeBegin: string;
|
||||
showTimeEnd: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** Banner 列表查询参数 */
|
||||
export interface BannerListQueryParams {
|
||||
title?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
/** Banner 新增/编辑请求 */
|
||||
export interface BannerSaveParams {
|
||||
id?: string;
|
||||
img: string;
|
||||
title: string;
|
||||
type: string;
|
||||
linkUrl: string;
|
||||
area: string;
|
||||
showTimeBegin: string;
|
||||
showTimeEnd: string;
|
||||
sort: string;
|
||||
}
|
||||
|
||||
/** Banner 删除请求 */
|
||||
export interface BannerDelParams {
|
||||
id: string;
|
||||
}
|
||||
|
||||
/** Banner 启用/禁用请求 */
|
||||
export interface BannerActiveParams {
|
||||
id: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface ApiResult<T> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* 角色管理 API
|
||||
*/
|
||||
import { get, post } from '@/utils/request';
|
||||
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
|
||||
import { buildMockRoleListPage } from '@/config/mock/roleList';
|
||||
import { buildMockRoleUsageUserPage } from '@/config/mock/roleUsageUser';
|
||||
import { buildMockPermissionTree } from '@/config/mock/permissionTree';
|
||||
import type {
|
||||
RoleListQueryParams,
|
||||
RoleUsageUserQueryParams,
|
||||
TournamentAdminRolePageVO,
|
||||
RoleUsageUserVO,
|
||||
PermissionTreeNode,
|
||||
PageData,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
export type {
|
||||
TournamentAdminRolePageVO,
|
||||
RoleUsageUserVO,
|
||||
RoleListQueryParams,
|
||||
RoleUsageUserQueryParams,
|
||||
PermissionTreeNode,
|
||||
PageData,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
|
||||
|
||||
/** GET /sys/role/page — 角色列表分页 */
|
||||
export async function getRoleList(
|
||||
params: RoleListQueryParams,
|
||||
): Promise<ApiResult<PageData<TournamentAdminRolePageVO>>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
const page = Number(params.page) || 1;
|
||||
const limit = Number(params.limit) || 10;
|
||||
return { code: 200, msg: 'success', data: buildMockRoleListPage(page, limit) };
|
||||
}
|
||||
return get('/sys/role/page', params as Record<string, any>);
|
||||
}
|
||||
|
||||
/** GET /sys/role/usageUserPage — 角色下用户列表分页 */
|
||||
export async function getRoleUsageUserList(
|
||||
params: RoleUsageUserQueryParams,
|
||||
): Promise<ApiResult<PageData<RoleUsageUserVO>>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
const page = Number(params.page) || 1;
|
||||
const limit = Number(params.limit) || 10;
|
||||
return { code: 200, msg: 'success', data: buildMockRoleUsageUserPage(page, limit) };
|
||||
}
|
||||
return get('/sys/role/usageUserPage', params as Record<string, any>);
|
||||
}
|
||||
|
||||
/** GET /admin/sys/role/permissionList?roleId=xxx — 角色权限树 */
|
||||
export async function getPermissionTree(
|
||||
roleId: number | string,
|
||||
): Promise<ApiResult<PermissionTreeNode[]>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
const id = Number(roleId) || 0;
|
||||
return { code: 200, msg: 'success', data: buildMockPermissionTree(id) };
|
||||
}
|
||||
return get('/admin/sys/role/permissionList', { roleId: String(roleId) });
|
||||
}
|
||||
|
||||
/** POST /admin/sys/role/del — 删除角色 */
|
||||
export async function deleteRole(id: number): Promise<ApiResult<null>> {
|
||||
return post('/admin/sys/role/del', { id });
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 角色管理 — 类型定义
|
||||
* 对应 OpenAPI: /admin/sys/role/*
|
||||
*/
|
||||
|
||||
/** 角色列表项 */
|
||||
export interface TournamentAdminRolePageVO {
|
||||
/** 角色ID */
|
||||
roleId: number;
|
||||
/** 角色名称 */
|
||||
roleName: string;
|
||||
/** 角色用户数量 */
|
||||
userCount: number;
|
||||
/** 角色创建时间 */
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 角色列表查询参数 */
|
||||
export interface RoleListQueryParams {
|
||||
page?: string;
|
||||
limit?: string;
|
||||
/** 角色名称（模糊搜索） */
|
||||
name?: string;
|
||||
}
|
||||
|
||||
/** 角色下用户列表项 */
|
||||
export interface RoleUsageUserVO {
|
||||
realName: string;
|
||||
phone: string;
|
||||
createTime: string;
|
||||
/** 状态: 0=停用、1=正常 */
|
||||
status: number;
|
||||
}
|
||||
|
||||
/** 角色下用户列表查询参数 */
|
||||
export interface RoleUsageUserQueryParams {
|
||||
page?: string;
|
||||
limit?: string;
|
||||
/** 用户姓名或手机号 */
|
||||
text?: string;
|
||||
roleId?: string;
|
||||
}
|
||||
|
||||
export interface PageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
export interface ApiResult<T> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
/** 权限树节点（后端 /admin/sys/role/permissionList 返回） */
|
||||
export interface PermissionTreeNode {
|
||||
/** 主键 */
|
||||
id: number;
|
||||
/** 上级ID */
|
||||
pid: number;
|
||||
/** 标题 */
|
||||
name: string;
|
||||
/** 是否选中：true=是，false=否，null=空（仅叶节点有意义，父节点遵循级联逻辑） */
|
||||
selected: boolean | null;
|
||||
/** 子节点 */
|
||||
children?: PermissionTreeNode[];
|
||||
}
|
||||
+34
-19
@@ -6,48 +6,63 @@ import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
|
||||
import { buildMockUserListPage } from '@/config/mock/userList';
|
||||
import type {
|
||||
UserListQueryParams,
|
||||
UserSaveParams,
|
||||
UserUpdateParams,
|
||||
UserActiveParams,
|
||||
TournamentAdminUserPageVO,
|
||||
UserUpdatePwdParams,
|
||||
TournamentAdminUserVO,
|
||||
PageData,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
export type {
|
||||
TournamentAdminUserPageVO,
|
||||
TournamentAdminUserVO,
|
||||
UserListQueryParams,
|
||||
UserSaveParams,
|
||||
UserUpdateParams,
|
||||
UserActiveParams,
|
||||
UserUpdatePwdParams,
|
||||
PageData,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
|
||||
|
||||
/**
|
||||
* 用户管理 - 用户分页
|
||||
* GET /admin/manager/user/page → /manager/user/page
|
||||
*/
|
||||
/** GET /sys/user/page — 用户分页 */
|
||||
export async function getUserList(
|
||||
params: UserListQueryParams,
|
||||
): Promise<ApiResult<PageData<TournamentAdminUserPageVO>>> {
|
||||
): Promise<ApiResult<PageData<TournamentAdminUserVO>>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
const page = Number(params.page) || 1;
|
||||
const limit = Number(params.limit) || 10;
|
||||
return {
|
||||
code: 200,
|
||||
msg: 'success',
|
||||
data: buildMockUserListPage(page, limit),
|
||||
};
|
||||
return { code: 200, msg: 'success', data: buildMockUserListPage(page, limit) };
|
||||
}
|
||||
return get('/manager/user/page', params as Record<string, any>);
|
||||
return get('/sys/user/page', params as Record<string, any>);
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户管理 - 启用/禁用
|
||||
* POST /admin/manager/user/active → /manager/user/active
|
||||
*/
|
||||
/** POST /sys/user/save — 新增用户 */
|
||||
export function saveUser(params: UserSaveParams): Promise<ApiResult<Record<string, never>>> {
|
||||
if (USE_MOCK) return delay(MOCK_DELAY).then(() => ({ code: 200, msg: 'success', data: {} }));
|
||||
return post('/sys/user/save', params);
|
||||
}
|
||||
|
||||
/** POST /sys/user/update — 更新用户 */
|
||||
export function updateUser(params: UserUpdateParams): Promise<ApiResult<Record<string, never>>> {
|
||||
if (USE_MOCK) return delay(MOCK_DELAY).then(() => ({ code: 200, msg: 'success', data: {} }));
|
||||
return post('/sys/user/update', params);
|
||||
}
|
||||
|
||||
/** POST /sys/user/active — 启用/禁用（直接调接口） */
|
||||
export function toggleUserActive(
|
||||
params: UserActiveParams,
|
||||
): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/user/active', params);
|
||||
return post('/sys/user/active', params);
|
||||
}
|
||||
|
||||
/** POST /sys/user/updatepwd — 修改密码（直接调接口） */
|
||||
export function updateUserPwd(
|
||||
params: UserUpdatePwdParams,
|
||||
): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/sys/user/updatepwd', params);
|
||||
}
|
||||
|
||||
+41
-29
@@ -1,57 +1,69 @@
|
||||
/**
|
||||
* 用户管理 — 类型定义
|
||||
* 对应 OpenAPI: /admin/manager/user/page
|
||||
* 对应 OpenAPI: /admin/sys/user/*
|
||||
*/
|
||||
|
||||
/** 用户列表项 */
|
||||
export interface TournamentAdminUserPageVO {
|
||||
/** 用户ID（接口实际返回 string） */
|
||||
export interface TournamentAdminUserVO {
|
||||
id: string;
|
||||
/** 昵称 */
|
||||
nickname: string;
|
||||
/** 手机号 */
|
||||
phone: string;
|
||||
/** 真实姓名 */
|
||||
/** 用户姓名 */
|
||||
realName: string;
|
||||
/** 证件号 */
|
||||
idCard: string;
|
||||
/** 证件号图片 */
|
||||
idCardImg: string;
|
||||
/** 证件号图片列表 */
|
||||
idCardImgList: string[];
|
||||
/** 状态；0=禁用、1=正常（接口实际返回 string） */
|
||||
phone: string;
|
||||
/** 角色名称 */
|
||||
roleName: string;
|
||||
/** 角色ID（编辑时需要回显，列表可能不返回） */
|
||||
roleId?: string;
|
||||
/** 状态；0=停用、1=正常（接口实际返回 string） */
|
||||
status: string;
|
||||
/** 创建时间 */
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 用户列表查询参数 */
|
||||
export interface UserListQueryParams {
|
||||
page?: string;
|
||||
limit?: string;
|
||||
/** 用户昵称 */
|
||||
nickname?: string;
|
||||
/** 用户手机号 */
|
||||
phone?: string;
|
||||
/** 状态；不传=全部、0=禁用、1=正常 */
|
||||
/** 用户姓名或手机号 */
|
||||
text?: string;
|
||||
/** 角色ID */
|
||||
roleId?: string;
|
||||
/** 状态；不传=全部、0=停用、1=正常 */
|
||||
status?: string;
|
||||
}
|
||||
|
||||
/** 启用/禁用请求参数 */
|
||||
/** 新增用户 — POST /admin/sys/user/save */
|
||||
export interface UserSaveParams {
|
||||
realName: string;
|
||||
phone: string;
|
||||
roleId: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
/** 更新用户 — POST /admin/sys/user/update */
|
||||
export interface UserUpdateParams {
|
||||
id: string;
|
||||
realName: string;
|
||||
phone: string;
|
||||
roleId: string;
|
||||
password?: string;
|
||||
confirmPassword?: string;
|
||||
}
|
||||
|
||||
/** 启用/禁用 — POST /admin/sys/user/active */
|
||||
export interface UserActiveParams {
|
||||
/** 用户ID */
|
||||
userId: string;
|
||||
/** 0=禁用、1=正常 */
|
||||
/** 0=禁用、1=启用 */
|
||||
status: string;
|
||||
}
|
||||
|
||||
/** 分页数据 */
|
||||
/** 修改密码 — POST /admin/sys/user/updatepwd */
|
||||
export interface UserUpdatePwdParams {
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
export interface PageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
/** 统一响应包裹 */
|
||||
export interface ApiResult<T> {
|
||||
code: number;
|
||||
msg: string;
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Banner 列表页假数据
|
||||
*
|
||||
* 使用页面：`src/pages/events/banner/index.tsx`
|
||||
* 对应接口：`GET /manager/banner/list`
|
||||
* 类型：`TournamentAdminBannerListVO[]`
|
||||
*
|
||||
* 注意：类型内联定义，避免循环引用。
|
||||
*/
|
||||
|
||||
export interface MockBannerVO {
|
||||
id: string;
|
||||
img: string;
|
||||
title: string;
|
||||
type: string;
|
||||
linkUrl: string;
|
||||
area: string;
|
||||
showTimeBegin: string;
|
||||
showTimeEnd: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
export const MOCK_BANNER_LIST: MockBannerVO[] = [
|
||||
{
|
||||
id: '1',
|
||||
img: 'https://picsum.photos/seed/banner1/80/44',
|
||||
title: '2026全国青少年羽毛球锦标赛火热报名中',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '广东省深圳市',
|
||||
showTimeBegin: '2026-08-01 00:00',
|
||||
showTimeEnd: '2026-08-31 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-20 08:00:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
img: 'https://picsum.photos/seed/banner2/80/44',
|
||||
title: '马拉松城市联赛限时优惠',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/marathon',
|
||||
area: '浙江省杭州市',
|
||||
showTimeBegin: '2026-08-15 00:00',
|
||||
showTimeEnd: '2026-09-15 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-19 11:30:00',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
img: 'https://picsum.photos/seed/banner3/80/44',
|
||||
title: '健身运动会专属福利',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '北京市',
|
||||
showTimeBegin: '2026-07-01 00:00',
|
||||
showTimeEnd: '2026-07-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-18 14:20:00',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
img: 'https://picsum.photos/seed/banner4/80/44',
|
||||
title: '平台品牌宣传活动',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/promo',
|
||||
area: '上海市',
|
||||
showTimeBegin: '2026-06-01 00:00',
|
||||
showTimeEnd: '2026-06-30 23:59',
|
||||
status: '0',
|
||||
createTime: '2026-07-17 18:05:00',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
img: 'https://picsum.photos/seed/banner5/80/44',
|
||||
title: '2026全国青少年羽毛球锦标赛火热报名中',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '广东省深圳市',
|
||||
showTimeBegin: '2026-09-01 00:00',
|
||||
showTimeEnd: '2026-09-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-16 21:15:00',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
img: 'https://picsum.photos/seed/banner6/80/44',
|
||||
title: '马拉松城市联赛限时优惠',
|
||||
type: '3',
|
||||
linkUrl: '/pages/activity/detail',
|
||||
area: '浙江省杭州市',
|
||||
showTimeBegin: '2026-10-01 00:00',
|
||||
showTimeEnd: '2026-10-31 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-15 00:30:00',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
img: 'https://picsum.photos/seed/banner7/80/44',
|
||||
title: '全民健身日特别活动',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '北京市',
|
||||
showTimeBegin: '2026-08-08 00:00',
|
||||
showTimeEnd: '2026-08-08 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-14 03:50:00',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
img: 'https://picsum.photos/seed/banner8/80/44',
|
||||
title: '新春运动季大促销',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/spring',
|
||||
area: '上海市',
|
||||
showTimeBegin: '2026-01-15 00:00',
|
||||
showTimeEnd: '2026-02-15 23:59',
|
||||
status: '0',
|
||||
createTime: '2026-07-13 07:05:00',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
img: 'https://picsum.photos/seed/banner9/80/44',
|
||||
title: '2026全国青少年羽毛球锦标赛火热报名中',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '广东省深圳市',
|
||||
showTimeBegin: '2026-08-01 00:00',
|
||||
showTimeEnd: '2026-08-31 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-12 10:25:00',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
img: 'https://picsum.photos/seed/banner10/80/44',
|
||||
title: '平台品牌宣传活动',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/brand',
|
||||
area: '浙江省杭州市',
|
||||
showTimeBegin: '2026-11-01 00:00',
|
||||
showTimeEnd: '2026-11-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-11 13:40:00',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
img: 'https://picsum.photos/seed/banner11/80/44',
|
||||
title: '秋季健身挑战赛',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '北京市',
|
||||
showTimeBegin: '2026-09-01 00:00',
|
||||
showTimeEnd: '2026-09-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-10 17:00:00',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
img: 'https://picsum.photos/seed/banner12/80/44',
|
||||
title: '双十一运动装备大促',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/double11',
|
||||
area: '上海市',
|
||||
showTimeBegin: '2026-11-01 00:00',
|
||||
showTimeEnd: '2026-11-11 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-09 20:15:00',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* 操作日志假数据
|
||||
* 对应接口：GET /admin/sys/operation/page
|
||||
*
|
||||
* 支持按 type、nickname、dateBegin/dateEnd 前端筛选，
|
||||
* 模拟后端分页行为。
|
||||
*/
|
||||
import type { SysOperationLogVO, OperationLogQueryParams, PageData } from '@/api/logs';
|
||||
|
||||
const MOCK_LOGS: SysOperationLogVO[] = [
|
||||
{
|
||||
type: 1,
|
||||
nickname: '张三',
|
||||
createDate: '2026-07-30 08:00:00',
|
||||
content: '下架赛事"第二十一届贝格林羽毛球大赛"',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
nickname: '张三',
|
||||
createDate: '2026-07-30 09:30:00',
|
||||
content: '上架赛事"第二十一届贝格林羽毛球大赛"',
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
nickname: '李四',
|
||||
createDate: '2026-07-29 10:12:00',
|
||||
content: '禁用用户"王五（1003）"',
|
||||
},
|
||||
{
|
||||
type: 4,
|
||||
nickname: '李四',
|
||||
createDate: '2026-07-29 10:20:00',
|
||||
content: '启用用户"王五（1003）"',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
nickname: '赵六',
|
||||
createDate: '2026-07-28 14:00:00',
|
||||
content: '下架赛事"春季马拉松大赛"',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
nickname: '赵六',
|
||||
createDate: '2026-07-28 15:00:00',
|
||||
content: '上架赛事"春季马拉松大赛"',
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
nickname: '张三',
|
||||
createDate: '2026-07-27 09:00:00',
|
||||
content: '禁用用户"钱七（1005）"',
|
||||
},
|
||||
{
|
||||
type: 4,
|
||||
nickname: '张三',
|
||||
createDate: '2026-07-27 09:15:00',
|
||||
content: '启用用户"钱七（1005）"',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
nickname: '孙八',
|
||||
createDate: '2026-07-26 16:30:00',
|
||||
content: '下架赛事"夏季游泳锦标赛"',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
nickname: '孙八',
|
||||
createDate: '2026-07-26 17:00:00',
|
||||
content: '上架赛事"夏季游泳锦标赛"',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
nickname: '李四',
|
||||
createDate: '2026-07-25 11:00:00',
|
||||
content: '下架赛事"秋季篮球邀请赛"',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
nickname: '李四',
|
||||
createDate: '2026-07-25 12:00:00',
|
||||
content: '上架赛事"秋季篮球邀请赛"',
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
nickname: '周九',
|
||||
createDate: '2026-07-24 08:30:00',
|
||||
content: '禁用用户"吴十（1008）"',
|
||||
},
|
||||
{
|
||||
type: 4,
|
||||
nickname: '周九',
|
||||
createDate: '2026-07-24 08:45:00',
|
||||
content: '启用用户"吴十（1008）"',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
nickname: '张三',
|
||||
createDate: '2026-07-23 13:00:00',
|
||||
content: '下架赛事"冬季滑雪挑战赛"',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
nickname: '张三',
|
||||
createDate: '2026-07-23 14:00:00',
|
||||
content: '上架赛事"冬季滑雪挑战赛"',
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
nickname: '郑十一',
|
||||
createDate: '2026-07-22 10:00:00',
|
||||
content: '禁用用户"冯十二（1012）"',
|
||||
},
|
||||
{
|
||||
type: 4,
|
||||
nickname: '郑十一',
|
||||
createDate: '2026-07-22 10:10:00',
|
||||
content: '启用用户"冯十二（1012）"',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
nickname: '孙八',
|
||||
createDate: '2026-07-21 15:30:00',
|
||||
content: '下架赛事"元旦全民健身跑"',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
nickname: '孙八',
|
||||
createDate: '2026-07-21 16:00:00',
|
||||
content: '上架赛事"元旦全民健身跑"',
|
||||
},
|
||||
];
|
||||
|
||||
/** 按日期范围过滤（dateBegin / dateEnd 格式 yyyy-MM-dd） */
|
||||
function inDateRange(dateStr: string, begin?: string, end?: string): boolean {
|
||||
if (!begin && !end) return true;
|
||||
const d = dateStr.slice(0, 10); // yyyy-MM-dd
|
||||
if (begin && d < begin) return false;
|
||||
if (end && d > end) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
export function buildMockOperationLogPage(
|
||||
page: number,
|
||||
limit: number,
|
||||
params: OperationLogQueryParams,
|
||||
): PageData<SysOperationLogVO> {
|
||||
let filtered = [...MOCK_LOGS];
|
||||
|
||||
// 按操作类型筛选（API 传 '1'/'2'/'3'/'4'）
|
||||
if (params.type) {
|
||||
filtered = filtered.filter((item) => item.type === Number(params.type));
|
||||
}
|
||||
|
||||
// 按操作人昵称模糊筛选
|
||||
if (params.nickname) {
|
||||
filtered = filtered.filter((item) => item.nickname.includes(params.nickname!));
|
||||
}
|
||||
|
||||
// 按日期范围筛选
|
||||
filtered = filtered.filter((item) =>
|
||||
inDateRange(item.createDate, params.dateBegin, params.dateEnd),
|
||||
);
|
||||
|
||||
const total = filtered.length;
|
||||
const start = (page - 1) * limit;
|
||||
const list = filtered.slice(start, start + limit);
|
||||
|
||||
return { total, list };
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
/**
|
||||
* 角色权限树假数据
|
||||
* 对应接口：GET /admin/sys/role/permissionList?roleId=xxx
|
||||
*
|
||||
* - 传 roleId=0 时返回全量未选中树（新增角色用）
|
||||
* - 传已有角色ID时返回带 selected 的树，模拟后端已有权限
|
||||
*
|
||||
* 结构对齐 PermissionTreeNode: { id, pid, name, selected, children }
|
||||
* selected 仅叶节点有值（true/false），父节点为 null
|
||||
*/
|
||||
|
||||
import type { PermissionTreeNode } from '@/api/roles';
|
||||
|
||||
/**
|
||||
* 全量权限树（所有节点的 selected=null，叶节点 selected=false）
|
||||
* 作为未授权角色的默认返回
|
||||
*/
|
||||
const FULL_UNSELECTED: PermissionTreeNode[] = [
|
||||
{
|
||||
id: 1,
|
||||
pid: 0,
|
||||
name: '赛事管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
pid: 1,
|
||||
name: '赛事列表',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 101, pid: 11, name: '赛事列表-查看', selected: false },
|
||||
{ id: 102, pid: 11, name: '赛事列表-上架', selected: false },
|
||||
{ id: 103, pid: 11, name: '赛事列表-下架', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
pid: 1,
|
||||
name: '赛事规程',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 104, pid: 12, name: '赛事规程-查看', selected: false },
|
||||
{ id: 105, pid: 12, name: '赛事规程-编辑', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
pid: 1,
|
||||
name: '订单管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 106, pid: 13, name: '订单管理-查看', selected: false },
|
||||
{ id: 107, pid: 13, name: '订单管理-退款', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
pid: 1,
|
||||
name: '用户列表',
|
||||
selected: null,
|
||||
children: [{ id: 108, pid: 14, name: '用户列表-查看', selected: false }],
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
pid: 1,
|
||||
name: 'Banner管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 109, pid: 15, name: 'Banner-查看', selected: false },
|
||||
{ id: 110, pid: 15, name: 'Banner-新增', selected: false },
|
||||
{ id: 111, pid: 15, name: 'Banner-编辑', selected: false },
|
||||
{ id: 112, pid: 15, name: 'Banner-删除', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
pid: 1,
|
||||
name: '赛事审核',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 113, pid: 16, name: '赛事审核-查看', selected: false },
|
||||
{ id: 114, pid: 16, name: '赛事审核-通过', selected: false },
|
||||
{ id: 115, pid: 16, name: '赛事审核-驳回', selected: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
pid: 0,
|
||||
name: '账务管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
pid: 2,
|
||||
name: '财务报表',
|
||||
selected: null,
|
||||
children: [{ id: 201, pid: 21, name: '财务报表-查看', selected: false }],
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
pid: 2,
|
||||
name: '提现管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 202, pid: 22, name: '提现管理-查看', selected: false },
|
||||
{ id: 203, pid: 22, name: '提现管理-审核', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
pid: 2,
|
||||
name: '支付流水',
|
||||
selected: null,
|
||||
children: [{ id: 204, pid: 23, name: '支付流水-查看', selected: false }],
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
pid: 2,
|
||||
name: '钱包管理',
|
||||
selected: null,
|
||||
children: [{ id: 205, pid: 24, name: '钱包管理-查看', selected: false }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
pid: 0,
|
||||
name: '系统管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
pid: 3,
|
||||
name: '用户管理',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 301, pid: 31, name: '用户管理-查看', selected: false },
|
||||
{ id: 302, pid: 31, name: '用户管理-新增', selected: false },
|
||||
{ id: 303, pid: 31, name: '用户管理-编辑', selected: false },
|
||||
{ id: 304, pid: 31, name: '用户管理-启用/禁用', selected: false },
|
||||
{ id: 305, pid: 31, name: '用户管理-重置密码', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
pid: 3,
|
||||
name: '角色权限',
|
||||
selected: null,
|
||||
children: [
|
||||
{ id: 306, pid: 32, name: '角色权限-查看', selected: false },
|
||||
{ id: 307, pid: 32, name: '角色权限-新增', selected: false },
|
||||
{ id: 308, pid: 32, name: '角色权限-编辑', selected: false },
|
||||
{ id: 309, pid: 32, name: '角色权限-删除', selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
pid: 3,
|
||||
name: '操作日志',
|
||||
selected: null,
|
||||
children: [{ id: 310, pid: 33, name: '操作日志-查看', selected: false }],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 根据角色已有权限ID集合，深拷贝全量树并标记叶节点 selected
|
||||
*/
|
||||
function applySelected(tree: PermissionTreeNode[], selectedIds: Set<number>): PermissionTreeNode[] {
|
||||
return tree.map((node) => {
|
||||
const isLeaf = !node.children || node.children.length === 0;
|
||||
if (isLeaf) {
|
||||
return { ...node, selected: selectedIds.has(node.id) };
|
||||
}
|
||||
// 父节点：递归处理子节点，自身 selected 保持 null
|
||||
return {
|
||||
...node,
|
||||
selected: null,
|
||||
children: applySelected(node.children!, selectedIds),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建权限树假数据
|
||||
* @param roleId 角色ID，0 表示新增（返回全量未选中），其他值模拟该角色已有权限
|
||||
*/
|
||||
export function buildMockPermissionTree(roleId: number): PermissionTreeNode[] {
|
||||
// roleId=0 → 新增角色，全量未选中
|
||||
if (roleId === 0) {
|
||||
return JSON.parse(JSON.stringify(FULL_UNSELECTED));
|
||||
}
|
||||
|
||||
// 模拟不同角色拥有不同权限子集
|
||||
const rolePermissions: Record<number, number[]> = {
|
||||
// 超级管理员：全选（所有叶节点）
|
||||
1: [
|
||||
101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 201, 202, 203, 204,
|
||||
205, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310,
|
||||
],
|
||||
// 赛事管理员：只有赛事管理模块
|
||||
2: [101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112],
|
||||
// 财务：只有账务管理模块
|
||||
4: [201, 202, 203, 204, 205],
|
||||
// 其他角色默认仅查看权限
|
||||
};
|
||||
|
||||
const selectedIds = new Set<number>(rolePermissions[roleId] || [101, 201, 301, 306, 310]);
|
||||
return applySelected(FULL_UNSELECTED, selectedIds);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* 角色列表页假数据（类型内联，避免循环引用）
|
||||
* 对应接口：GET /sys/role/page
|
||||
*/
|
||||
|
||||
interface MockRoleVO {
|
||||
roleId: number;
|
||||
roleName: string;
|
||||
userCount: number;
|
||||
createTime: string;
|
||||
}
|
||||
interface MockPageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
const MOCK_ROLES: MockRoleVO[] = [
|
||||
{ roleId: 1, roleName: '超级管理员', userCount: 2, createTime: '2025-06-01 09:00:00' },
|
||||
{ roleId: 2, roleName: '赛事管理员', userCount: 5, createTime: '2025-08-15 14:30:00' },
|
||||
{ roleId: 3, roleName: '裁判', userCount: 8, createTime: '2025-10-10 10:15:00' },
|
||||
{ roleId: 4, roleName: '财务', userCount: 3, createTime: '2026-01-20 16:00:00' },
|
||||
{ roleId: 5, roleName: '运营管理员', userCount: 4, createTime: '2026-03-05 11:00:00' },
|
||||
{ roleId: 6, roleName: '客服', userCount: 6, createTime: '2026-04-10 08:30:00' },
|
||||
{ roleId: 7, roleName: '审核员', userCount: 3, createTime: '2026-05-18 13:45:00' },
|
||||
{ roleId: 8, roleName: '内容编辑', userCount: 2, createTime: '2026-06-22 09:20:00' },
|
||||
];
|
||||
|
||||
export function buildMockRoleListPage(page: number, limit: number): MockPageData<MockRoleVO> {
|
||||
const start = (page - 1) * limit;
|
||||
return { total: MOCK_ROLES.length, list: MOCK_ROLES.slice(start, start + limit) };
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 角色下用户列表假数据
|
||||
* 对应接口：GET /sys/role/usageUserPage
|
||||
*/
|
||||
|
||||
interface MockUserVO {
|
||||
realName: string;
|
||||
phone: string;
|
||||
createTime: string;
|
||||
status: number;
|
||||
}
|
||||
interface MockPageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
const MOCK_USERS: MockUserVO[] = [
|
||||
{ realName: '张超管', phone: '13900000001', createTime: '2025-06-01 09:00:00', status: 1 },
|
||||
{ realName: '李运营', phone: '15900000002', createTime: '2026-01-10 16:00:00', status: 0 },
|
||||
{ realName: '王运营', phone: '15900000001', createTime: '2025-10-20 10:00:00', status: 1 },
|
||||
{ realName: '张运营', phone: '13900000002', createTime: '2025-08-15 14:30:00', status: 1 },
|
||||
{ realName: '赵裁判', phone: '13800000005', createTime: '2025-10-10 10:15:00', status: 1 },
|
||||
{ realName: '钱裁判', phone: '13800000006', createTime: '2025-10-12 11:00:00', status: 1 },
|
||||
{ realName: '孙财务', phone: '13700000007', createTime: '2026-01-20 16:00:00', status: 1 },
|
||||
{ realName: '周客服', phone: '13700000008', createTime: '2026-01-21 09:30:00', status: 1 },
|
||||
{ realName: '吴客服', phone: '13700000009', createTime: '2026-01-22 10:00:00', status: 0 },
|
||||
{ realName: '郑客服', phone: '13700000010', createTime: '2026-01-23 14:00:00', status: 1 },
|
||||
];
|
||||
|
||||
export function buildMockRoleUsageUserPage(page: number, limit: number): MockPageData<MockUserVO> {
|
||||
const start = (page - 1) * limit;
|
||||
return { total: MOCK_USERS.length, list: MOCK_USERS.slice(start, start + limit) };
|
||||
}
|
||||
+43
-86
@@ -1,170 +1,128 @@
|
||||
/**
|
||||
* 用户列表页假数据
|
||||
*
|
||||
* 使用页面：`src/pages/events/users/index.tsx`
|
||||
* 对应接口：`GET /manager/user/page`
|
||||
* 类型：`TournamentAdminUserPageVO[]`
|
||||
*
|
||||
* 注意：为避免循环引用（api/users/index.ts → 此文件 → api/users/types），
|
||||
* 此文件不 import 任何 api 层类型，接口定义内联。
|
||||
* 用户列表页假数据（类型内联，避免循环引用）
|
||||
* 对应接口：GET /sys/user/page
|
||||
*/
|
||||
|
||||
interface MockUserVO {
|
||||
id: string;
|
||||
nickname: string;
|
||||
phone: string;
|
||||
realName: string;
|
||||
idCard: string;
|
||||
idCardImg: string;
|
||||
idCardImgList: string[];
|
||||
phone: string;
|
||||
roleId: string;
|
||||
roleName: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
interface MockPageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
export const MOCK_USER_LIST: MockUserVO[] = [
|
||||
const MOCK_USERS: MockUserVO[] = [
|
||||
{
|
||||
id: '1',
|
||||
nickname: '羽毛球小将',
|
||||
phone: '13800138001',
|
||||
realName: '张三',
|
||||
idCard: '320101199001011234',
|
||||
idCardImg: '',
|
||||
idCardImgList: [
|
||||
'https://picsum.photos/seed/uid1a/96/64',
|
||||
'https://picsum.photos/seed/uid1b/96/64',
|
||||
],
|
||||
phone: '13800138001',
|
||||
roleId: '1',
|
||||
roleName: '超级管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-20 08:11:07',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
nickname: '马拉松达人',
|
||||
phone: '13900139002',
|
||||
realName: '李四',
|
||||
idCard: '320101199002022345',
|
||||
idCardImg: 'https://picsum.photos/seed/uid2/96/64',
|
||||
idCardImgList: [],
|
||||
phone: '13900139002',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-19 11:28:20',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
nickname: '健身爱好者',
|
||||
phone: '13700137003',
|
||||
realName: '王五',
|
||||
idCard: '320101199103033456',
|
||||
idCardImg: '',
|
||||
idCardImgList: ['https://picsum.photos/seed/uid3a/96/64'],
|
||||
phone: '13700137003',
|
||||
roleId: '3',
|
||||
roleName: '裁判',
|
||||
status: '1',
|
||||
createTime: '2026-07-18 14:45:33',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
nickname: '游泳健将',
|
||||
phone: '13600136004',
|
||||
realName: '赵六',
|
||||
idCard: '320101199204044567',
|
||||
idCardImg: 'https://picsum.photos/seed/uid4/96/64',
|
||||
idCardImgList: [],
|
||||
phone: '13600136004',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '0',
|
||||
createTime: '2026-07-17 18:02:46',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
nickname: '羽毛球小将',
|
||||
phone: '13800138005',
|
||||
realName: '孙七',
|
||||
idCard: '320101199305055678',
|
||||
idCardImg: '',
|
||||
idCardImgList: [
|
||||
'https://picsum.photos/seed/uid5a/96/64',
|
||||
'https://picsum.photos/seed/uid5b/96/64',
|
||||
],
|
||||
phone: '13800138005',
|
||||
roleId: '1',
|
||||
roleName: '超级管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-16 21:19:59',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
nickname: '马拉松达人',
|
||||
phone: '13900139006',
|
||||
realName: '周八',
|
||||
idCard: '320101199406066789',
|
||||
idCardImg: 'https://picsum.photos/seed/uid6/96/64',
|
||||
idCardImgList: [],
|
||||
phone: '13900139006',
|
||||
roleId: '3',
|
||||
roleName: '裁判',
|
||||
status: '1',
|
||||
createTime: '2026-07-15 00:36:12',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
nickname: '健身爱好者',
|
||||
phone: '13700137007',
|
||||
realName: '吴九',
|
||||
idCard: '320101199507077890',
|
||||
idCardImg: '',
|
||||
idCardImgList: [],
|
||||
phone: '13700137007',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-14 03:53:25',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
nickname: '游泳健将',
|
||||
phone: '13600136008',
|
||||
realName: '郑十',
|
||||
idCard: '320101199608088901',
|
||||
idCardImg: 'https://picsum.photos/seed/uid8/96/64',
|
||||
idCardImgList: ['https://picsum.photos/seed/uid8a/96/64'],
|
||||
phone: '13600136008',
|
||||
roleId: '4',
|
||||
roleName: '财务',
|
||||
status: '1',
|
||||
createTime: '2026-07-13 07:10:38',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
nickname: '羽毛球小将',
|
||||
phone: '13800138009',
|
||||
realName: '陈一',
|
||||
idCard: '320101199709099012',
|
||||
idCardImg: '',
|
||||
idCardImgList: [],
|
||||
phone: '13800138009',
|
||||
roleId: '3',
|
||||
roleName: '裁判',
|
||||
status: '1',
|
||||
createTime: '2026-07-12 10:27:51',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
nickname: '马拉松达人',
|
||||
phone: '13900139010',
|
||||
realName: '刘二',
|
||||
idCard: '320101199810100123',
|
||||
idCardImg: 'https://picsum.photos/seed/uid10/96/64',
|
||||
idCardImgList: ['https://picsum.photos/seed/uid10a/96/64'],
|
||||
phone: '13900139010',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '0',
|
||||
createTime: '2026-07-11 13:44:04',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
nickname: '健身爱好者',
|
||||
phone: '13700137011',
|
||||
realName: '黄三',
|
||||
idCard: '320101199911111234',
|
||||
idCardImg: '',
|
||||
idCardImgList: [],
|
||||
phone: '13700137011',
|
||||
roleId: '1',
|
||||
roleName: '超级管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-10 17:01:17',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
nickname: '游泳健将',
|
||||
phone: '13600136012',
|
||||
realName: '林四',
|
||||
idCard: '320101200012122345',
|
||||
idCardImg: '',
|
||||
idCardImgList: [
|
||||
'https://picsum.photos/seed/uid12a/96/64',
|
||||
'https://picsum.photos/seed/uid12b/96/64',
|
||||
],
|
||||
phone: '13600136012',
|
||||
roleId: '4',
|
||||
roleName: '财务',
|
||||
status: '1',
|
||||
createTime: '2026-07-09 20:18:30',
|
||||
},
|
||||
@@ -172,6 +130,5 @@ export const MOCK_USER_LIST: MockUserVO[] = [
|
||||
|
||||
export function buildMockUserListPage(page: number, limit: number): MockPageData<MockUserVO> {
|
||||
const start = (page - 1) * limit;
|
||||
const list = MOCK_USER_LIST.slice(start, start + limit);
|
||||
return { total: MOCK_USER_LIST.length, list };
|
||||
return { total: MOCK_USERS.length, list: MOCK_USERS.slice(start, start + limit) };
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import { useUserStore } from '@/stores/userStore';
|
||||
import { useTabsStore } from '@/stores/tabsStore';
|
||||
import { useState, useBreadcrumb, auth } from '@/hooks';
|
||||
import { ChangePasswordModal, PageTabs } from '@/components';
|
||||
import { updateUserPwd } from '@/api/users';
|
||||
import { renderRouteIcon } from '@/utils/routeIcon';
|
||||
import logoutSvg from '@/assets/img/icon/logout.svg';
|
||||
import styles from './BasicLayout.module.less';
|
||||
@@ -122,12 +123,18 @@ export default defineComponent({
|
||||
if (changePwdSubmitting.value) return;
|
||||
setChangePwdSubmitting(true);
|
||||
try {
|
||||
// TODO: 替换为真实 API 调用
|
||||
console.log('修改密码:', payload);
|
||||
message.success('修改成功');
|
||||
setChangePwdVisible(false);
|
||||
const res = await updateUserPwd({
|
||||
password: payload.newPassword,
|
||||
confirmPassword: payload.newPassword,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message.success('密码修改成功');
|
||||
setChangePwdVisible(false);
|
||||
} else {
|
||||
message.error(res.msg || '修改失败');
|
||||
}
|
||||
} catch (err: any) {
|
||||
message.error(err?.msg || '修改失败');
|
||||
console.error('修改密码失败:', err);
|
||||
} finally {
|
||||
setChangePwdSubmitting(false);
|
||||
}
|
||||
|
||||
@@ -6,28 +6,36 @@ import {
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
Cascader,
|
||||
InputNumber,
|
||||
Button,
|
||||
message,
|
||||
Spin,
|
||||
} from 'ant-design-vue';
|
||||
import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
|
||||
import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS } from '../model/useBannerModel';
|
||||
import {
|
||||
getProvinceCityCascaderOptions,
|
||||
parseAreaToCascaderPath,
|
||||
formatCascaderArea,
|
||||
} from '@/utils/areaData';
|
||||
import { ImageCropper } from '@yp-component/root';
|
||||
import { FileImageOutlined } from '@ant-design/icons-vue';
|
||||
import { uploadFile, OssUploadType } from '@/utils/oss';
|
||||
import dayjs from 'dayjs';
|
||||
import styles from './BannerFormModal.module.less';
|
||||
|
||||
/** 省市两级 Cascader 选项 */
|
||||
const cascaderAreaOptions = getProvinceCityCascaderOptions();
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
imageStatus: 'empty' as 'empty' | 'uploading' | 'success' | 'error',
|
||||
jumpType: 'event_detail' as 'event_detail' | 'miniprogram_page' | 'custom_link' | 'none',
|
||||
relatedEventId: '',
|
||||
pagePath: '',
|
||||
customUrl: '',
|
||||
region: 'home',
|
||||
type: '1' as '1' | '2' | '3',
|
||||
linkUrl: '',
|
||||
relatedEventId: undefined as string | undefined,
|
||||
area: '',
|
||||
displayTimeRange: null as [string, string] | null,
|
||||
sort: 1,
|
||||
});
|
||||
@@ -80,6 +88,10 @@ export default defineComponent({
|
||||
const formRef = ref<any>();
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const formData = reactive(getDefaultForm());
|
||||
/** Cascader 区域的路径数组（与 formData.area 字符串双向同步） */
|
||||
const areaPath = ref<string[]>([]);
|
||||
/** 是否由用户主动切换了跳转类型（跳过初始加载的 type 联动校验） */
|
||||
const typeChanged = ref(false);
|
||||
|
||||
/** 裁剪弹窗状态 */
|
||||
const [cropperVisible, setCropperVisible] = useState(false);
|
||||
@@ -91,38 +103,38 @@ export default defineComponent({
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
areaPath.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
let pagePath = '';
|
||||
let customUrl = '';
|
||||
if (record.jumpType === 'miniprogram_page') {
|
||||
pagePath = record.jumpUrl || '';
|
||||
} else if (record.jumpType === 'custom_link') {
|
||||
customUrl = record.jumpUrl || '';
|
||||
}
|
||||
|
||||
const area = record.area || record.region || '';
|
||||
areaPath.value = parseAreaToCascaderPath(area);
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
title: record.title || '',
|
||||
imageUrl: record.imageUrl || '',
|
||||
imageStatus: record.imageUrl ? ('success' as const) : ('empty' as const),
|
||||
jumpType: record.jumpType || 'event_detail',
|
||||
relatedEventId: record.relatedEventId || '',
|
||||
pagePath,
|
||||
customUrl,
|
||||
region: record.region && record.region !== record.city ? record.region : 'home',
|
||||
imageUrl: record.img || record.imageUrl || '',
|
||||
imageStatus: record.img || record.imageUrl ? ('success' as const) : ('empty' as const),
|
||||
type: String(record.type || record.jumpType || '1'),
|
||||
linkUrl: record.linkUrl || record.jumpUrl || '',
|
||||
relatedEventId: record.relatedEventId || undefined,
|
||||
area,
|
||||
displayTimeRange:
|
||||
record.displayStartTime && record.displayEndTime
|
||||
? ([record.displayStartTime, record.displayEndTime] as [string, string])
|
||||
(record.showTimeBegin || record.displayStartTime) &&
|
||||
(record.showTimeEnd || record.displayEndTime)
|
||||
? ([
|
||||
record.showTimeBegin || record.displayStartTime,
|
||||
record.showTimeEnd || record.displayEndTime,
|
||||
] as [string, string])
|
||||
: null,
|
||||
sort: record.sort ?? 1,
|
||||
sort: Number(record.sort ?? 1),
|
||||
});
|
||||
};
|
||||
|
||||
/** 监听 visible 变化重置表单 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
// 标记首次渲染，跳过 type 联动校验
|
||||
typeChanged.value = false;
|
||||
initFormFromRecord(props.record);
|
||||
setCropperVisible(false);
|
||||
setUploadImageUrl('');
|
||||
@@ -130,18 +142,33 @@ export default defineComponent({
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 监听 jumpType 变化时清理联动字段 */
|
||||
/** 监听 type 变化时清理联动字段值和校验 */
|
||||
useEffect(() => {
|
||||
const newType = formData.jumpType;
|
||||
if (newType !== 'event_detail') formData.relatedEventId = '';
|
||||
if (newType !== 'miniprogram_page') formData.pagePath = '';
|
||||
if (newType !== 'custom_link') formData.customUrl = '';
|
||||
const fieldsToValidate: string[] = [];
|
||||
if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
|
||||
if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
|
||||
if (newType === 'custom_link') fieldsToValidate.push('customUrl');
|
||||
if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
|
||||
}, [() => formData.jumpType]);
|
||||
// 首次加载跳过校验
|
||||
if (!typeChanged.value) {
|
||||
if (formData.type !== '1') formData.relatedEventId = undefined;
|
||||
if (formData.type !== '2' && formData.type !== '3') formData.linkUrl = '';
|
||||
typeChanged.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.type !== '1') {
|
||||
formData.relatedEventId = undefined;
|
||||
formRef.value?.clearValidate('relatedEventId');
|
||||
}
|
||||
if (formData.type !== '2' && formData.type !== '3') {
|
||||
formData.linkUrl = '';
|
||||
}
|
||||
const activeNames: string[] = [];
|
||||
if (formData.type === '1') activeNames.push('relatedEventId');
|
||||
if (formData.type === '2' || formData.type === '3') activeNames.push('linkUrl');
|
||||
// 清除所有联动字段的校验状态
|
||||
formRef.value?.clearValidate(['relatedEventId', 'linkUrl']);
|
||||
// 如果有已填值，重新校验当前字段
|
||||
if (activeNames.length) {
|
||||
setTimeout(() => formRef.value?.validateFields(activeNames).catch(() => {}), 0);
|
||||
}
|
||||
}, [() => formData.type]);
|
||||
|
||||
/** 触发隐藏的文件选择器 */
|
||||
const triggerFilePicker = () => {
|
||||
@@ -235,25 +262,28 @@ export default defineComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
// 防御：上传中时禁止提交
|
||||
if (formData.imageStatus === 'uploading') {
|
||||
message.warning('图片仍在上传中，请稍候');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造提交数据：根据 jumpType 整理 jumpUrl
|
||||
const payload: any = { ...formData };
|
||||
if (payload.jumpType === 'event_detail') {
|
||||
payload.jumpUrl = payload.relatedEventId;
|
||||
} else if (payload.jumpType === 'miniprogram_page') {
|
||||
payload.jumpUrl = payload.pagePath;
|
||||
} else if (payload.jumpType === 'custom_link') {
|
||||
payload.jumpUrl = payload.customUrl;
|
||||
} else {
|
||||
payload.jumpUrl = '';
|
||||
}
|
||||
payload.displayStartTime = payload.displayTimeRange?.[0] || '';
|
||||
payload.displayEndTime = payload.displayTimeRange?.[1] || '';
|
||||
const payload = {
|
||||
img: formData.imageUrl || '',
|
||||
title: formData.title || '',
|
||||
type: formData.type,
|
||||
linkUrl:
|
||||
formData.type === '1'
|
||||
? formData.relatedEventId || ''
|
||||
: formData.type === '2'
|
||||
? formData.linkUrl || ''
|
||||
: formData.type === '3'
|
||||
? formData.linkUrl || ''
|
||||
: '',
|
||||
area: formData.area || formatCascaderArea(areaPath.value),
|
||||
showTimeBegin: formData.displayTimeRange?.[0] || '',
|
||||
showTimeEnd: formData.displayTimeRange?.[1] || '',
|
||||
sort: String(formData.sort ?? 1),
|
||||
};
|
||||
props.onSave(payload);
|
||||
};
|
||||
|
||||
@@ -344,18 +374,18 @@ export default defineComponent({
|
||||
{/* ===== 跳转类型 ===== */}
|
||||
<Form.Item
|
||||
label="跳转类型"
|
||||
name="jumpType"
|
||||
name="type"
|
||||
rules={[{ required: true, message: '请选择跳转类型' }]}
|
||||
>
|
||||
<Select
|
||||
options={JUMP_TYPE_OPTIONS as any}
|
||||
placeholder="请选择"
|
||||
v-model:value={formData.jumpType}
|
||||
v-model:value={formData.type}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 联动字段：根据跳转类型动态展示 ===== */}
|
||||
{formData.jumpType === 'event_detail' && (
|
||||
{/* ===== 联动字段 ===== */}
|
||||
{formData.type === '1' && (
|
||||
<Form.Item
|
||||
label="关联赛事"
|
||||
name="relatedEventId"
|
||||
@@ -363,45 +393,19 @@ export default defineComponent({
|
||||
>
|
||||
<Select
|
||||
options={EVENT_OPTIONS as any}
|
||||
placeholder="不关联"
|
||||
placeholder="请选择关联赛事"
|
||||
allowClear
|
||||
v-model:value={formData.relatedEventId}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'miniprogram_page' && (
|
||||
{formData.type === '2' && (
|
||||
<Form.Item
|
||||
label="页面路径"
|
||||
name="pagePath"
|
||||
label="跳转地址"
|
||||
name="linkUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入页面路径' },
|
||||
{
|
||||
pattern: /^\//,
|
||||
message: '页面路径需以 / 开头',
|
||||
},
|
||||
{ max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="/pages/index/index"
|
||||
maxlength={PATH_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.pagePath}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'custom_link' && (
|
||||
<Form.Item
|
||||
label="自定义链接"
|
||||
name="customUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入自定义链接' },
|
||||
{
|
||||
pattern: /^https?:\/\//i,
|
||||
message: '请输入以 http/https 开头的链接',
|
||||
},
|
||||
{ required: true, message: '请输入跳转地址' },
|
||||
{ max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
@@ -409,25 +413,44 @@ export default defineComponent({
|
||||
placeholder="https://xxx"
|
||||
maxlength={URL_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.customUrl}
|
||||
v-model:value={formData.linkUrl}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'none' && (
|
||||
<div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
|
||||
{formData.type === '3' && (
|
||||
<Form.Item
|
||||
label="小程序路径"
|
||||
name="linkUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入小程序页面路径' },
|
||||
{ max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="/pages/index/index"
|
||||
maxlength={PATH_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.linkUrl}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{/* ===== 所属区域 ===== */}
|
||||
<Form.Item
|
||||
label="所属区域"
|
||||
name="region"
|
||||
name="area"
|
||||
rules={[{ required: true, message: '请选择所属区域' }]}
|
||||
>
|
||||
<Select
|
||||
options={REGION_OPTIONS as any}
|
||||
placeholder="首页"
|
||||
v-model:value={formData.region}
|
||||
<Cascader
|
||||
v-model:value={areaPath.value}
|
||||
options={cascaderAreaOptions}
|
||||
placeholder="请选择省/市"
|
||||
changeOnSelect={false}
|
||||
allowClear
|
||||
onChange={(val: any) => {
|
||||
formData.area = formatCascaderArea(val || []);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -532,7 +555,7 @@ export default defineComponent({
|
||||
<div style={{ height: '500px' }}>
|
||||
<ImageCropper
|
||||
src={uploadImageUrl.value}
|
||||
aspectRatio={CROP_ASPECT_RATIO}
|
||||
// aspectRatio={CROP_ASPECT_RATIO}
|
||||
autoCrop={true}
|
||||
autoCropArea={0.8}
|
||||
viewMode={1}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
@@ -38,11 +38,11 @@ function renderBodyCell({
|
||||
onToggleStatus: (record: any) => void;
|
||||
onDelete: (record: any) => void;
|
||||
}) {
|
||||
// 图片列：80 * 44
|
||||
// 图片列
|
||||
if (column.key === 'image') {
|
||||
return (
|
||||
<Image
|
||||
src={record.imageUrl}
|
||||
src={record.img}
|
||||
width={80}
|
||||
height={44}
|
||||
style={{ objectFit: 'cover', borderRadius: '4px' }}
|
||||
@@ -51,7 +51,7 @@ function renderBodyCell({
|
||||
);
|
||||
}
|
||||
|
||||
// 标题列：超长截断 + Tooltip
|
||||
// 标题列
|
||||
if (column.dataIndex === 'title') {
|
||||
const maxLen = 18;
|
||||
const raw = text || '';
|
||||
@@ -65,43 +65,33 @@ function renderBodyCell({
|
||||
);
|
||||
}
|
||||
|
||||
// 跳转类型列：StatusTag
|
||||
if (column.dataIndex === 'jumpType') {
|
||||
// 跳转类型列
|
||||
if (column.dataIndex === 'type') {
|
||||
return renderJumpType(text);
|
||||
}
|
||||
|
||||
// 关联赛事列：为空显示 "-"
|
||||
if (column.dataIndex === 'relatedEvent') {
|
||||
// 跳转地址列
|
||||
if (column.dataIndex === 'linkUrl') {
|
||||
return <span>{text || '-'}</span>;
|
||||
}
|
||||
|
||||
// 所属区域列：省 + 市 拼接
|
||||
if (column.key === 'region') {
|
||||
return (
|
||||
<span>
|
||||
{record.province}
|
||||
{record.city}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 展示时间列：日期时间段
|
||||
// 展示时间列
|
||||
if (column.key === 'displayTime') {
|
||||
return (
|
||||
<span>
|
||||
{record.displayStartTime} 至 {record.displayEndTime}
|
||||
{record.showTimeBegin} 至 {record.showTimeEnd}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 状态列：启用中(绿色) / 已禁用(灰色半透明)
|
||||
// 状态列
|
||||
if (column.dataIndex === 'status') {
|
||||
return renderStatus(text);
|
||||
}
|
||||
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
const isEnabled = record.status === '1';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
@@ -120,9 +110,6 @@ function renderBodyCell({
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner 配置
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventBanner',
|
||||
setup() {
|
||||
@@ -150,7 +137,6 @@ export default defineComponent({
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
/** 删除二次确认 */
|
||||
const confirmDelete = (record: any) => {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
@@ -162,9 +148,8 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
/** 启用/禁用二次确认 */
|
||||
const confirmToggleStatus = (record: any) => {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
const isEnabled = record.status === '1';
|
||||
const actionText = isEnabled ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
@@ -175,7 +160,6 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
@@ -187,16 +171,21 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="标题" name="searchTitle">
|
||||
<Form.Item label="标题" name="title">
|
||||
<Input
|
||||
value={filterForm.title}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.title = val.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -223,7 +212,6 @@ export default defineComponent({
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
@@ -247,7 +235,6 @@ export default defineComponent({
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
@@ -261,7 +248,6 @@ export default defineComponent({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 新增/编辑弹窗 ===== */}
|
||||
{modalVisible.value && (
|
||||
<BannerFormModal
|
||||
visible={modalVisible.value}
|
||||
|
||||
@@ -1,45 +1,51 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
import {
|
||||
getBannerList,
|
||||
delBanner,
|
||||
saveBanner,
|
||||
updateBanner,
|
||||
toggleBannerActive,
|
||||
type TournamentAdminBannerListVO,
|
||||
type BannerListQueryParams,
|
||||
} from '@/api/banner';
|
||||
import { getProvinceCityOptions } from '@/utils/areaData';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** Banner 状态选项（筛选） */
|
||||
/** Banner 状态选项（value 对应 API status: 不传=全部、0=禁用；1=启用） */
|
||||
export const BANNER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'enabled', label: '启用' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
{ value: '1', label: '启用' },
|
||||
{ value: '0', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型选项（表单下拉） */
|
||||
/** 跳转类型选项（value 对应 API type: 1=赛事详情，2=自定义连接，3=小程序页面） */
|
||||
export const JUMP_TYPE_OPTIONS = [
|
||||
{ value: 'event_detail', label: '赛事详情页' },
|
||||
{ value: 'miniprogram_page', label: '小程序页面' },
|
||||
{ value: 'custom_link', label: '自定义链接' },
|
||||
{ value: 'none', label: '无链接' },
|
||||
{ value: '1', label: '赛事详情页' },
|
||||
{ value: '2', label: '自定义链接' },
|
||||
{ value: '3', label: '小程序页面' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型映射（用于表格 StatusTag 渲染） */
|
||||
/** 跳转类型映射 */
|
||||
const JUMP_TYPE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
event_detail: { label: '赛事详情页', tone: 'primary' },
|
||||
miniprogram_page: { label: '小程序页面', tone: 'cyan' },
|
||||
custom_link: { label: '自定义链接', tone: 'purple' },
|
||||
none: { label: '无链接', tone: 'default' },
|
||||
'1': { label: '赛事详情页', tone: 'primary' },
|
||||
'2': { label: '自定义链接', tone: 'purple' },
|
||||
'3': { label: '小程序页面', tone: 'cyan' },
|
||||
};
|
||||
|
||||
/** Banner 状态映射 */
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone; dimmed?: boolean }> = {
|
||||
enabled: { label: '启用中', tone: 'success' },
|
||||
disabled: { label: '已禁用', tone: 'default', dimmed: true },
|
||||
'1': { label: '启用中', tone: 'success' },
|
||||
'0': { label: '已禁用', tone: 'default', dimmed: true },
|
||||
};
|
||||
|
||||
/** 关联赛事选项（mock） */
|
||||
/** 关联赛事选项（mock，TODO: 替换为真实 API） */
|
||||
export const EVENT_OPTIONS = [
|
||||
{ value: '', label: '不关联' },
|
||||
{ value: 'EV20260701001', label: '2026全国青少年羽毛球锦标赛暨体育文化交流大会' },
|
||||
{ value: 'EV20260701002', label: '国际马拉松城市联赛' },
|
||||
{ value: 'EV20260701003', label: '全民健身运动会' },
|
||||
@@ -47,131 +53,74 @@ export const EVENT_OPTIONS = [
|
||||
{ value: 'EV20260701005', label: '北京城市定向越野挑战赛' },
|
||||
];
|
||||
|
||||
/** 所属区域选项（mock） */
|
||||
export const REGION_OPTIONS = [
|
||||
{ value: 'home', label: '首页' },
|
||||
{ value: 'guangdong_shenzhen', label: '广东省深圳市' },
|
||||
{ value: 'zhejiang_hangzhou', label: '浙江省杭州市' },
|
||||
{ value: 'beijing', label: '北京市' },
|
||||
{ value: 'shanghai', label: '上海市' },
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 假数据（表格）
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
|
||||
const jumpType = (['event_detail', 'miniprogram_page', 'custom_link', 'none'] as const)[i % 4];
|
||||
const provinces = ['广东省', '浙江省', '北京市', '上海市'];
|
||||
const cities = ['深圳市', '杭州市', '北京市', '上海市'];
|
||||
|
||||
return {
|
||||
key: `${i + 1}`,
|
||||
id: `BANNER${String(i + 1).padStart(4, '0')}`,
|
||||
sort: i + 1,
|
||||
imageUrl: `https://picsum.photos/seed/banner${i + 1}/80/44`,
|
||||
title:
|
||||
i % 4 === 0
|
||||
? '2026全国青少年羽毛球锦标赛火热报名中'
|
||||
: i % 4 === 1
|
||||
? '马拉松城市联赛限时优惠'
|
||||
: i % 4 === 2
|
||||
? '健身运动会专属福利'
|
||||
: '平台品牌宣传活动',
|
||||
jumpType,
|
||||
jumpUrl:
|
||||
jumpType === 'custom_link'
|
||||
? 'https://example.com/activity'
|
||||
: jumpType === 'miniprogram_page'
|
||||
? '/pages/activity/detail'
|
||||
: '',
|
||||
relatedEventId:
|
||||
jumpType === 'event_detail'
|
||||
? (['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]
|
||||
: '',
|
||||
relatedEvent:
|
||||
jumpType === 'event_detail'
|
||||
? (() => {
|
||||
const map: Record<string, string> = {
|
||||
EV20260701001: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||
EV20260701002: '国际马拉松城市联赛',
|
||||
EV20260701003: '全民健身运动会',
|
||||
};
|
||||
return map[(['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]] || '';
|
||||
})()
|
||||
: '',
|
||||
region: provinces[i % 4],
|
||||
city: cities[i % 4],
|
||||
displayStartTime: '2026-08-01 00:00',
|
||||
displayEndTime: '2026-08-31 23:59',
|
||||
createTime: `2026-07-${String((i % 28) + 1).padStart(2, '0')} ${String((i * 2 + 8) % 24).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}`,
|
||||
status: (i % 4 === 0 ? 'disabled' : 'enabled') as 'enabled' | 'disabled',
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 临时排序：对假数据按创建时间倒序排列。
|
||||
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
|
||||
*/
|
||||
const sortByTimeDesc = (list: any[], field: string) =>
|
||||
[...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
|
||||
|
||||
const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
/** 所属区域选项（动态生成，直辖市仅市名，其他省市） */
|
||||
export const REGION_OPTIONS = getProvinceCityOptions();
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* Banner 配置页数据模型
|
||||
*/
|
||||
export function useBannerModel() {
|
||||
// ===== 筛选条件 =====
|
||||
// ===== 筛选条件（key 名对齐 API 查询参数） =====
|
||||
const filterForm = reactive({
|
||||
searchTitle: '',
|
||||
status: '' as '' | 'enabled' | 'disabled',
|
||||
title: '',
|
||||
status: '' as '' | '0' | '1',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedTitle } = useDebounce(
|
||||
toRef(filterForm, 'searchTitle') as Ref<string>,
|
||||
toRef(filterForm, 'title') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
// ===== 表格状态（API 返回全量，前端分页） =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
||||
const [allData, setAllData] = useState<TournamentAdminBannerListVO[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: SORTED_MOCK_DATA.length,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
/** 当前页数据（客户端切片） */
|
||||
const dataSource = computed(() => {
|
||||
const start = (pagination.value.current - 1) * pagination.value.pageSize;
|
||||
return allData.value.slice(start, start + pagination.value.pageSize);
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 提交态（用于表单弹窗的确认按钮 loading）=====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置（纯数据列，复杂渲染在页面 bodyCell 中处理）=====
|
||||
// ===== 表格列配置（dataIndex 对齐 TournamentAdminBannerListVO） =====
|
||||
const columns = [
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 70, align: 'center' as const },
|
||||
{ title: '图片', key: 'image', width: 100, align: 'center' as const },
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', width: 220 },
|
||||
{
|
||||
title: '跳转类型',
|
||||
dataIndex: 'jumpType',
|
||||
key: 'jumpType',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{ title: '关联赛事', dataIndex: 'relatedEvent', key: 'relatedEvent', width: 200 },
|
||||
{ title: '所属区域', key: 'region', width: 140 },
|
||||
{ title: '跳转地址', dataIndex: 'linkUrl', key: 'linkUrl', width: 200 },
|
||||
{ title: '所属区域', dataIndex: 'area', key: 'area', width: 140 },
|
||||
{ title: '展示时间', key: 'displayTime', width: 260 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center' as const },
|
||||
];
|
||||
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): BannerListQueryParams => {
|
||||
const params: BannerListQueryParams = {};
|
||||
if (filterForm.title.trim()) {
|
||||
params.title = filterForm.title.trim();
|
||||
}
|
||||
if (filterForm.status) {
|
||||
params.status = filterForm.status;
|
||||
}
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return debouncedTitle.value.trim() !== '' || filterForm.status !== '';
|
||||
@@ -181,18 +130,20 @@ export function useBannerModel() {
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
title: debouncedTitle.value,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('Banner列表查询参数:', queryParams);
|
||||
const res = await getBannerList(queryParams);
|
||||
|
||||
if (res.code === 200) {
|
||||
setAllData(res.data);
|
||||
setPagination({ current: 1, pageSize: 10, total: res.data.length });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Banner查询失败:', error);
|
||||
} finally {
|
||||
@@ -200,17 +151,17 @@ export function useBannerModel() {
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchTitle = '';
|
||||
filterForm.title = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setAllData([]);
|
||||
setTimeout(() => handleSearch(), 350);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 打开新增弹窗 */
|
||||
@@ -218,14 +169,10 @@ export function useBannerModel() {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 打开编辑弹窗 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭弹窗 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
@@ -236,61 +183,81 @@ export function useBannerModel() {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
const payload = {
|
||||
...formPayload,
|
||||
displayStartTime: formPayload.displayTimeRange?.[0] || '',
|
||||
displayEndTime: formPayload.displayTimeRange?.[1] || '',
|
||||
const params = {
|
||||
img: formPayload.img || formPayload.imageUrl || '',
|
||||
title: formPayload.title || '',
|
||||
type: String(formPayload.type || formPayload.jumpType || '1'),
|
||||
linkUrl: formPayload.linkUrl || formPayload.jumpUrl || '',
|
||||
area: formPayload.area || formPayload.region || '',
|
||||
showTimeBegin:
|
||||
formPayload.showTimeBegin ||
|
||||
formPayload.displayTimeRange?.[0] ||
|
||||
formPayload.displayStartTime ||
|
||||
'',
|
||||
showTimeEnd:
|
||||
formPayload.showTimeEnd ||
|
||||
formPayload.displayTimeRange?.[1] ||
|
||||
formPayload.displayEndTime ||
|
||||
'',
|
||||
sort: String(formPayload.sort ?? 1),
|
||||
};
|
||||
console.log(isEdit.value ? '编辑 Banner' : '新增 Banner', payload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
console.error('Banner提交失败:', error);
|
||||
const isEdit = editingRecord.value !== null;
|
||||
const res = isEdit
|
||||
? await updateBanner({ ...params, id: editingRecord.value.id })
|
||||
: await saveBanner(params);
|
||||
if (res.code === 200) {
|
||||
message.success(isEdit ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Banner提交失败:', e);
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 删除（节流 500ms） */
|
||||
/** 删除 */
|
||||
const handleDelete = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('删除 Banner:', record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
console.error('Banner删除失败:', error);
|
||||
const res = await delBanner(record.id);
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '删除失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Banner删除失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
/** 启用/禁用切换 */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'enabled' ? 'disabled' : 'enabled';
|
||||
const actionText = newStatus === 'enabled' ? '启用' : '禁用';
|
||||
console.log(`${actionText} Banner:`, record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
// 更新本地数据
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
console.error('Banner状态切换失败:', error);
|
||||
const newStatus = record.status === '1' ? '0' : '1';
|
||||
const actionText = newStatus === '1' ? '启用' : '禁用';
|
||||
const res = await toggleBannerActive({ id: record.id, status: newStatus });
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`);
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Banner状态切换失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// ===== 供页面 bodyCell 使用的渲染工具 =====
|
||||
// ===== 渲染工具 =====
|
||||
const renderJumpType = (type: string) => {
|
||||
const info = JUMP_TYPE_MAP[type] || { label: type || '-', tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
@@ -298,11 +265,7 @@ export function useBannerModel() {
|
||||
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
|
||||
return h(StatusTag, {
|
||||
label: info.label,
|
||||
tone: info.tone,
|
||||
dimmed: info.dimmed,
|
||||
});
|
||||
return h(StatusTag, { label: info.label, tone: info.tone, dimmed: info.dimmed });
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@@ -6,69 +6,15 @@ import {
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Image,
|
||||
Pagination,
|
||||
Modal,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
import { EyeOutlined } from '@ant-design/icons-vue';
|
||||
import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useUserModel, USER_STATUS_OPTIONS, ROLE_OPTIONS } from './model/useUserModel';
|
||||
import { toggleUserActive } from '@/api/users';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import pageStyles from '@/assets/styles/pageLayout.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onToggleStatus,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onToggleStatus: (record: any) => void;
|
||||
}) {
|
||||
// 证件图片：优先 idCardImgList，回退 idCardImg
|
||||
if (column.dataIndex === 'idCardImg') {
|
||||
const urls = record.idCardImgList?.length
|
||||
? record.idCardImgList
|
||||
: record.idCardImg
|
||||
? [record.idCardImg]
|
||||
: [];
|
||||
if (urls.length === 0) return <span>-</span>;
|
||||
return (
|
||||
<Space>
|
||||
{urls.map((src: string) => (
|
||||
<Image
|
||||
key={src}
|
||||
width={48}
|
||||
height={32}
|
||||
src={src}
|
||||
v-slots={{ previewMask: () => <EyeOutlined /> }}
|
||||
/>
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === '1';
|
||||
return (
|
||||
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户列表
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventUsers',
|
||||
setup() {
|
||||
@@ -82,30 +28,23 @@ export default defineComponent({
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
const handleToggleStatus = (record: any) => {
|
||||
const isActive = record.status === '1';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
const targetStatus = isActive ? '0' : '1';
|
||||
const actionText = isActive ? '停用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认${actionText}用户"${record.nickname}"吗？`,
|
||||
content: `确认${actionText}用户"${record.realName}"吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await toggleUserActive({
|
||||
userId: record.id,
|
||||
status: targetStatus,
|
||||
});
|
||||
const res = await toggleUserActive({ userId: record.id, status: isActive ? '0' : '1' });
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`);
|
||||
message.success(`${actionText}成���`);
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} else message.error(res.msg || '操作失败');
|
||||
} catch (e: any) {
|
||||
console.error(`用户${actionText}失败:`, e);
|
||||
}
|
||||
@@ -113,7 +52,6 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
@@ -131,29 +69,26 @@ export default defineComponent({
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户昵称" name="nickname">
|
||||
<Form.Item label="用户姓名/手机号" name="text">
|
||||
<Input
|
||||
value={filterForm.nickname}
|
||||
placeholder="请输入用户昵称"
|
||||
value={filterForm.text}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) =>
|
||||
(filterForm.nickname = val.target?.value ?? val ?? '')
|
||||
}
|
||||
onUpdate:value={(val: any) => (filterForm.text = val.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="手机号" name="phone">
|
||||
<Input
|
||||
value={filterForm.phone}
|
||||
placeholder="请输入手机号"
|
||||
style={{ width: '200px' }}
|
||||
<Form.Item label="角色" name="roleId">
|
||||
<Select
|
||||
value={filterForm.roleId}
|
||||
options={ROLE_OPTIONS as any}
|
||||
style={{ width: '140px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.phone = val.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
placeholder="全部"
|
||||
onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
@@ -175,8 +110,6 @@ export default defineComponent({
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
@@ -187,16 +120,23 @@ export default defineComponent({
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onToggleStatus: handleToggleStatus,
|
||||
}),
|
||||
bodyCell: (args: any) => {
|
||||
if (args.column.key === 'action') {
|
||||
const isActive = args.record.status === '1';
|
||||
return (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => handleToggleStatus(args.record)}
|
||||
>
|
||||
{isActive ? '停用' : '启用'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
|
||||
@@ -2,71 +2,56 @@ import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
import { getUserList, type TournamentAdminUserPageVO, type UserListQueryParams } from '@/api/users';
|
||||
import { getUserList, type TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 用户状态选项（value 对应 API status: 不传=全部、0=禁用、1=正常） */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: '0', label: '停用' },
|
||||
{ value: '1', label: '正常' },
|
||||
{ value: '0', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 用户状态 StatusTag 映射 */
|
||||
const USER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
/** 角色选项（TODO: 对接角色 API） */
|
||||
export const ROLE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: '1', label: '超级管理员' },
|
||||
{ value: '2', label: '赛事管理员' },
|
||||
{ value: '3', label: '裁判' },
|
||||
{ value: '4', label: '财务' },
|
||||
] as const;
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
'1': { label: '正常', tone: 'success' },
|
||||
'0': { label: '禁用', tone: 'danger' },
|
||||
'0': { label: '停用', tone: 'danger' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 用户列表页数据模型
|
||||
*/
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件（key 名对齐 API 查询参数） =====
|
||||
const filterForm = reactive({
|
||||
nickname: '',
|
||||
phone: '',
|
||||
text: '',
|
||||
roleId: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
// 可搜索字段防抖
|
||||
const { debouncedValue: debouncedNickname } = useDebounce(
|
||||
toRef(filterForm, 'nickname') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedPhone } = useDebounce(
|
||||
toRef(filterForm, 'phone') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminUserPageVO[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
|
||||
delay: 300,
|
||||
});
|
||||
|
||||
// ===== 表格列配置（dataIndex 对齐 TournamentAdminUserPageVO） =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
const columns = [
|
||||
{ title: '昵称', dataIndex: 'nickname', key: 'nickname', width: 120 },
|
||||
{ title: '用户姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{ title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 100 },
|
||||
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idCardImg',
|
||||
key: 'idCardImg',
|
||||
width: 140,
|
||||
},
|
||||
{ title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
@@ -74,69 +59,47 @@ export function useUserModel() {
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = USER_STATUS_MAP[text] || { label: text, tone: 'default' as const };
|
||||
const info = STATUS_MAP[text] || { label: text, tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
},
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
|
||||
];
|
||||
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): UserListQueryParams => {
|
||||
const params: UserListQueryParams = {
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
};
|
||||
|
||||
if (filterForm.nickname.trim()) {
|
||||
params.nickname = filterForm.nickname.trim();
|
||||
}
|
||||
if (filterForm.phone.trim()) {
|
||||
params.phone = filterForm.phone.trim();
|
||||
}
|
||||
if (filterForm.status) {
|
||||
params.status = filterForm.status;
|
||||
}
|
||||
|
||||
if (filterForm.text.trim()) params.text = filterForm.text.trim();
|
||||
if (filterForm.roleId) params.roleId = filterForm.roleId;
|
||||
if (filterForm.status) params.status = filterForm.status;
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
debouncedNickname.value.trim() !== '' ||
|
||||
debouncedPhone.value.trim() !== '' ||
|
||||
filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
const hasFilter = computed(
|
||||
() => debouncedText.value.trim() !== '' || filterForm.roleId !== '' || filterForm.status !== '',
|
||||
);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('用户列表查询参数:', queryParams);
|
||||
const res = await getUserList(queryParams);
|
||||
|
||||
const params = buildQueryParams();
|
||||
console.log('用户列表查询参数:', params);
|
||||
const res = await getUserList(params);
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('用户列表查询失败:', error);
|
||||
} else message.error(res.msg || '查询失败');
|
||||
} catch (e: any) {
|
||||
console.error('用户列表查询失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.nickname = '';
|
||||
filterForm.phone = '';
|
||||
filterForm.text = '';
|
||||
filterForm.roleId = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
|
||||
@@ -210,7 +210,7 @@ export default defineComponent({
|
||||
</div>
|
||||
<Select
|
||||
value={range.value}
|
||||
onUpdate:value={(val: string) => handleRangeChange(val)}
|
||||
onUpdate:value={handleRangeChange}
|
||||
options={[...RANGE_OPTIONS]}
|
||||
style={{ width: '120px' }}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { ref } from 'vue';
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
import { useState } from '@/hooks';
|
||||
|
||||
export type RangeValue = (typeof RANGE_OPTIONS)[number]['value'];
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
@@ -13,6 +16,10 @@ export const RANGE_OPTIONS = [
|
||||
{ value: 'year', label: '本年' },
|
||||
] as const;
|
||||
|
||||
function isRangeValue(val: SelectValue): val is RangeValue {
|
||||
return typeof val === 'string' && RANGE_OPTIONS.some((item) => item.value === val);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 假数据（数值自洽：总收入 - 总提现 = 平台余额）
|
||||
// ============================================================
|
||||
@@ -91,10 +98,11 @@ function formatMoney(n: number): string {
|
||||
*/
|
||||
export function useReportsModel() {
|
||||
// ===== 时间范围 =====
|
||||
const [range, setRange] = useState<string>('month');
|
||||
const [range, setRange] = useState<RangeValue>('month');
|
||||
|
||||
/** 切换时间范围（演示用：打日志，不改数据） */
|
||||
const handleRangeChange = (val: string) => {
|
||||
const handleRangeChange = (val: SelectValue) => {
|
||||
if (!isRangeValue(val)) return;
|
||||
setRange(val);
|
||||
// TODO: 接入 API 时按 range 重新拉取汇总 / 图表 / 明细
|
||||
};
|
||||
|
||||
@@ -24,6 +24,12 @@
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.treeEmpty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { useEffect } from '@/hooks';
|
||||
import { Modal, Form, Input, Tree, Button } from 'ant-design-vue';
|
||||
import { defineComponent, ref, reactive, watch } from 'vue';
|
||||
import { Modal, Form, Input, Tree, Button, Spin, message } from 'ant-design-vue';
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
import { roleNameRules, PERMISSION_TREE } from '../controller';
|
||||
import { getPermissionTree, type PermissionTreeNode } from '@/api/roles';
|
||||
import {
|
||||
roleNameRules,
|
||||
buildTreeData,
|
||||
extractLeafPermissions,
|
||||
type AntdTreeNode,
|
||||
} from '../controller';
|
||||
import styles from './RoleFormModal.module.less';
|
||||
|
||||
interface RoleFormModalProps {
|
||||
@@ -17,21 +22,9 @@ interface RoleFormModalProps {
|
||||
const getDefaultForm = () => ({
|
||||
roleName: '',
|
||||
checkedKeys: [] as string[],
|
||||
halfCheckedKeys: [] as string[],
|
||||
});
|
||||
|
||||
/** 编辑模式默认勾选：所有权限（演示用） */
|
||||
const ALL_KEYS = (() => {
|
||||
const keys: string[] = [];
|
||||
const walk = (nodes: any[]) => {
|
||||
for (const n of nodes) {
|
||||
keys.push(n.key);
|
||||
if (n.children?.length) walk(n.children);
|
||||
}
|
||||
};
|
||||
walk(PERMISSION_TREE);
|
||||
return keys;
|
||||
})();
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RoleFormModal',
|
||||
props: {
|
||||
@@ -45,34 +38,68 @@ export default defineComponent({
|
||||
const formRef = ref<any>();
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
// 权限树数据 & 加载状态
|
||||
const treeData = ref<AntdTreeNode[]>([]);
|
||||
const treeLoading = ref(false);
|
||||
// 保存从 API 获取的原始树，提交时用于提取叶节点
|
||||
const rawApiTree = ref<PermissionTreeNode[]>([]);
|
||||
|
||||
// ===== 加载权限树 =====
|
||||
const loadPermissionTree = async (roleId: number | string) => {
|
||||
treeLoading.value = true;
|
||||
try {
|
||||
const res = await getPermissionTree(roleId);
|
||||
if (res.code === 200 && res.data) {
|
||||
rawApiTree.value = res.data;
|
||||
const result = buildTreeData(res.data);
|
||||
treeData.value = result.treeData;
|
||||
// checkedKeys 由叶节点 selected 推导，antd Tree checkStrictly=false 时自动级联
|
||||
formData.checkedKeys = result.checkedKeys;
|
||||
} else {
|
||||
message.error(res.msg || '获取权限树失败');
|
||||
}
|
||||
} catch {
|
||||
// 网络层已统一提示，不再重复 message.error
|
||||
} finally {
|
||||
treeLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const initFormFromRecord = async (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
// 新增模式：加载权限树（不传 roleId，后端返回全量未选中树）
|
||||
Object.assign(formData, fresh);
|
||||
await loadPermissionTree(0);
|
||||
return;
|
||||
}
|
||||
// 编辑模式：回填角色名 + 加载该角色的权限树
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
roleName: record.roleName || '',
|
||||
// 编辑时默认全选（演示用，后续应按 record.permissions 回填）
|
||||
checkedKeys: [...ALL_KEYS],
|
||||
});
|
||||
await loadPermissionTree(record.roleId);
|
||||
};
|
||||
|
||||
/** 监听 visible 重置 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
initFormFromRecord(props.record);
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
// 监听 visible 变化，弹窗打开时重新初始化
|
||||
// immediate: true 是因为父组件用 v-if 控制显隐，
|
||||
// 组件挂载时 visible 就已经是 true，不会触发 watch 变更回调
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (visible) {
|
||||
await initFormFromRecord(props.record);
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/** Tree 勾选回调（受控） */
|
||||
const handleCheck: TreeProps['onCheck'] = (checked) => {
|
||||
// checked 可能是 { checked: string[], halfChecked: string[] } 或 string[]
|
||||
const keys = Array.isArray(checked) ? checked : (checked as any).checked;
|
||||
formData.checkedKeys = keys as string[];
|
||||
const handleCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
|
||||
formData.checkedKeys = checkedKeys as string[];
|
||||
formData.halfCheckedKeys = (info as any).halfCheckedKeys || [];
|
||||
};
|
||||
|
||||
/** 提交 */
|
||||
@@ -82,9 +109,19 @@ export default defineComponent({
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
const isEdit = !!props.record;
|
||||
// 仅提取叶节点 { id, selected } 传给后端
|
||||
const leafPermissions = extractLeafPermissions(rawApiTree.value);
|
||||
|
||||
props.onSave({
|
||||
roleName: formData.roleName,
|
||||
roleId: props.record?.roleId,
|
||||
// 完整选中 key 列表（含父节点），供向后兼容
|
||||
permissions: formData.checkedKeys,
|
||||
// 仅叶节点数据，后端实际需要的格式
|
||||
leafPermissions,
|
||||
isEdit,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -116,15 +153,21 @@ export default defineComponent({
|
||||
|
||||
{/* 菜单权限配置 */}
|
||||
<Form.Item label="菜单权限配置" name="permissions">
|
||||
<div class={styles.treeWrapper}>
|
||||
<Tree
|
||||
checkable
|
||||
defaultExpandAll
|
||||
treeData={PERMISSION_TREE as any}
|
||||
checkedKeys={formData.checkedKeys}
|
||||
onCheck={handleCheck as any}
|
||||
/>
|
||||
</div>
|
||||
<Spin spinning={treeLoading.value}>
|
||||
<div class={styles.treeWrapper}>
|
||||
{treeData.value.length > 0 ? (
|
||||
<Tree
|
||||
checkable
|
||||
defaultExpandAll
|
||||
treeData={treeData.value}
|
||||
checkedKeys={formData.checkedKeys}
|
||||
onCheck={handleCheck}
|
||||
/>
|
||||
) : (
|
||||
!treeLoading.value && <div class={styles.treeEmpty}>暂无权限数据</div>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
|
||||
@@ -1,13 +1,21 @@
|
||||
import { defineComponent, ref, reactive, computed } from 'vue';
|
||||
import { Modal, Form, Input, Table, Button, Space, Pagination } from 'ant-design-vue';
|
||||
import { useEffect, useState } from '@/hooks';
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { Modal, Form, Input, Table, Button, Space, Pagination, message } from 'ant-design-vue';
|
||||
import { h } from 'vue';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useThrottleFn, useEffect } from '@/hooks';
|
||||
import { getRoleUsageUserList, type RoleUsageUserVO } from '@/api/roles';
|
||||
import styles from './UserListModal.module.less';
|
||||
|
||||
/** 状态映射 */
|
||||
const STATUS_MAP: Record<number, { label: string; tone: StatusTagTone }> = {
|
||||
1: { label: '正常', tone: 'success' },
|
||||
0: { label: '停用', tone: 'danger' },
|
||||
};
|
||||
|
||||
interface UserListModalProps {
|
||||
visible: boolean;
|
||||
role: any;
|
||||
users: any[];
|
||||
renderStatus: (status: string) => any;
|
||||
roleId: number;
|
||||
roleName: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
@@ -15,123 +23,155 @@ export default defineComponent({
|
||||
name: 'RoleUserListModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
role: { type: Object, default: null },
|
||||
users: { type: Array, default: () => [] },
|
||||
renderStatus: { type: Function, required: true },
|
||||
roleId: { type: Number, default: 0 },
|
||||
roleName: { type: String, default: '' },
|
||||
onClose: { type: Function, required: true },
|
||||
},
|
||||
setup(props: UserListModalProps) {
|
||||
const filterForm = reactive({ searchKeyword: '' });
|
||||
|
||||
const filterForm = reactive({ text: '' });
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<RoleUsageUserVO[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
/** 过滤后的用户列表 */
|
||||
const filteredUsers = computed(() => {
|
||||
const kw = filterForm.searchKeyword.trim();
|
||||
if (!kw) return props.users;
|
||||
return props.users.filter(
|
||||
(u: any) => u.realName.includes(kw) || (u.phone && u.phone.includes(kw)),
|
||||
);
|
||||
});
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 160 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: number }) => {
|
||||
const info = STATUS_MAP[text] || { label: String(text ?? '-'), tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** 监听 visible/users 变化重置分页 */
|
||||
/** 搜索（节流 500ms） */
|
||||
const doSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getRoleUsageUserList({
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
roleId: String(props.roleId),
|
||||
...(filterForm.text.trim() ? { text: filterForm.text.trim() } : {}),
|
||||
});
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('角色用户列表查询失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 弹窗打开时自动加载 */
|
||||
useEffect(() => {
|
||||
setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.length });
|
||||
}, [() => props.visible, () => props.users.length]);
|
||||
if (props.visible) {
|
||||
filterForm.text = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
doSearch();
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 查询（重置到第 1 页） */
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination.value, total: filteredUsers.value.length, current: 1 });
|
||||
setPagination({ ...pagination.value, current: 1 });
|
||||
doSearch();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
filterForm.searchKeyword = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: props.users.length });
|
||||
};
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.text = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
doSearch();
|
||||
}, 500);
|
||||
|
||||
/** 分页变更 */
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
doSearch();
|
||||
};
|
||||
|
||||
return () => {
|
||||
const roleName = props.role?.roleName || '';
|
||||
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 160 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => props.renderStatus(text),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${roleName} · 用户列表`}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={640}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
wrapClassName={styles.userListModalMain}
|
||||
>
|
||||
{/* 筛选 */}
|
||||
<div class={styles.filter}>
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form.Item label="姓名/手机号" name="searchKeyword">
|
||||
<Input
|
||||
placeholder="姓名/手机号..."
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredUsers.value}
|
||||
size="small"
|
||||
pagination={false}
|
||||
bordered
|
||||
rowKey="key"
|
||||
/>
|
||||
|
||||
{/* 底部：共 X 人 + 关闭按钮 */}
|
||||
<div class={styles.bottom}>
|
||||
<div class={styles.total}>共 {filteredUsers.value.length} 人</div>
|
||||
<Button onClick={props.onClose}>关闭</Button>
|
||||
</div>
|
||||
|
||||
{/* 分页（右侧） */}
|
||||
{filteredUsers.value.length > pagination.value.pageSize && (
|
||||
<div class={styles.paginationRow}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={filteredUsers.value.length}
|
||||
size="small"
|
||||
onChange={handlePageChange}
|
||||
return () => (
|
||||
<Modal
|
||||
title={`${props.roleName} · 用户列表`}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={640}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
wrapClassName={styles.userListModalMain}
|
||||
>
|
||||
{/* 筛选 */}
|
||||
<div class={styles.filter}>
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form.Item label="姓名/手机号" name="text">
|
||||
<Input
|
||||
value={filterForm.text}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.text = val?.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ y: 300 }}
|
||||
size="small"
|
||||
pagination={false}
|
||||
bordered
|
||||
rowKey="phone"
|
||||
/>
|
||||
|
||||
{/* 底部 */}
|
||||
<div class={styles.bottom}>
|
||||
<div class={styles.total}>共 {pagination.value.total} 人</div>
|
||||
<Button onClick={props.onClose}>关闭</Button>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{pagination.value.total > pagination.value.pageSize && (
|
||||
<div class={styles.paginationRow}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
size="small"
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/**
|
||||
* 角色权限 - 表单域控制器
|
||||
*
|
||||
* 集中管理角色表单的规则、菜单权限树 mock 数据与提示文案。
|
||||
* 集中管理角色表单的规则、权限树转换工具。
|
||||
*/
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import type { PermissionTreeNode } from '@/api/roles';
|
||||
|
||||
// ============================================================
|
||||
// 规则
|
||||
@@ -16,50 +17,82 @@ export const roleNameRules: Rule[] = [
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 菜单权限树（mock）
|
||||
// 权限树 — 类型 & 工具
|
||||
// ============================================================
|
||||
|
||||
export interface MenuPermNode {
|
||||
/** 唯一 key，作为 Tree 节点的 key */
|
||||
/** Ant Design Tree 组件使用的节点结构 */
|
||||
export interface AntdTreeNode {
|
||||
key: string;
|
||||
/** 显示标题 */
|
||||
title: string;
|
||||
/** 子节点 */
|
||||
children?: MenuPermNode[];
|
||||
children?: AntdTreeNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 完整菜单权限树。
|
||||
* 后续可改为从后端接口拉取（接口应返回该结构）。
|
||||
* 将后端权限树节点递归转为 antd Tree 格式，
|
||||
* 同时收集叶节点中 selected===true 的 key。
|
||||
*
|
||||
* ## 级联规则
|
||||
* - `selected` 仅叶节点有实际值（true / false / null）
|
||||
* - 父节点的勾选状态由子节点的 selected 推导（全选=勾选，部分选=半选）
|
||||
* - antd Tree 的 checkedKeys 传所有选中的 key（含父节点），Tree 自动处理级联
|
||||
*/
|
||||
export const PERMISSION_TREE: MenuPermNode[] = [
|
||||
{
|
||||
key: 'events',
|
||||
title: '赛事管理',
|
||||
children: [
|
||||
{
|
||||
key: 'events.list',
|
||||
title: '赛事列表',
|
||||
children: [
|
||||
{ key: 'events.list.view', title: '赛事列表-查看' },
|
||||
{ key: 'events.list.on', title: '赛事列表-上架' },
|
||||
{ key: 'events.list.off', title: '赛事列表-下架' },
|
||||
{ key: 'events.rules.view', title: '赛事规程-查看' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
title: '订单管理',
|
||||
children: [
|
||||
{ key: 'orders.view', title: '订单管理-查看' },
|
||||
{ key: 'orders.refund', title: '订单管理-重新退款' },
|
||||
],
|
||||
},
|
||||
{ key: 'users', title: '用户列表' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'events_logs',
|
||||
title: '赛事操作日志',
|
||||
},
|
||||
];
|
||||
function convertNode(node: PermissionTreeNode, leafKeys: Set<string>): AntdTreeNode {
|
||||
const key = String(node.id);
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
|
||||
if (!hasChildren) {
|
||||
// 叶节点：根据 selected 收集
|
||||
if (node.selected === true) {
|
||||
leafKeys.add(key);
|
||||
}
|
||||
return { key, title: node.name };
|
||||
}
|
||||
|
||||
// 父节点：递归处理子节点
|
||||
const children = node.children!.map((child) => convertNode(child, leafKeys));
|
||||
return { key, title: node.name, children };
|
||||
}
|
||||
|
||||
/**
|
||||
* 将后端 PermissionTreeNode[] 转为：
|
||||
* 1. antd Tree 可用的 treeData
|
||||
* 2. 由叶节点 selected 推导出的完整 checkedKeys（含父节点）
|
||||
*/
|
||||
export function buildTreeData(apiTree: PermissionTreeNode[]): {
|
||||
treeData: AntdTreeNode[];
|
||||
checkedKeys: string[];
|
||||
} {
|
||||
const leafKeys = new Set<string>();
|
||||
const treeData = apiTree.map((node) => convertNode(node, leafKeys));
|
||||
return { treeData, checkedKeys: Array.from(leafKeys) };
|
||||
}
|
||||
|
||||
/**
|
||||
* 从后端权限树中提取叶节点数据，整理为提交格式。
|
||||
*
|
||||
* 只返回叶节点，格式为 `{ id, selected }` 数组。
|
||||
* 父节点的勾选状态由后端根据叶节点数据推导，前端不传父节点。
|
||||
*/
|
||||
export function extractLeafPermissions(
|
||||
apiTree: PermissionTreeNode[],
|
||||
): { id: number; selected: boolean }[] {
|
||||
const result: { id: number; selected: boolean }[] = [];
|
||||
|
||||
const walk = (nodes: PermissionTreeNode[]) => {
|
||||
for (const node of nodes) {
|
||||
const isLeaf = !node.children || node.children.length === 0;
|
||||
if (isLeaf) {
|
||||
result.push({
|
||||
id: node.id,
|
||||
// null 视为 false，即未授权
|
||||
selected: node.selected === true,
|
||||
});
|
||||
} else {
|
||||
walk(node.children!);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
walk(apiTree);
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
|
||||
import type { ModalProps } from 'ant-design-vue';
|
||||
import { useRoleModel } from './model/useRoleModel';
|
||||
@@ -97,8 +97,6 @@ export default defineComponent({
|
||||
handleDelete,
|
||||
handleViewUsers,
|
||||
handleCloseUserList,
|
||||
getRoleUsers,
|
||||
renderStatus,
|
||||
} = useRoleModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
@@ -116,16 +114,23 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
// ===== 初始化 =====
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="角色" name="searchKeyword">
|
||||
<Form.Item label="角色名称" name="name">
|
||||
<Input
|
||||
placeholder="请输入"
|
||||
value={filterForm.name}
|
||||
placeholder="请输入角色名称"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.name = val?.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -194,9 +199,8 @@ export default defineComponent({
|
||||
{userListVisible.value && (
|
||||
<UserListModal
|
||||
visible={userListVisible.value}
|
||||
role={currentRole.value}
|
||||
users={getRoleUsers(currentRole.value?.roleId || '')}
|
||||
renderStatus={renderStatus}
|
||||
roleId={currentRole.value?.roleId ?? 0}
|
||||
roleName={currentRole.value?.roleName ?? ''}
|
||||
onClose={handleCloseUserList}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,152 +1,12 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { computed, reactive, toRef, Ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = [
|
||||
{
|
||||
key: '1',
|
||||
roleId: 'R20250601001',
|
||||
roleName: '超级管理员',
|
||||
userCount: 1,
|
||||
createTime: '2025-06-01 09:00:00',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
roleId: 'R20250815001',
|
||||
roleName: '运营管理员',
|
||||
userCount: 3,
|
||||
createTime: '2025-08-15 14:30:00',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
roleId: 'R20251010001',
|
||||
roleName: '财务',
|
||||
userCount: 2,
|
||||
createTime: '2025-10-10 10:15:00',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
roleId: 'R20260120001',
|
||||
roleName: '客服',
|
||||
userCount: 4,
|
||||
createTime: '2026-01-20 16:00:00',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 临时排序：对假数据按创建时间倒序排列。
|
||||
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
|
||||
*/
|
||||
const sortByTimeDesc = (list: any[], field: string) =>
|
||||
[...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
|
||||
|
||||
const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
|
||||
/** 角色下用户列表 mock */
|
||||
const MOCK_USERS: Record<string, any[]> = {
|
||||
R20250601001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U001',
|
||||
realName: '张超管',
|
||||
phone: '13900000001',
|
||||
createTime: '2025-06-01 09:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
R20250815001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U002',
|
||||
realName: '李运营',
|
||||
phone: '15900000002',
|
||||
createTime: '2026-01-10 16:00:00',
|
||||
status: 'disabled',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U003',
|
||||
realName: '王运营',
|
||||
phone: '15900000001',
|
||||
createTime: '2025-10-20 10:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
userId: 'U004',
|
||||
realName: '张运营',
|
||||
phone: '13900000002',
|
||||
createTime: '2025-08-15 14:30:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
R20251010001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U005',
|
||||
realName: '赵财务',
|
||||
phone: '13800000005',
|
||||
createTime: '2025-10-10 10:15:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U006',
|
||||
realName: '钱财务',
|
||||
phone: '13800000006',
|
||||
createTime: '2025-10-12 11:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
R20260120001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U007',
|
||||
realName: '孙客服',
|
||||
phone: '13700000007',
|
||||
createTime: '2026-01-20 16:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U008',
|
||||
realName: '周客服',
|
||||
phone: '13700000008',
|
||||
createTime: '2026-01-21 09:30:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
userId: 'U009',
|
||||
realName: '吴客服',
|
||||
phone: '13700000009',
|
||||
createTime: '2026-01-22 10:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
userId: 'U010',
|
||||
realName: '郑客服',
|
||||
phone: '13700000010',
|
||||
createTime: '2026-01-23 14:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 状态文本/颜色映射
|
||||
// ============================================================
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
active: { label: '正常', tone: 'success' },
|
||||
disabled: { label: '禁用', tone: 'danger' },
|
||||
};
|
||||
import {
|
||||
getRoleList,
|
||||
deleteRole,
|
||||
type TournamentAdminRolePageVO,
|
||||
type RoleListQueryParams,
|
||||
} from '@/api/roles';
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
@@ -158,23 +18,17 @@ const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
export function useRoleModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchKeyword: '',
|
||||
name: '', // 角色名称
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedKeyword } = useDebounce(
|
||||
toRef(filterForm, 'searchKeyword') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedName } = useDebounce(toRef(filterForm, 'name') as Ref<string>, {
|
||||
delay: 300,
|
||||
});
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: SORTED_MOCK_DATA.length,
|
||||
});
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminRolePageVO[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [formVisible, setFormVisible] = useState<boolean>(false);
|
||||
@@ -199,34 +53,48 @@ export function useRoleModel() {
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => debouncedKeyword.value.trim() !== '');
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): RoleListQueryParams => {
|
||||
const params: RoleListQueryParams = {
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
};
|
||||
if (filterForm.name.trim()) params.name = filterForm.name.trim();
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => debouncedName.value.trim() !== '');
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', { keyword: debouncedKeyword.value });
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('角色列表查询参数:', queryParams);
|
||||
const res = await getRoleList(queryParams);
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
console.error('角色列表查询失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
/** 重置（重置后自动查询） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchKeyword = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
filterForm.name = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
setTimeout(() => handleSearch(), 350);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
@@ -258,12 +126,12 @@ export function useRoleModel() {
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
console.log(isEdit.value ? '编辑角色' : '新增角色', formPayload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
// TODO: 替换为真实 API 调用（/sys/role/save、/sys/role/update）
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseForm();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} catch {
|
||||
// 网络层已统一提示，不再重复 message.error
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
@@ -273,12 +141,15 @@ export function useRoleModel() {
|
||||
const handleDelete = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('删除角色:', record.roleId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(dataSource.value.filter((item: any) => item.key !== record.key));
|
||||
message.success('删除成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '删除失败');
|
||||
const res = await deleteRole(record.roleId);
|
||||
if (res.code === 200) {
|
||||
setDataSource(dataSource.value.filter((item: any) => item.roleId !== record.roleId));
|
||||
message.success('删除成功');
|
||||
} else {
|
||||
message.error(res.msg || '删除失败');
|
||||
}
|
||||
} catch {
|
||||
// 网络层已统一提示，不再重复 message.error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -296,15 +167,6 @@ export function useRoleModel() {
|
||||
setCurrentRole(null);
|
||||
};
|
||||
|
||||
/** 根据 roleId 获取该角色下的用户列表 */
|
||||
const getRoleUsers = (roleId: string) => MOCK_USERS[roleId] || [];
|
||||
|
||||
/** 状态 StatusTag 渲染 */
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
@@ -328,7 +190,5 @@ export function useRoleModel() {
|
||||
handleDelete,
|
||||
handleViewUsers,
|
||||
handleCloseUserList,
|
||||
getRoleUsers,
|
||||
renderStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -26,7 +26,17 @@ const getDefaultForm = () => ({
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
role: '',
|
||||
roleId: undefined,
|
||||
});
|
||||
|
||||
/** 新增用户默认密码 */
|
||||
const DEFAULT_USER_PASSWORD = 'yp888888';
|
||||
|
||||
/** 获取新增时的表单初始值（预填默认密码） */
|
||||
const getAddForm = () => ({
|
||||
...getDefaultForm(),
|
||||
password: DEFAULT_USER_PASSWORD,
|
||||
confirmPassword: DEFAULT_USER_PASSWORD,
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
@@ -47,17 +57,18 @@ export default defineComponent({
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
// 新增：预填默认密码 + 确认密码
|
||||
Object.assign(formData, getAddForm());
|
||||
setIsResetting(false);
|
||||
return;
|
||||
}
|
||||
const fresh = getDefaultForm();
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
realName: record.realName || '',
|
||||
phone: record.phone || '',
|
||||
role: record.role || '',
|
||||
roleId: record.roleId || undefined,
|
||||
});
|
||||
setIsResetting(false);
|
||||
};
|
||||
@@ -90,7 +101,7 @@ export default defineComponent({
|
||||
const payload: any = {
|
||||
realName: formData.realName,
|
||||
phone: formData.phone,
|
||||
role: formData.role,
|
||||
roleId: formData.roleId,
|
||||
};
|
||||
if (props.record) {
|
||||
if (isResetting.value) {
|
||||
@@ -159,11 +170,11 @@ export default defineComponent({
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色" name="role" rules={roleRules} class={styles.col}>
|
||||
<Form.Item label="角色" name="roleId" rules={roleRules} class={styles.col}>
|
||||
<Select
|
||||
options={ROLE_FORM_OPTIONS as any}
|
||||
placeholder="请选择角色"
|
||||
v-model:value={formData.role}
|
||||
v-model:value={formData.roleId}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
@@ -197,11 +208,11 @@ export default defineComponent({
|
||||
</Form.Item>
|
||||
</div>
|
||||
{/* 角色：单独一行 */}
|
||||
<Form.Item label="角色" name="role" rules={roleRules}>
|
||||
<Form.Item label="角色" name="roleId" rules={roleRules}>
|
||||
<Select
|
||||
options={ROLE_FORM_OPTIONS as any}
|
||||
placeholder="请选择角色"
|
||||
v-model:value={formData.role}
|
||||
v-model:value={formData.roleId}
|
||||
style={{ width: '200px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -14,11 +14,12 @@ import { isChinaPhone, isValidPassword, isValidRealName } from '@/utils/form';
|
||||
/** 密码占位符（写死长度，避免暴露真实密码长度） */
|
||||
export const PASSWORD_PLACEHOLDER = '********';
|
||||
|
||||
/** 角色下拉选项（表单使用） */
|
||||
/** 角色下拉选项（表单使用，value 对应 API roleId） */
|
||||
export const ROLE_FORM_OPTIONS = [
|
||||
{ value: 'admin', label: '超级管理员' },
|
||||
{ value: 'operator', label: '运营人员' },
|
||||
{ value: 'auditor', label: '审核人员' },
|
||||
{ value: '1', label: '超级管理员' },
|
||||
{ value: '2', label: '赛事管理员' },
|
||||
{ value: '3', label: '裁判' },
|
||||
{ value: '4', label: '财务' },
|
||||
] as const;
|
||||
|
||||
// ============================================================
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
|
||||
import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Modal,
|
||||
Pagination,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
import { useUserModel, ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { toggleUserActive, saveUser, updateUser } from '@/api/users';
|
||||
import { useState, useThrottleFn, useContainerSize } from '@/hooks';
|
||||
import UserFormModal from './components/UserFormModal';
|
||||
import pageStyles from '@/assets/styles/pageLayout.module.less';
|
||||
|
||||
@@ -22,14 +33,14 @@ function renderBodyCell({
|
||||
}) {
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === 'active';
|
||||
const isActive = record.status === '1';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
{isActive ? '停用' : '启用'}
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
@@ -37,29 +48,6 @@ function renderBodyCell({
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 禁用/启用 二次确认弹窗
|
||||
*/
|
||||
function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any) => void }) {
|
||||
const isActive = record.status === 'active';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `确认${actionText}`,
|
||||
class: 'toggleConfirmModal',
|
||||
content: (
|
||||
<div class={pageStyles.confirmContent}>
|
||||
<span>确定要{actionText}用户</span>
|
||||
<strong>{record.realName}</strong>
|
||||
<span>吗？</span>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: isActive },
|
||||
onOk: () => onOk(record),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统管理 - 用户管理
|
||||
*/
|
||||
@@ -72,33 +60,110 @@ export default defineComponent({
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
modalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleToggleStatus,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
/** 触发禁用/启用的二次确认 */
|
||||
const triggerToggle = (record: any) => {
|
||||
confirmToggleStatus({ record, onOk: handleToggleStatus });
|
||||
// ===== 弹窗状态（组件级） =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 启用/禁用（使用真实 API） =====
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
const isActive = record.status === '1';
|
||||
const actionText = isActive ? '停用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: (
|
||||
<div class={pageStyles.confirmContent}>
|
||||
<span>确定要{actionText}用户</span>
|
||||
<strong>{record.realName}</strong>
|
||||
<span>吗？</span>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: isActive },
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await toggleUserActive({
|
||||
userId: record.id,
|
||||
status: isActive ? '0' : '1',
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`);
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error(`用户${actionText}失败:`, e);
|
||||
}
|
||||
},
|
||||
});
|
||||
}, 500);
|
||||
|
||||
// ===== 新增/编辑（组件级） =====
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 触发编辑 */
|
||||
const triggerEdit = (record: any) => {
|
||||
handleEdit(record);
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 表格最终列：模型列 + 操作 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
let res: any;
|
||||
if (editingRecord.value) {
|
||||
// 编辑：调用更新接口
|
||||
res = await updateUser({
|
||||
id: editingRecord.value.id,
|
||||
realName: formPayload.realName,
|
||||
phone: formPayload.phone,
|
||||
roleId: formPayload.roleId,
|
||||
...(formPayload.password
|
||||
? { password: formPayload.password, confirmPassword: formPayload.password }
|
||||
: {}),
|
||||
});
|
||||
} else {
|
||||
// 新增：调用保存接口
|
||||
res = await saveUser({
|
||||
realName: formPayload.realName,
|
||||
phone: formPayload.phone,
|
||||
roleId: formPayload.roleId,
|
||||
password: formPayload.password,
|
||||
confirmPassword: formPayload.password,
|
||||
});
|
||||
}
|
||||
if (res.code === 200) {
|
||||
message.success(editingRecord.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('保存用户失败:', error);
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// ===== 表格最终列 =====
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
@@ -110,26 +175,34 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
// ===== 初始化 =====
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户" name="searchKeyword">
|
||||
<Form.Item label="用户姓名/手机号" name="text">
|
||||
<Input
|
||||
placeholder="请输入姓名/手机号"
|
||||
value={filterForm.text}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.text = val?.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色" name="role">
|
||||
<Form.Item label="角色" name="roleId">
|
||||
<Select
|
||||
value={filterForm.role}
|
||||
options={USER_ROLE_OPTIONS as any}
|
||||
value={filterForm.roleId}
|
||||
options={ROLE_OPTIONS as any}
|
||||
style={{ width: '140px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.role = val || '')}
|
||||
placeholder="全部"
|
||||
onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
@@ -169,8 +242,8 @@ export default defineComponent({
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onEdit: triggerEdit,
|
||||
onToggleStatus: triggerToggle,
|
||||
onEdit: handleEdit,
|
||||
onToggleStatus: handleToggleStatus,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
|
||||
@@ -1,73 +1,35 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
import { getUserList, type TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 角色选项（筛选） */
|
||||
export const USER_ROLE_OPTIONS = [
|
||||
export const ROLE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'admin', label: '管理员' },
|
||||
{ value: '1', label: '超级管理员' },
|
||||
{ value: '2', label: '赛事管理员' },
|
||||
{ value: '3', label: '裁判' },
|
||||
{ value: '4', label: '财务' },
|
||||
] as const;
|
||||
|
||||
/** 状态选项（筛选） */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'active', label: '正常' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
{ value: '0', label: '停用' },
|
||||
{ value: '1', label: '正常' },
|
||||
] as const;
|
||||
|
||||
/** 角色文本/色调映射（表格渲染） */
|
||||
const ROLE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
admin: { label: '管理员', tone: 'primary' },
|
||||
operator: { label: '运营人员', tone: 'cyan' },
|
||||
auditor: { label: '审核人员', tone: 'purple' },
|
||||
};
|
||||
|
||||
/** 状态文本/色调映射 */
|
||||
/** 状态文本/色调映射（表格渲染），对应 API status 字段：0=停用、1=正常 */
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
active: { label: '正常', tone: 'success' },
|
||||
disabled: { label: '禁用', tone: 'danger' },
|
||||
'1': { label: '正常', tone: 'success' },
|
||||
'0': { label: '停用', tone: 'danger' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U20260526001',
|
||||
realName: '张三',
|
||||
phone: '15585658975',
|
||||
role: 'admin',
|
||||
status: 'active' as 'active' | 'disabled',
|
||||
createTime: '2026.05.26 08:00:00',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U20260526002',
|
||||
realName: '王五',
|
||||
phone: '13800138000',
|
||||
role: 'admin',
|
||||
status: 'disabled' as 'active' | 'disabled',
|
||||
createTime: '2026.05.26 14:00:00',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 临时排序：对假数据按创建时间倒序排列。
|
||||
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
|
||||
*/
|
||||
const sortByTimeDesc = (list: any[], field: string) =>
|
||||
[...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
|
||||
|
||||
const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
@@ -78,47 +40,30 @@ const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchKeyword: '', // 用户名/手机号
|
||||
role: '' as '' | 'admin',
|
||||
status: '' as '' | 'active' | 'disabled',
|
||||
text: '', // 用户姓名/手机号
|
||||
roleId: '', // 角色ID
|
||||
status: '' as '' | '0' | '1',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedKeyword } = useDebounce(
|
||||
toRef(filterForm, 'searchKeyword') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
// 文本筛选防抖 300ms
|
||||
const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
|
||||
delay: 300,
|
||||
});
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: SORTED_MOCK_DATA.length,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 提交态 =====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'role',
|
||||
key: 'role',
|
||||
width: 120,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = ROLE_MAP[text] || { label: text || '-', tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
},
|
||||
},
|
||||
{ title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
@@ -133,107 +78,64 @@ export function useUserModel() {
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
|
||||
];
|
||||
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): UserListQueryParams => {
|
||||
const params: UserListQueryParams = {
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
};
|
||||
if (filterForm.text.trim()) params.text = filterForm.text.trim();
|
||||
if (filterForm.roleId) params.roleId = filterForm.roleId;
|
||||
if (filterForm.status) params.status = filterForm.status;
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
debouncedKeyword.value.trim() !== '' || filterForm.role !== '' || filterForm.status !== ''
|
||||
debouncedText.value.trim() !== '' || filterForm.roleId !== '' || filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
keyword: debouncedKeyword.value,
|
||||
role: filterForm.role,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('用户列表查询参数:', queryParams);
|
||||
const res = await getUserList(queryParams);
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
console.error('用户列表查询失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
/** 重置（节流 500ms，重置后自动查询） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchKeyword = '';
|
||||
filterForm.role = '';
|
||||
filterForm.text = '';
|
||||
filterForm.roleId = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
// 等待 debounce(300ms) 生效后自动查询
|
||||
setTimeout(() => handleSearch(), 350);
|
||||
}, 500);
|
||||
|
||||
/** 分页变更 */
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 打开新增弹窗 */
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 打开编辑弹窗 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭弹窗 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
/** 提交表单（新增/编辑） */
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
console.log(isEdit.value ? '编辑用户' : '新增用户', formPayload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'active' ? 'disabled' : 'active';
|
||||
const actionText = newStatus === 'active' ? '启用' : '禁用';
|
||||
console.log(`${actionText}用户:`, record.userId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
@@ -241,18 +143,8 @@ export function useUserModel() {
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
modalVisible,
|
||||
setModalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleToggleStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -31,3 +31,103 @@ function buildTree(parentCode: string): CascadeOption[] {
|
||||
|
||||
/** 省市区三级联动数据 */
|
||||
export const regionOptions: CascadeOption[] = buildTree('86');
|
||||
|
||||
// ============================================================
|
||||
// 省市选项（精确到市，直辖市仅市名）
|
||||
// ============================================================
|
||||
|
||||
/** 直辖市代码 */
|
||||
const MUNICIPALITY_CODES = ['110000', '120000', '310000', '500000'];
|
||||
|
||||
/** 省市选项 */
|
||||
export interface ProvinceCityOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取"省-市"格式的选项列表
|
||||
* - 普通省份：格式为 "省名-市名"，如 "广东省-深圳市"
|
||||
* - 直辖市：直接使用市名，如 "北京市"
|
||||
*/
|
||||
export function getProvinceCityOptions(): ProvinceCityOption[] {
|
||||
const options: ProvinceCityOption[] = [];
|
||||
const provinces = areaData['86'];
|
||||
if (!provinces) return options;
|
||||
|
||||
for (const [provinceCode, provinceName] of Object.entries(provinces)) {
|
||||
const pname = provinceName as string;
|
||||
|
||||
if (MUNICIPALITY_CODES.includes(provinceCode)) {
|
||||
options.push({ value: pname, label: pname });
|
||||
} else {
|
||||
const cities = areaData[provinceCode];
|
||||
if (cities) {
|
||||
for (const [, cityName] of Object.entries(cities)) {
|
||||
const fullName = `${pname}-${cityName}`;
|
||||
options.push({ value: fullName, label: fullName });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
/** Cascader 节点 */
|
||||
export interface CascaderNode {
|
||||
value: string;
|
||||
label: string;
|
||||
children?: CascaderNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取省市两级 Cascader 选项
|
||||
* - 普通省份：省 → 市，选中值 ["省名", "市名"]
|
||||
* - 直辖市：直接叶子节点，选中值 ["市名"]
|
||||
*/
|
||||
export function getProvinceCityCascaderOptions(): CascaderNode[] {
|
||||
const nodes: CascaderNode[] = [];
|
||||
const provinces = areaData['86'];
|
||||
if (!provinces) return nodes;
|
||||
|
||||
for (const [provinceCode, provinceName] of Object.entries(provinces)) {
|
||||
const pname = provinceName as string;
|
||||
|
||||
if (MUNICIPALITY_CODES.includes(provinceCode)) {
|
||||
// 直辖市：直接作为叶子节点
|
||||
nodes.push({ value: pname, label: pname });
|
||||
} else {
|
||||
const cities = areaData[provinceCode];
|
||||
if (cities) {
|
||||
const cityNodes: CascaderNode[] = Object.entries(cities).map(([, cname]) => ({
|
||||
value: cname as string,
|
||||
label: cname as string,
|
||||
}));
|
||||
nodes.push({ value: pname, label: pname, children: cityNodes });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 Cascader 选中的路径数组转为存储用的区域字符串
|
||||
* ["广东省", "深圳市"] → "广东省-深圳市"
|
||||
* ["北京市"] → "北京市"
|
||||
*/
|
||||
export function formatCascaderArea(path: string[]): string {
|
||||
if (!path || path.length === 0) return '';
|
||||
return path.join('-');
|
||||
}
|
||||
|
||||
/**
|
||||
* 将存储的区域字符串反向解析为 Cascader 路径数组
|
||||
* "广东省-深圳市" → ["广东省", "深圳市"]
|
||||
* "北京市" → ["北京市"]
|
||||
*/
|
||||
export function parseAreaToCascaderPath(area: string): string[] {
|
||||
if (!area) return [];
|
||||
return area.split('-');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user