cpms_org/cpms_operation_platform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/0723/ZR' (#5) from feature/0723/ZR into release/0.01

Browse Source 
Reviewed-on: #5
This commit was merged in pull request #5.
This commit is contained in:
chenzhen
2026-07-30 17:06:05 +08:00
parent 715666b5b6 1638643811
commit c57273296f
55 changed files with 4503 additions and 1779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1 -2
View File
@@ -1,4 +1,3 @@
# 开发环境
VITE_PORT = 5173
VITE_API_BASE_URL = http://localhost:3000
VITE_API_PREFIX = /api
VITE_API_BASE_URL = http://localhost:3000/admin
.env.production
+1 -2
View File
@@ -1,3 +1,2 @@
# 生产环境
VITE_API_BASE_URL = https://api.cpms.example.com
VITE_API_PREFIX = /api
VITE_API_BASE_URL = https://api.cpms.example.com/admin
.env.test
+1 -2
View File
@@ -1,3 +1,2 @@
# 测试环境
VITE_API_BASE_URL = https://test-api.cpms.example.com
VITE_API_PREFIX = /api
VITE_API_BASE_URL = https://test-api.cpms.example.com/admin
src/api/banner/index.ts
+58
View File
@@ -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);
}
src/api/banner/types.ts
+53
View File
@@ -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;
}
src/api/events/index.ts
+100
View File
@@ -0,0 +1,100 @@
/**
* 赛事管理 API
* 注意：/admin 前缀已通过 VITE_API_BASE_URL 统一注入（见 .env.*），此文件中只写业务路径。
*/
import { get, post } from '@/utils/request';
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
import { MOCK_EVENT_DETAIL } from '@/config/mock/eventDetail';
import { buildMockEventListPage } from '@/config/mock/eventList';
import { buildMockSignupListPage } from '@/config/mock/eventSignup';
import type {
EventListQueryParams,
SignupListQueryParams,
ToggleOnlineParams,
ApiResult,
PageData,
TournamentAdminVO,
TournamentAdminInfoVO,
TournamentAdminInfoSignupVO,
} from './types';
export type {
TournamentAdminVO,
TournamentAdminInfoVO,
TournamentAdminInfoSignupVO,
InnerCategoryVO,
EventListQueryParams,
SignupListQueryParams,
ToggleOnlineParams,
PageData,
ApiResult,
} from './types';
/** 模拟延时 */
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
/**
* 赛事列表 - 列表分页
* GET /admin/manager/tm/page → /manager/tm/page
*/
export async function getEventList(
params: EventListQueryParams,
): Promise<ApiResult<PageData<TournamentAdminVO>>> {
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: buildMockEventListPage(page, limit),
};
}
return get('/manager/tm/page', params as Record<string, any>);
}
/**
* 赛事列表 - 赛事详情
* GET /admin/manager/tm/info → /manager/tm/info
*/
export async function getEventDetail(id: string): Promise<ApiResult<TournamentAdminInfoVO>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
return {
code: 200,
msg: 'success',
data: { ...MOCK_EVENT_DETAIL },
};
}
return get('/manager/tm/info', { id });
}
/**
* 赛事列表 - 赛事详情 - 人员列表
* GET /admin/manager/tm/info/signupPage → /manager/tm/info/signupPage
*/
export async function getSignupList(
params: SignupListQueryParams,
): Promise<ApiResult<PageData<TournamentAdminInfoSignupVO>>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
return {
code: 200,
msg: 'success',
data: buildMockSignupListPage(params),
};
}
return get('/manager/tm/info/signupPage', params as Record<string, any>);
}
/**
* 赛事上架 / 下架
* POST /admin/manager/tm/online → /manager/tm/online
* @param params.id 赛事ID
* @param params.online 0=下架，1=上架
*/
export function toggleEventOnline(
params: ToggleOnlineParams,
): Promise<ApiResult<Record<string, never>>> {
return post('/manager/tm/online', params);
}
src/api/events/types.ts
+199
View File
@@ -0,0 +1,199 @@
/**
* 赛事管理 — 类型定义
* 对应 OpenAPI: /admin/manager/tm/page
*/
/** 赛事列表项 */
export interface TournamentAdminVO {
/** 赛事ID */
id: string;
/** 赛事名称 */
name: string;
/** 赛事开始时间 */
startTimeBegin: string;
/** 赛事结束时间 */
startTimeEnd: string;
/** 赛事省市区，场地区划名称 */
venueArea: string;
/** 赛事地点名称 */
venue: string;
/** 是否公开；0=非公开，1=公开 */
isPublic: string;
/** 是否要求提供证件图片；0=无需，1=需要 */
isRequireIdCardImg: string;
/** 是否要求提供证件号码；0=无需，1=需要 */
isRequireIdCardNo: string;
/** 创建人昵称 */
createNickname: string;
/** 创建人手机号 */
createPhone: string;
/** 创建时间 */
createTime: string;
/**
* 状态
* 优先级：del_flag==1 → 3(已删除)；online==0 → 4(已下架)；否则取 status
* 0=报名中，1=进行中，2=已结束，3=已删除，4=已下架
*/
status: string;
/** 报名人数 */
signupCount: string;
/** 退赛人数 */
dropoutCount: string;
/** 赛事规程 */
rulesDescr: string;
/** 赛事规程图片 */
rulesDescrImg: string;
/** 赛事规程图片数组 */
rulesDescrImgList: string[];
}
/** 赛事列表查询参数 */
export interface EventListQueryParams {
page?: string;
limit?: string;
/** 创建时间开始 yyyy-MM-dd */
createDate?: string;
/** 创建时间结束 yyyy-MM-dd */
createDateEnd?: string;
/** 赛事时间开始 yyyy-MM-dd */
startDate?: string;
/** 赛事时间结束 yyyy-MM-dd */
startDateEnd?: string;
/** 赛事名称 */
name?: string;
/** 创建人昵称或手机号 */
createName?: string;
/**
* 赛事状态
* 不传=全部、0=报名中，1=进行中，2=已结束，3=已删除，4=已下架
*/
status?: string;
/** 市级别城市名称 */
areaName?: string;
/** 是否公开；0=非公开，1=公开 */
isPublic?: string;
/** 是否要求提供证件图片；0=无需，1=需要 */
idCardImg?: string;
/** 是否要求提供证件号码；0=无需，1=需要 */
idCardNo?: string;
}
/** 分页数据 */
export interface PageData<T> {
total: number;
list: T[];
}
/** 统一响应包裹 */
export interface ApiResult<T> {
/** 编码：200表示成功，其他值表示失败 */
code: number;
/** 消息内容 */
msg: string;
/** 响应数据 */
data: T;
}
// ============================================================
// 赛事详情（对应 /manager/tm/info）
// ============================================================
/** 组别信息 */
export interface InnerCategoryVO {
/** 组别ID */
id: string;
/** 组别名称 */
name: string;
/** 组别类型；1=单打，2=双打 */
type: string;
}
/** 赛事详情 */
export interface TournamentAdminInfoVO {
/** 赛事名称 */
name: string;
/** 赛事开始时间 */
startTimeBegin: string;
/** 赛事结束时间 */
startTimeEnd: string;
/** 赛事说明 */
descr: string;
/** 报名开始时间 */
signupTimeBegin: string;
/** 报名结束时间 */
signupTimeEnd: string;
/** 赛事省市区 */
venueArea: string;
/** 赛事地点名称 */
venue: string;
/** 场地号 */
venueNo: string;
/** 是否公开；0=非公开，1=公开 */
isPublic: string;
/** 是否要求提供证件图片；0=无需，1=需要 */
isRequireIdCardImg: string;
/** 是否要求提供证件号码；0=无需，1=需要 */
isRequireIdCardNo: string;
/** 创建时间 */
createTime: string;
/** 创建人昵称 */
createNickname: string;
/** 报名人数 */
signupCount: string;
/** 退赛人数 */
dropoutCount: string;
/** 允许报名最大人数 */
dtotalLimit: string;
/** 总对阵数 */
matchTotalCount: string;
/** 已完成对阵数 */
matchCount: string;
/** 赛事封面url */
img: string;
/** 活动公告 */
notice: string;
/** 组别列表，创建时间倒序 */
categoryList: InnerCategoryVO[];
/** 分组名称列表，格式 "小组名称（淘汰赛或循环赛）" */
groupInfoList: string[];
}
// ============================================================
// 人员列表（对应 /manager/tm/info/signupPage）
// ============================================================
/** 报名人员 */
export interface TournamentAdminInfoSignupVO {
/** 选手名称 */
realName: string;
/** 选手性别；1=男，2=女 */
gender: string;
/** 选手手机号 */
phone: string;
/** 选手身份证 */
idCard: string;
/** 选手身份证图片 */
idCardImg: string;
/** 选手身份证图片列表 */
idCardImgList: string[];
}
/** 人员列表查询参数 */
export interface SignupListQueryParams {
page: string;
limit: string;
/** 组别ID（必填） */
categoryId: string;
}
// ============================================================
// 上下架（对应 /manager/tm/online）
// ============================================================
/** 上下架请求参数 */
export interface ToggleOnlineParams {
/** 赛事ID */
id: string;
/** 0=下架，1=上架 */
online: string;
}
src/api/orders/index.ts
+106
View File
@@ -0,0 +1,106 @@
/**
* 订单管理 API
* 注意：/admin 前缀已通过 VITE_API_BASE_URL 统一注入（见 .env.*），此文件中只写业务路径。
*/
import { get, post } from '@/utils/request';
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
import { buildMockOrderListPage } from '@/config/mock/orderList';
import { MOCK_ORDER_DETAIL } from '@/config/mock/orderDetail';
import {
MOCK_ORDER_PLAYER_LIST,
buildMockOrderPlayerListPage,
} from '@/config/mock/orderPlayerList';
import type {
OrderListQueryParams,
OrderDetailQueryParams,
OrderPlayerListQueryParams,
RetryRefundParams,
TournamentAdminOrderPageVO,
TournamentAdminOrderInfoVO,
TournamentAdminOrderInfoPageVO,
PageData,
ApiResult,
} from './types';
export type {
TournamentAdminOrderPageVO,
TournamentAdminOrderInfoVO,
TournamentAdminOrderInfoPageVO,
InnerRefundInfo,
OrderListQueryParams,
OrderDetailQueryParams,
OrderPlayerListQueryParams,
RetryRefundParams,
PageData,
ApiResult,
} from './types';
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
/**
* 订单管理 - 订单分页
* GET /admin/manager/order/page → /manager/order/page
*/
export async function getOrderList(
params: OrderListQueryParams,
): Promise<ApiResult<PageData<TournamentAdminOrderPageVO>>> {
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: buildMockOrderListPage(page, limit),
};
}
return get('/manager/order/page', params as Record<string, any>);
}
/**
* 订单管理 - 订单详情
* GET /admin/manager/order/info → /manager/order/info
*/
export async function getOrderDetail(
params: OrderDetailQueryParams,
): Promise<ApiResult<TournamentAdminOrderInfoVO>> {
if (USE_MOCK) {
await delay(MOCK_DELAY);
return {
code: 200,
msg: 'success',
data: { ...MOCK_ORDER_DETAIL },
};
}
return get('/manager/order/info', params as Record<string, any>);
}
/**
* 订单管理 - 订单详情 - 选手列表
* GET /admin/manager/order/info/page → /manager/order/info/page
*/
export async function getOrderPlayerList(
params: OrderPlayerListQueryParams,
): Promise<ApiResult<PageData<TournamentAdminOrderInfoPageVO>>> {
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: buildMockOrderPlayerListPage(page, limit),
};
}
return get('/manager/order/info/page', params as Record<string, any>);
}
/**
* 订单管理 - 重新退款
* POST /admin/manager/order/retryRefund → /manager/order/retryRefund
*/
export function retryRefundOrder(
params: RetryRefundParams,
): Promise<ApiResult<Record<string, never>>> {
return post('/manager/order/retryRefund', params);
}
src/api/orders/types.ts
+185
View File
@@ -0,0 +1,185 @@
/**
* 订单管理 — 类型定义
* 对应 OpenAPI: /admin/manager/order/page
*/
/** 订单列表项 */
export interface TournamentAdminOrderPageVO {
/** 订单编号 */
orderNo: string;
/** 选手ID */
uniqueId: number;
/** 赛事名称 */
name: string;
/** 选手名称 */
realName: string;
/** 手机号 */
phone: string;
/** 报名比赛组别名称 */
categoryName: string;
/** 报名人名称 */
creatorName: string;
/** 报名人手机号 */
creatorPhone: string;
/** 报名人一共报名人数 */
creatorSignupCount: number;
/** 订单金额；0.00格式 */
creatorSignupFee: string;
/** 优惠金额；0.00格式 */
creatorSignupFeeDiscount: string;
/** 实付金额；0.00格式 */
creatorSignupFeeActual: string;
/** 退款金额；0.00格式 */
creatorSignupFeeRefund: string;
/** 订单时间；yyyy.MM.dd HH:mm:ss */
orderTime: string;
/** 支付时间；yyyy.MM.dd HH:mm:ss */
payTime: string;
/** 订单状态；1=已支付，2=部分退款，3=全部退款，4=已关闭，-1=其他 */
orderStatus: number;
/** 退款状态；1=无退款，2=退款成功，3=退款失败，-1=其他 */
refundStatus: number;
}
/** 订单列表查询参数 */
export interface OrderListQueryParams {
page?: string;
limit?: string;
/** 订单时间开始 yyyy-MM-dd */
orderDate?: string;
/** 订单时间结束 yyyy-MM-dd */
orderDateEnd?: string;
/** 订单编号 */
orderNo?: string;
/** 赛事名称 */
tName?: string;
/** 选手名称 */
sName?: string;
/**
* 订单状态
* 不传=全部、1=支付成功，2=部分退款，3=全部退款，4=超时关闭
*/
status?: string;
/**
* 退款状态
* 不传=全部、0=退款失败，1=退款成功
*/
refundStatus?: string;
}
/** 分页数据 */
export interface PageData<T> {
total: number;
list: T[];
}
/** 统一响应包裹 */
export interface ApiResult<T> {
code: number;
msg: string;
data: T;
}
// ============================================================
// 订单详情（对应 /manager/order/info）
// ============================================================
/** 退款记录 */
export interface InnerRefundInfo {
/** 已退金额;0.00格式 */
refundedAmount: string;
/** 总退款次数（接口实际返回 string） */
totalRefundCount: string;
/** 退款金额;0.00格式 */
refundAmount: string;
/** 是否全部退款;0=否，1=是（接口实际返回 string） */
isFullRefund: string;
/** 退款方式 */
refundMethod: string;
/** 退款申请时间 */
refundApplyTime: string;
/** 第三方退款单号 */
refundOutTradeNo: string;
/** 退款完成时间 */
refundTime: string;
}
/** 订单详情 */
export interface TournamentAdminOrderInfoVO {
/** 赛事名称 */
tournamentName: string;
/** 订单编号 */
orderNumber: string;
/** 订单时间 */
orderTime: string;
/** 支付时间 */
payTime: string;
/** 订单金额;0.00格式 */
orderAmount: string;
/** 优惠金额;0.00格式 */
discountAmount: string;
/** 实付金额;0.00格式 */
payAmount: string;
/** 退款金额;0.00格式 */
refundAmount: string;
/** 退款信息list */
refundInfoList: InnerRefundInfo[];
}
/** 订单详情查询参数 */
export interface OrderDetailQueryParams {
/** 订单编号 */
orderNo: string;
/** 选手ID */
uniqueId: string;
}
// ============================================================
// 订单详情 — 选手列表（对应 /manager/order/info/page）
// ============================================================
/** 订单下选手信息 */
export interface TournamentAdminOrderInfoPageVO {
/** 姓名 */
realName: string;
/** 性别;1=男,2=女（接口实际返回 string） */
gender: string;
/** 手机号 */
phone: string;
/** 证件号 */
idCard: string;
/** 证件号图片 */
idCardImg: string;
/** 选手身份证图片列表 */
idCardImgList: string[];
/** 选手组别名称 */
categoryName: string;
/** 订单金额;0.00 */
orderAmount: string;
/** 优惠金额;0.00 */
discountAmount: string;
/** 实付金额;0.00 */
payAmount: string;
/** 退款金额;0.00 */
refundAmount: string;
}
/** 选手列表查询参数 */
export interface OrderPlayerListQueryParams {
/** 订单编号 */
orderNo: string;
/** 选手ID */
uniqueId: string;
page: string;
limit: string;
}
// ============================================================
// 重新退款（对应 /manager/order/retryRefund）
// ============================================================
/** 重新退款请求参数 */
export interface RetryRefundParams {
/** 支付单号 */
payOrderNo: string;
}
src/api/roles/index.ts
+72
View File
@@ -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 });
}
src/api/roles/types.ts
+66
View File
@@ -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[];
}
src/api/users/index.ts
+68
View File
@@ -0,0 +1,68 @@
/**
* 用户管理 API
*/
import { get, post } from '@/utils/request';
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
import { buildMockUserListPage } from '@/config/mock/userList';
import type {
UserListQueryParams,
UserSaveParams,
UserUpdateParams,
UserActiveParams,
UserUpdatePwdParams,
TournamentAdminUserVO,
PageData,
ApiResult,
} from './types';
export type {
TournamentAdminUserVO,
UserListQueryParams,
UserSaveParams,
UserUpdateParams,
UserActiveParams,
UserUpdatePwdParams,
PageData,
ApiResult,
} from './types';
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
/** GET /sys/user/page — 用户分页 */
export async function getUserList(
params: UserListQueryParams,
): 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 get('/sys/user/page', params as Record<string, any>);
}
/** 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('/sys/user/active', params);
}
/** POST /sys/user/updatepwd — 修改密码（直接调接口） */
export function updateUserPwd(
params: UserUpdatePwdParams,
): Promise<ApiResult<Record<string, never>>> {
return post('/sys/user/updatepwd', params);
}
src/api/users/types.ts
+71
View File
@@ -0,0 +1,71 @@
/**
* 用户管理 — 类型定义
* 对应 OpenAPI: /admin/sys/user/*
*/
export interface TournamentAdminUserVO {
id: string;
/** 用户姓名 */
realName: string;
phone: string;
/** 角色名称 */
roleName: string;
/** 角色ID（编辑时需要回显，列表可能不返回） */
roleId?: string;
/** 状态；0=停用、1=正常（接口实际返回 string） */
status: string;
createTime: string;
}
export interface UserListQueryParams {
page?: string;
limit?: string;
/** 用户姓名或手机号 */
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 {
userId: string;
/** 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;
data: T;
}
src/assets/styles/index.less
+2 -2
View File
@@ -123,8 +123,8 @@ a {
height: 100%;
min-height: 0;
transition:
opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-fade-slide-enter-from {
src/config/mock.ts
+12
View File
@@ -0,0 +1,12 @@
/**
* 全局假数据开关
*
* true = 所有 API 使用假数据（模拟真实网络延时 2s 后返回假数据）
* false = 走真实后端接口
*
* 对接后端接口后将此值改为 false 即可切换。
*/
export const USE_MOCK = true;
/** 模拟网络延时（毫秒） */
export const MOCK_DELAY = 850;
src/config/mock/bannerList.ts
+169
View File
@@ -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',
},
];
src/config/mock/eventDetail.ts
+39
View File
@@ -0,0 +1,39 @@
/**
* 赛事详情弹窗假数据
*
* 使用页面：`src/pages/events/list/components/EventDetailModal.tsx`
* 对应接口：`GET /manager/tm/info`
* 类型：`TournamentAdminInfoVO`
*/
import type { TournamentAdminInfoVO } from '@/api/events/types';
export const MOCK_EVENT_DETAIL: TournamentAdminInfoVO = {
name: '第二届全国地学羽毛球邀请赛',
startTimeBegin: '2026-05-26 08:00',
startTimeEnd: '2026-05-31 22:00',
descr:
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
signupTimeBegin: '2026-05-24 08:00',
signupTimeEnd: '2026-05-26 22:00',
venueArea: '北京市 北京市 东城区',
venue: '李宁体育馆',
venueNo: '李宁体育馆',
isPublic: '1',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createTime: '2026-05-26 08:00',
createNickname: '张三',
signupCount: '100',
dropoutCount: '1',
dtotalLimit: '1000',
matchTotalCount: '50',
matchCount: '50',
img: 'https://picsum.photos/seed/eventcover/600/300',
notice:
'赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
categoryList: [
{ id: '1', name: '男子单打', type: '1' },
{ id: '2', name: '女子双打', type: '2' },
],
groupInfoList: ['男子小组1（循环赛）', '女子小组1（淘汰赛）'],
};
src/config/mock/eventList.ts
+268
View File
@@ -0,0 +1,268 @@
/**
* 赛事列表页假数据
*
* 使用页面：`src/pages/events/list/index.tsx`
* 对应接口：`GET /manager/tm/page`
* 类型：`TournamentAdminVO[]`
*/
import type { TournamentAdminVO, PageData } from '@/api/events/types';
export const MOCK_EVENT_LIST: TournamentAdminVO[] = [
{
id: 'EV202607010001',
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '1',
isRequireIdCardImg: '1',
isRequireIdCardNo: '1',
createNickname: '张运营',
createPhone: '13800138001',
createTime: '2026-07-10 08:11:07',
status: '0',
signupCount: '128',
dropoutCount: '5',
rulesDescr: '一、赛事目的：推动羽毛球运动发展。\n二、参赛资格：身体健康、年龄符合要求。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [
'https://picsum.photos/seed/rule1/300/200',
'https://picsum.photos/seed/rule2/300/200',
],
},
{
id: 'EV202607010002',
name: '国际马拉松城市联赛',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '0',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createNickname: '李管理',
createPhone: '13900139002',
createTime: '2026-07-09 11:28:20',
status: '1',
signupCount: '256',
dropoutCount: '12',
rulesDescr: '一、赛事目的：推动马拉松运动发展。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
},
{
id: 'EV202607010003',
name: '全民健身运动会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '1',
isRequireIdCardImg: '1',
isRequireIdCardNo: '1',
createNickname: '王策划',
createPhone: '13700137003',
createTime: '2026-07-08 14:45:33',
status: '2',
signupCount: '512',
dropoutCount: '8',
rulesDescr: '一、赛事目的：促进全民健身。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
},
{
id: 'EV202607010004',
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '0',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createNickname: '赵赛事',
createPhone: '13600136004',
createTime: '2026-07-07 18:02:46',
status: '3',
signupCount: '64',
dropoutCount: '3',
rulesDescr: '一、赛事目的：交流体育文化。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [],
},
{
id: 'EV202607010005',
name: '国际马拉松城市联赛',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '1',
isRequireIdCardImg: '1',
isRequireIdCardNo: '1',
createNickname: '张运营',
createPhone: '13800138001',
createTime: '2026-07-06 21:19:59',
status: '4',
signupCount: '0',
dropoutCount: '0',
rulesDescr: '一、赛事目的：推动城市体育交流。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
},
{
id: 'EV202607010006',
name: '全民健身运动会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '0',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createNickname: '李管理',
createPhone: '13900139002',
createTime: '2026-07-05 00:36:12',
status: '0',
signupCount: '128',
dropoutCount: '5',
rulesDescr: '一、赛事目的：增强全民体质。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [],
},
{
id: 'EV202607010007',
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '1',
isRequireIdCardImg: '1',
isRequireIdCardNo: '1',
createNickname: '王策划',
createPhone: '13700137003',
createTime: '2026-07-04 03:53:25',
status: '1',
signupCount: '256',
dropoutCount: '12',
rulesDescr: '一、赛事目的：选拔青少年人才。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [
'https://picsum.photos/seed/rule1/300/200',
'https://picsum.photos/seed/rule2/300/200',
],
},
{
id: 'EV202607010008',
name: '国际马拉松城市联赛',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '0',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createNickname: '赵赛事',
createPhone: '13600136004',
createTime: '2026-07-03 07:10:38',
status: '2',
signupCount: '512',
dropoutCount: '8',
rulesDescr: '一、赛事目的：连接城市与运动。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [],
},
{
id: 'EV202607010009',
name: '全民健身运动会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '1',
isRequireIdCardImg: '1',
isRequireIdCardNo: '1',
createNickname: '张运营',
createPhone: '13800138001',
createTime: '2026-07-02 10:27:51',
status: '3',
signupCount: '64',
dropoutCount: '3',
rulesDescr: '一、赛事目的：全民参与、共享健康。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: ['https://picsum.photos/seed/rule1/300/200'],
},
{
id: 'EV202607010010',
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '0',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createNickname: '李管理',
createPhone: '13900139002',
createTime: '2026-07-01 13:44:04',
status: '4',
signupCount: '0',
dropoutCount: '0',
rulesDescr: '一、赛事目的：培养后备力量。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [],
},
{
id: 'EV202607010011',
name: '国际马拉松城市联赛',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '1',
isRequireIdCardImg: '1',
isRequireIdCardNo: '1',
createNickname: '王策划',
createPhone: '13700137003',
createTime: '2026-06-30 17:01:17',
status: '0',
signupCount: '128',
dropoutCount: '5',
rulesDescr: '一、赛事目的：推广城市品牌。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [
'https://picsum.photos/seed/rule1/300/200',
'https://picsum.photos/seed/rule2/300/200',
'https://picsum.photos/seed/rule3/300/200',
],
},
{
id: 'EV202607010012',
name: '全民健身运动会',
startTimeBegin: '2026-08-12 09:00',
startTimeEnd: '2026-08-15 18:00',
venueArea: '广东省 深圳市 南山区',
venue: '深圳湾体育中心',
isPublic: '0',
isRequireIdCardImg: '0',
isRequireIdCardNo: '0',
createNickname: '赵赛事',
createPhone: '13600136004',
createTime: '2026-06-29 20:18:30',
status: '1',
signupCount: '256',
dropoutCount: '12',
rulesDescr: '一、赛事目的：丰富群众体育生活。',
rulesDescrImg: 'https://picsum.photos/seed/rules/300/200',
rulesDescrImgList: [],
},
];
/** 构建分页响应 */
export function buildMockEventListPage(page: number, limit: number): PageData<TournamentAdminVO> {
const start = (page - 1) * limit;
const list = MOCK_EVENT_LIST.slice(start, start + limit);
return { total: MOCK_EVENT_LIST.length, list };
}
src/config/mock/eventSignup.ts
+100
View File
@@ -0,0 +1,100 @@
/**
* 赛事详情 — 人员列表假数据
*
* 使用页面：`src/pages/events/list/components/EventDetailModal.tsx`
* 对应接口：`GET /manager/tm/info/signupPage`
* 类型：`TournamentAdminInfoSignupVO[]`
*/
import type {
TournamentAdminInfoSignupVO,
PageData,
SignupListQueryParams,
} from '@/api/events/types';
export const MOCK_SIGNUP_LIST: TournamentAdminInfoSignupVO[] = [
{
realName: '张三',
gender: '1',
phone: '13800138001',
idCard: '110101199001011234',
idCardImg: 'https://picsum.photos/seed/idcard1/96/64',
idCardImgList: [
'https://picsum.photos/seed/idcard1a/96/64',
'https://picsum.photos/seed/idcard1b/96/64',
],
},
{
realName: '李四',
gender: '1',
phone: '13900139002',
idCard: '110101199002022345',
idCardImg: 'https://picsum.photos/seed/idcard2/96/64',
idCardImgList: [
'https://picsum.photos/seed/idcard2a/96/64',
'https://picsum.photos/seed/idcard2b/96/64',
],
},
{
realName: '王芳',
gender: '2',
phone: '13700137003',
idCard: '110101199103033456',
idCardImg: '',
idCardImgList: [],
},
{
realName: '赵六',
gender: '1',
phone: '13600136004',
idCard: '110101199204044567',
idCardImg: 'https://picsum.photos/seed/idcard4/96/64',
idCardImgList: ['https://picsum.photos/seed/idcard4a/96/64'],
},
{
realName: '孙七',
gender: '2',
phone: '13500135005',
idCard: '110101199305055678',
idCardImg: '',
idCardImgList: [],
},
{
realName: '周八',
gender: '1',
phone: '13400134006',
idCard: '110101199406066789',
idCardImg: 'https://picsum.photos/seed/idcard6/96/64',
idCardImgList: [
'https://picsum.photos/seed/idcard6a/96/64',
'https://picsum.photos/seed/idcard6b/96/64',
],
},
{
realName: '吴九',
gender: '2',
phone: '13300133007',
idCard: '110101199507077890',
idCardImg: '',
idCardImgList: [],
},
{
realName: '郑十',
gender: '1',
phone: '13200132008',
idCard: '110101199608088901',
idCardImg: 'https://picsum.photos/seed/idcard8/96/64',
idCardImgList: ['https://picsum.photos/seed/idcard8a/96/64'],
},
];
/** 构建分页响应 */
export function buildMockSignupListPage(
params: SignupListQueryParams,
): PageData<TournamentAdminInfoSignupVO> {
// mock 模式下忽略 categoryId 过滤，直接分页返回
const page = Number(params.page) || 1;
const limit = Number(params.limit) || 10;
const start = (page - 1) * limit;
const list = MOCK_SIGNUP_LIST.slice(start, start + limit);
return { total: MOCK_SIGNUP_LIST.length, list };
}
src/config/mock/operationLogs.ts
+169
View File
@@ -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 };
}
src/config/mock/orderDetail.ts
+41
View File
@@ -0,0 +1,41 @@
/**
* 订单详情弹窗假数据
*
* 使用页面：`src/pages/events/orders/components/OrderDetailModal.tsx`
* 对应接口：`GET /manager/order/info`
* 类型：`TournamentAdminOrderInfoVO`
*/
import type { TournamentAdminOrderInfoVO } from '@/api/orders/types';
export const MOCK_ORDER_DETAIL: TournamentAdminOrderInfoVO = {
tournamentName: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
orderNumber: 'ORD20260700001',
orderTime: '2026.07.12 08:11:07',
payTime: '2026.07.12 08:12:30',
orderAmount: '188.00',
discountAmount: '20.00',
payAmount: '168.00',
refundAmount: '50.00',
refundInfoList: [
{
refundedAmount: '30.00',
totalRefundCount: '2',
refundAmount: '30.00',
isFullRefund: '0',
refundMethod: '原路退回（微信支付）',
refundApplyTime: '2026.07.15 09:30:00',
refundOutTradeNo: '5030000789202607150930000123',
refundTime: '2026.07.15 09:35:00',
},
{
refundedAmount: '20.00',
totalRefundCount: '2',
refundAmount: '20.00',
isFullRefund: '1',
refundMethod: '原路退回（微信支付）',
refundApplyTime: '2026.07.16 14:00:00',
refundOutTradeNo: '5030000789202607161400000456',
refundTime: '',
},
],
};
src/config/mock/orderList.ts
+256
View File
@@ -0,0 +1,256 @@
/**
* 订单列表页假数据
*
* 使用页面：`src/pages/events/orders/index.tsx`
* 对应接口：`GET /manager/order/page`
* 类型：`TournamentAdminOrderPageVO[]`
*/
import type { TournamentAdminOrderPageVO, PageData } from '@/api/orders/types';
export const MOCK_ORDER_LIST: TournamentAdminOrderPageVO[] = [
{
orderNo: 'ORD20260700001',
uniqueId: 101,
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
realName: '张选手',
phone: '13800138001',
categoryName: '男子青年组',
creatorName: '张报名',
creatorPhone: '13800138001',
creatorSignupCount: 2,
creatorSignupFee: '188.00',
creatorSignupFeeDiscount: '20.00',
creatorSignupFeeActual: '168.00',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.12 08:11:07',
payTime: '2026.07.12 08:12:30',
orderStatus: 1,
refundStatus: 1,
},
{
orderNo: 'ORD20260700002',
uniqueId: 102,
name: '国际马拉松城市联赛',
realName: '李选手',
phone: '13900139002',
categoryName: '女子青年组',
creatorName: '李报名',
creatorPhone: '13900139002',
creatorSignupCount: 1,
creatorSignupFee: '256.50',
creatorSignupFeeDiscount: '10.00',
creatorSignupFeeActual: '246.50',
creatorSignupFeeRefund: '50.00',
orderTime: '2026.07.11 11:28:20',
payTime: '2026.07.11 11:30:05',
orderStatus: 2,
refundStatus: 2,
},
{
orderNo: 'ORD20260700003',
uniqueId: 103,
name: '全民健身运动会',
realName: '王选手',
phone: '13700137003',
categoryName: '男子中年组',
creatorName: '王报名',
creatorPhone: '13700137003',
creatorSignupCount: 1,
creatorSignupFee: '399.00',
creatorSignupFeeDiscount: '0.00',
creatorSignupFeeActual: '399.00',
creatorSignupFeeRefund: '399.00',
orderTime: '2026.07.10 14:45:33',
payTime: '2026.07.10 14:46:10',
orderStatus: 3,
refundStatus: 2,
},
{
orderNo: 'ORD20260700004',
uniqueId: 104,
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
realName: '赵选手',
phone: '13600136004',
categoryName: '女子中年组',
creatorName: '赵报名',
creatorPhone: '13600136004',
creatorSignupCount: 3,
creatorSignupFee: '128.00',
creatorSignupFeeDiscount: '20.00',
creatorSignupFeeActual: '108.00',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.09 18:02:46',
payTime: '2026.07.09 18:03:15',
orderStatus: 4,
refundStatus: 1,
},
{
orderNo: 'ORD20260700005',
uniqueId: 105,
name: '国际马拉松城市联赛',
realName: '张选手',
phone: '13800138001',
categoryName: '男子青年组',
creatorName: '张报名',
creatorPhone: '13800138001',
creatorSignupCount: 2,
creatorSignupFee: '520.00',
creatorSignupFeeDiscount: '10.00',
creatorSignupFeeActual: '510.00',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.08 21:19:59',
payTime: '2026.07.08 21:21:20',
orderStatus: 1,
refundStatus: 1,
},
{
orderNo: 'ORD20260700006',
uniqueId: 106,
name: '全民健身运动会',
realName: '李选手',
phone: '13900139002',
categoryName: '女子青年组',
creatorName: '李报名',
creatorPhone: '13900139002',
creatorSignupCount: 1,
creatorSignupFee: '188.00',
creatorSignupFeeDiscount: '0.00',
creatorSignupFeeActual: '188.00',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.07 00:36:12',
payTime: '2026.07.07 00:37:00',
orderStatus: 1,
refundStatus: 1,
},
{
orderNo: 'ORD20260700007',
uniqueId: 107,
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
realName: '王选手',
phone: '13700137003',
categoryName: '男子中年组',
creatorName: '王报名',
creatorPhone: '13700137003',
creatorSignupCount: 1,
creatorSignupFee: '256.50',
creatorSignupFeeDiscount: '20.00',
creatorSignupFeeActual: '236.50',
creatorSignupFeeRefund: '236.50',
orderTime: '2026.07.06 03:53:25',
payTime: '2026.07.06 03:54:00',
orderStatus: 3,
refundStatus: 3,
},
{
orderNo: 'ORD20260700008',
uniqueId: 108,
name: '国际马拉松城市联赛',
realName: '赵选手',
phone: '13600136004',
categoryName: '女子中年组',
creatorName: '赵报名',
creatorPhone: '13600136004',
creatorSignupCount: 3,
creatorSignupFee: '399.00',
creatorSignupFeeDiscount: '10.00',
creatorSignupFeeActual: '389.00',
creatorSignupFeeRefund: '30.00',
orderTime: '2026.07.05 07:10:38',
payTime: '2026.07.05 07:11:00',
orderStatus: 2,
refundStatus: 2,
},
{
orderNo: 'ORD20260700009',
uniqueId: 109,
name: '全民健身运动会',
realName: '张选手',
phone: '13800138001',
categoryName: '男子青年组',
creatorName: '张报名',
creatorPhone: '13800138001',
creatorSignupCount: 2,
creatorSignupFee: '128.00',
creatorSignupFeeDiscount: '0.00',
creatorSignupFeeActual: '128.00',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.04 10:27:51',
payTime: '2026.07.04 10:28:30',
orderStatus: 4,
refundStatus: 1,
},
{
orderNo: 'ORD20260700010',
uniqueId: 110,
name: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
realName: '李选手',
phone: '13900139002',
categoryName: '女子青年组',
creatorName: '李报名',
creatorPhone: '13900139002',
creatorSignupCount: 1,
creatorSignupFee: '520.00',
creatorSignupFeeDiscount: '20.00',
creatorSignupFeeActual: '500.00',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.03 13:44:04',
payTime: '2026.07.03 13:45:00',
orderStatus: 1,
refundStatus: 1,
},
{
orderNo: 'ORD20260700011',
uniqueId: 111,
name: '国际马拉松城市联赛',
realName: '王选手',
phone: '13700137003',
categoryName: '男子中年组',
creatorName: '王报名',
creatorPhone: '13700137003',
creatorSignupCount: 1,
creatorSignupFee: '188.00',
creatorSignupFeeDiscount: '10.00',
creatorSignupFeeActual: '178.00',
creatorSignupFeeRefund: '50.00',
orderTime: '2026.07.02 17:01:17',
payTime: '2026.07.02 17:02:00',
orderStatus: 2,
refundStatus: 3,
},
{
orderNo: 'ORD20260700012',
uniqueId: 112,
name: '全民健身运动会',
realName: '赵选手',
phone: '13600136004',
categoryName: '女子中年组',
creatorName: '赵报名',
creatorPhone: '13600136004',
creatorSignupCount: 3,
creatorSignupFee: '256.50',
creatorSignupFeeDiscount: '0.00',
creatorSignupFeeActual: '256.50',
creatorSignupFeeRefund: '0.00',
orderTime: '2026.07.01 20:18:30',
payTime: '2026.07.01 20:19:00',
orderStatus: 1,
refundStatus: 1,
},
];
/** 金额汇总假数据（汇总接口独立，此为 mock 占位） */
export const MOCK_ORDER_SUMMARY = {
totalOrderAmount: 113255.0,
totalPaidAmount: 113255.0,
totalRefundAmount: 1255.0,
};
/** 构建分页响应 */
export function buildMockOrderListPage(
page: number,
limit: number,
): PageData<TournamentAdminOrderPageVO> {
const start = (page - 1) * limit;
const list = MOCK_ORDER_LIST.slice(start, start + limit);
return { total: MOCK_ORDER_LIST.length, list };
}
src/config/mock/orderPlayerList.ts
+104
View File
@@ -0,0 +1,104 @@
/**
* 订单详情 — 选手列表假数据
*
* 使用页面：`src/pages/events/orders/components/OrderDetailModal.tsx`
* 对应接口：`GET /manager/order/info/page`
* 类型：`TournamentAdminOrderInfoPageVO[]`
*/
import type { TournamentAdminOrderInfoPageVO } from '@/api/orders/types';
export const MOCK_ORDER_PLAYER_LIST: TournamentAdminOrderInfoPageVO[] = [
{
realName: '张三',
gender: '1',
phone: '13800138001',
idCard: '110101199001011234',
idCardImg: 'https://picsum.photos/seed/idcard1/96/64',
idCardImgList: [
'https://picsum.photos/seed/idcard1a/96/64',
'https://picsum.photos/seed/idcard1b/96/64',
],
categoryName: '男子青年组',
orderAmount: '100.00',
discountAmount: '10.00',
payAmount: '90.00',
refundAmount: '0.00',
},
{
realName: '李四',
gender: '1',
phone: '13900139002',
idCard: '110101199002022345',
idCardImg: '',
idCardImgList: [],
categoryName: '男子青年组',
orderAmount: '88.00',
discountAmount: '10.00',
payAmount: '78.00',
refundAmount: '50.00',
},
{
realName: '王芳',
gender: '2',
phone: '13700137003',
idCard: '110101199103033456',
idCardImg: 'https://picsum.photos/seed/idcard3/96/64',
idCardImgList: ['https://picsum.photos/seed/idcard3a/96/64'],
categoryName: '女子双打',
orderAmount: '0.00',
discountAmount: '0.00',
payAmount: '0.00',
refundAmount: '-',
},
{
realName: '赵六',
gender: '1',
phone: '13600136004',
idCard: '110101199204044567',
idCardImg: '',
idCardImgList: [],
categoryName: '女子双打',
orderAmount: '50.00',
discountAmount: '0.00',
payAmount: '50.00',
refundAmount: '-',
},
{
realName: '孙七',
gender: '2',
phone: '13500135005',
idCard: '110101199305055678',
idCardImg: 'https://picsum.photos/seed/idcard5/96/64',
idCardImgList: [
'https://picsum.photos/seed/idcard5a/96/64',
'https://picsum.photos/seed/idcard5b/96/64',
],
categoryName: '男子青年组',
orderAmount: '60.00',
discountAmount: '5.00',
payAmount: '55.00',
refundAmount: '0.00',
},
{
realName: '周八',
gender: '1',
phone: '13400134006',
idCard: '110101199406066789',
idCardImg: 'https://picsum.photos/seed/idcard6/96/64',
idCardImgList: ['https://picsum.photos/seed/idcard6a/96/64'],
categoryName: '男子中年组',
orderAmount: '120.00',
discountAmount: '20.00',
payAmount: '100.00',
refundAmount: '-',
},
];
export function buildMockOrderPlayerListPage(
page: number,
limit: number,
): { total: number; list: TournamentAdminOrderInfoPageVO[] } {
const start = (page - 1) * limit;
const list = MOCK_ORDER_PLAYER_LIST.slice(start, start + limit);
return { total: MOCK_ORDER_PLAYER_LIST.length, list };
}
src/config/mock/permissionTree.ts
+213
View File
@@ -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);
}
src/config/mock/roleList.ts
+31
View File
@@ -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) };
}
src/config/mock/roleUsageUser.ts
+33
View File
@@ -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) };
}
src/config/mock/userList.ts
+134
View File
@@ -0,0 +1,134 @@
/**
* 用户列表页假数据（类型内联，避免循环引用）
* 对应接口：GET /sys/user/page
*/
interface MockUserVO {
id: string;
realName: string;
phone: string;
roleId: string;
roleName: string;
status: string;
createTime: string;
}
interface MockPageData<T> {
total: number;
list: T[];
}
const MOCK_USERS: MockUserVO[] = [
{
id: '1',
realName: '张三',
phone: '13800138001',
roleId: '1',
roleName: '超级管理员',
status: '1',
createTime: '2026-07-20 08:11:07',
},
{
id: '2',
realName: '李四',
phone: '13900139002',
roleId: '2',
roleName: '赛事管理员',
status: '1',
createTime: '2026-07-19 11:28:20',
},
{
id: '3',
realName: '王五',
phone: '13700137003',
roleId: '3',
roleName: '裁判',
status: '1',
createTime: '2026-07-18 14:45:33',
},
{
id: '4',
realName: '赵六',
phone: '13600136004',
roleId: '2',
roleName: '赛事管理员',
status: '0',
createTime: '2026-07-17 18:02:46',
},
{
id: '5',
realName: '孙七',
phone: '13800138005',
roleId: '1',
roleName: '超级管理员',
status: '1',
createTime: '2026-07-16 21:19:59',
},
{
id: '6',
realName: '周八',
phone: '13900139006',
roleId: '3',
roleName: '裁判',
status: '1',
createTime: '2026-07-15 00:36:12',
},
{
id: '7',
realName: '吴九',
phone: '13700137007',
roleId: '2',
roleName: '赛事管理员',
status: '1',
createTime: '2026-07-14 03:53:25',
},
{
id: '8',
realName: '郑十',
phone: '13600136008',
roleId: '4',
roleName: '财务',
status: '1',
createTime: '2026-07-13 07:10:38',
},
{
id: '9',
realName: '陈一',
phone: '13800138009',
roleId: '3',
roleName: '裁判',
status: '1',
createTime: '2026-07-12 10:27:51',
},
{
id: '10',
realName: '刘二',
phone: '13900139010',
roleId: '2',
roleName: '赛事管理员',
status: '0',
createTime: '2026-07-11 13:44:04',
},
{
id: '11',
realName: '黄三',
phone: '13700137011',
roleId: '1',
roleName: '超级管理员',
status: '1',
createTime: '2026-07-10 17:01:17',
},
{
id: '12',
realName: '林四',
phone: '13600136012',
roleId: '4',
roleName: '财务',
status: '1',
createTime: '2026-07-09 20:18:30',
},
];
export function buildMockUserListPage(page: number, limit: number): MockPageData<MockUserVO> {
const start = (page - 1) * limit;
return { total: MOCK_USERS.length, list: MOCK_USERS.slice(start, start + limit) };
}
src/layouts/BasicLayout.tsx
+13 -6
View File
@@ -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);
}
@@ -249,7 +256,7 @@ export default defineComponent({
v-slots={{
default: ({ Component, route }: any) => (
<KeepAlive include={cachedViews.value}>
<Transition name="page-fade-slide" mode="out-in">
<Transition name="page-fade-slide">
{Component ? h(Component, { key: route.path }) : null}
</Transition>
</KeepAlive>
src/pages/events/banner/components/BannerFormModal.tsx
+116 -93
View File
@@ -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}
src/pages/events/banner/index.tsx
+21 -40
View File
@@ -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,54 +65,39 @@ 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)}>
编辑
</Button>
<Button
type="link"
size="small"
style={isEnabled ? { color: '#faad14' } : { color: '#52c41a' }}
onClick={() => onToggleStatus(record)}
>
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
{isEnabled ? '禁用' : '启用'}
</Button>
<Button type="link" size="small" danger onClick={() => onDelete(record)}>
@@ -125,9 +110,6 @@ function renderBodyCell({
return;
}
/**
* Banner 配置
*/
export default defineComponent({
name: 'EventBanner',
setup() {
@@ -155,7 +137,6 @@ export default defineComponent({
const { containerRef, height } = useContainerSize();
/** 删除二次确认 */
const confirmDelete = (record: any) => {
Modal.confirm({
title: '删除确认',
@@ -167,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}确认`,
@@ -180,7 +160,6 @@ export default defineComponent({
});
};
/** 最终表格列：模型列 + 操作 */
const tableColumns = [
...columns,
{
@@ -192,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>
@@ -228,7 +212,6 @@ export default defineComponent({
</Form>
</div>
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
@@ -252,7 +235,6 @@ export default defineComponent({
</Table>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
@@ -266,7 +248,6 @@ export default defineComponent({
</div>
</div>
{/* ===== 新增/编辑弹窗 ===== */}
{modalVisible.value && (
<BannerFormModal
visible={modalVisible.value}
src/pages/events/banner/model/useBannerModel.ts
+127 -154
View File
@@ -2,43 +2,50 @@ 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 {
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: '全民健身运动会' },
@@ -46,122 +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',
};
});
/** 所属区域选项（动态生成，直辖市仅市名，其他省市） */
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[]>(MOCK_DATA);
const [allData, setAllData] = useState<TournamentAdminBannerListVO[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 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 !== '';
@@ -171,36 +130,38 @@ export function useBannerModel() {
// ===== 方法 =====
/** 查询（节流 500ms） */
/** 查询 */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
title: debouncedTitle.value,
status: filterForm.status,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: 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) {
message.error(error.msg || '查询失败');
console.error('Banner查询失败:', error);
} finally {
setLoading(false);
}
}, 500);
/** 重置（节流 500ms） */
/** 重置 */
const handleReset = useThrottleFn(() => {
filterForm.searchTitle = '';
filterForm.title = '';
filterForm.status = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(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();
};
/** 打开新增弹窗 */
@@ -208,14 +169,10 @@ export function useBannerModel() {
setEditingRecord(null);
setModalVisible(true);
};
/** 打开编辑弹窗 */
const handleEdit = (record: any) => {
setEditingRecord(record);
setModalVisible(true);
};
/** 关闭弹窗 */
const handleCloseModal = () => {
setModalVisible(false);
setEditingRecord(null);
@@ -226,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) {
message.error(error.msg || '操作失败');
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) {
message.error(error.msg || '删除失败');
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) {
message.error(error.msg || '操作失败');
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 });
@@ -288,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 {
src/pages/events/list/components/EventDetailModal.tsx
+222 -157
View File
@@ -1,5 +1,15 @@
import { defineComponent } from 'vue';
import { Modal, Descriptions, Image, Table, Pagination, Space } from 'ant-design-vue';
import { defineComponent, reactive, onMounted } from 'vue';
import { Modal, Descriptions, Image, Table, Pagination, Space, Spin } from 'ant-design-vue';
import { EyeOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import {
getEventDetail,
getSignupList,
type TournamentAdminInfoVO,
type InnerCategoryVO,
type TournamentAdminInfoSignupVO,
} from '@/api/events';
import { useState } from '@/hooks';
import styles from './EventDetailModal.module.less';
interface EventDetailModalProps {
@@ -8,86 +18,57 @@ interface EventDetailModalProps {
onClose: () => void;
}
// ===== Mock 数据 =====
const MOCK_DETAIL = {
name: '第二届全国地学羽毛球邀请赛',
eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
descr:
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
cancelDeadline: '2026.05.25 22:00',
region: '北京市 北京市 东城区',
address: '李宁体育馆',
venueNo: '李宁体育馆',
publicEvent: '在首页展示赛事',
needIdCard: '无需提供',
needIdCardImage: '无需提供',
createTime: '2026.05.26 08:00',
creator: '张三',
status: '报名中',
enrolledCount: 100,
cancelledCount: 1,
maxCount: 1000,
crossedCount: 50,
completedCount: 50,
cover: 'https://picsum.photos/seed/eventcover/600/300',
announcement:
'赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
// ===== 0/1 显示映射 =====
const YES_NO_MAP: Record<string, string> = { '0': '否', '1': '是' };
const PUBLIC_MAP: Record<string, string> = { '0': '非公开', '1': '公开' };
const GENDER_MAP: Record<string, string> = { '1': '男', '2': '女' };
const CATEGORY_TYPE_MAP: Record<string, string> = { '1': '单打', '2': '双打' };
const formatYN = (v: string) => YES_NO_MAP[v] ?? v;
const formatPublic = (v: string) => PUBLIC_MAP[v] ?? v;
const formatGender = (v: string) => GENDER_MAP[v] ?? v;
const PAGE_SIZE = 10;
/** 渲染身份证图片 */
const renderIdImages = (imgList: string[], singleImg: string) => {
const urls = imgList.length > 0 ? imgList : singleImg ? [singleImg] : [];
if (urls.length === 0) return <span>-</span>;
return (
<Image.PreviewGroup>
<Space>
{urls.map((url) => (
<Image
key={url}
width={48}
height={32}
src={url}
v-slots={{ previewMask: () => <EyeOutlined /> }}
/>
))}
</Space>
</Image.PreviewGroup>
);
};
// 假组别数据
const MOCK_GROUPS = [
{
key: 'group1',
title: '组别1:男子单打（单打）',
players: [
{
key: '1',
name: '张三',
gender: '男',
phone: '12345678995',
idNo: 'xxxxxxxxxxxxxxxx',
idImg: '',
},
{ key: '2', name: '李四', gender: '男', phone: '', idNo: '', idImg: '' },
],
},
{
key: 'group2',
title: '组别2:女子双打（双打）',
players: [
{
key: '1',
name: '张三',
gender: '女',
phone: '12345678995',
idNo: 'xxxxxxxxxxxxxxxx',
idImg: '',
},
{ key: '2', name: '李四', gender: '女', phone: '', idNo: '', idImg: '' },
],
},
];
// 假分组数据
const MOCK_DIVISIONS = ['分组1:男子小组1（循环赛）', '分组2:女子小组1（淘汰赛）'];
/** 选手表格列 */
const PLAYER_COLUMNS = [
{ title: '选手', dataIndex: 'name', key: 'name', width: 100 },
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
{ title: '选手', dataIndex: 'realName', key: 'realName', width: 100 },
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
width: 60,
customRender: ({ text }: { text: string }) => formatGender(text),
},
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
{
title: '证件图片',
dataIndex: 'idImg',
key: 'idImg',
key: 'idCardImgs',
width: 180,
customRender: () => (
<Space>
<Image width={48} height={32} src="https://picsum.photos/seed/idimg1/96/64" />
<Image width={48} height={32} src="https://picsum.photos/seed/idimg2/96/64" />
</Space>
),
customRender: ({ record }: { record: TournamentAdminInfoSignupVO }) =>
renderIdImages(record.idCardImgList, record.idCardImg),
},
];
@@ -99,7 +80,71 @@ export default defineComponent({
onClose: { type: Function, required: true },
},
setup(props: EventDetailModalProps) {
const detail = MOCK_DETAIL;
// ===== 详情数据 =====
const [detail, setDetail] = useState<TournamentAdminInfoVO | null>(null);
const [detailLoading, setDetailLoading] = useState(true);
// ===== 每个组别的选手数据（key = categoryId） =====
const categoryPlayers = reactive<Record<string, TournamentAdminInfoSignupVO[]>>({});
const categoryPlayerTotal = reactive<Record<string, number>>({});
const categoryPlayerLoading = reactive<Record<string, boolean>>({});
const categoryPlayerPage = reactive<Record<string, number>>({});
/** 获取某个组别的选手列表（分页） */
const fetchPlayers = async (categoryId: string, page: number) => {
categoryPlayerLoading[categoryId] = true;
try {
const res = await getSignupList({
categoryId,
page: String(page),
limit: String(PAGE_SIZE),
});
if (res.code === 200) {
categoryPlayers[categoryId] = res.data.list;
categoryPlayerTotal[categoryId] = res.data.total;
categoryPlayerPage[categoryId] = page;
}
} catch {
// mock 模式不会到这里，真实模式下由 API 层处理
} finally {
categoryPlayerLoading[categoryId] = false;
}
};
/** 选手分页变更 */
const handlePlayerPageChange = (categoryId: string, page: number) => {
fetchPlayers(categoryId, page);
};
// ===== 初始化 =====
onMounted(async () => {
setDetailLoading(true);
try {
const id = props.record?.id;
if (!id) {
message.error('缺少赛事ID');
return;
}
const res = await getEventDetail(String(id));
if (res.code === 200) {
setDetail(res.data);
// 为每个组别加载第一页选手
for (const cat of res.data.categoryList) {
categoryPlayers[cat.id] = [];
categoryPlayerTotal[cat.id] = 0;
categoryPlayerPage[cat.id] = 1;
fetchPlayers(cat.id, 1);
}
} else {
message.error(res.msg || '获取详情失败');
}
} catch (e: any) {
console.error('获取赛事详情失败:', e);
} finally {
setDetailLoading(false);
}
});
return () => (
<Modal
@@ -112,97 +157,117 @@ export default defineComponent({
destroyOnClose
wrapClassName={styles.eventDetailModalMain}
>
{/* ===== 基础信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>基础信息</div>
<Descriptions size="small" bordered column={3} class={styles.desc}>
{/* 第一行：赛事名称（1 列） + 赛事时间（占 2 列） */}
<Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
<Descriptions.Item label="赛事时间" span={2}>
{detail.eventTime}
</Descriptions.Item>
{detailLoading.value ? (
<div style={{ textAlign: 'center', padding: '80px 0' }}>
<Spin size="large" />
</div>
) : detail.value ? (
<>
{/* ===== 基础信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>基础信息</div>
<Descriptions size="small" bordered column={3} class={styles.desc}>
<Descriptions.Item label="赛事名称">{detail.value.name}</Descriptions.Item>
<Descriptions.Item label="赛事时间" span={2}>
{detail.value.startTimeBegin} 至 {detail.value.startTimeEnd}
</Descriptions.Item>
{/* 第二行：赛事说明（占 3 列，独占整行） */}
<Descriptions.Item label="赛事说明" span={3}>
{detail.descr}
</Descriptions.Item>
<Descriptions.Item label="赛事说明" span={3}>
{detail.value.descr}
</Descriptions.Item>
<Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
<Descriptions.Item label="取消报名截止时间" span={2}>
{detail.cancelDeadline}
</Descriptions.Item>
<Descriptions.Item label="报名起止时间" span={3}>
{detail.value.signupTimeBegin} 至 {detail.value.signupTimeEnd}
</Descriptions.Item>
<Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
<Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
<Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
<Descriptions.Item label="省市区">{detail.value.venueArea}</Descriptions.Item>
<Descriptions.Item label="地点">{detail.value.venue}</Descriptions.Item>
<Descriptions.Item label="场地编号">{detail.value.venueNo}</Descriptions.Item>
<Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
<Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
<Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
<Descriptions.Item label="公开活动">
{formatPublic(detail.value.isPublic)}
</Descriptions.Item>
<Descriptions.Item label="证件号">
{formatYN(detail.value.isRequireIdCardNo)}
</Descriptions.Item>
<Descriptions.Item label="证件图片">
{formatYN(detail.value.isRequireIdCardImg)}
</Descriptions.Item>
<Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
<Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
<Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
<Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
<Descriptions.Item label="取消报名人数" span={1}>
{detail.cancelledCount}
</Descriptions.Item>
<Descriptions.Item label="创建时间">{detail.value.createTime}</Descriptions.Item>
<Descriptions.Item label="创建人" span={2}>
{detail.value.createNickname}
</Descriptions.Item>
<Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
<Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
<Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
</Descriptions>
</div>
<Descriptions.Item label="报名人数">{detail.value.signupCount}</Descriptions.Item>
<Descriptions.Item label="退赛人数">{detail.value.dropoutCount}</Descriptions.Item>
<Descriptions.Item label="最大人数">{detail.value.dtotalLimit}</Descriptions.Item>
{/* ===== 封面 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>封面</div>
<Image src={detail.cover} />
</div>
<Descriptions.Item label="总对阵数">
{detail.value.matchTotalCount}
</Descriptions.Item>
<Descriptions.Item label="已完成对阵数" span={2}>
{detail.value.matchCount}
</Descriptions.Item>
</Descriptions>
</div>
{/* ===== 赛事公告 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>赛事公告</div>
<div class={styles.textBlock}>{detail.announcement}</div>
</div>
{/* ===== 封面 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>封面</div>
<Image src={detail.value.img} />
</div>
{/* ===== 组别信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>组别信息</div>
{MOCK_GROUPS.map((group) => (
<div key={group.key} class={styles.group}>
<div class={styles.groupTitle}>{group.title}</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={group.players}
size="small"
pagination={false}
bordered
/>
<div class={styles.paginationRow}>
<Pagination
current={1}
pageSize={10}
total={5}
showSizeChanger={false}
size="small"
/>
{/* ===== 赛事公告 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>赛事公告</div>
<div class={styles.textBlock}>{detail.value.notice}</div>
</div>
{/* ===== 组别信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>组别信息</div>
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
<div key={cat.id} class={styles.group}>
<div class={styles.groupTitle}>
{cat.name}（{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}）
</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={categoryPlayers[cat.id] || []}
loading={categoryPlayerLoading[cat.id]}
scroll={{ x: 'max-content', y: 200 }}
size="small"
pagination={false}
bordered
/>
<div class={styles.paginationRow}>
<Pagination
current={categoryPlayerPage[cat.id] || 1}
pageSize={PAGE_SIZE}
total={categoryPlayerTotal[cat.id] || 0}
showSizeChanger={false}
size="small"
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
/>
</div>
</div>
))}
</div>
{/* ===== 分组信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>分组信息</div>
<div class={styles.divisionList}>
{detail.value.groupInfoList.map((d: string) => (
<div key={d} class={styles.divisionItem}>
{d}
</div>
))}
</div>
</div>
))}
</div>
{/* ===== 分组信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>分组信息</div>
<div class={styles.divisionList}>
{MOCK_DIVISIONS.map((d) => (
<div key={d} class={styles.divisionItem}>
{d}
</div>
))}
</div>
</div>
</>
) : null}
</Modal>
);
},
src/pages/events/list/components/EventRegulationModal.module.less
+1 -1
View File
@@ -29,7 +29,7 @@
.imageGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
src/pages/events/list/components/EventRegulationModal.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ interface EventRegulationModalProps {
onClose: () => void;
}
/** 规程文字 */
/** 规程内容 */
const REGULATION_TEXT = [
'一、赛事目的：推动羽毛球运动发展，提高运动员技术水平，增进体育文化交流。',
'二、参赛资格：凡身体健康、年龄符合要求的羽毛球爱好者均可报名参加。',
@@ -35,16 +35,16 @@ export default defineComponent({
<Modal
visible={props.visible}
title="赛事规程"
width={760}
width={880}
onCancel={props.onClose}
footer={null}
centered
destroyOnClose
wrapClassName={styles.eventRegulationModalMain}
>
{/* 规程文字 */}
{/* 规程内容 */}
<div class={styles.section}>
<div class={styles.sectionTitle}>规程文字</div>
<div class={styles.sectionTitle}>规程内容</div>
<div class={styles.textBlock}>{REGULATION_TEXT}</div>
</div>
src/pages/events/list/index.tsx
+64 -53
View File
@@ -1,4 +1,4 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import {
Button,
Input,
@@ -20,6 +20,7 @@ import {
ID_CARD_OPTIONS,
ID_CARD_IMAGE_OPTIONS,
} from './model/useEventListModel';
import { toggleEventOnline } from '@/api/events';
import { regionOptions } from '@/utils/areaData';
import { useContainerSize, useState } from '@/hooks';
import EventRegulationModal from './components/EventRegulationModal';
@@ -37,6 +38,7 @@ function renderBodyCell({
text,
record,
onView,
onViewRegulation,
onAudit,
onToggleShelf,
}: {
@@ -44,10 +46,11 @@ function renderBodyCell({
text: any;
record: any;
onView: (record: any) => void;
onViewRegulation: (record: any) => void;
onAudit: (record: any) => void;
onToggleShelf: (record: any) => void;
}) {
if (column.dataIndex === 'eventName') {
if (column.dataIndex === 'name') {
const maxLen = 15;
const raw = text || '';
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
@@ -62,7 +65,7 @@ function renderBodyCell({
if (column.key === 'regulation') {
return (
<a style={{ cursor: 'pointer' }} onClick={() => onView(record)}>
<a style={{ cursor: 'pointer' }} onClick={() => onViewRegulation(record)}>
查看
</a>
);
@@ -72,45 +75,29 @@ function renderBodyCell({
const status = record.status;
return (
// 待审核：查看 + 审核
(status === 'pending' && (
// 报名中(0) / 进行中(1)：查看 + 下架
((status === '0' || status === '1') && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button type="link" size="small" onClick={() => onAudit(record)}>
审核
</Button>
</Space>
)) ||
// 报名中：查看 + 下架
(status === 'enrolling' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button type="link" size="small" danger onClick={() => onToggleShelf(record)}>
<Button type="link" size="small" onClick={() => onToggleShelf(record)}>
下架
</Button>
</Space>
)) ||
// 已下架：查看 + 上架
(status === 'removed' && (
// 已下架(4)：查看 + 上架
(status === '4' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button
type="link"
size="small"
style={{ color: '#52c41a' }}
onClick={() => onToggleShelf(record)}
>
<Button type="link" size="small" onClick={() => onToggleShelf(record)}>
上架
</Button>
</Space>
)) || (
// 审核不通过 / 已删除：仅查看
// 已结束(2) / 已删除(3)：仅查看
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
@@ -147,49 +134,62 @@ export default defineComponent({
const [currentRecord, setCurrentRecord] = useState<any>({});
const handleView = (record: any) => {
console.log('查看赛事:', record.eventId);
console.log('查看赛事:', record.id);
setCurrentRecord(record);
setDetailModalVisible(true);
};
/** 上架 / 下架 通用 */
const handleToggleShelf = (record: any) => {
const isRemoved = record.status === 'removed';
const isRemoved = record.status === '4';
const actionText = isRemoved ? '上架' : '下架';
Modal.confirm({
title: `${actionText}确认`,
content: `确认${actionText}"${record.eventName}"该赛事吗，下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`,
content: `确认${actionText}"${record.name}"该赛事吗，下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`,
okText: '确认',
cancelText: '取消',
onOk: () => {
console.log(`${actionText}赛事:`, record.eventId);
// TODO: 替换为真实 API 调用
message.success(`${actionText}成功`);
onOk: async () => {
const online = isRemoved ? '1' : '0';
try {
const res = await toggleEventOnline({ id: record.id, online });
if (res.code === 200) {
message.success(`${actionText}成功`);
handleSearch();
} else {
message.error(res.msg || `${actionText}失败`);
}
} catch (e: any) {
console.error(`${actionText}失败:`, e);
}
},
});
};
/** 打开审核弹窗 */
const handleAudit = (record: any) => {
console.log('审核赛事:', record.eventId);
console.log('审核赛事:', record.id);
setCurrentRecord(record);
setAuditModalVisible(true);
};
/** 提交审核 */
const handleAuditSubmit = (payload: { approved: boolean; comment: string }) => {
console.log('提交审核:', currentRecord.value.eventId, payload);
console.log('提交审核:', currentRecord.value.id, payload);
// TODO: 替换为真实 API 调用
message.success('审核提交成功');
setAuditModalVisible(false);
};
const handleViewRegulation = (record: any) => {
console.log('查看规程:', record.eventId);
console.log('查看规程:', record.id);
setCurrentRecord(record);
setRegulationModalVisible(true);
};
onMounted(() => {
handleSearch();
});
/** 最终表格列：模型列 + 赛事规程 + 操作 */
const tableColumns = [
...columns,
@@ -208,35 +208,45 @@ export default defineComponent({
{/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="创建时间" name="createTimeRange">
<Form.Item label="创建时间" name="createDateRange">
<RangePicker
value={filterForm.createTimeRange as any}
value={filterForm.createDateRange as any}
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style={{ width: '260px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.createTimeRange = val)}
onUpdate:value={(val: any) => (filterForm.createDateRange = val)}
/>
</Form.Item>
<Form.Item label="赛事时间" name="eventTimeRange">
<Form.Item label="赛事时间" name="startDateRange">
<RangePicker
value={filterForm.eventTimeRange as any}
value={filterForm.startDateRange as any}
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style={{ width: '260px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.eventTimeRange = val)}
onUpdate:value={(val: any) => (filterForm.startDateRange = val)}
/>
</Form.Item>
<Form.Item label="赛事名称" name="searchName">
<Form.Item label="赛事名称" name="name">
<Input
value={filterForm.name}
placeholder="请输入赛事名称"
style={{ width: '180px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.name = val.target?.value ?? val ?? '')}
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="创建人" name="searchCreator">
<Form.Item label="创建人" name="createName">
<Input
value={filterForm.createName}
placeholder="请输入创建人"
style={{ width: '150px' }}
allowClear
onUpdate:value={(val: any) =>
(filterForm.createName = val.target?.value ?? val ?? '')
}
onPressEnter={handleSearch}
/>
</Form.Item>
@@ -249,31 +259,31 @@ export default defineComponent({
onUpdate:value={(val: any) => (filterForm.status = val || '')}
/>
</Form.Item>
<Form.Item label="公开活动" name="publicEvent">
<Form.Item label="公开活动" name="isPublic">
<Select
value={filterForm.publicEvent}
value={filterForm.isPublic}
options={PUBLIC_EVENT_OPTIONS as any}
style={{ width: '170px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.publicEvent = val || '')}
onUpdate:value={(val: any) => (filterForm.isPublic = val || '')}
/>
</Form.Item>
<Form.Item label="证件号" name="needIdCard">
<Form.Item label="证件号" name="idCardNo">
<Select
value={filterForm.needIdCard}
value={filterForm.idCardNo}
options={ID_CARD_OPTIONS as any}
style={{ width: '120px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.needIdCard = val || '')}
onUpdate:value={(val: any) => (filterForm.idCardNo = val || '')}
/>
</Form.Item>
<Form.Item label="证件图片" name="needIdCardImage">
<Form.Item label="证件图片" name="idCardImg">
<Select
value={filterForm.needIdCardImage}
value={filterForm.idCardImg}
options={ID_CARD_IMAGE_OPTIONS as any}
style={{ width: '120px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.needIdCardImage = val || '')}
onUpdate:value={(val: any) => (filterForm.idCardImg = val || '')}
/>
</Form.Item>
<Form.Item label="省市区" name="region">
@@ -313,6 +323,7 @@ export default defineComponent({
renderBodyCell({
...args,
onView: handleView,
onViewRegulation: handleViewRegulation,
onAudit: handleAudit,
onToggleShelf: handleToggleShelf,
}),
src/pages/events/list/model/useEventListModel.ts
+160 -116
View File
@@ -2,196 +2,243 @@ 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 type { TournamentAdminVO, EventListQueryParams } from '@/api/events';
import { getEventList } from '@/api/events';
// ============================================================
// 常量
// ============================================================
/** 赛事状态选项 */
/** 赛事状态选项（value 对应 API status: 不传=全部、0=报名中，1=进行中，2=已结束，3=已删除，4=已下架） */
export const EVENT_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'pending', label: '待审核' },
{ value: 'enrolling', label: '报名中' },
{ value: 'deleted', label: '已删除' },
{ value: 'removed', label: '已下架' },
{ value: 'rejected', label: '审核不通过' },
{ value: '0', label: '报名中' },
{ value: '1', label: '进行中' },
{ value: '2', label: '已结束' },
{ value: '3', label: '已删除' },
{ value: '4', label: '已下架' },
] as const;
/** 公开活动选项 */
/** 公开活动选项（value 对应 API isPublic: 0=非公开，1=公开） */
export const PUBLIC_EVENT_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'show', label: '在首页展示赛事' },
{ value: 'hide', label: '不在首页展示赛事' },
{ value: '1', label: '公开' },
{ value: '0', label: '非公开' },
] as const;
/** 证件号选项 */
/** 证件号选项（value 对应 API idCardNo: 0=无需，1=需要） */
export const ID_CARD_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'no', label: '无需提供' },
{ value: 'yes', label: '需提供' },
{ value: '0', label: '无需提供' },
{ value: '1', label: '需提供' },
] as const;
/** 证件图片选项 */
/** 证件图片选项（value 对应 API idCardImg: 0=无需，1=需要） */
export const ID_CARD_IMAGE_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'no', label: '无需提供' },
{ value: 'yes', label: '需提供' },
{ value: '0', label: '无需提供' },
{ value: '1', label: '需提供' },
] as const;
// ============================================================
// 假数据
// ============================================================
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
key: `${i + 1}`,
eventId: `EV2026070100${String(i + 1).padStart(2, '0')}`,
eventName:
i % 3 === 0
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
: i % 3 === 1
? '国际马拉松城市联赛'
: '全民健身运动会',
eventTimeStart: '2026-08-12 09:00',
eventTimeEnd: '2026-08-15 18:00',
province: '广东省',
city: '深圳市',
district: '南山区',
address: '深圳湾体育中心',
needIdCard: i % 2 === 0 ? '是' : '否',
needIdCardImage: i % 2 === 0 ? '是' : '否',
creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
createTime: '2026-07-01 14:30:00',
status: (['pending', 'enrolling', 'deleted', 'removed', 'rejected'] as const)[i % 5],
enrolledCount: [128, 256, 512, 64, 0][i % 5],
cancelledCount: [5, 12, 8, 3, 0][i % 5],
}));
/** 状态标签映射 */
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
pending: { label: '待审核', tone: 'warning' },
enrolling: { label: '报名中', tone: 'primary' },
deleted: { label: '已删除', tone: 'neutral' },
removed: { label: '已下架', tone: 'orange' },
rejected: { label: '审核不通过', tone: 'danger' },
'0': { label: '报名中', tone: 'primary' },
'1': { label: '进行中', tone: 'cyan' },
'2': { label: '已结束', tone: 'neutral' },
'3': { label: '已删除', tone: 'neutral' },
'4': { label: '已下架', tone: 'orange' },
};
/** 0/1 → 显示文字 */
const formatDisplayValue = (value: string, map: Record<string, string>) => map[value] ?? value;
const ID_CARD_DISPLAY_MAP: Record<string, string> = { '0': '否', '1': '是' };
const IS_PUBLIC_DISPLAY_MAP: Record<string, string> = { '0': '非公开', '1': '公开' };
// ============================================================
// Model
// ============================================================
/**
* 赛事列表页数据模型
* 筛选字段名与 API query 参数（EventListQueryParams）保持一致，
* 仅日期区间 RangePicker 拆分为 start/end 两个字段、省市区 Cascader 取末级为 areaName。
*/
export function useEventListModel() {
// ===== 筛选条件 =====
// ===== 筛选条件（key 名对齐 API 查询参数） =====
const filterForm = reactive({
createTimeRange: null as [string, string] | null,
eventTimeRange: null as [string, string] | null,
searchName: '',
searchCreator: '',
createDateRange: null as [string, string] | null,
startDateRange: null as [string, string] | null,
name: '',
createName: '',
status: '',
region: [] as string[],
publicEvent: '',
needIdCard: '',
needIdCardImage: '',
isPublic: '',
idCardNo: '',
idCardImg: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedName } = useDebounce(
toRef(filterForm, 'searchName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedName } = useDebounce(toRef(filterForm, 'name') as Ref<string>, {
delay: 300,
});
const { debouncedValue: debouncedCreator } = useDebounce(
toRef(filterForm, 'searchCreator') as Ref<string>,
toRef(filterForm, 'createName') as Ref<string>,
{ delay: 300 },
);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [dataSource, setDataSource] = useState<TournamentAdminVO[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
total: 0,
});
// ===== 表格列配置 =====
// ===== 表格列配置（dataIndex 对齐 TournamentAdminVO 字段） =====
const columns = [
{ title: '赛事ID', dataIndex: 'eventId', key: 'eventId', width: 180 },
{ title: '赛事ID', dataIndex: 'id', key: 'id', width: 180 },
{
title: '赛事名称',
dataIndex: 'eventName',
key: 'eventName',
dataIndex: 'name',
key: 'name',
width: 160,
},
{
title: '赛事时间',
key: 'eventTime',
width: 260,
customRender: ({ record }: { record: any }) =>
`${record.eventTimeStart} 至 ${record.eventTimeEnd}`,
customRender: ({ record }: { record: TournamentAdminVO }) =>
`${record.startTimeBegin} 至 ${record.startTimeEnd}`,
},
{
title: '省市区',
key: 'region',
dataIndex: 'venueArea',
key: 'venueArea',
width: 200,
customRender: ({ record }: { record: any }) =>
`${record.province} ${record.city} ${record.district}`,
},
{ title: '地点', dataIndex: 'address', key: 'address', width: 180 },
{
title: '地点',
dataIndex: 'venue',
key: 'venue',
width: 180,
},
{
title: '是否公开',
dataIndex: 'isPublic',
key: 'isPublic',
width: 100,
customRender: ({ text }: { text: string }) => formatDisplayValue(text, IS_PUBLIC_DISPLAY_MAP),
},
{
title: '是否提供证件号',
dataIndex: 'needIdCard',
key: 'needIdCard',
dataIndex: 'isRequireIdCardNo',
key: 'isRequireIdCardNo',
width: 160,
customRender: ({ text }: { text: string }) => formatDisplayValue(text, ID_CARD_DISPLAY_MAP),
},
{
title: '是否提供证件图片',
dataIndex: 'needIdCardImage',
key: 'needIdCardImage',
dataIndex: 'isRequireIdCardImg',
key: 'isRequireIdCardImg',
width: 160,
customRender: ({ text }: { text: string }) => formatDisplayValue(text, ID_CARD_DISPLAY_MAP),
},
{
title: '创建人昵称',
dataIndex: 'creatorNickname',
key: 'creatorNickname',
dataIndex: 'createNickname',
key: 'createNickname',
width: 110,
},
{
title: '创建人手机号',
dataIndex: 'creatorPhone',
key: 'creatorPhone',
dataIndex: 'createPhone',
key: 'createPhone',
width: 130,
},
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 170,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 90,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
const info = STATUS_MAP[text] || { label: text, tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
{ title: '报名人数', dataIndex: 'enrolledCount', key: 'enrolledCount', width: 90 },
{ title: '取消报名人数', dataIndex: 'cancelledCount', key: 'cancelledCount', width: 140 },
{
title: '报名人数',
dataIndex: 'signupCount',
key: 'signupCount',
width: 90,
},
{
title: '取消报名人数',
dataIndex: 'dropoutCount',
key: 'dropoutCount',
width: 140,
},
];
// ===== 构建 API 查询参数 =====
const buildQueryParams = (): EventListQueryParams => {
const params: EventListQueryParams = {
page: String(pagination.value.current),
limit: String(pagination.value.pageSize),
};
if (filterForm.createDateRange) {
params.createDate = filterForm.createDateRange[0];
params.createDateEnd = filterForm.createDateRange[1];
}
if (filterForm.startDateRange) {
params.startDate = filterForm.startDateRange[0];
params.startDateEnd = filterForm.startDateRange[1];
}
if (filterForm.region.length > 0) {
params.areaName = filterForm.region[filterForm.region.length - 1];
}
if (filterForm.name.trim()) {
params.name = filterForm.name.trim();
}
if (filterForm.createName.trim()) {
params.createName = filterForm.createName.trim();
}
if (filterForm.status) {
params.status = filterForm.status;
}
if (filterForm.isPublic) {
params.isPublic = filterForm.isPublic;
}
if (filterForm.idCardNo) {
params.idCardNo = filterForm.idCardNo;
}
if (filterForm.idCardImg) {
params.idCardImg = filterForm.idCardImg;
}
return params;
};
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
filterForm.createTimeRange !== null ||
filterForm.eventTimeRange !== null ||
filterForm.createDateRange !== null ||
filterForm.startDateRange !== null ||
debouncedName.value.trim() !== '' ||
debouncedCreator.value.trim() !== '' ||
filterForm.status !== '' ||
filterForm.region.length > 0 ||
filterForm.publicEvent !== '' ||
filterForm.needIdCard !== '' ||
filterForm.needIdCardImage !== ''
filterForm.isPublic !== '' ||
filterForm.idCardNo !== '' ||
filterForm.idCardImg !== ''
);
});
@@ -201,23 +248,18 @@ export function useEventListModel() {
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
createTimeRange: filterForm.createTimeRange,
eventTimeRange: filterForm.eventTimeRange,
name: debouncedName.value,
creator: debouncedCreator.value,
status: filterForm.status,
region: filterForm.region,
publicEvent: filterForm.publicEvent,
needIdCard: filterForm.needIdCard,
needIdCardImage: filterForm.needIdCardImage,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
message.success('查询成功');
const queryParams = buildQueryParams();
console.log('赛事列表查询参数:', queryParams);
const res = await getEventList(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);
}
@@ -225,17 +267,19 @@ export function useEventListModel() {
/** 重置 */
const handleReset = useThrottleFn(() => {
filterForm.createTimeRange = null;
filterForm.eventTimeRange = null;
filterForm.searchName = '';
filterForm.searchCreator = '';
filterForm.createDateRange = null;
filterForm.startDateRange = null;
filterForm.name = '';
filterForm.createName = '';
filterForm.status = '';
filterForm.region = [];
filterForm.publicEvent = '';
filterForm.needIdCard = '';
filterForm.needIdCardImage = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
filterForm.isPublic = '';
filterForm.idCardNo = '';
filterForm.idCardImg = '';
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
// 等待 debounce 生效后自动查询
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
src/pages/events/orders/components/OrderDetailModal.tsx
+258 -158
View File
@@ -1,39 +1,74 @@
import { defineComponent, computed } from 'vue';
import { Modal, Table, Button, Pagination, Image, Space } from 'ant-design-vue';
import { defineComponent, computed, onMounted } from 'vue';
import { Modal, Table, Button, Pagination, Image, Space, Spin } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import { useState } from '@/hooks';
import {
getOrderDetail,
getOrderPlayerList,
type TournamentAdminOrderInfoVO,
type InnerRefundInfo,
type TournamentAdminOrderInfoPageVO,
} from '@/api/orders';
import styles from './OrderDetailModal.module.less';
interface OrderDetailModalProps {
visible: boolean;
record: any;
orderNo: string;
uniqueId: string;
onClose: () => void;
/** 触发"重新退款"二次确认对话框 */
onReRefund: (record: any) => void;
onReRefund: () => void;
}
// ===== 选手表格列（对齐 TournamentAdminOrderInfoPageVO） =====
const GENDER_MAP: Record<string, string> = { '1': '男', '2': '女' };
const formatGender = (v: string) => GENDER_MAP[v] ?? v;
const formatMoney = (v: string) => {
const n = parseFloat(v);
return isNaN(n) ? '-' : `${n.toFixed(2)}`;
};
const PLAYER_COLUMNS = [
{ title: '真实姓名', dataIndex: 'name', key: 'name', width: 100, align: 'center' as const },
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80, align: 'center' as const },
{
title: '真实姓名',
dataIndex: 'realName',
key: 'realName',
width: 100,
align: 'center' as const,
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
width: 60,
align: 'center' as const,
customRender: ({ text }: { text: string }) => formatGender(text),
},
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
{
title: '证件图片',
dataIndex: 'idImg',
key: 'idImg',
key: 'idCardImg',
width: 170,
customRender: ({ text }: { text: string[] }) => (
<Space>
{(text || []).map((src) => (
<Image key={src} width={60} height={40} src={src} />
))}
</Space>
),
customRender: ({ record }: { record: TournamentAdminOrderInfoPageVO }) => {
const urls = record.idCardImgList?.length
? record.idCardImgList
: record.idCardImg
? [record.idCardImg]
: [];
if (!urls.length) return <span>-</span>;
return (
<Space>
{urls.map((src) => (
<Image key={src} width={60} height={40} src={src} />
))}
</Space>
);
},
},
{
title: '比赛组别',
dataIndex: 'groupName',
key: 'groupName',
dataIndex: 'categoryName',
key: 'categoryName',
width: 110,
align: 'center' as const,
},
@@ -43,7 +78,7 @@ const PLAYER_COLUMNS = [
key: 'orderAmount',
width: 100,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '优惠金额',
@@ -51,15 +86,15 @@ const PLAYER_COLUMNS = [
key: 'discountAmount',
width: 100,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '实付金额',
dataIndex: 'paidAmount',
key: 'paidAmount',
dataIndex: 'payAmount',
key: 'payAmount',
width: 100,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '退款金额',
@@ -67,7 +102,7 @@ const PLAYER_COLUMNS = [
key: 'refundAmount',
width: 100,
align: 'right' as const,
customRender: ({ text }: { text: number }) => (text ? text.toFixed(2) : '-'),
customRender: ({ text }: { text: string }) => (text === '-' || !text ? '-' : formatMoney(text)),
},
];
@@ -80,43 +115,79 @@ export default defineComponent({
name: 'OrderDetailModal',
props: {
visible: { type: Boolean, default: false },
record: { type: Object, default: () => ({}) },
orderNo: { type: String, default: '' },
uniqueId: { type: String, default: '' },
onClose: { type: Function, required: true },
onReRefund: { type: Function, required: true },
},
setup(props: OrderDetailModalProps) {
const [refundPage, setRefundPage] = useState(1);
const [refundPageSize, setRefundPageSize] = useState(2);
// ===== 数据状态 =====
const [detail, setDetail] = useState<TournamentAdminOrderInfoVO | null>(null);
const [detailLoading, setDetailLoading] = useState(true);
/** 退款记录 */
const refundRecords = computed<any[]>(() => props.record?.refundRecords || []);
// ===== 选手列表分页状态 =====
const [players, setPlayers] = useState<TournamentAdminOrderInfoPageVO[]>([]);
const [playersLoading, setPlayersLoading] = useState(true);
const [playerPage, setPlayerPage] = useState(1);
const [playerTotal, setPlayerTotal] = useState(0);
const playerPageSize = 5;
/** 获取选手列表（分页） */
const fetchPlayers = async (page: number) => {
setPlayersLoading(true);
try {
const res = await getOrderPlayerList({
orderNo: props.orderNo,
uniqueId: props.uniqueId,
page: String(page),
limit: String(playerPageSize),
});
if (res.code === 200) {
setPlayers(res.data.list);
setPlayerTotal(res.data.total);
setPlayerPage(page);
}
} finally {
setPlayersLoading(false);
}
};
// ===== 退款记录分页 =====
const [refundPage, setRefundPage] = useState(1);
const [refundPageSize] = useState(2);
const refundRecords = computed<InnerRefundInfo[]>(() => detail.value?.refundInfoList || []);
const hasRefund = computed(() => refundRecords.value.length > 0);
/** 当前页展示的退款记录 */
const pagedRefunds = computed(() => {
const start = (refundPage.value - 1) * refundPageSize.value;
return refundRecords.value.slice(start, start + refundPageSize.value);
});
/** 已退金额合计 */
const totalRefunded = computed(() =>
refundRecords.value
.filter((r) => r.status === 'success')
.reduce((sum, r) => sum + (r.amount || 0), 0),
);
const totalRefunded = computed(() => {
const records = refundRecords.value;
if (!records.length) return 0;
return records.reduce((sum, r) => sum + parseFloat(r.refundAmount || '0'), 0);
});
const handleRefundPageChange = (page: number, pageSize: number) => {
// ===== 初始化：获取详情 + 选手列表第一页 =====
onMounted(async () => {
const params = { orderNo: props.orderNo, uniqueId: props.uniqueId };
const [detailRes] = await Promise.all([getOrderDetail(params), fetchPlayers(1)]);
if (detailRes.code === 200) {
setDetail(detailRes.data);
}
setDetailLoading(false);
});
const handlePlayerPageChange = (page: number) => {
fetchPlayers(page);
};
const handleRefundPageChange = (page: number) => {
setRefundPage(page);
setRefundPageSize(pageSize);
};
const handleConfirm = () => {
// 无退款信息时：仅关闭弹窗
props.onClose();
};
const handleReRefund = () => {
props.onReRefund(props.record);
};
return () => (
@@ -139,130 +210,159 @@ export default defineComponent({
</button>
</div>
<div class={styles.modalBody}>
{/* ===== 订单信息 ===== */}
<div class={styles.infoGrid}>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>赛事名称：</span>
<span>{props.record?.eventName}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单编号：</span>
<span>{props.record?.orderId}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单时间：</span>
<span>{props.record?.orderTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>支付时间：</span>
<span>{props.record?.payTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单金额：</span>
<span>{props.record?.totalAmount?.toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>优惠金额：</span>
<span>{(props.record?.discountAmount || 0).toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>实付金额：</span>
<span>{props.record?.paidAmount?.toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>退款金额：</span>
<span>{props.record?.refundAmount?.toFixed(2)}元</span>
</div>
{detailLoading.value ? (
<div style={{ textAlign: 'center', padding: '80px 0' }}>
<Spin size="large" />
</div>
{/* ===== 选手信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>选手信息</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={props.record?.players || []}
size="small"
bordered
pagination={false}
scroll={{ x: 'max-content' }}
/>
</div>
{/* ===== 退款记录 ===== */}
<div class={styles.section}>
<div class={styles.refundHeader}>
<span class={styles.sectionTitle}>退款记录</span>
) : detail.value ? (
<div class={styles.modalBody}>
{/* ===== 订单信息 ===== */}
<div class={styles.infoGrid}>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>赛事名称：</span>
<span>{detail.value.tournamentName}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单编号：</span>
<span>{detail.value.orderNumber}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单时间：</span>
<span>{detail.value.orderTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>支付时间：</span>
<span>{detail.value.payTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单金额：</span>
<span>{formatMoney(detail.value.orderAmount)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>优惠金额：</span>
<span>{formatMoney(detail.value.discountAmount)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>实付金额：</span>
<span>{formatMoney(detail.value.payAmount)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>退款金额：</span>
<span>{formatMoney(detail.value.refundAmount)}元</span>
</div>
</div>
{hasRefund.value ? (
<>
<div class={styles.refundSummary}>
<span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
<span>退款次数：{refundRecords.value.length}次</span>
</div>
{/* 固定高度 + 内部滚动 */}
<div class={styles.refundList}>
{pagedRefunds.value.map((r, idx) => {
const statusInfo = REFUND_STATUS_MAP[r.status] || {
label: '-',
tone: 'default' as const,
};
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
return (
<div key={r.key} class={styles.refundCard}>
<div class={styles.refundCardHeader}>
<span class={styles.refundIndex}>第{realIdx}次退款</span>
<StatusTag label={statusInfo.label} tone={statusInfo.tone} />
</div>
<div class={styles.refundCardBody}>
<div class={styles.refundCol}>
<div>
退款金额：
<span class={styles.refundAmount}>
¥{r.amount.toFixed(2)}
{r.isPartial && (
<span class={styles.partialMark}>（部分退款）</span>
)}
</span>
{/* ===== 选手信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>选手信息</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={players.value}
loading={playersLoading.value}
size="small"
bordered
pagination={false}
scroll={{ x: 'max-content', y: 200 }}
/>
<div style={{ textAlign: 'right', marginTop: 18 }}>
<Pagination
current={playerPage.value}
pageSize={playerPageSize}
total={playerTotal.value}
showSizeChanger={false}
size="small"
onChange={handlePlayerPageChange}
/>
</div>
</div>
{/* ===== 退款记录 ===== */}
<div class={styles.section}>
<div class={styles.refundHeader}>
<span class={styles.sectionTitle}>退款记录</span>
</div>
{hasRefund.value ? (
<>
<div class={styles.refundSummary}>
<span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
<span>退款次数：{refundRecords.value.length}次</span>
</div>
<div class={styles.refundList}>
{pagedRefunds.value.map((r, idx) => {
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
const isSuccess = parseFloat(r.refundTime || '') > 0 || !!r.refundTime;
const statusInfo = {
label: isSuccess
? '退款成功'
: r.isFullRefund === '1'
? '退款待处理'
: '退款中',
tone: (isSuccess
? 'success'
: r.isFullRefund === '1'
? 'warning'
: 'orange') as StatusTagTone,
};
return (
<div key={r.refundOutTradeNo || idx} class={styles.refundCard}>
<div class={styles.refundCardHeader}>
<span class={styles.refundIndex}>第{realIdx}次退款</span>
<StatusTag label={statusInfo.label} tone={statusInfo.tone} />
</div>
<div class={styles.refundCardBody}>
<div class={styles.refundCol}>
<div>
退款金额：
<span class={styles.refundAmount}>
¥{formatMoney(r.refundAmount)}
{r.isFullRefund === '1' && (
<span class={styles.partialMark}>（全部退款）</span>
)}
{r.isFullRefund === '0' && (
<span class={styles.partialMark}>（部分退款）</span>
)}
</span>
</div>
<div>申请时间：{r.refundApplyTime}</div>
<div>完款时间：{r.refundTime || '-'}</div>
</div>
<div class={styles.refundCol}>
<div>退款方式：{r.refundMethod}</div>
<div>第三方退款单号：{r.refundOutTradeNo || '-'}</div>
<div>已退金额：¥{formatMoney(r.refundedAmount)}</div>
</div>
<div>申请时间：{r.applyTime}</div>
<div>完款时间：{r.completeTime || '-'}</div>
</div>
<div class={styles.refundCol}>
<div>退款方式：{r.method}</div>
<div>第三方退款单号：{r.thirdPartyNo || '-'}</div>
</div>
</div>
</div>
);
})}
</div>
<div class={styles.refundPagination}>
<Pagination
current={refundPage.value}
pageSize={refundPageSize.value}
total={refundRecords.value.length}
showSizeChanger={false}
size="small"
onChange={handleRefundPageChange}
/>
</div>
</>
) : (
<div class={styles.refundEmpty}>暂无退款记录</div>
)}
);
})}
</div>
<div class={styles.refundPagination}>
<Pagination
current={refundPage.value}
pageSize={refundPageSize.value}
total={refundRecords.value.length}
showSizeChanger={false}
size="small"
onChange={handleRefundPageChange}
/>
</div>
</>
) : (
<div class={styles.refundEmpty}>暂无退款记录</div>
)}
</div>
</div>
</div>
) : null}
{/* ===== 底部按钮 ===== */}
<div class={styles.modalFooter}>
<Button onClick={props.onClose}>取消</Button>
{hasRefund.value ? (
<Button danger onClick={handleReRefund}>
<Button danger onClick={props.onReRefund}>
重新退款
</Button>
) : (
<Button type="primary" onClick={handleConfirm}>
<Button type="primary" onClick={props.onClose}>
确认
</Button>
)}
src/pages/events/orders/index.tsx
+42 -21
View File
@@ -1,4 +1,4 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import {
Button,
Input,
@@ -10,8 +10,10 @@ import {
Tooltip,
Pagination,
Modal,
message,
} from 'ant-design-vue';
import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './model/useOrderModel';
import { retryRefundOrder } from '@/api/orders';
import { useContainerSize, useState } from '@/hooks';
import OrderDetailModal from './components/OrderDetailModal';
import pageStyles from '@/assets/styles/pageLayout.module.less';
@@ -20,22 +22,29 @@ const { RangePicker } = DatePicker;
/**
* 触发「重新退款」二次确认对话框
* 表格中的重新退款按钮和详情弹窗中的重新退款按钮均调用此函数。
*/
function promptReRefund(record: any) {
Modal.confirm({
title: '确认要重新退款吗？',
content: (
<div>
<div>退款金额：￥{(record.refundAmount || 0).toFixed(2)}</div>
<div>退款金额：￥{parseFloat(record.creatorSignupFeeRefund || '0').toFixed(2)}</div>
<div>退款方式：原路退回（微信支付）</div>
</div>
),
okText: '确认',
cancelText: '取消',
onOk: () => {
console.log('重新退款:', record.orderId);
// TODO: 替换为真实 API 调用
onOk: async () => {
try {
const res = await retryRefundOrder({ payOrderNo: record.orderNo });
if (res.code === 200) {
message.success('重新退款提交成功');
} else {
message.error(res.msg || '操作失败');
}
} catch (e: any) {
console.error('重新退款失败:', e);
}
},
});
}
@@ -57,7 +66,7 @@ function renderBodyCell({
onReRefund: (record: any) => void;
}) {
// 赛事名称：最多15字符，超出显示 Tooltip
if (column.dataIndex === 'eventName') {
if (column.dataIndex === 'name') {
const maxLen = 15;
const raw = text || '';
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
@@ -71,7 +80,7 @@ function renderBodyCell({
}
if (column.key === 'action') {
const showReRefund = record.refundStatus === 'refund_failed';
const showReRefund = record.refundStatus === 3;
return (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
@@ -134,50 +143,62 @@ 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="orderTimeRange">
<Form.Item label="订单时间" name="orderDateRange">
<RangePicker
value={filterForm.orderTimeRange as any}
value={filterForm.orderDateRange as any}
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style={{ width: '260px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.orderTimeRange = val)}
onUpdate:value={(val: any) => (filterForm.orderDateRange = val)}
/>
</Form.Item>
<Form.Item label="订单编号" name="searchOrderId">
<Form.Item label="订单编号" name="orderNo">
<Input
value={filterForm.orderNo}
placeholder="请输入订单编号"
style={{ width: '200px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.orderNo = val.target?.value ?? val ?? '')}
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="赛事名称" name="searchEventName">
<Form.Item label="赛事名称" name="tName">
<Input
value={filterForm.tName}
placeholder="请输入赛事名称"
style={{ width: '200px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.tName = val.target?.value ?? val ?? '')}
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="选手名称" name="searchPlayerName">
<Form.Item label="选手名称" name="sName">
<Input
value={filterForm.sName}
placeholder="请输入选手名称"
style={{ width: '200px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.sName = val.target?.value ?? val ?? '')}
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="订单状态" name="orderStatus">
<Form.Item label="订单状态" name="status">
<Select
value={filterForm.orderStatus}
value={filterForm.status}
options={ORDER_STATUS_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.orderStatus = val || '')}
onUpdate:value={(val: any) => (filterForm.status = val || '')}
/>
</Form.Item>
<Form.Item label="退款状态" name="refundStatus">
@@ -261,12 +282,12 @@ export default defineComponent({
{detailVisible.value && (
<OrderDetailModal
visible={detailVisible.value}
record={currentRecord.value}
orderNo={currentRecord.value.orderNo}
uniqueId={String(currentRecord.value.uniqueId)}
onClose={() => setDetailVisible(false)}
onReRefund={(record) => {
// 关闭详情弹窗，再弹出二次确认
onReRefund={() => {
setDetailVisible(false);
promptReRefund(record);
promptReRefund(currentRecord.value);
}}
/>
)}
src/pages/events/orders/model/useOrderModel.ts
+134 -203
View File
@@ -2,156 +2,46 @@ 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 {
getOrderList,
type TournamentAdminOrderPageVO,
type OrderListQueryParams,
} from '@/api/orders';
import { MOCK_ORDER_SUMMARY } from '@/config/mock/orderList';
// ============================================================
// 常量
// ============================================================
/** 订单状态选项 */
/** 订单状态选项（value 对应 API status: 不传=全部、1=支付成功，2=部分退款，3=全部退款，4=超时关闭） */
export const ORDER_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'paid', label: '已支付' },
{ value: 'partial_refund', label: '部分退款' },
{ value: 'full_refund', label: '全部退款' },
{ value: 'closed', label: '已关闭' },
{ value: '1', label: '支付成功' },
{ value: '2', label: '部分退款' },
{ value: '3', label: '全部退款' },
{ value: '4', label: '超时关闭' },
] as const;
/** 退款状态选项 */
/** 退款状态选项（value 对应 API refundStatus: 不传=全部、0=退款失败，1=退款成功） */
export const REFUND_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'refund_success', label: '退款成功' },
{ value: 'refund_failed', label: '退款失败' },
{ value: '1', label: '退款成功' },
{ value: '0', label: '退款失败' },
] as const;
/** 订单状态 StatusTag 映射 */
const ORDER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
paid: { label: '已支付', tone: 'success' },
partial_refund: { label: '部分退款', tone: 'orange' },
full_refund: { label: '全部退款', tone: 'primary' },
closed: { label: '已关闭', tone: 'default' },
const ORDER_STATUS_MAP: Record<number, { label: string; tone: StatusTagTone }> = {
1: { label: '支付成功', tone: 'success' },
2: { label: '部分退款', tone: 'orange' },
3: { label: '全部退款', tone: 'primary' },
4: { label: '已关闭', tone: 'default' },
};
/** 退款状态 StatusTag 映射 */
const REFUND_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
refund_success: { label: '退款成功', tone: 'success' },
refund_failed: { label: '退款失败', tone: 'danger' },
};
// ============================================================
// 假数据
// ============================================================
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
const orderStatus = (['paid', 'paid', 'partial_refund', 'full_refund', 'closed'] as const)[i % 5];
const refundStatus: string =
orderStatus === 'partial_refund' || orderStatus === 'full_refund'
? (['refund_success', 'refund_success', 'refund_failed'] as const)[i % 3]
: '';
const totalAmount = [188.0, 256.5, 399.0, 128.0, 520.0][i % 5];
const discountAmount = i % 3 === 0 ? 20.0 : i % 3 === 1 ? 10.0 : 0;
const refundAmount =
orderStatus === 'partial_refund'
? 50.0
: orderStatus === 'full_refund'
? totalAmount - discountAmount
: 0;
// ===== 选手信息（详情弹窗用） =====
const playerNames = ['张三', '李四', '王五'];
const players = playerNames.slice(0, (i % 3) + 1).map((name, idx) => ({
key: `${i + 1}-${idx}`,
name,
gender: idx === 1 ? '女' : '男',
phone: '12345678956',
idNo: 'xxxxxxxxxxxxxxxx',
idImg: [
'https://picsum.photos/seed/idimg-a/120/80',
'https://picsum.photos/seed/idimg-b/120/80',
],
groupName: ['男子单打', '女子双打', '混合双打'][idx],
orderAmount: [100.0, 50.0, 38.0][idx],
discountAmount: 0,
paidAmount: [100.0, 50.0, 38.0][idx],
refundAmount: idx === 1 && orderStatus === 'full_refund' ? 50.0 : 0,
}));
// ===== 退款记录（详情弹窗用） =====
const refundRecords: any[] = [];
if (orderStatus === 'partial_refund' || orderStatus === 'full_refund') {
if (i % 4 === 2) {
refundRecords.push(
{
key: `${i + 1}-r1`,
amount: 50.0,
isPartial: true,
applyTime: '2026-06-07 16:20',
completeTime: '2026-06-07 16:25',
method: '原路退回（微信支付）',
thirdPartyNo: '5030000789202606071625102846',
status: 'success',
},
{
key: `${i + 1}-r2`,
amount: 49.0,
isPartial: false,
applyTime: '2026-06-08 10:00',
completeTime: '',
method: '原路退回（微信支付）',
thirdPartyNo: '',
status: 'failed',
},
);
} else if (i % 4 === 0) {
refundRecords.push({
key: `${i + 1}-r1`,
amount: 30.0,
isPartial: true,
applyTime: '2026-06-05 09:30',
completeTime: '2026-06-05 09:35',
method: '原路退回（微信支付）',
thirdPartyNo: '5030000789202606050935000123',
status: 'success',
});
}
}
return {
key: `${i + 1}`,
orderId: `ORD202607${String(i + 1).padStart(5, '0')}`,
eventName:
i % 3 === 0
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
: i % 3 === 1
? '国际马拉松城市联赛'
: '全民健身运动会',
playerName: ['张选手', '李选手', '王选手', '赵选手'][i % 4],
phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
groupName: ['男子青年组', '女子青年组', '男子中年组', '女子中年组'][i % 4],
registrant: ['张报名', '李报名', '王报名', '赵报名'][i % 4],
registrantPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
registrantCount: [1, 2, 1, 3][i % 4],
orderTime: '2026-07-15 10:30:00',
payTime: '2026-07-15 10:32:15',
totalAmount,
discountAmount,
paidAmount: totalAmount - discountAmount,
refundAmount,
orderStatus,
refundStatus,
players,
refundRecords,
};
});
// ============================================================
// 金额汇总假数据
// ============================================================
const MOCK_SUMMARY = {
totalOrderAmount: 113255.0,
totalPaidAmount: 113255.0,
totalRefundAmount: 1255.0,
const REFUND_STATUS_MAP: Record<number, { label: string; tone: StatusTagTone }> = {
1: { label: '无退款', tone: 'default' },
2: { label: '退款成功', tone: 'success' },
3: { label: '退款失败', tone: 'danger' },
};
// ============================================================
@@ -160,57 +50,68 @@ const MOCK_SUMMARY = {
/**
* 订单列表页数据模型
* 筛选字段名与 API query 参数（OrderListQueryParams）保持一致。
*/
export function useOrderModel() {
// ===== 筛选条件 =====
// ===== 筛选条件（key 名对齐 API 查询参数） =====
const filterForm = reactive({
orderTimeRange: null as [string, string] | null,
searchOrderId: '',
searchEventName: '',
searchPlayerName: '',
orderStatus: '',
orderDateRange: null as [string, string] | null,
orderNo: '',
tName: '',
sName: '',
status: '',
refundStatus: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedOrderId } = useDebounce(
toRef(filterForm, 'searchOrderId') as Ref<string>,
const { debouncedValue: debouncedOrderNo } = useDebounce(
toRef(filterForm, 'orderNo') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedEventName } = useDebounce(
toRef(filterForm, 'searchEventName') as Ref<string>,
const { debouncedValue: debouncedTName } = useDebounce(
toRef(filterForm, 'tName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPlayerName } = useDebounce(
toRef(filterForm, 'searchPlayerName') as Ref<string>,
const { debouncedValue: debouncedSName } = useDebounce(
toRef(filterForm, 'sName') as Ref<string>,
{ delay: 300 },
);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [dataSource, setDataSource] = useState<TournamentAdminOrderPageVO[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
total: 0,
});
// ===== 金额汇总 =====
const [summary, setSummary] = useState(MOCK_SUMMARY);
// ===== 金额汇总（TODO: 汇总应来自独立接口） =====
const [summary, setSummary] = useState(MOCK_ORDER_SUMMARY);
// ===== 表格列配置（dataIndex 对齐 TournamentAdminOrderPageVO） =====
const formatMoney = (text: string) => {
const n = parseFloat(text);
return isNaN(n) ? '0.00元' : `${n.toFixed(2)}元`;
};
// ===== 表格列配置 =====
const columns = [
{ title: '订单编号', dataIndex: 'orderId', key: 'orderId', width: 200 },
{ title: '赛事名称', dataIndex: 'eventName', key: 'eventName', width: 180 },
{ title: '选手名称', dataIndex: 'playerName', key: 'playerName', width: 100 },
{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', width: 200 },
{
title: '赛事名称',
dataIndex: 'name',
key: 'name',
width: 180,
},
{ title: '选手名称', dataIndex: 'realName', key: 'realName', width: 100 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
{ title: '比赛组别', dataIndex: 'groupName', key: 'groupName', width: 120 },
{ title: '报名人', dataIndex: 'registrant', key: 'registrant', width: 100 },
{ title: '报名人手机号', dataIndex: 'registrantPhone', key: 'registrantPhone', width: 130 },
{ title: '比赛组别', dataIndex: 'categoryName', key: 'categoryName', width: 120 },
{ title: '报名人', dataIndex: 'creatorName', key: 'creatorName', width: 100 },
{ title: '报名人手机号', dataIndex: 'creatorPhone', key: 'creatorPhone', width: 130 },
{
title: '报名人数',
dataIndex: 'registrantCount',
key: 'registrantCount',
dataIndex: 'creatorSignupCount',
key: 'creatorSignupCount',
width: 90,
align: 'center' as const,
},
@@ -218,44 +119,46 @@ export function useOrderModel() {
{ title: '支付时间', dataIndex: 'payTime', key: 'payTime', width: 170 },
{
title: '订单总金额',
dataIndex: 'totalAmount',
key: 'totalAmount',
dataIndex: 'creatorSignupFee',
key: 'creatorSignupFee',
width: 120,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '总优惠金额',
dataIndex: 'discountAmount',
key: 'discountAmount',
dataIndex: 'creatorSignupFeeDiscount',
key: 'creatorSignupFeeDiscount',
width: 120,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '实付总金额',
dataIndex: 'paidAmount',
key: 'paidAmount',
dataIndex: 'creatorSignupFeeActual',
key: 'creatorSignupFeeActual',
width: 120,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '退款总金额',
dataIndex: 'refundAmount',
key: 'refundAmount',
dataIndex: 'creatorSignupFeeRefund',
key: 'creatorSignupFeeRefund',
width: 120,
align: 'right' as const,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
customRender: ({ text }: { text: string }) => formatMoney(text),
},
{
title: '订单状态',
dataIndex: 'orderStatus',
key: 'orderStatus',
width: 100,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
const info = ORDER_STATUS_MAP[text] || { label: text || '-', tone: 'default' as const };
customRender: ({ text }: { text: number }) => {
const info = ORDER_STATUS_MAP[text] || {
label: String(text ?? '-'),
tone: 'default' as const,
};
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
@@ -265,22 +168,52 @@ export function useOrderModel() {
key: 'refundStatus',
width: 100,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
if (!text) return h('span', '-');
const info = REFUND_STATUS_MAP[text] || { label: text, tone: 'default' as const };
customRender: ({ text }: { text: number }) => {
if (text === 1) return h('span', '-');
const info = REFUND_STATUS_MAP[text] || { label: String(text), tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
];
// ===== 构建 API 查询参数 =====
const buildQueryParams = (): OrderListQueryParams => {
const params: OrderListQueryParams = {
page: String(pagination.value.current),
limit: String(pagination.value.pageSize),
};
if (filterForm.orderDateRange) {
params.orderDate = filterForm.orderDateRange[0];
params.orderDateEnd = filterForm.orderDateRange[1];
}
if (filterForm.orderNo.trim()) {
params.orderNo = filterForm.orderNo.trim();
}
if (filterForm.tName.trim()) {
params.tName = filterForm.tName.trim();
}
if (filterForm.sName.trim()) {
params.sName = filterForm.sName.trim();
}
if (filterForm.status) {
params.status = filterForm.status;
}
if (filterForm.refundStatus) {
params.refundStatus = filterForm.refundStatus;
}
return params;
};
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
filterForm.orderTimeRange !== null ||
debouncedOrderId.value.trim() !== '' ||
debouncedEventName.value.trim() !== '' ||
debouncedPlayerName.value.trim() !== '' ||
filterForm.orderStatus !== '' ||
filterForm.orderDateRange !== null ||
debouncedOrderNo.value.trim() !== '' ||
debouncedTName.value.trim() !== '' ||
debouncedSName.value.trim() !== '' ||
filterForm.status !== '' ||
filterForm.refundStatus !== ''
);
});
@@ -291,21 +224,18 @@ export function useOrderModel() {
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
orderTimeRange: filterForm.orderTimeRange,
orderId: debouncedOrderId.value,
eventName: debouncedEventName.value,
playerName: debouncedPlayerName.value,
orderStatus: filterForm.orderStatus,
refundStatus: filterForm.refundStatus,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
setSummary(MOCK_SUMMARY);
message.success('查询成功');
const queryParams = buildQueryParams();
console.log('订单列表查询参数:', queryParams);
const res = await getOrderList(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);
}
@@ -313,15 +243,16 @@ export function useOrderModel() {
/** 重置 */
const handleReset = useThrottleFn(() => {
filterForm.orderTimeRange = null;
filterForm.searchOrderId = '';
filterForm.searchEventName = '';
filterForm.searchPlayerName = '';
filterForm.orderStatus = '';
filterForm.orderDateRange = null;
filterForm.orderNo = '';
filterForm.tName = '';
filterForm.sName = '';
filterForm.status = '';
filterForm.refundStatus = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
setSummary(MOCK_SUMMARY);
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
// 等待 debounce 生效后自动查询
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
src/pages/events/users/index.tsx
+46 -72
View File
@@ -1,4 +1,4 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import {
Button,
Input,
@@ -6,58 +6,15 @@ import {
Form,
Space,
Select,
Image,
Pagination,
Modal,
message,
} from 'ant-design-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;
}) {
// 证件图片：有则显示，无则不显示
if (column.dataIndex === 'idImg') {
const images = record.idImg || [];
if (images.length === 0) {
return '-';
}
return (
<Space>
{images.map((src: string) => (
<Image key={src} width={48} height={32} src={src} />
))}
</Space>
);
}
if (column.key === 'action') {
const isActive = record.status === 'active';
return (
<Button type="link" size="small" danger={isActive} onClick={() => onToggleStatus(record)}>
{isActive ? '禁用' : '启用'}
</Button>
);
}
return;
}
/**
* 用户列表
*/
export default defineComponent({
name: 'EventUsers',
setup() {
@@ -71,25 +28,30 @@ export default defineComponent({
handleReset,
handlePageChange,
} = useUserModel();
const { containerRef, height } = useContainerSize();
const handleToggleStatus = (record: any) => {
const isActive = record.status === 'active';
const actionText = isActive ? '禁用' : '启用';
const isActive = record.status === '1';
const actionText = isActive ? '停用' : '启用';
Modal.confirm({
title: `${actionText}确认`,
content: `确认${actionText}用户"${record.nickName}"吗？`,
content: `确认${actionText}用户"${record.realName}"吗？`,
okText: '确认',
cancelText: '取消',
onOk: () => {
console.log(`${actionText}用户:`, record.userId);
// TODO: 替换为真实 API 调用
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);
}
},
});
};
/** 最终表格列：模型列 + 操作 */
const tableColumns = [
...columns,
{
@@ -101,25 +63,32 @@ 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="searchUserName">
<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="searchPhone">
<Input
placeholder="请输入手机号"
style={{ width: '200px' }}
<Form.Item label="角色" name="roleId">
<Select
value={filterForm.roleId}
options={ROLE_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onPressEnter={handleSearch}
placeholder="全部"
onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
/>
</Form.Item>
<Form.Item label="状态" name="status">
@@ -141,8 +110,6 @@ export default defineComponent({
</Form.Item>
</Form>
</div>
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
@@ -153,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}
src/pages/events/users/model/useUserModel.ts
+54 -90
View File
@@ -2,92 +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 TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';
// ============================================================
// 常量
// ============================================================
/** 用户状态选项 */
export const USER_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'active', label: '正常' },
{ value: 'disabled', label: '禁用' },
{ value: '0', label: '停用' },
{ value: '1', label: '正常' },
] as const;
/** 用户状态 StatusTag 映射 */
const USER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
active: { label: '正常', tone: 'success' },
disabled: { label: '禁用', tone: 'danger' },
/** 角色选项（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' },
};
// ============================================================
// 假数据
// ============================================================
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
key: `${i + 1}`,
userId: `U202607${String(i + 1).padStart(5, '0')}`,
nickName: ['羽毛球小将', '马拉松达人', '健身爱好者', '游泳健将'][i % 4],
phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
realName: ['张三', '李四', '王五', '赵六'][i % 4],
gender: i % 2 === 0 ? '男' : '女',
idNo: '320101199001011234',
// 证图片来源：奇数索引有，偶数无
idImg:
i % 2 === 1
? ['https://picsum.photos/seed/idcard-a/120/80', 'https://picsum.photos/seed/idcard-b/120/80']
: [],
status: (i % 4 === 3 ? 'disabled' : 'active') as string,
loginTime: '2026-07-20 14:30:00',
}));
// ============================================================
// Model
// ============================================================
/**
* 用户列表页数据模型
*/
export function useUserModel() {
// ===== 筛选条件 =====
const filterForm = reactive({
searchUserName: '',
searchPhone: '',
text: '',
roleId: '',
status: '',
});
// 各字段防抖 300ms
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
{ delay: 300 },
);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
delay: 300,
});
// ===== 表格列配置 =====
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: 'gender', key: 'gender', width: 80 },
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
{
title: '证件图片',
dataIndex: 'idImg',
key: 'idImg',
width: 140,
},
{ title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
{
title: '状态',
dataIndex: 'status',
@@ -95,51 +59,51 @@ 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: 'loginTime', key: 'loginTime', width: 170 },
];
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
debouncedUserName.value.trim() !== '' ||
debouncedPhone.value.trim() !== '' ||
filterForm.status !== ''
);
});
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(
() => debouncedText.value.trim() !== '' || filterForm.roleId !== '' || filterForm.status !== '',
);
/** 查询（节流 500ms） */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
userName: debouncedUserName.value,
phone: debouncedPhone.value,
status: filterForm.status,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
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 (e: any) {
console.error('用户列表查询失败:', e);
} finally {
setLoading(false);
}
}, 500);
/** 重置（节流 500ms） */
const handleReset = useThrottleFn(() => {
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.text = '';
filterForm.roleId = '';
filterForm.status = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
src/pages/finance/reports/index.tsx
+1 -1
View File
@@ -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' }}
/>
src/pages/finance/reports/model/useReportsModel.ts
+10 -2
View File
@@ -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 重新拉取汇总 / 图表 / 明细
};
src/pages/system/roles/components/RoleFormModal.module.less
+6
View File
@@ -24,6 +24,12 @@
background: #fafafa;
}
.treeEmpty {
text-align: center;
color: #999;
padding: 24px 0;
}
.footer {
display: flex;
justify-content: flex-end;
src/pages/system/roles/components/RoleFormModal.tsx
+83 -40
View File
@@ -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>
src/pages/system/roles/components/UserListModal.tsx
+147 -107
View File
@@ -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>
);
},
});
src/pages/system/roles/controller.ts
+73 -40
View File
@@ -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;
}
src/pages/system/roles/index.tsx
+12 -8
View File
@@ -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}
/>
)}
src/pages/system/roles/model/useRoleModel.ts
+52 -182
View File
@@ -1,142 +1,12 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { computed, reactive, toRef, Ref } from 'vue';
import { message } from 'ant-design-vue';
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',
},
];
/** 角色下用户列表 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
@@ -148,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[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
const [dataSource, setDataSource] = useState<TournamentAdminRolePageVO[]>([]);
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
// ===== 弹窗状态 =====
const [formVisible, setFormVisible] = useState<boolean>(false);
@@ -189,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(MOCK_DATA);
setPagination({ ...pagination.value, total: 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: MOCK_DATA.length });
setDataSource(MOCK_DATA);
filterForm.name = '';
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
setTimeout(() => handleSearch(), 350);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
@@ -248,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);
}
@@ -263,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);
}
@@ -286,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,
@@ -318,7 +190,5 @@ export function useRoleModel() {
handleDelete,
handleViewUsers,
handleCloseUserList,
getRoleUsers,
renderStatus,
};
}
src/pages/system/users/components/UserFormModal.tsx
+20 -9
View File
@@ -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>
src/pages/system/users/controller.ts
+5 -4
View File
@@ -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;
// ============================================================
src/pages/system/users/index.tsx
+127 -60
View File
@@ -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,20 +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"
danger={isActive}
style={isActive ? {} : { color: '#52c41a' }}
onClick={() => onToggleStatus(record)}
>
{isActive ? '禁用' : '启用'}
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
{isActive ? '停用' : '启用'}
</Button>
</Space>
);
@@ -43,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),
});
}
/**
* 系统管理 - 用户管理
*/
@@ -78,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,
{
@@ -116,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">
@@ -175,8 +242,8 @@ export default defineComponent({
bodyCell: (args: any) =>
renderBodyCell({
...args,
onEdit: triggerEdit,
onToggleStatus: triggerToggle,
onEdit: handleEdit,
onToggleStatus: handleToggleStatus,
}),
}}
</Table>
src/pages/system/users/model/useUserModel.ts
+52 -150
View File
@@ -2,62 +2,34 @@ 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 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',
},
];
// ============================================================
// Model
// ============================================================
@@ -68,47 +40,30 @@ const MOCK_DATA = [
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[]>(MOCK_DATA);
const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 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',
@@ -123,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(MOCK_DATA);
setPagination({ ...pagination.value, total: 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: MOCK_DATA.length });
setDataSource(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,
@@ -231,18 +143,8 @@ export function useUserModel() {
columns,
pagination,
hasFilter,
modalVisible,
setModalVisible,
editingRecord,
isEdit,
formSubmitting,
handleSearch,
handleReset,
handlePageChange,
handleAdd,
handleEdit,
handleCloseModal,
handleSave,
handleToggleStatus,
};
}
src/types/yp-component.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
declare module '@yp-component/root';
src/utils/areaData.ts
+100
View File
@@ -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('-');
}