feat: 对接用户管理相关接口字段
This commit is contained in:
ZhuRui
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Banner 管理 API
|
||||
*/
|
||||
import { get, post } from '@/utils/request';
|
||||
import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
|
||||
import { MOCK_BANNER_LIST } from '@/config/mock/bannerList';
|
||||
import type {
|
||||
BannerListQueryParams,
|
||||
BannerSaveParams,
|
||||
BannerDelParams,
|
||||
BannerActiveParams,
|
||||
TournamentAdminBannerListVO,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
export type {
|
||||
TournamentAdminBannerListVO,
|
||||
BannerListQueryParams,
|
||||
BannerSaveParams,
|
||||
BannerDelParams,
|
||||
BannerActiveParams,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
/** GET /manager/banner/list — Banner 列表 */
|
||||
export async function getBannerList(
|
||||
params: BannerListQueryParams,
|
||||
): Promise<ApiResult<TournamentAdminBannerListVO[]>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
return { code: 200, msg: 'success', data: MOCK_BANNER_LIST };
|
||||
}
|
||||
return get('/manager/banner/list', params as Record<string, any>);
|
||||
}
|
||||
|
||||
/** POST /manager/banner/del — 删除 Banner */
|
||||
export function delBanner(id: string): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/del', { id });
|
||||
}
|
||||
|
||||
/** POST /manager/banner/save — 新增 Banner */
|
||||
export function saveBanner(params: BannerSaveParams): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/save', params);
|
||||
}
|
||||
|
||||
/** POST /manager/banner/update �� 编辑 Banner */
|
||||
export function updateBanner(params: BannerSaveParams): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/update', params);
|
||||
}
|
||||
|
||||
/** POST /manager/banner/active — 启用/禁用 Banner */
|
||||
export function toggleBannerActive(
|
||||
params: BannerActiveParams,
|
||||
): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/banner/active', params);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Banner 管理 — 类型定义
|
||||
*/
|
||||
|
||||
/** Banner 列表项 */
|
||||
export interface TournamentAdminBannerListVO {
|
||||
id: string;
|
||||
img: string;
|
||||
title: string;
|
||||
type: string;
|
||||
linkUrl: string;
|
||||
area: string;
|
||||
showTimeBegin: string;
|
||||
showTimeEnd: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** Banner 列表查询参数 */
|
||||
export interface BannerListQueryParams {
|
||||
title?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
/** Banner 新增/编辑请求 */
|
||||
export interface BannerSaveParams {
|
||||
id?: string;
|
||||
img: string;
|
||||
title: string;
|
||||
type: string;
|
||||
linkUrl: string;
|
||||
area: string;
|
||||
showTimeBegin: string;
|
||||
showTimeEnd: string;
|
||||
sort: string;
|
||||
}
|
||||
|
||||
/** Banner 删除请求 */
|
||||
export interface BannerDelParams {
|
||||
id: string;
|
||||
}
|
||||
|
||||
/** Banner 启用/禁用请求 */
|
||||
export interface BannerActiveParams {
|
||||
id: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface ApiResult<T> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
+34
-19
@@ -6,48 +6,63 @@ import { USE_MOCK, MOCK_DELAY } from '@/config/mock';
|
||||
import { buildMockUserListPage } from '@/config/mock/userList';
|
||||
import type {
|
||||
UserListQueryParams,
|
||||
UserSaveParams,
|
||||
UserUpdateParams,
|
||||
UserActiveParams,
|
||||
TournamentAdminUserPageVO,
|
||||
UserUpdatePwdParams,
|
||||
TournamentAdminUserVO,
|
||||
PageData,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
export type {
|
||||
TournamentAdminUserPageVO,
|
||||
TournamentAdminUserVO,
|
||||
UserListQueryParams,
|
||||
UserSaveParams,
|
||||
UserUpdateParams,
|
||||
UserActiveParams,
|
||||
UserUpdatePwdParams,
|
||||
PageData,
|
||||
ApiResult,
|
||||
} from './types';
|
||||
|
||||
const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||
const delay = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
|
||||
|
||||
/**
|
||||
* 用户管理 - 用户分页
|
||||
* GET /admin/manager/user/page → /manager/user/page
|
||||
*/
|
||||
/** GET /sys/user/page — 用户分页 */
|
||||
export async function getUserList(
|
||||
params: UserListQueryParams,
|
||||
): Promise<ApiResult<PageData<TournamentAdminUserPageVO>>> {
|
||||
): Promise<ApiResult<PageData<TournamentAdminUserVO>>> {
|
||||
if (USE_MOCK) {
|
||||
await delay(MOCK_DELAY);
|
||||
const page = Number(params.page) || 1;
|
||||
const limit = Number(params.limit) || 10;
|
||||
return {
|
||||
code: 200,
|
||||
msg: 'success',
|
||||
data: buildMockUserListPage(page, limit),
|
||||
};
|
||||
return { code: 200, msg: 'success', data: buildMockUserListPage(page, limit) };
|
||||
}
|
||||
return get('/manager/user/page', params as Record<string, any>);
|
||||
return get('/sys/user/page', params as Record<string, any>);
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户管理 - 启用/禁用
|
||||
* POST /admin/manager/user/active → /manager/user/active
|
||||
*/
|
||||
/** POST /sys/user/save — 新增用户 */
|
||||
export function saveUser(params: UserSaveParams): Promise<ApiResult<Record<string, never>>> {
|
||||
if (USE_MOCK) return delay(MOCK_DELAY).then(() => ({ code: 200, msg: 'success', data: {} }));
|
||||
return post('/sys/user/save', params);
|
||||
}
|
||||
|
||||
/** POST /sys/user/update — 更新用户 */
|
||||
export function updateUser(params: UserUpdateParams): Promise<ApiResult<Record<string, never>>> {
|
||||
if (USE_MOCK) return delay(MOCK_DELAY).then(() => ({ code: 200, msg: 'success', data: {} }));
|
||||
return post('/sys/user/update', params);
|
||||
}
|
||||
|
||||
/** POST /sys/user/active — 启用/禁用（直接调接口） */
|
||||
export function toggleUserActive(
|
||||
params: UserActiveParams,
|
||||
): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/manager/user/active', params);
|
||||
return post('/sys/user/active', params);
|
||||
}
|
||||
|
||||
/** POST /sys/user/updatepwd — 修改密码（直接调接口） */
|
||||
export function updateUserPwd(
|
||||
params: UserUpdatePwdParams,
|
||||
): Promise<ApiResult<Record<string, never>>> {
|
||||
return post('/sys/user/updatepwd', params);
|
||||
}
|
||||
|
||||
+41
-29
@@ -1,57 +1,69 @@
|
||||
/**
|
||||
* 用户管理 — 类型定义
|
||||
* 对应 OpenAPI: /admin/manager/user/page
|
||||
* 对应 OpenAPI: /admin/sys/user/*
|
||||
*/
|
||||
|
||||
/** 用户列表项 */
|
||||
export interface TournamentAdminUserPageVO {
|
||||
/** 用户ID（接口实际返回 string） */
|
||||
export interface TournamentAdminUserVO {
|
||||
id: string;
|
||||
/** 昵称 */
|
||||
nickname: string;
|
||||
/** 手机号 */
|
||||
phone: string;
|
||||
/** 真实姓名 */
|
||||
/** 用户姓名 */
|
||||
realName: string;
|
||||
/** 证件号 */
|
||||
idCard: string;
|
||||
/** 证件号图片 */
|
||||
idCardImg: string;
|
||||
/** 证件号图片列表 */
|
||||
idCardImgList: string[];
|
||||
/** 状态；0=禁用、1=正常（接口实际返回 string） */
|
||||
phone: string;
|
||||
/** 角色名称 */
|
||||
roleName: string;
|
||||
/** 角色ID（编辑时需要回显，列表可能不返回） */
|
||||
roleId?: string;
|
||||
/** 状态；0=停用、1=正常（接口实际返回 string） */
|
||||
status: string;
|
||||
/** 创建时间 */
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 用户列表查询参数 */
|
||||
export interface UserListQueryParams {
|
||||
page?: string;
|
||||
limit?: string;
|
||||
/** 用户昵称 */
|
||||
nickname?: string;
|
||||
/** 用户手机号 */
|
||||
phone?: string;
|
||||
/** 状态；不传=全部、0=禁用、1=正常 */
|
||||
/** 用户姓名或手机号 */
|
||||
text?: string;
|
||||
/** 角色ID */
|
||||
roleId?: string;
|
||||
/** 状态；不传=全部、0=停用、1=正常 */
|
||||
status?: string;
|
||||
}
|
||||
|
||||
/** 启用/禁用请求参数 */
|
||||
/** 新增用户 — POST /admin/sys/user/save */
|
||||
export interface UserSaveParams {
|
||||
realName: string;
|
||||
phone: string;
|
||||
roleId: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
/** 更新用户 — POST /admin/sys/user/update */
|
||||
export interface UserUpdateParams {
|
||||
id: string;
|
||||
realName: string;
|
||||
phone: string;
|
||||
roleId: string;
|
||||
password?: string;
|
||||
confirmPassword?: string;
|
||||
}
|
||||
|
||||
/** 启用/禁用 — POST /admin/sys/user/active */
|
||||
export interface UserActiveParams {
|
||||
/** 用户ID */
|
||||
userId: string;
|
||||
/** 0=禁用、1=正常 */
|
||||
/** 0=禁用、1=启用 */
|
||||
status: string;
|
||||
}
|
||||
|
||||
/** 分页数据 */
|
||||
/** 修改密码 — POST /admin/sys/user/updatepwd */
|
||||
export interface UserUpdatePwdParams {
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
}
|
||||
|
||||
export interface PageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
/** 统一响应包裹 */
|
||||
export interface ApiResult<T> {
|
||||
code: number;
|
||||
msg: string;
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Banner 列表页假数据
|
||||
*
|
||||
* 使用页面：`src/pages/events/banner/index.tsx`
|
||||
* 对应接口：`GET /manager/banner/list`
|
||||
* 类型：`TournamentAdminBannerListVO[]`
|
||||
*
|
||||
* 注意：类型内联定义，避免循环引用。
|
||||
*/
|
||||
|
||||
export interface MockBannerVO {
|
||||
id: string;
|
||||
img: string;
|
||||
title: string;
|
||||
type: string;
|
||||
linkUrl: string;
|
||||
area: string;
|
||||
showTimeBegin: string;
|
||||
showTimeEnd: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
export const MOCK_BANNER_LIST: MockBannerVO[] = [
|
||||
{
|
||||
id: '1',
|
||||
img: 'https://picsum.photos/seed/banner1/80/44',
|
||||
title: '2026全国青少年羽毛球锦标赛火热报名中',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '广东省深圳市',
|
||||
showTimeBegin: '2026-08-01 00:00',
|
||||
showTimeEnd: '2026-08-31 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-20 08:00:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
img: 'https://picsum.photos/seed/banner2/80/44',
|
||||
title: '马拉松城市联赛限时优惠',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/marathon',
|
||||
area: '浙江省杭州市',
|
||||
showTimeBegin: '2026-08-15 00:00',
|
||||
showTimeEnd: '2026-09-15 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-19 11:30:00',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
img: 'https://picsum.photos/seed/banner3/80/44',
|
||||
title: '健身运动会专属福利',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '北京市',
|
||||
showTimeBegin: '2026-07-01 00:00',
|
||||
showTimeEnd: '2026-07-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-18 14:20:00',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
img: 'https://picsum.photos/seed/banner4/80/44',
|
||||
title: '平台品牌宣传活动',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/promo',
|
||||
area: '上海市',
|
||||
showTimeBegin: '2026-06-01 00:00',
|
||||
showTimeEnd: '2026-06-30 23:59',
|
||||
status: '0',
|
||||
createTime: '2026-07-17 18:05:00',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
img: 'https://picsum.photos/seed/banner5/80/44',
|
||||
title: '2026全国青少年羽毛球锦标赛火热报名中',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '广东省深圳市',
|
||||
showTimeBegin: '2026-09-01 00:00',
|
||||
showTimeEnd: '2026-09-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-16 21:15:00',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
img: 'https://picsum.photos/seed/banner6/80/44',
|
||||
title: '马拉松城市联赛限时优惠',
|
||||
type: '3',
|
||||
linkUrl: '/pages/activity/detail',
|
||||
area: '浙江省杭州市',
|
||||
showTimeBegin: '2026-10-01 00:00',
|
||||
showTimeEnd: '2026-10-31 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-15 00:30:00',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
img: 'https://picsum.photos/seed/banner7/80/44',
|
||||
title: '全民健身日特别活动',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '北京市',
|
||||
showTimeBegin: '2026-08-08 00:00',
|
||||
showTimeEnd: '2026-08-08 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-14 03:50:00',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
img: 'https://picsum.photos/seed/banner8/80/44',
|
||||
title: '新春运动季大促销',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/spring',
|
||||
area: '上海市',
|
||||
showTimeBegin: '2026-01-15 00:00',
|
||||
showTimeEnd: '2026-02-15 23:59',
|
||||
status: '0',
|
||||
createTime: '2026-07-13 07:05:00',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
img: 'https://picsum.photos/seed/banner9/80/44',
|
||||
title: '2026全国青少年羽毛球锦标赛火热报名中',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '广东省深圳市',
|
||||
showTimeBegin: '2026-08-01 00:00',
|
||||
showTimeEnd: '2026-08-31 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-12 10:25:00',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
img: 'https://picsum.photos/seed/banner10/80/44',
|
||||
title: '平台品牌宣传活动',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/brand',
|
||||
area: '浙江省杭州市',
|
||||
showTimeBegin: '2026-11-01 00:00',
|
||||
showTimeEnd: '2026-11-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-11 13:40:00',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
img: 'https://picsum.photos/seed/banner11/80/44',
|
||||
title: '秋季健身挑战赛',
|
||||
type: '1',
|
||||
linkUrl: '',
|
||||
area: '北京市',
|
||||
showTimeBegin: '2026-09-01 00:00',
|
||||
showTimeEnd: '2026-09-30 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-10 17:00:00',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
img: 'https://picsum.photos/seed/banner12/80/44',
|
||||
title: '双十一运动装备大促',
|
||||
type: '2',
|
||||
linkUrl: 'https://example.com/double11',
|
||||
area: '上海市',
|
||||
showTimeBegin: '2026-11-01 00:00',
|
||||
showTimeEnd: '2026-11-11 23:59',
|
||||
status: '1',
|
||||
createTime: '2026-07-09 20:15:00',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* 操作日志页假数据
|
||||
* 类型内联定义，避免循环引用。
|
||||
*/
|
||||
|
||||
interface MockLogVO {
|
||||
opName: string;
|
||||
source: string;
|
||||
nickname: string;
|
||||
phone: string;
|
||||
tournamentName: string;
|
||||
obj: string;
|
||||
createDate: string;
|
||||
/** 操作内容详情（mock 扩展字段，API 暂无） */
|
||||
content?: string;
|
||||
}
|
||||
|
||||
const MOCK_LOGS: MockLogVO[] = [
|
||||
{
|
||||
opName: '删除赛事',
|
||||
source: '2',
|
||||
nickname: '张三',
|
||||
phone: '12345678989',
|
||||
tournamentName: '第二十一届风林杯羽毛球大赛',
|
||||
obj: '第二十一届风林杯羽毛球大赛',
|
||||
createDate: '2026-05-26 08:00:00',
|
||||
content: '删除赛事',
|
||||
},
|
||||
{
|
||||
opName: '取消报名',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '张三',
|
||||
createDate: '2026-05-27 10:12:00',
|
||||
content: '选手"张三"取消报名',
|
||||
},
|
||||
{
|
||||
opName: '编辑选手',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '李四',
|
||||
createDate: '2026-05-27 10:30:00',
|
||||
content: '修改姓名，修改前：李四，修改后：张三',
|
||||
},
|
||||
{
|
||||
opName: '编辑选手',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '李四',
|
||||
createDate: '2026-05-27 10:35:00',
|
||||
content:
|
||||
'修改手机号，修改前：1234567899，修改后：13425678997；修改组别，修改前：男子单打，修改后：男子双打',
|
||||
},
|
||||
{
|
||||
opName: '批量生成对阵',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A，男子小组B，男子小组C',
|
||||
createDate: '2026-05-27 11:00:00',
|
||||
content: '生成对阵',
|
||||
},
|
||||
{
|
||||
opName: '生成对阵',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A',
|
||||
createDate: '2026-05-27 11:05:00',
|
||||
content: '生成对阵',
|
||||
},
|
||||
{
|
||||
opName: '批量删除对阵',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A，男子小组B，男子小组C',
|
||||
createDate: '2026-05-27 11:10:00',
|
||||
content: '删除对阵',
|
||||
},
|
||||
{
|
||||
opName: '删除对阵',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A',
|
||||
createDate: '2026-05-27 11:15:00',
|
||||
content: '删除对阵',
|
||||
},
|
||||
{
|
||||
opName: '修改比分',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A，张三李四，第一局',
|
||||
createDate: '2026-05-27 12:00:00',
|
||||
content: '修改前：比分"21:0"，修改后："0:21"',
|
||||
},
|
||||
{
|
||||
opName: '弃权',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子淘汰1，第一轮，张三李四',
|
||||
createDate: '2026-05-27 13:00:00',
|
||||
content: '选手"张三"弃权',
|
||||
},
|
||||
{
|
||||
opName: '弃权',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A，张三李四',
|
||||
createDate: '2026-05-27 13:10:00',
|
||||
content: '双方弃权，选手"张三"、"李四"',
|
||||
},
|
||||
{
|
||||
opName: '修改对阵',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A，张三李四，1',
|
||||
createDate: '2026-05-27 14:00:00',
|
||||
content: '修改前：比分"21:10"，修改后：比分"21:0"',
|
||||
},
|
||||
{
|
||||
opName: '修改对阵',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '男子小组A，张三李四，双打名额，选手 场地名额',
|
||||
createDate: '2026-05-27 14:30:00',
|
||||
content:
|
||||
'修改前：比分"21:0"，对局状态已完成，对阵时间：08:50-09:00，场地号：羽1，修改后：比分"0:0"，对局状态为未开始，对阵时间：08:50-09:00，场地号：羽2',
|
||||
},
|
||||
{
|
||||
opName: '修改场地',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '羽1',
|
||||
createDate: '2026-05-27 15:00:00',
|
||||
content: '修改前：羽1，修改后：羽3',
|
||||
},
|
||||
{
|
||||
opName: '修改种子',
|
||||
source: '1',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
tournamentName: '',
|
||||
obj: '张某某，张三 场地名额',
|
||||
createDate: '2026-05-27 15:30:00',
|
||||
content: '修改前：1号种子，修改后：2号种子',
|
||||
},
|
||||
];
|
||||
|
||||
interface MockPageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
export function buildMockOperationLogPage(page: number, limit: number): MockPageData<MockLogVO> {
|
||||
const start = (page - 1) * limit;
|
||||
return { total: MOCK_LOGS.length, list: MOCK_LOGS.slice(start, start + limit) };
|
||||
}
|
||||
+43
-86
@@ -1,170 +1,128 @@
|
||||
/**
|
||||
* 用户列表页假数据
|
||||
*
|
||||
* 使用页面：`src/pages/events/users/index.tsx`
|
||||
* 对应接口：`GET /manager/user/page`
|
||||
* 类型：`TournamentAdminUserPageVO[]`
|
||||
*
|
||||
* 注意：为避免循环引用（api/users/index.ts → 此文件 → api/users/types），
|
||||
* 此文件不 import 任何 api 层类型，接口定义内联。
|
||||
* 用户列表页假数据（类型内联，避免循环引用）
|
||||
* 对应接口：GET /sys/user/page
|
||||
*/
|
||||
|
||||
interface MockUserVO {
|
||||
id: string;
|
||||
nickname: string;
|
||||
phone: string;
|
||||
realName: string;
|
||||
idCard: string;
|
||||
idCardImg: string;
|
||||
idCardImgList: string[];
|
||||
phone: string;
|
||||
roleId: string;
|
||||
roleName: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
interface MockPageData<T> {
|
||||
total: number;
|
||||
list: T[];
|
||||
}
|
||||
|
||||
export const MOCK_USER_LIST: MockUserVO[] = [
|
||||
const MOCK_USERS: MockUserVO[] = [
|
||||
{
|
||||
id: '1',
|
||||
nickname: '羽毛球小将',
|
||||
phone: '13800138001',
|
||||
realName: '张三',
|
||||
idCard: '320101199001011234',
|
||||
idCardImg: '',
|
||||
idCardImgList: [
|
||||
'https://picsum.photos/seed/uid1a/96/64',
|
||||
'https://picsum.photos/seed/uid1b/96/64',
|
||||
],
|
||||
phone: '13800138001',
|
||||
roleId: '1',
|
||||
roleName: '超级管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-20 08:11:07',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
nickname: '马拉松达人',
|
||||
phone: '13900139002',
|
||||
realName: '李四',
|
||||
idCard: '320101199002022345',
|
||||
idCardImg: 'https://picsum.photos/seed/uid2/96/64',
|
||||
idCardImgList: [],
|
||||
phone: '13900139002',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-19 11:28:20',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
nickname: '健身爱好者',
|
||||
phone: '13700137003',
|
||||
realName: '王五',
|
||||
idCard: '320101199103033456',
|
||||
idCardImg: '',
|
||||
idCardImgList: ['https://picsum.photos/seed/uid3a/96/64'],
|
||||
phone: '13700137003',
|
||||
roleId: '3',
|
||||
roleName: '裁判',
|
||||
status: '1',
|
||||
createTime: '2026-07-18 14:45:33',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
nickname: '游泳健将',
|
||||
phone: '13600136004',
|
||||
realName: '赵六',
|
||||
idCard: '320101199204044567',
|
||||
idCardImg: 'https://picsum.photos/seed/uid4/96/64',
|
||||
idCardImgList: [],
|
||||
phone: '13600136004',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '0',
|
||||
createTime: '2026-07-17 18:02:46',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
nickname: '羽毛球小将',
|
||||
phone: '13800138005',
|
||||
realName: '孙七',
|
||||
idCard: '320101199305055678',
|
||||
idCardImg: '',
|
||||
idCardImgList: [
|
||||
'https://picsum.photos/seed/uid5a/96/64',
|
||||
'https://picsum.photos/seed/uid5b/96/64',
|
||||
],
|
||||
phone: '13800138005',
|
||||
roleId: '1',
|
||||
roleName: '超级管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-16 21:19:59',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
nickname: '马拉松达人',
|
||||
phone: '13900139006',
|
||||
realName: '周八',
|
||||
idCard: '320101199406066789',
|
||||
idCardImg: 'https://picsum.photos/seed/uid6/96/64',
|
||||
idCardImgList: [],
|
||||
phone: '13900139006',
|
||||
roleId: '3',
|
||||
roleName: '裁判',
|
||||
status: '1',
|
||||
createTime: '2026-07-15 00:36:12',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
nickname: '健身爱好者',
|
||||
phone: '13700137007',
|
||||
realName: '吴九',
|
||||
idCard: '320101199507077890',
|
||||
idCardImg: '',
|
||||
idCardImgList: [],
|
||||
phone: '13700137007',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-14 03:53:25',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
nickname: '游泳健将',
|
||||
phone: '13600136008',
|
||||
realName: '郑十',
|
||||
idCard: '320101199608088901',
|
||||
idCardImg: 'https://picsum.photos/seed/uid8/96/64',
|
||||
idCardImgList: ['https://picsum.photos/seed/uid8a/96/64'],
|
||||
phone: '13600136008',
|
||||
roleId: '4',
|
||||
roleName: '财务',
|
||||
status: '1',
|
||||
createTime: '2026-07-13 07:10:38',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
nickname: '羽毛球小将',
|
||||
phone: '13800138009',
|
||||
realName: '陈一',
|
||||
idCard: '320101199709099012',
|
||||
idCardImg: '',
|
||||
idCardImgList: [],
|
||||
phone: '13800138009',
|
||||
roleId: '3',
|
||||
roleName: '裁判',
|
||||
status: '1',
|
||||
createTime: '2026-07-12 10:27:51',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
nickname: '马拉松达人',
|
||||
phone: '13900139010',
|
||||
realName: '刘二',
|
||||
idCard: '320101199810100123',
|
||||
idCardImg: 'https://picsum.photos/seed/uid10/96/64',
|
||||
idCardImgList: ['https://picsum.photos/seed/uid10a/96/64'],
|
||||
phone: '13900139010',
|
||||
roleId: '2',
|
||||
roleName: '赛事管理员',
|
||||
status: '0',
|
||||
createTime: '2026-07-11 13:44:04',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
nickname: '健身爱好者',
|
||||
phone: '13700137011',
|
||||
realName: '黄三',
|
||||
idCard: '320101199911111234',
|
||||
idCardImg: '',
|
||||
idCardImgList: [],
|
||||
phone: '13700137011',
|
||||
roleId: '1',
|
||||
roleName: '超级管理员',
|
||||
status: '1',
|
||||
createTime: '2026-07-10 17:01:17',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
nickname: '游泳健将',
|
||||
phone: '13600136012',
|
||||
realName: '林四',
|
||||
idCard: '320101200012122345',
|
||||
idCardImg: '',
|
||||
idCardImgList: [
|
||||
'https://picsum.photos/seed/uid12a/96/64',
|
||||
'https://picsum.photos/seed/uid12b/96/64',
|
||||
],
|
||||
phone: '13600136012',
|
||||
roleId: '4',
|
||||
roleName: '财务',
|
||||
status: '1',
|
||||
createTime: '2026-07-09 20:18:30',
|
||||
},
|
||||
@@ -172,6 +130,5 @@ export const MOCK_USER_LIST: MockUserVO[] = [
|
||||
|
||||
export function buildMockUserListPage(page: number, limit: number): MockPageData<MockUserVO> {
|
||||
const start = (page - 1) * limit;
|
||||
const list = MOCK_USER_LIST.slice(start, start + limit);
|
||||
return { total: MOCK_USER_LIST.length, list };
|
||||
return { total: MOCK_USERS.length, list: MOCK_USERS.slice(start, start + limit) };
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import { useUserStore } from '@/stores/userStore';
|
||||
import { useTabsStore } from '@/stores/tabsStore';
|
||||
import { useState, useBreadcrumb, auth } from '@/hooks';
|
||||
import { ChangePasswordModal, PageTabs } from '@/components';
|
||||
import { updateUserPwd } from '@/api/users';
|
||||
import { renderRouteIcon } from '@/utils/routeIcon';
|
||||
import logoutSvg from '@/assets/img/icon/logout.svg';
|
||||
import styles from './BasicLayout.module.less';
|
||||
@@ -122,12 +123,18 @@ export default defineComponent({
|
||||
if (changePwdSubmitting.value) return;
|
||||
setChangePwdSubmitting(true);
|
||||
try {
|
||||
// TODO: 替换为真实 API 调用
|
||||
console.log('修改密码:', payload);
|
||||
message.success('修改成功');
|
||||
setChangePwdVisible(false);
|
||||
const res = await updateUserPwd({
|
||||
password: payload.newPassword,
|
||||
confirmPassword: payload.newPassword,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message.success('密码修改成功');
|
||||
setChangePwdVisible(false);
|
||||
} else {
|
||||
message.error(res.msg || '修改失败');
|
||||
}
|
||||
} catch (err: any) {
|
||||
message.error(err?.msg || '修改失败');
|
||||
console.error('修改密码失败:', err);
|
||||
} finally {
|
||||
setChangePwdSubmitting(false);
|
||||
}
|
||||
|
||||
@@ -6,28 +6,36 @@ import {
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
Cascader,
|
||||
InputNumber,
|
||||
Button,
|
||||
message,
|
||||
Spin,
|
||||
} from 'ant-design-vue';
|
||||
import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
|
||||
import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS } from '../model/useBannerModel';
|
||||
import {
|
||||
getProvinceCityCascaderOptions,
|
||||
parseAreaToCascaderPath,
|
||||
formatCascaderArea,
|
||||
} from '@/utils/areaData';
|
||||
import { ImageCropper } from '@yp-component/root';
|
||||
import { FileImageOutlined } from '@ant-design/icons-vue';
|
||||
import { uploadFile, OssUploadType } from '@/utils/oss';
|
||||
import dayjs from 'dayjs';
|
||||
import styles from './BannerFormModal.module.less';
|
||||
|
||||
/** 省市两级 Cascader 选项 */
|
||||
const cascaderAreaOptions = getProvinceCityCascaderOptions();
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
imageStatus: 'empty' as 'empty' | 'uploading' | 'success' | 'error',
|
||||
jumpType: 'event_detail' as 'event_detail' | 'miniprogram_page' | 'custom_link' | 'none',
|
||||
relatedEventId: '',
|
||||
pagePath: '',
|
||||
customUrl: '',
|
||||
region: 'home',
|
||||
type: '1' as '1' | '2' | '3',
|
||||
linkUrl: '',
|
||||
relatedEventId: undefined as string | undefined,
|
||||
area: '',
|
||||
displayTimeRange: null as [string, string] | null,
|
||||
sort: 1,
|
||||
});
|
||||
@@ -80,6 +88,10 @@ export default defineComponent({
|
||||
const formRef = ref<any>();
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const formData = reactive(getDefaultForm());
|
||||
/** Cascader 区域的路径数组（与 formData.area 字符串双向同步） */
|
||||
const areaPath = ref<string[]>([]);
|
||||
/** 是否由用户主动切换了跳转类型（跳过初始加载的 type 联动校验） */
|
||||
const typeChanged = ref(false);
|
||||
|
||||
/** 裁剪弹窗状态 */
|
||||
const [cropperVisible, setCropperVisible] = useState(false);
|
||||
@@ -91,38 +103,38 @@ export default defineComponent({
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
areaPath.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
let pagePath = '';
|
||||
let customUrl = '';
|
||||
if (record.jumpType === 'miniprogram_page') {
|
||||
pagePath = record.jumpUrl || '';
|
||||
} else if (record.jumpType === 'custom_link') {
|
||||
customUrl = record.jumpUrl || '';
|
||||
}
|
||||
|
||||
const area = record.area || record.region || '';
|
||||
areaPath.value = parseAreaToCascaderPath(area);
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
title: record.title || '',
|
||||
imageUrl: record.imageUrl || '',
|
||||
imageStatus: record.imageUrl ? ('success' as const) : ('empty' as const),
|
||||
jumpType: record.jumpType || 'event_detail',
|
||||
relatedEventId: record.relatedEventId || '',
|
||||
pagePath,
|
||||
customUrl,
|
||||
region: record.region && record.region !== record.city ? record.region : 'home',
|
||||
imageUrl: record.img || record.imageUrl || '',
|
||||
imageStatus: record.img || record.imageUrl ? ('success' as const) : ('empty' as const),
|
||||
type: String(record.type || record.jumpType || '1'),
|
||||
linkUrl: record.linkUrl || record.jumpUrl || '',
|
||||
relatedEventId: record.relatedEventId || undefined,
|
||||
area,
|
||||
displayTimeRange:
|
||||
record.displayStartTime && record.displayEndTime
|
||||
? ([record.displayStartTime, record.displayEndTime] as [string, string])
|
||||
(record.showTimeBegin || record.displayStartTime) &&
|
||||
(record.showTimeEnd || record.displayEndTime)
|
||||
? ([
|
||||
record.showTimeBegin || record.displayStartTime,
|
||||
record.showTimeEnd || record.displayEndTime,
|
||||
] as [string, string])
|
||||
: null,
|
||||
sort: record.sort ?? 1,
|
||||
sort: Number(record.sort ?? 1),
|
||||
});
|
||||
};
|
||||
|
||||
/** 监听 visible 变化重置表单 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
// 标记首次渲染，跳过 type 联动校验
|
||||
typeChanged.value = false;
|
||||
initFormFromRecord(props.record);
|
||||
setCropperVisible(false);
|
||||
setUploadImageUrl('');
|
||||
@@ -130,18 +142,33 @@ export default defineComponent({
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 监听 jumpType 变化时清理联动字段 */
|
||||
/** 监听 type 变化时清理联动字段值和校验 */
|
||||
useEffect(() => {
|
||||
const newType = formData.jumpType;
|
||||
if (newType !== 'event_detail') formData.relatedEventId = '';
|
||||
if (newType !== 'miniprogram_page') formData.pagePath = '';
|
||||
if (newType !== 'custom_link') formData.customUrl = '';
|
||||
const fieldsToValidate: string[] = [];
|
||||
if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
|
||||
if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
|
||||
if (newType === 'custom_link') fieldsToValidate.push('customUrl');
|
||||
if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
|
||||
}, [() => formData.jumpType]);
|
||||
// 首次加载跳过校验
|
||||
if (!typeChanged.value) {
|
||||
if (formData.type !== '1') formData.relatedEventId = undefined;
|
||||
if (formData.type !== '2' && formData.type !== '3') formData.linkUrl = '';
|
||||
typeChanged.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.type !== '1') {
|
||||
formData.relatedEventId = undefined;
|
||||
formRef.value?.clearValidate('relatedEventId');
|
||||
}
|
||||
if (formData.type !== '2' && formData.type !== '3') {
|
||||
formData.linkUrl = '';
|
||||
}
|
||||
const activeNames: string[] = [];
|
||||
if (formData.type === '1') activeNames.push('relatedEventId');
|
||||
if (formData.type === '2' || formData.type === '3') activeNames.push('linkUrl');
|
||||
// 清除所有联动字段的校验状态
|
||||
formRef.value?.clearValidate(['relatedEventId', 'linkUrl']);
|
||||
// 如果有已填值，重新校验当前字段
|
||||
if (activeNames.length) {
|
||||
setTimeout(() => formRef.value?.validateFields(activeNames).catch(() => {}), 0);
|
||||
}
|
||||
}, [() => formData.type]);
|
||||
|
||||
/** 触发隐藏的文件选择器 */
|
||||
const triggerFilePicker = () => {
|
||||
@@ -235,25 +262,28 @@ export default defineComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
// 防御：上传中时禁止提交
|
||||
if (formData.imageStatus === 'uploading') {
|
||||
message.warning('图片仍在上传中，请稍候');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造提交数据：根据 jumpType 整理 jumpUrl
|
||||
const payload: any = { ...formData };
|
||||
if (payload.jumpType === 'event_detail') {
|
||||
payload.jumpUrl = payload.relatedEventId;
|
||||
} else if (payload.jumpType === 'miniprogram_page') {
|
||||
payload.jumpUrl = payload.pagePath;
|
||||
} else if (payload.jumpType === 'custom_link') {
|
||||
payload.jumpUrl = payload.customUrl;
|
||||
} else {
|
||||
payload.jumpUrl = '';
|
||||
}
|
||||
payload.displayStartTime = payload.displayTimeRange?.[0] || '';
|
||||
payload.displayEndTime = payload.displayTimeRange?.[1] || '';
|
||||
const payload = {
|
||||
img: formData.imageUrl || '',
|
||||
title: formData.title || '',
|
||||
type: formData.type,
|
||||
linkUrl:
|
||||
formData.type === '1'
|
||||
? formData.relatedEventId || ''
|
||||
: formData.type === '2'
|
||||
? formData.linkUrl || ''
|
||||
: formData.type === '3'
|
||||
? formData.linkUrl || ''
|
||||
: '',
|
||||
area: formData.area || formatCascaderArea(areaPath.value),
|
||||
showTimeBegin: formData.displayTimeRange?.[0] || '',
|
||||
showTimeEnd: formData.displayTimeRange?.[1] || '',
|
||||
sort: String(formData.sort ?? 1),
|
||||
};
|
||||
props.onSave(payload);
|
||||
};
|
||||
|
||||
@@ -344,18 +374,18 @@ export default defineComponent({
|
||||
{/* ===== 跳转类型 ===== */}
|
||||
<Form.Item
|
||||
label="跳转类型"
|
||||
name="jumpType"
|
||||
name="type"
|
||||
rules={[{ required: true, message: '请选择跳转类型' }]}
|
||||
>
|
||||
<Select
|
||||
options={JUMP_TYPE_OPTIONS as any}
|
||||
placeholder="请选择"
|
||||
v-model:value={formData.jumpType}
|
||||
v-model:value={formData.type}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 联动字段：根据跳转类型动态展示 ===== */}
|
||||
{formData.jumpType === 'event_detail' && (
|
||||
{/* ===== 联动字段 ===== */}
|
||||
{formData.type === '1' && (
|
||||
<Form.Item
|
||||
label="关联赛事"
|
||||
name="relatedEventId"
|
||||
@@ -363,45 +393,19 @@ export default defineComponent({
|
||||
>
|
||||
<Select
|
||||
options={EVENT_OPTIONS as any}
|
||||
placeholder="不关联"
|
||||
placeholder="请选择关联赛事"
|
||||
allowClear
|
||||
v-model:value={formData.relatedEventId}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'miniprogram_page' && (
|
||||
{formData.type === '2' && (
|
||||
<Form.Item
|
||||
label="页面路径"
|
||||
name="pagePath"
|
||||
label="跳转地址"
|
||||
name="linkUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入页面路径' },
|
||||
{
|
||||
pattern: /^\//,
|
||||
message: '页面路径需以 / 开头',
|
||||
},
|
||||
{ max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="/pages/index/index"
|
||||
maxlength={PATH_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.pagePath}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'custom_link' && (
|
||||
<Form.Item
|
||||
label="自定义链接"
|
||||
name="customUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入自定义链接' },
|
||||
{
|
||||
pattern: /^https?:\/\//i,
|
||||
message: '请输入以 http/https 开头的链接',
|
||||
},
|
||||
{ required: true, message: '请输入跳转地址' },
|
||||
{ max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
@@ -409,25 +413,44 @@ export default defineComponent({
|
||||
placeholder="https://xxx"
|
||||
maxlength={URL_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.customUrl}
|
||||
v-model:value={formData.linkUrl}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'none' && (
|
||||
<div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
|
||||
{formData.type === '3' && (
|
||||
<Form.Item
|
||||
label="小程序路径"
|
||||
name="linkUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入小程序页面路径' },
|
||||
{ max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="/pages/index/index"
|
||||
maxlength={PATH_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.linkUrl}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{/* ===== 所属区域 ===== */}
|
||||
<Form.Item
|
||||
label="所属区域"
|
||||
name="region"
|
||||
name="area"
|
||||
rules={[{ required: true, message: '请选择所属区域' }]}
|
||||
>
|
||||
<Select
|
||||
options={REGION_OPTIONS as any}
|
||||
placeholder="首页"
|
||||
v-model:value={formData.region}
|
||||
<Cascader
|
||||
v-model:value={areaPath.value}
|
||||
options={cascaderAreaOptions}
|
||||
placeholder="请选择省/市"
|
||||
changeOnSelect={false}
|
||||
allowClear
|
||||
onChange={(val: any) => {
|
||||
formData.area = formatCascaderArea(val || []);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
@@ -38,11 +38,11 @@ function renderBodyCell({
|
||||
onToggleStatus: (record: any) => void;
|
||||
onDelete: (record: any) => void;
|
||||
}) {
|
||||
// 图片列：80 * 44
|
||||
// 图片列
|
||||
if (column.key === 'image') {
|
||||
return (
|
||||
<Image
|
||||
src={record.imageUrl}
|
||||
src={record.img}
|
||||
width={80}
|
||||
height={44}
|
||||
style={{ objectFit: 'cover', borderRadius: '4px' }}
|
||||
@@ -51,7 +51,7 @@ function renderBodyCell({
|
||||
);
|
||||
}
|
||||
|
||||
// 标题列：超长截断 + Tooltip
|
||||
// 标题列
|
||||
if (column.dataIndex === 'title') {
|
||||
const maxLen = 18;
|
||||
const raw = text || '';
|
||||
@@ -65,43 +65,33 @@ function renderBodyCell({
|
||||
);
|
||||
}
|
||||
|
||||
// 跳转类型列：StatusTag
|
||||
if (column.dataIndex === 'jumpType') {
|
||||
// 跳转类型列
|
||||
if (column.dataIndex === 'type') {
|
||||
return renderJumpType(text);
|
||||
}
|
||||
|
||||
// 关联赛事列：为空显示 "-"
|
||||
if (column.dataIndex === 'relatedEvent') {
|
||||
// 跳转地址列
|
||||
if (column.dataIndex === 'linkUrl') {
|
||||
return <span>{text || '-'}</span>;
|
||||
}
|
||||
|
||||
// 所属区域列：省 + 市 拼接
|
||||
if (column.key === 'region') {
|
||||
return (
|
||||
<span>
|
||||
{record.province}
|
||||
{record.city}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 展示时间列：日期时间段
|
||||
// 展示时间列
|
||||
if (column.key === 'displayTime') {
|
||||
return (
|
||||
<span>
|
||||
{record.displayStartTime} 至 {record.displayEndTime}
|
||||
{record.showTimeBegin} 至 {record.showTimeEnd}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 状态列：启用中(绿色) / 已禁用(灰色半透明)
|
||||
// 状态列
|
||||
if (column.dataIndex === 'status') {
|
||||
return renderStatus(text);
|
||||
}
|
||||
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
const isEnabled = record.status === '1';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
@@ -120,9 +110,6 @@ function renderBodyCell({
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner 配置
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventBanner',
|
||||
setup() {
|
||||
@@ -150,7 +137,6 @@ export default defineComponent({
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
/** 删除二次确认 */
|
||||
const confirmDelete = (record: any) => {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
@@ -162,9 +148,8 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
/** 启用/禁用二次确认 */
|
||||
const confirmToggleStatus = (record: any) => {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
const isEnabled = record.status === '1';
|
||||
const actionText = isEnabled ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
@@ -175,7 +160,6 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
@@ -187,16 +171,21 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="标题" name="searchTitle">
|
||||
<Form.Item label="标题" name="title">
|
||||
<Input
|
||||
value={filterForm.title}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.title = val.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -223,7 +212,6 @@ export default defineComponent({
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
@@ -247,7 +235,6 @@ export default defineComponent({
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
@@ -261,7 +248,6 @@ export default defineComponent({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 新增/编辑弹窗 ===== */}
|
||||
{modalVisible.value && (
|
||||
<BannerFormModal
|
||||
visible={modalVisible.value}
|
||||
|
||||
@@ -1,45 +1,51 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
import {
|
||||
getBannerList,
|
||||
delBanner,
|
||||
saveBanner,
|
||||
updateBanner,
|
||||
toggleBannerActive,
|
||||
type TournamentAdminBannerListVO,
|
||||
type BannerListQueryParams,
|
||||
} from '@/api/banner';
|
||||
import { getProvinceCityOptions } from '@/utils/areaData';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** Banner 状态选项（筛选） */
|
||||
/** Banner 状态选项（value 对应 API status: 不传=全部、0=禁用；1=启用） */
|
||||
export const BANNER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'enabled', label: '启用' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
{ value: '1', label: '启用' },
|
||||
{ value: '0', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型选项（表单下拉） */
|
||||
/** 跳转类型选项（value 对应 API type: 1=赛事详情，2=自定义连接，3=小程序页面） */
|
||||
export const JUMP_TYPE_OPTIONS = [
|
||||
{ value: 'event_detail', label: '赛事详情页' },
|
||||
{ value: 'miniprogram_page', label: '小程序页面' },
|
||||
{ value: 'custom_link', label: '自定义链接' },
|
||||
{ value: 'none', label: '无链接' },
|
||||
{ value: '1', label: '赛事详情页' },
|
||||
{ value: '2', label: '自定义链接' },
|
||||
{ value: '3', label: '小程序页面' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型映射（用于表格 StatusTag 渲染） */
|
||||
/** 跳转类型映射 */
|
||||
const JUMP_TYPE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
event_detail: { label: '赛事详情页', tone: 'primary' },
|
||||
miniprogram_page: { label: '小程序页面', tone: 'cyan' },
|
||||
custom_link: { label: '自定义链接', tone: 'purple' },
|
||||
none: { label: '无链接', tone: 'default' },
|
||||
'1': { label: '赛事详情页', tone: 'primary' },
|
||||
'2': { label: '自定义链接', tone: 'purple' },
|
||||
'3': { label: '小程序页面', tone: 'cyan' },
|
||||
};
|
||||
|
||||
/** Banner 状态映射 */
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone; dimmed?: boolean }> = {
|
||||
enabled: { label: '启用中', tone: 'success' },
|
||||
disabled: { label: '已禁用', tone: 'default', dimmed: true },
|
||||
'1': { label: '启用中', tone: 'success' },
|
||||
'0': { label: '已禁用', tone: 'default', dimmed: true },
|
||||
};
|
||||
|
||||
/** 关联赛事选项（mock） */
|
||||
/** 关联赛事选项（mock，TODO: 替换为真实 API） */
|
||||
export const EVENT_OPTIONS = [
|
||||
{ value: '', label: '不关联' },
|
||||
{ value: 'EV20260701001', label: '2026全国青少年羽毛球锦标赛暨体育文化交流大会' },
|
||||
{ value: 'EV20260701002', label: '国际马拉松城市联赛' },
|
||||
{ value: 'EV20260701003', label: '全民健身运动会' },
|
||||
@@ -47,131 +53,74 @@ export const EVENT_OPTIONS = [
|
||||
{ value: 'EV20260701005', label: '北京城市定向越野挑战赛' },
|
||||
];
|
||||
|
||||
/** 所属区域选项（mock） */
|
||||
export const REGION_OPTIONS = [
|
||||
{ value: 'home', label: '首页' },
|
||||
{ value: 'guangdong_shenzhen', label: '广东省深圳市' },
|
||||
{ value: 'zhejiang_hangzhou', label: '浙江省杭州市' },
|
||||
{ value: 'beijing', label: '北京市' },
|
||||
{ value: 'shanghai', label: '上海市' },
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 假数据（表格）
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
|
||||
const jumpType = (['event_detail', 'miniprogram_page', 'custom_link', 'none'] as const)[i % 4];
|
||||
const provinces = ['广东省', '浙江省', '北京市', '上海市'];
|
||||
const cities = ['深圳市', '杭州市', '北京市', '上海市'];
|
||||
|
||||
return {
|
||||
key: `${i + 1}`,
|
||||
id: `BANNER${String(i + 1).padStart(4, '0')}`,
|
||||
sort: i + 1,
|
||||
imageUrl: `https://picsum.photos/seed/banner${i + 1}/80/44`,
|
||||
title:
|
||||
i % 4 === 0
|
||||
? '2026全国青少年羽毛球锦标赛火热报名中'
|
||||
: i % 4 === 1
|
||||
? '马拉松城市联赛限时优惠'
|
||||
: i % 4 === 2
|
||||
? '健身运动会专属福利'
|
||||
: '平台品牌宣传活动',
|
||||
jumpType,
|
||||
jumpUrl:
|
||||
jumpType === 'custom_link'
|
||||
? 'https://example.com/activity'
|
||||
: jumpType === 'miniprogram_page'
|
||||
? '/pages/activity/detail'
|
||||
: '',
|
||||
relatedEventId:
|
||||
jumpType === 'event_detail'
|
||||
? (['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]
|
||||
: '',
|
||||
relatedEvent:
|
||||
jumpType === 'event_detail'
|
||||
? (() => {
|
||||
const map: Record<string, string> = {
|
||||
EV20260701001: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||
EV20260701002: '国际马拉松城市联赛',
|
||||
EV20260701003: '全民健身运动会',
|
||||
};
|
||||
return map[(['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]] || '';
|
||||
})()
|
||||
: '',
|
||||
region: provinces[i % 4],
|
||||
city: cities[i % 4],
|
||||
displayStartTime: '2026-08-01 00:00',
|
||||
displayEndTime: '2026-08-31 23:59',
|
||||
createTime: `2026-07-${String((i % 28) + 1).padStart(2, '0')} ${String((i * 2 + 8) % 24).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}`,
|
||||
status: (i % 4 === 0 ? 'disabled' : 'enabled') as 'enabled' | 'disabled',
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 临时排序：对假数据按创建时间倒序排列。
|
||||
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
|
||||
*/
|
||||
const sortByTimeDesc = (list: any[], field: string) =>
|
||||
[...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
|
||||
|
||||
const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
/** 所属区域选项（动态生成，直辖市仅市名，其他省市） */
|
||||
export const REGION_OPTIONS = getProvinceCityOptions();
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* Banner 配置页数据模型
|
||||
*/
|
||||
export function useBannerModel() {
|
||||
// ===== 筛选条件 =====
|
||||
// ===== 筛选条件（key 名对齐 API 查询参数） =====
|
||||
const filterForm = reactive({
|
||||
searchTitle: '',
|
||||
status: '' as '' | 'enabled' | 'disabled',
|
||||
title: '',
|
||||
status: '' as '' | '0' | '1',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedTitle } = useDebounce(
|
||||
toRef(filterForm, 'searchTitle') as Ref<string>,
|
||||
toRef(filterForm, 'title') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
// ===== 表格状态（API 返回全量，前端分页） =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
||||
const [allData, setAllData] = useState<TournamentAdminBannerListVO[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: SORTED_MOCK_DATA.length,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
/** 当前页数据（客户端切片） */
|
||||
const dataSource = computed(() => {
|
||||
const start = (pagination.value.current - 1) * pagination.value.pageSize;
|
||||
return allData.value.slice(start, start + pagination.value.pageSize);
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 提交态（用于表单弹窗的确认按钮 loading）=====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置（纯数据列，复杂渲染在页面 bodyCell 中处理）=====
|
||||
// ===== 表格列配置（dataIndex 对齐 TournamentAdminBannerListVO） =====
|
||||
const columns = [
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 70, align: 'center' as const },
|
||||
{ title: '图片', key: 'image', width: 100, align: 'center' as const },
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', width: 220 },
|
||||
{
|
||||
title: '跳转类型',
|
||||
dataIndex: 'jumpType',
|
||||
key: 'jumpType',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{ title: '关联赛事', dataIndex: 'relatedEvent', key: 'relatedEvent', width: 200 },
|
||||
{ title: '所属区域', key: 'region', width: 140 },
|
||||
{ title: '跳转地址', dataIndex: 'linkUrl', key: 'linkUrl', width: 200 },
|
||||
{ title: '所属区域', dataIndex: 'area', key: 'area', width: 140 },
|
||||
{ title: '展示时间', key: 'displayTime', width: 260 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center' as const },
|
||||
];
|
||||
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): BannerListQueryParams => {
|
||||
const params: BannerListQueryParams = {};
|
||||
if (filterForm.title.trim()) {
|
||||
params.title = filterForm.title.trim();
|
||||
}
|
||||
if (filterForm.status) {
|
||||
params.status = filterForm.status;
|
||||
}
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return debouncedTitle.value.trim() !== '' || filterForm.status !== '';
|
||||
@@ -181,18 +130,20 @@ export function useBannerModel() {
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
title: debouncedTitle.value,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('Banner列表查询参数:', queryParams);
|
||||
const res = await getBannerList(queryParams);
|
||||
|
||||
if (res.code === 200) {
|
||||
setAllData(res.data);
|
||||
setPagination({ current: 1, pageSize: 10, total: res.data.length });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Banner查询失败:', error);
|
||||
} finally {
|
||||
@@ -200,17 +151,17 @@ export function useBannerModel() {
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchTitle = '';
|
||||
filterForm.title = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setAllData([]);
|
||||
setTimeout(() => handleSearch(), 350);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 打开新增弹窗 */
|
||||
@@ -218,14 +169,10 @@ export function useBannerModel() {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 打开编辑弹窗 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭弹窗 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
@@ -236,61 +183,81 @@ export function useBannerModel() {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
const payload = {
|
||||
...formPayload,
|
||||
displayStartTime: formPayload.displayTimeRange?.[0] || '',
|
||||
displayEndTime: formPayload.displayTimeRange?.[1] || '',
|
||||
const params = {
|
||||
img: formPayload.img || formPayload.imageUrl || '',
|
||||
title: formPayload.title || '',
|
||||
type: String(formPayload.type || formPayload.jumpType || '1'),
|
||||
linkUrl: formPayload.linkUrl || formPayload.jumpUrl || '',
|
||||
area: formPayload.area || formPayload.region || '',
|
||||
showTimeBegin:
|
||||
formPayload.showTimeBegin ||
|
||||
formPayload.displayTimeRange?.[0] ||
|
||||
formPayload.displayStartTime ||
|
||||
'',
|
||||
showTimeEnd:
|
||||
formPayload.showTimeEnd ||
|
||||
formPayload.displayTimeRange?.[1] ||
|
||||
formPayload.displayEndTime ||
|
||||
'',
|
||||
sort: String(formPayload.sort ?? 1),
|
||||
};
|
||||
console.log(isEdit.value ? '编辑 Banner' : '新增 Banner', payload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
console.error('Banner提交失败:', error);
|
||||
const isEdit = editingRecord.value !== null;
|
||||
const res = isEdit
|
||||
? await updateBanner({ ...params, id: editingRecord.value.id })
|
||||
: await saveBanner(params);
|
||||
if (res.code === 200) {
|
||||
message.success(isEdit ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Banner提交失败:', e);
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 删除（节流 500ms） */
|
||||
/** 删除 */
|
||||
const handleDelete = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('删除 Banner:', record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
console.error('Banner删除失败:', error);
|
||||
const res = await delBanner(record.id);
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '删除失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Banner删除失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
/** 启用/禁用切换 */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'enabled' ? 'disabled' : 'enabled';
|
||||
const actionText = newStatus === 'enabled' ? '启用' : '禁用';
|
||||
console.log(`${actionText} Banner:`, record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
// 更新本地数据
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
console.error('Banner状态切换失败:', error);
|
||||
const newStatus = record.status === '1' ? '0' : '1';
|
||||
const actionText = newStatus === '1' ? '启用' : '禁用';
|
||||
const res = await toggleBannerActive({ id: record.id, status: newStatus });
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`);
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Banner状态切换失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// ===== 供页面 bodyCell 使用的渲染工具 =====
|
||||
// ===== 渲染工具 =====
|
||||
const renderJumpType = (type: string) => {
|
||||
const info = JUMP_TYPE_MAP[type] || { label: type || '-', tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
@@ -298,11 +265,7 @@ export function useBannerModel() {
|
||||
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
|
||||
return h(StatusTag, {
|
||||
label: info.label,
|
||||
tone: info.tone,
|
||||
dimmed: info.dimmed,
|
||||
});
|
||||
return h(StatusTag, { label: info.label, tone: info.tone, dimmed: info.dimmed });
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@@ -6,69 +6,15 @@ import {
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Image,
|
||||
Pagination,
|
||||
Modal,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
import { EyeOutlined } from '@ant-design/icons-vue';
|
||||
import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useUserModel, USER_STATUS_OPTIONS, ROLE_OPTIONS } from './model/useUserModel';
|
||||
import { toggleUserActive } from '@/api/users';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import pageStyles from '@/assets/styles/pageLayout.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onToggleStatus,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onToggleStatus: (record: any) => void;
|
||||
}) {
|
||||
// 证件图片：优先 idCardImgList，回退 idCardImg
|
||||
if (column.dataIndex === 'idCardImg') {
|
||||
const urls = record.idCardImgList?.length
|
||||
? record.idCardImgList
|
||||
: record.idCardImg
|
||||
? [record.idCardImg]
|
||||
: [];
|
||||
if (urls.length === 0) return <span>-</span>;
|
||||
return (
|
||||
<Space>
|
||||
{urls.map((src: string) => (
|
||||
<Image
|
||||
key={src}
|
||||
width={48}
|
||||
height={32}
|
||||
src={src}
|
||||
v-slots={{ previewMask: () => <EyeOutlined /> }}
|
||||
/>
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === '1';
|
||||
return (
|
||||
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户列表
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventUsers',
|
||||
setup() {
|
||||
@@ -82,30 +28,23 @@ export default defineComponent({
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
const handleToggleStatus = (record: any) => {
|
||||
const isActive = record.status === '1';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
const targetStatus = isActive ? '0' : '1';
|
||||
const actionText = isActive ? '停用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认${actionText}用户"${record.nickname}"吗？`,
|
||||
content: `确认${actionText}用户"${record.realName}"吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await toggleUserActive({
|
||||
userId: record.id,
|
||||
status: targetStatus,
|
||||
});
|
||||
const res = await toggleUserActive({ userId: record.id, status: isActive ? '0' : '1' });
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`);
|
||||
message.success(`${actionText}成���`);
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} else message.error(res.msg || '操作失败');
|
||||
} catch (e: any) {
|
||||
console.error(`用户${actionText}失败:`, e);
|
||||
}
|
||||
@@ -113,7 +52,6 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
@@ -131,29 +69,26 @@ export default defineComponent({
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户昵称" name="nickname">
|
||||
<Form.Item label="用户姓名/手机号" name="text">
|
||||
<Input
|
||||
value={filterForm.nickname}
|
||||
placeholder="请输入用户昵称"
|
||||
value={filterForm.text}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) =>
|
||||
(filterForm.nickname = val.target?.value ?? val ?? '')
|
||||
}
|
||||
onUpdate:value={(val: any) => (filterForm.text = val.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="手机号" name="phone">
|
||||
<Input
|
||||
value={filterForm.phone}
|
||||
placeholder="请输入手机号"
|
||||
style={{ width: '200px' }}
|
||||
<Form.Item label="角色" name="roleId">
|
||||
<Select
|
||||
value={filterForm.roleId}
|
||||
options={ROLE_OPTIONS as any}
|
||||
style={{ width: '140px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.phone = val.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
placeholder="全部"
|
||||
onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
@@ -175,8 +110,6 @@ export default defineComponent({
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class={pageStyles.table}>
|
||||
<div ref={containerRef} class={pageStyles.tableBody}>
|
||||
<Table
|
||||
@@ -187,16 +120,23 @@ export default defineComponent({
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onToggleStatus: handleToggleStatus,
|
||||
}),
|
||||
bodyCell: (args: any) => {
|
||||
if (args.column.key === 'action') {
|
||||
const isActive = args.record.status === '1';
|
||||
return (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => handleToggleStatus(args.record)}
|
||||
>
|
||||
{isActive ? '停用' : '启用'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class={pageStyles.pagination}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
|
||||
@@ -2,71 +2,56 @@ import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
import { getUserList, type TournamentAdminUserPageVO, type UserListQueryParams } from '@/api/users';
|
||||
import { getUserList, type TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 用户状态选项（value 对应 API status: 不传=全部、0=禁用、1=正常） */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: '0', label: '停用' },
|
||||
{ value: '1', label: '正常' },
|
||||
{ value: '0', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 用户状态 StatusTag 映射 */
|
||||
const USER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
/** 角色选项（TODO: 对接角色 API） */
|
||||
export const ROLE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: '1', label: '超级管理员' },
|
||||
{ value: '2', label: '赛事管理员' },
|
||||
{ value: '3', label: '裁判' },
|
||||
{ value: '4', label: '财务' },
|
||||
] as const;
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
'1': { label: '正常', tone: 'success' },
|
||||
'0': { label: '禁用', tone: 'danger' },
|
||||
'0': { label: '停用', tone: 'danger' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 用户列表页数据模型
|
||||
*/
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件（key 名对齐 API 查询参数） =====
|
||||
const filterForm = reactive({
|
||||
nickname: '',
|
||||
phone: '',
|
||||
text: '',
|
||||
roleId: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
// 可搜索字段防抖
|
||||
const { debouncedValue: debouncedNickname } = useDebounce(
|
||||
toRef(filterForm, 'nickname') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedPhone } = useDebounce(
|
||||
toRef(filterForm, 'phone') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminUserPageVO[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
|
||||
delay: 300,
|
||||
});
|
||||
|
||||
// ===== 表格列配置（dataIndex 对齐 TournamentAdminUserPageVO） =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
const columns = [
|
||||
{ title: '昵称', dataIndex: 'nickname', key: 'nickname', width: 120 },
|
||||
{ title: '用户姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{ title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 100 },
|
||||
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idCardImg',
|
||||
key: 'idCardImg',
|
||||
width: 140,
|
||||
},
|
||||
{ title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
@@ -74,69 +59,47 @@ export function useUserModel() {
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = USER_STATUS_MAP[text] || { label: text, tone: 'default' as const };
|
||||
const info = STATUS_MAP[text] || { label: text, tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
},
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
|
||||
];
|
||||
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): UserListQueryParams => {
|
||||
const params: UserListQueryParams = {
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
};
|
||||
|
||||
if (filterForm.nickname.trim()) {
|
||||
params.nickname = filterForm.nickname.trim();
|
||||
}
|
||||
if (filterForm.phone.trim()) {
|
||||
params.phone = filterForm.phone.trim();
|
||||
}
|
||||
if (filterForm.status) {
|
||||
params.status = filterForm.status;
|
||||
}
|
||||
|
||||
if (filterForm.text.trim()) params.text = filterForm.text.trim();
|
||||
if (filterForm.roleId) params.roleId = filterForm.roleId;
|
||||
if (filterForm.status) params.status = filterForm.status;
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
debouncedNickname.value.trim() !== '' ||
|
||||
debouncedPhone.value.trim() !== '' ||
|
||||
filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
const hasFilter = computed(
|
||||
() => debouncedText.value.trim() !== '' || filterForm.roleId !== '' || filterForm.status !== '',
|
||||
);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('用户列表查询参数:', queryParams);
|
||||
const res = await getUserList(queryParams);
|
||||
|
||||
const params = buildQueryParams();
|
||||
console.log('用户列表查询参数:', params);
|
||||
const res = await getUserList(params);
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('用户列表查询失败:', error);
|
||||
} else message.error(res.msg || '查询失败');
|
||||
} catch (e: any) {
|
||||
console.error('用户列表查询失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.nickname = '';
|
||||
filterForm.phone = '';
|
||||
filterForm.text = '';
|
||||
filterForm.roleId = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
|
||||
@@ -26,7 +26,17 @@ const getDefaultForm = () => ({
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
role: '',
|
||||
roleId: undefined,
|
||||
});
|
||||
|
||||
/** 新增用户默认密码 */
|
||||
const DEFAULT_USER_PASSWORD = 'A8888888';
|
||||
|
||||
/** 获取新增时的表单初始值（预填默认密码） */
|
||||
const getAddForm = () => ({
|
||||
...getDefaultForm(),
|
||||
password: DEFAULT_USER_PASSWORD,
|
||||
confirmPassword: DEFAULT_USER_PASSWORD,
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
@@ -47,17 +57,18 @@ export default defineComponent({
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
// 新增：预填默认密码 + 确认密码
|
||||
Object.assign(formData, getAddForm());
|
||||
setIsResetting(false);
|
||||
return;
|
||||
}
|
||||
const fresh = getDefaultForm();
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
realName: record.realName || '',
|
||||
phone: record.phone || '',
|
||||
role: record.role || '',
|
||||
roleId: record.roleId || undefined,
|
||||
});
|
||||
setIsResetting(false);
|
||||
};
|
||||
@@ -90,7 +101,7 @@ export default defineComponent({
|
||||
const payload: any = {
|
||||
realName: formData.realName,
|
||||
phone: formData.phone,
|
||||
role: formData.role,
|
||||
roleId: formData.roleId,
|
||||
};
|
||||
if (props.record) {
|
||||
if (isResetting.value) {
|
||||
@@ -159,11 +170,11 @@ export default defineComponent({
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色" name="role" rules={roleRules} class={styles.col}>
|
||||
<Form.Item label="角色" name="roleId" rules={roleRules} class={styles.col}>
|
||||
<Select
|
||||
options={ROLE_FORM_OPTIONS as any}
|
||||
placeholder="请选择角色"
|
||||
v-model:value={formData.role}
|
||||
v-model:value={formData.roleId}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
@@ -197,11 +208,11 @@ export default defineComponent({
|
||||
</Form.Item>
|
||||
</div>
|
||||
{/* 角色：单独一行 */}
|
||||
<Form.Item label="角色" name="role" rules={roleRules}>
|
||||
<Form.Item label="角色" name="roleId" rules={roleRules}>
|
||||
<Select
|
||||
options={ROLE_FORM_OPTIONS as any}
|
||||
placeholder="请选择角色"
|
||||
v-model:value={formData.role}
|
||||
v-model:value={formData.roleId}
|
||||
style={{ width: '200px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -14,11 +14,12 @@ import { isChinaPhone, isValidPassword, isValidRealName } from '@/utils/form';
|
||||
/** 密码占位符（写死长度，避免暴露真实密码长度） */
|
||||
export const PASSWORD_PLACEHOLDER = '********';
|
||||
|
||||
/** 角色下拉选项（表单使用） */
|
||||
/** 角色下拉选项（表单使用，value 对应 API roleId） */
|
||||
export const ROLE_FORM_OPTIONS = [
|
||||
{ value: 'admin', label: '超级管理员' },
|
||||
{ value: 'operator', label: '运营人员' },
|
||||
{ value: 'auditor', label: '审核人员' },
|
||||
{ value: '1', label: '超级管理员' },
|
||||
{ value: '2', label: '赛事管理员' },
|
||||
{ value: '3', label: '裁判' },
|
||||
{ value: '4', label: '财务' },
|
||||
] as const;
|
||||
|
||||
// ============================================================
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
|
||||
import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Modal,
|
||||
Pagination,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
import { useUserModel, ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { toggleUserActive, saveUser, updateUser } from '@/api/users';
|
||||
import { useState, useThrottleFn, useContainerSize } from '@/hooks';
|
||||
import UserFormModal from './components/UserFormModal';
|
||||
import pageStyles from '@/assets/styles/pageLayout.module.less';
|
||||
|
||||
@@ -22,14 +33,14 @@ function renderBodyCell({
|
||||
}) {
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === 'active';
|
||||
const isActive = record.status === '1';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
{isActive ? '停用' : '启用'}
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
@@ -37,29 +48,6 @@ function renderBodyCell({
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 禁用/启用 二次确认弹窗
|
||||
*/
|
||||
function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any) => void }) {
|
||||
const isActive = record.status === 'active';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `确认${actionText}`,
|
||||
class: 'toggleConfirmModal',
|
||||
content: (
|
||||
<div class={pageStyles.confirmContent}>
|
||||
<span>确定要{actionText}用户</span>
|
||||
<strong>{record.realName}</strong>
|
||||
<span>吗？</span>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: isActive },
|
||||
onOk: () => onOk(record),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统管理 - 用户管理
|
||||
*/
|
||||
@@ -72,33 +60,110 @@ export default defineComponent({
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
modalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleToggleStatus,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
/** 触发禁用/启用的二次确认 */
|
||||
const triggerToggle = (record: any) => {
|
||||
confirmToggleStatus({ record, onOk: handleToggleStatus });
|
||||
// ===== 弹窗状态（组件级） =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 启用/禁用（使用真实 API） =====
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
const isActive = record.status === '1';
|
||||
const actionText = isActive ? '停用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: (
|
||||
<div class={pageStyles.confirmContent}>
|
||||
<span>确定要{actionText}用户</span>
|
||||
<strong>{record.realName}</strong>
|
||||
<span>吗？</span>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: isActive },
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await toggleUserActive({
|
||||
userId: record.id,
|
||||
status: isActive ? '0' : '1',
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`);
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error(`用户${actionText}失败:`, e);
|
||||
}
|
||||
},
|
||||
});
|
||||
}, 500);
|
||||
|
||||
// ===== 新增/编辑（组件级） =====
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 触发编辑 */
|
||||
const triggerEdit = (record: any) => {
|
||||
handleEdit(record);
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 表格最终列：模型列 + 操作 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
let res: any;
|
||||
if (editingRecord.value) {
|
||||
// 编辑：调用更新接口
|
||||
res = await updateUser({
|
||||
id: editingRecord.value.id,
|
||||
realName: formPayload.realName,
|
||||
phone: formPayload.phone,
|
||||
roleId: formPayload.roleId,
|
||||
...(formPayload.password
|
||||
? { password: formPayload.password, confirmPassword: formPayload.password }
|
||||
: {}),
|
||||
});
|
||||
} else {
|
||||
// 新增：调用保存接口
|
||||
res = await saveUser({
|
||||
realName: formPayload.realName,
|
||||
phone: formPayload.phone,
|
||||
roleId: formPayload.roleId,
|
||||
password: formPayload.password,
|
||||
confirmPassword: formPayload.password,
|
||||
});
|
||||
}
|
||||
if (res.code === 200) {
|
||||
message.success(editingRecord.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} else {
|
||||
message.error(res.msg || '操作失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('保存用户失败:', error);
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// ===== 表格最终列 =====
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
@@ -110,26 +175,34 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
// ===== 初始化 =====
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户" name="searchKeyword">
|
||||
<Form.Item label="用户姓名/手机号" name="text">
|
||||
<Input
|
||||
placeholder="请输入姓名/手机号"
|
||||
value={filterForm.text}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.text = val?.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色" name="role">
|
||||
<Form.Item label="角色" name="roleId">
|
||||
<Select
|
||||
value={filterForm.role}
|
||||
options={USER_ROLE_OPTIONS as any}
|
||||
value={filterForm.roleId}
|
||||
options={ROLE_OPTIONS as any}
|
||||
style={{ width: '140px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.role = val || '')}
|
||||
placeholder="全部"
|
||||
onUpdate:value={(val: any) => (filterForm.roleId = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
@@ -169,8 +242,8 @@ export default defineComponent({
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onEdit: triggerEdit,
|
||||
onToggleStatus: triggerToggle,
|
||||
onEdit: handleEdit,
|
||||
onToggleStatus: handleToggleStatus,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
|
||||
@@ -1,73 +1,35 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
import { getUserList, type TournamentAdminUserVO, type UserListQueryParams } from '@/api/users';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 角色选项（筛选） */
|
||||
export const USER_ROLE_OPTIONS = [
|
||||
export const ROLE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'admin', label: '管理员' },
|
||||
{ value: '1', label: '超级管理员' },
|
||||
{ value: '2', label: '赛事管理员' },
|
||||
{ value: '3', label: '裁判' },
|
||||
{ value: '4', label: '财务' },
|
||||
] as const;
|
||||
|
||||
/** 状态选项（筛选） */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'active', label: '正常' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
{ value: '0', label: '停用' },
|
||||
{ value: '1', label: '正常' },
|
||||
] as const;
|
||||
|
||||
/** 角色文本/色调映射（表格渲染） */
|
||||
const ROLE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
admin: { label: '管理员', tone: 'primary' },
|
||||
operator: { label: '运营人员', tone: 'cyan' },
|
||||
auditor: { label: '审核人员', tone: 'purple' },
|
||||
};
|
||||
|
||||
/** 状态文本/色调映射 */
|
||||
/** 状态文本/色调映射（表格渲染），对应 API status 字段：0=停用、1=正常 */
|
||||
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
active: { label: '正常', tone: 'success' },
|
||||
disabled: { label: '禁用', tone: 'danger' },
|
||||
'1': { label: '正常', tone: 'success' },
|
||||
'0': { label: '停用', tone: 'danger' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U20260526001',
|
||||
realName: '张三',
|
||||
phone: '15585658975',
|
||||
role: 'admin',
|
||||
status: 'active' as 'active' | 'disabled',
|
||||
createTime: '2026.05.26 08:00:00',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U20260526002',
|
||||
realName: '王五',
|
||||
phone: '13800138000',
|
||||
role: 'admin',
|
||||
status: 'disabled' as 'active' | 'disabled',
|
||||
createTime: '2026.05.26 14:00:00',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 临时排序：对假数据按创建时间倒序排列。
|
||||
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
|
||||
*/
|
||||
const sortByTimeDesc = (list: any[], field: string) =>
|
||||
[...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
|
||||
|
||||
const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
@@ -78,47 +40,30 @@ const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchKeyword: '', // 用户名/手机号
|
||||
role: '' as '' | 'admin',
|
||||
status: '' as '' | 'active' | 'disabled',
|
||||
text: '', // 用户姓名/手机号
|
||||
roleId: '', // 角色ID
|
||||
status: '' as '' | '0' | '1',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedKeyword } = useDebounce(
|
||||
toRef(filterForm, 'searchKeyword') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
// 文本筛选防抖 300ms
|
||||
const { debouncedValue: debouncedText } = useDebounce(toRef(filterForm, 'text') as Ref<string>, {
|
||||
delay: 300,
|
||||
});
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminUserVO[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: SORTED_MOCK_DATA.length,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 提交态 =====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'role',
|
||||
key: 'role',
|
||||
width: 120,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = ROLE_MAP[text] || { label: text || '-', tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
},
|
||||
},
|
||||
{ title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
@@ -133,107 +78,64 @@ export function useUserModel() {
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
|
||||
];
|
||||
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): UserListQueryParams => {
|
||||
const params: UserListQueryParams = {
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
};
|
||||
if (filterForm.text.trim()) params.text = filterForm.text.trim();
|
||||
if (filterForm.roleId) params.roleId = filterForm.roleId;
|
||||
if (filterForm.status) params.status = filterForm.status;
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
debouncedKeyword.value.trim() !== '' || filterForm.role !== '' || filterForm.status !== ''
|
||||
debouncedText.value.trim() !== '' || filterForm.roleId !== '' || filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
keyword: debouncedKeyword.value,
|
||||
role: filterForm.role,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('用户列表查询参数:', queryParams);
|
||||
const res = await getUserList(queryParams);
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
console.error('用户列表查询失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
/** 重置（节流 500ms，重置后自动查询） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchKeyword = '';
|
||||
filterForm.role = '';
|
||||
filterForm.text = '';
|
||||
filterForm.roleId = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
// 等待 debounce(300ms) 生效后自动查询
|
||||
setTimeout(() => handleSearch(), 350);
|
||||
}, 500);
|
||||
|
||||
/** 分页变更 */
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 打开新增弹窗 */
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 打开编辑弹窗 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭弹窗 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
/** 提交表单（新增/编辑） */
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
console.log(isEdit.value ? '编辑用户' : '新增用户', formPayload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'active' ? 'disabled' : 'active';
|
||||
const actionText = newStatus === 'active' ? '启用' : '禁用';
|
||||
console.log(`${actionText}用户:`, record.userId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
@@ -241,18 +143,8 @@ export function useUserModel() {
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
modalVisible,
|
||||
setModalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleToggleStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -31,3 +31,103 @@ function buildTree(parentCode: string): CascadeOption[] {
|
||||
|
||||
/** 省市区三级联动数据 */
|
||||
export const regionOptions: CascadeOption[] = buildTree('86');
|
||||
|
||||
// ============================================================
|
||||
// 省市选项（精确到市，直辖市仅市名）
|
||||
// ============================================================
|
||||
|
||||
/** 直辖市代码 */
|
||||
const MUNICIPALITY_CODES = ['110000', '120000', '310000', '500000'];
|
||||
|
||||
/** 省市选项 */
|
||||
export interface ProvinceCityOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取"省-市"格式的选项列表
|
||||
* - 普通省份：格式为 "省名-市名"，如 "广东省-深圳市"
|
||||
* - 直辖市：直接使用市名，如 "北京市"
|
||||
*/
|
||||
export function getProvinceCityOptions(): ProvinceCityOption[] {
|
||||
const options: ProvinceCityOption[] = [];
|
||||
const provinces = areaData['86'];
|
||||
if (!provinces) return options;
|
||||
|
||||
for (const [provinceCode, provinceName] of Object.entries(provinces)) {
|
||||
const pname = provinceName as string;
|
||||
|
||||
if (MUNICIPALITY_CODES.includes(provinceCode)) {
|
||||
options.push({ value: pname, label: pname });
|
||||
} else {
|
||||
const cities = areaData[provinceCode];
|
||||
if (cities) {
|
||||
for (const [, cityName] of Object.entries(cities)) {
|
||||
const fullName = `${pname}-${cityName}`;
|
||||
options.push({ value: fullName, label: fullName });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
/** Cascader 节点 */
|
||||
export interface CascaderNode {
|
||||
value: string;
|
||||
label: string;
|
||||
children?: CascaderNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取省市两级 Cascader 选项
|
||||
* - 普通省份：省 → 市，选中值 ["省名", "市名"]
|
||||
* - 直辖市：直接叶子节点，选中值 ["市名"]
|
||||
*/
|
||||
export function getProvinceCityCascaderOptions(): CascaderNode[] {
|
||||
const nodes: CascaderNode[] = [];
|
||||
const provinces = areaData['86'];
|
||||
if (!provinces) return nodes;
|
||||
|
||||
for (const [provinceCode, provinceName] of Object.entries(provinces)) {
|
||||
const pname = provinceName as string;
|
||||
|
||||
if (MUNICIPALITY_CODES.includes(provinceCode)) {
|
||||
// 直辖市：直接作为叶子节点
|
||||
nodes.push({ value: pname, label: pname });
|
||||
} else {
|
||||
const cities = areaData[provinceCode];
|
||||
if (cities) {
|
||||
const cityNodes: CascaderNode[] = Object.entries(cities).map(([, cname]) => ({
|
||||
value: cname as string,
|
||||
label: cname as string,
|
||||
}));
|
||||
nodes.push({ value: pname, label: pname, children: cityNodes });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 Cascader 选中的路径数组转为存储用的区域字符串
|
||||
* ["广东省", "深圳市"] → "广东省-深圳市"
|
||||
* ["北京市"] → "北京市"
|
||||
*/
|
||||
export function formatCascaderArea(path: string[]): string {
|
||||
if (!path || path.length === 0) return '';
|
||||
return path.join('-');
|
||||
}
|
||||
|
||||
/**
|
||||
* 将存储的区域字符串反向解析为 Cascader 路径数组
|
||||
* "广东省-深圳市" → ["广东省", "深圳市"]
|
||||
* "北京市" → ["北京市"]
|
||||
*/
|
||||
export function parseAreaToCascaderPath(area: string): string[] {
|
||||
if (!area) return [];
|
||||
return area.split('-');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user