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

feat: 对接赛事列表相关接口文档 更新测试数据

Browse Source
This commit is contained in:
ZhuRui
2026-07-29 16:49:33 +08:00
parent bf09234c8c
commit 444b6f60a5
12 changed files with 1146 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/events/list/components/EventDetailModal.tsx
+221 -168
View File
@@ -1,6 +1,15 @@
import { defineComponent } from 'vue';
import { Modal, Descriptions, Image, Table, Pagination, Space } from 'ant-design-vue';
import { defineComponent, reactive, onMounted } from 'vue';
import { Modal, Descriptions, Image, Table, Pagination, Space, Spin } from 'ant-design-vue';
import { EyeOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import {
getEventDetail,
getSignupList,
type TournamentAdminInfoVO,
type InnerCategoryVO,
type TournamentAdminInfoSignupVO,
} from '@/api/events';
import { useState } from '@/hooks';
import styles from './EventDetailModal.module.less';
interface EventDetailModalProps {
@@ -9,97 +18,57 @@ interface EventDetailModalProps {
onClose: () => void;
}
// ===== Mock 数据 =====
const MOCK_DETAIL = {
name: '第二届全国地学羽毛球邀请赛',
eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
descr:
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
cancelDeadline: '2026.05.25 22:00',
region: '北京市 北京市 东城区',
address: '李宁体育馆',
venueNo: '李宁体育馆',
publicEvent: '在首页展示赛事',
needIdCard: '无需提供',
needIdCardImage: '无需提供',
createTime: '2026.05.26 08:00',
creator: '张三',
status: '报名中',
enrolledCount: 100,
cancelledCount: 1,
maxCount: 1000,
crossedCount: 50,
completedCount: 50,
cover: 'https://picsum.photos/seed/eventcover/600/300',
announcement:
'赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
// ===== 0/1 显示映射 =====
const YES_NO_MAP: Record<string, string> = { '0': '否', '1': '是' };
const PUBLIC_MAP: Record<string, string> = { '0': '非公开', '1': '公开' };
const GENDER_MAP: Record<string, string> = { '1': '男', '2': '女' };
const CATEGORY_TYPE_MAP: Record<string, string> = { '1': '单打', '2': '双打' };
const formatYN = (v: string) => YES_NO_MAP[v] ?? v;
const formatPublic = (v: string) => PUBLIC_MAP[v] ?? v;
const formatGender = (v: string) => GENDER_MAP[v] ?? v;
const PAGE_SIZE = 10;
/** 渲染身份证图片 */
const renderIdImages = (imgList: string[], singleImg: string) => {
const urls = imgList.length > 0 ? imgList : singleImg ? [singleImg] : [];
if (urls.length === 0) return <span>-</span>;
return (
<Image.PreviewGroup>
<Space>
{urls.map((url) => (
<Image
key={url}
width={48}
height={32}
src={url}
v-slots={{ previewMask: () => <EyeOutlined /> }}
/>
))}
</Space>
</Image.PreviewGroup>
);
};
// 假组别数据
const MOCK_GROUPS = [
{
key: 'group1',
title: '组别1:男子单打（单打）',
players: [
{
key: '1',
name: '张三',
gender: '男',
phone: '12345678995',
idNo: 'xxxxxxxxxxxxxxxx',
idImg: '',
},
{ key: '2', name: '李四', gender: '男', phone: '', idNo: '', idImg: '' },
],
},
{
key: 'group2',
title: '组别2:女子双打（双打）',
players: [
{
key: '1',
name: '张三',
gender: '女',
phone: '12345678995',
idNo: 'xxxxxxxxxxxxxxxx',
idImg: '',
},
{ key: '2', name: '李四', gender: '女', phone: '', idNo: '', idImg: '' },
],
},
];
// 假分组数据
const MOCK_DIVISIONS = ['分组1:男子小组1（循环赛）', '分组2:女子小组1（淘汰赛）'];
const renderIdImage = (src: string) => (
<Image
width={48}
height={32}
src={src}
v-slots={{
previewMask: () => <EyeOutlined />,
}}
/>
);
/** 选手表格列 */
const PLAYER_COLUMNS = [
{ title: '选手', dataIndex: 'name', key: 'name', width: 100 },
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
{ title: '选手', dataIndex: 'realName', key: 'realName', width: 100 },
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
width: 60,
customRender: ({ text }: { text: string }) => formatGender(text),
},
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
{
title: '证件图片',
dataIndex: 'idImg',
key: 'idImg',
key: 'idCardImgs',
width: 180,
customRender: () => (
<Space>
{renderIdImage('https://picsum.photos/seed/idimg1/96/64')}
{renderIdImage('https://picsum.photos/seed/idimg2/96/64')}
</Space>
),
customRender: ({ record }: { record: TournamentAdminInfoSignupVO }) =>
renderIdImages(record.idCardImgList, record.idCardImg),
},
];
@@ -111,7 +80,71 @@ export default defineComponent({
onClose: { type: Function, required: true },
},
setup(props: EventDetailModalProps) {
const detail = MOCK_DETAIL;
// ===== 详情数据 =====
const [detail, setDetail] = useState<TournamentAdminInfoVO | null>(null);
const [detailLoading, setDetailLoading] = useState(true);
// ===== 每个组别的选手数据（key = categoryId） =====
const categoryPlayers = reactive<Record<string, TournamentAdminInfoSignupVO[]>>({});
const categoryPlayerTotal = reactive<Record<string, number>>({});
const categoryPlayerLoading = reactive<Record<string, boolean>>({});
const categoryPlayerPage = reactive<Record<string, number>>({});
/** 获取某个组别的选手列表（分页） */
const fetchPlayers = async (categoryId: string, page: number) => {
categoryPlayerLoading[categoryId] = true;
try {
const res = await getSignupList({
categoryId,
page: String(page),
limit: String(PAGE_SIZE),
});
if (res.code === 200) {
categoryPlayers[categoryId] = res.data.list;
categoryPlayerTotal[categoryId] = res.data.total;
categoryPlayerPage[categoryId] = page;
}
} catch {
// mock 模式不会到这里，真实模式下由 API 层处理
} finally {
categoryPlayerLoading[categoryId] = false;
}
};
/** 选手分页变更 */
const handlePlayerPageChange = (categoryId: string, page: number) => {
fetchPlayers(categoryId, page);
};
// ===== 初始化 =====
onMounted(async () => {
setDetailLoading(true);
try {
const id = props.record?.id;
if (!id) {
message.error('缺少赛事ID');
return;
}
const res = await getEventDetail(String(id));
if (res.code === 200) {
setDetail(res.data);
// 为每个组别加载第一页选手
for (const cat of res.data.categoryList) {
categoryPlayers[cat.id] = [];
categoryPlayerTotal[cat.id] = 0;
categoryPlayerPage[cat.id] = 1;
fetchPlayers(cat.id, 1);
}
} else {
message.error(res.msg || '获取详情失败');
}
} catch (e: any) {
message.error(e.msg || '获取详情失败');
} finally {
setDetailLoading(false);
}
});
return () => (
<Modal
@@ -124,97 +157,117 @@ export default defineComponent({
destroyOnClose
wrapClassName={styles.eventDetailModalMain}
>
{/* ===== 基础信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>基础信息</div>
<Descriptions size="small" bordered column={3} class={styles.desc}>
{/* 第一行：赛事名称（1 列） + 赛事时间（占 2 列） */}
<Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
<Descriptions.Item label="赛事时间" span={2}>
{detail.eventTime}
</Descriptions.Item>
{detailLoading.value ? (
<div style={{ textAlign: 'center', padding: '80px 0' }}>
<Spin size="large" />
</div>
) : detail.value ? (
<>
{/* ===== 基础信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>基础信息</div>
<Descriptions size="small" bordered column={3} class={styles.desc}>
<Descriptions.Item label="赛事名称">{detail.value.name}</Descriptions.Item>
<Descriptions.Item label="赛事时间" span={2}>
{detail.value.startTimeBegin} 至 {detail.value.startTimeEnd}
</Descriptions.Item>
{/* 第二行：赛事说明（占 3 列，独占整行） */}
<Descriptions.Item label="赛事说明" span={3}>
{detail.descr}
</Descriptions.Item>
<Descriptions.Item label="赛事说明" span={3}>
{detail.value.descr}
</Descriptions.Item>
<Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
<Descriptions.Item label="取消报名截止时间" span={2}>
{detail.cancelDeadline}
</Descriptions.Item>
<Descriptions.Item label="报名起止时间" span={3}>
{detail.value.signupTimeBegin} 至 {detail.value.signupTimeEnd}
</Descriptions.Item>
<Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
<Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
<Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
<Descriptions.Item label="省市区">{detail.value.venueArea}</Descriptions.Item>
<Descriptions.Item label="地点">{detail.value.venue}</Descriptions.Item>
<Descriptions.Item label="场地编号">{detail.value.venueNo}</Descriptions.Item>
<Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
<Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
<Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
<Descriptions.Item label="公开活动">
{formatPublic(detail.value.isPublic)}
</Descriptions.Item>
<Descriptions.Item label="证件号">
{formatYN(detail.value.isRequireIdCardNo)}
</Descriptions.Item>
<Descriptions.Item label="证件图片">
{formatYN(detail.value.isRequireIdCardImg)}
</Descriptions.Item>
<Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
<Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
<Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
<Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
<Descriptions.Item label="取消报名人数" span={1}>
{detail.cancelledCount}
</Descriptions.Item>
<Descriptions.Item label="创建时间">{detail.value.createTime}</Descriptions.Item>
<Descriptions.Item label="创建人" span={2}>
{detail.value.createNickname}
</Descriptions.Item>
<Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
<Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
<Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
</Descriptions>
</div>
<Descriptions.Item label="报名人数">{detail.value.signupCount}</Descriptions.Item>
<Descriptions.Item label="退赛人数">{detail.value.dropoutCount}</Descriptions.Item>
<Descriptions.Item label="最大人数">{detail.value.dtotalLimit}</Descriptions.Item>
{/* ===== 封面 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>封面</div>
<Image src={detail.cover} />
</div>
<Descriptions.Item label="总对阵数">
{detail.value.matchTotalCount}
</Descriptions.Item>
<Descriptions.Item label="已完成对阵数" span={2}>
{detail.value.matchCount}
</Descriptions.Item>
</Descriptions>
</div>
{/* ===== 赛事公告 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>赛事公告</div>
<div class={styles.textBlock}>{detail.announcement}</div>
</div>
{/* ===== 封面 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>封面</div>
<Image src={detail.value.img} />
</div>
{/* ===== 组别信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>组别信息</div>
{MOCK_GROUPS.map((group) => (
<div key={group.key} class={styles.group}>
<div class={styles.groupTitle}>{group.title}</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={group.players}
size="small"
pagination={false}
bordered
/>
<div class={styles.paginationRow}>
<Pagination
current={1}
pageSize={10}
total={5}
showSizeChanger={false}
size="small"
/>
{/* ===== 赛事公告 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>赛事公告</div>
<div class={styles.textBlock}>{detail.value.notice}</div>
</div>
{/* ===== 组别信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>组别信息</div>
{detail.value.categoryList.map((cat: InnerCategoryVO) => (
<div key={cat.id} class={styles.group}>
<div class={styles.groupTitle}>
{cat.name}（{CATEGORY_TYPE_MAP[cat.type] ?? cat.type}）
</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={categoryPlayers[cat.id] || []}
loading={categoryPlayerLoading[cat.id]}
scroll={{ x: 'max-content', y: 200 }}
size="small"
pagination={false}
bordered
/>
<div class={styles.paginationRow}>
<Pagination
current={categoryPlayerPage[cat.id] || 1}
pageSize={PAGE_SIZE}
total={categoryPlayerTotal[cat.id] || 0}
showSizeChanger={false}
size="small"
onChange={(page: number) => handlePlayerPageChange(cat.id, page)}
/>
</div>
</div>
))}
</div>
{/* ===== 分组信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>分组信息</div>
<div class={styles.divisionList}>
{detail.value.groupInfoList.map((d: string) => (
<div key={d} class={styles.divisionItem}>
{d}
</div>
))}
</div>
</div>
))}
</div>
{/* ===== 分组信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>分组信息</div>
<div class={styles.divisionList}>
{MOCK_DIVISIONS.map((d) => (
<div key={d} class={styles.divisionItem}>
{d}
</div>
))}
</div>
</div>
</>
) : null}
</Modal>
);
},
src/pages/events/list/index.tsx
+52 -45
View File
@@ -1,4 +1,4 @@
import { defineComponent } from 'vue';
import { defineComponent, onMounted } from 'vue';
import {
Button,
Input,
@@ -20,6 +20,7 @@ import {
ID_CARD_OPTIONS,
ID_CARD_IMAGE_OPTIONS,
} from './model/useEventListModel';
import { toggleEventOnline } from '@/api/events';
import { regionOptions } from '@/utils/areaData';
import { useContainerSize, useState } from '@/hooks';
import EventRegulationModal from './components/EventRegulationModal';
@@ -49,7 +50,7 @@ function renderBodyCell({
onAudit: (record: any) => void;
onToggleShelf: (record: any) => void;
}) {
if (column.dataIndex === 'eventName') {
if (column.dataIndex === 'name') {
const maxLen = 15;
const raw = text || '';
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
@@ -74,19 +75,8 @@ function renderBodyCell({
const status = record.status;
return (
// 待审核：查看 + 审核
(status === 'pending' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button type="link" size="small" onClick={() => onAudit(record)}>
审核
</Button>
</Space>
)) ||
// 报名中：查看 + 下架
(status === 'enrolling' && (
// 报名中(0) / 进行中(1)：查看 + 下架
((status === '0' || status === '1') && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
@@ -96,8 +86,8 @@ function renderBodyCell({
</Button>
</Space>
)) ||
// 已下架：查看 + 上架
(status === 'removed' && (
// 已下架(4)：查看 + 上架
(status === '4' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
@@ -107,7 +97,7 @@ function renderBodyCell({
</Button>
</Space>
)) || (
// 审核不通过 / 已删除：仅查看
// 已结束(2) / 已删除(3)：仅查看
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
@@ -144,49 +134,62 @@ export default defineComponent({
const [currentRecord, setCurrentRecord] = useState<any>({});
const handleView = (record: any) => {
console.log('查看赛事:', record.eventId);
console.log('查看赛事:', record.id);
setCurrentRecord(record);
setDetailModalVisible(true);
};
/** 上架 / 下架 通用 */
const handleToggleShelf = (record: any) => {
const isRemoved = record.status === 'removed';
const isRemoved = record.status === '4';
const actionText = isRemoved ? '上架' : '下架';
Modal.confirm({
title: `${actionText}确认`,
content: `确认${actionText}"${record.eventName}"该赛事吗，下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`,
content: `确认${actionText}"${record.name}"该赛事吗，下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`,
okText: '确认',
cancelText: '取消',
onOk: () => {
console.log(`${actionText}赛事:`, record.eventId);
// TODO: 替换为真实 API 调用
message.success(`${actionText}成功`);
onOk: async () => {
const online = isRemoved ? '1' : '0';
try {
const res = await toggleEventOnline({ id: record.id, online });
if (res.code === 200) {
message.success(`${actionText}成功`);
handleSearch();
} else {
message.error(res.msg || `${actionText}失败`);
}
} catch (e: any) {
message.error(e.msg || `${actionText}失败`);
}
},
});
};
/** 打开审核弹窗 */
const handleAudit = (record: any) => {
console.log('审核赛事:', record.eventId);
console.log('审核赛事:', record.id);
setCurrentRecord(record);
setAuditModalVisible(true);
};
/** 提交审核 */
const handleAuditSubmit = (payload: { approved: boolean; comment: string }) => {
console.log('提交审核:', currentRecord.value.eventId, payload);
console.log('提交审核:', currentRecord.value.id, payload);
// TODO: 替换为真实 API 调用
message.success('审核提交成功');
setAuditModalVisible(false);
};
const handleViewRegulation = (record: any) => {
console.log('查看规程:', record.eventId);
console.log('查看规程:', record.id);
setCurrentRecord(record);
setRegulationModalVisible(true);
};
onMounted(() => {
handleSearch();
});
/** 最终表格列：模型列 + 赛事规程 + 操作 */
const tableColumns = [
...columns,
@@ -205,23 +208,27 @@ export default defineComponent({
{/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="创建时间" name="createTimeRange">
<Form.Item label="创建时间" name="createDateRange">
<RangePicker
value={filterForm.createTimeRange as any}
value={filterForm.createDateRange as any}
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style={{ width: '260px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.createTimeRange = val)}
onUpdate:value={(val: any) => (filterForm.createDateRange = val)}
/>
</Form.Item>
<Form.Item label="赛事时间" name="eventTimeRange">
<Form.Item label="赛事时间" name="startDateRange">
<RangePicker
value={filterForm.eventTimeRange as any}
value={filterForm.startDateRange as any}
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style={{ width: '260px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.eventTimeRange = val)}
onUpdate:value={(val: any) => (filterForm.startDateRange = val)}
/>
</Form.Item>
<Form.Item label="赛事名称" name="searchName">
<Form.Item label="赛事名称" name="name">
<Input
placeholder="请输入赛事名称"
style={{ width: '180px' }}
@@ -229,7 +236,7 @@ export default defineComponent({
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="创建人" name="searchCreator">
<Form.Item label="创建人" name="createName">
<Input
placeholder="请输入创建人"
style={{ width: '150px' }}
@@ -246,31 +253,31 @@ export default defineComponent({
onUpdate:value={(val: any) => (filterForm.status = val || '')}
/>
</Form.Item>
<Form.Item label="公开活动" name="publicEvent">
<Form.Item label="公开活动" name="isPublic">
<Select
value={filterForm.publicEvent}
value={filterForm.isPublic}
options={PUBLIC_EVENT_OPTIONS as any}
style={{ width: '170px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.publicEvent = val || '')}
onUpdate:value={(val: any) => (filterForm.isPublic = val || '')}
/>
</Form.Item>
<Form.Item label="证件号" name="needIdCard">
<Form.Item label="证件号" name="idCardNo">
<Select
value={filterForm.needIdCard}
value={filterForm.idCardNo}
options={ID_CARD_OPTIONS as any}
style={{ width: '120px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.needIdCard = val || '')}
onUpdate:value={(val: any) => (filterForm.idCardNo = val || '')}
/>
</Form.Item>
<Form.Item label="证件图片" name="needIdCardImage">
<Form.Item label="证件图片" name="idCardImg">
<Select
value={filterForm.needIdCardImage}
value={filterForm.idCardImg}
options={ID_CARD_IMAGE_OPTIONS as any}
style={{ width: '120px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.needIdCardImage = val || '')}
onUpdate:value={(val: any) => (filterForm.idCardImg = val || '')}
/>
</Form.Item>
<Form.Item label="省市区" name="region">
src/pages/events/list/model/useEventListModel.ts
+156 -124
View File
@@ -1,180 +1,168 @@
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 type { TournamentAdminVO, EventListQueryParams } from '@/api/events';
import { getEventList } from '@/api/events';
// ============================================================
// 常量
// ============================================================
/** 赛事状态选项 */
/** 赛事状态选项（value 对应 API status: 不传=全部、0=报名中，1=进行中，2=已结束，3=已删除，4=已下架） */
export const EVENT_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'pending', label: '待审核' },
{ value: 'enrolling', label: '报名中' },
{ value: 'deleted', label: '已删除' },
{ value: 'removed', label: '已下架' },
{ value: 'rejected', label: '审核不通过' },
{ value: '0', label: '报名中' },
{ value: '1', label: '进行中' },
{ value: '2', label: '已结束' },
{ value: '3', label: '已删除' },
{ value: '4', label: '已下架' },
] as const;
/** 公开活动选项 */
/** 公开活动选项（value 对应 API isPublic: 0=非公开，1=公开） */
export const PUBLIC_EVENT_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'show', label: '在首页展示赛事' },
{ value: 'hide', label: '不在首页展示赛事' },
{ value: '1', label: '公开' },
{ value: '0', label: '非公开' },
] as const;
/** 证件号选项 */
/** 证件号选项（value 对应 API idCardNo: 0=无需，1=需要） */
export const ID_CARD_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'no', label: '无需提供' },
{ value: 'yes', label: '需提供' },
{ value: '0', label: '无需提供' },
{ value: '1', label: '需提供' },
] as const;
/** 证件图片选项 */
/** 证件图片选项（value 对应 API idCardImg: 0=无需，1=需要） */
export const ID_CARD_IMAGE_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'no', label: '无需提供' },
{ value: 'yes', label: '需提供' },
{ value: '0', label: '无需提供' },
{ value: '1', label: '需提供' },
] as const;
// ============================================================
// 假数据
// ============================================================
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
key: `${i + 1}`,
eventId: `EV2026070100${String(i + 1).padStart(2, '0')}`,
eventName:
i % 3 === 0
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
: i % 3 === 1
? '国际马拉松城市联赛'
: '全民健身运动会',
eventTimeStart: '2026-08-12 09:00',
eventTimeEnd: '2026-08-15 18:00',
province: '广东省',
city: '深圳市',
district: '南山区',
address: '深圳湾体育中心',
needIdCard: i % 2 === 0 ? '是' : '否',
needIdCardImage: i % 2 === 0 ? '是' : '否',
creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
createTime: `2026-07-${String((i % 10) + 1).padStart(2, '0')} ${String((i * 3 + 8) % 24).padStart(2, '0')}:${String((i * 17 + 11) % 60).padStart(2, '0')}:${String((i * 13 + 7) % 60).padStart(2, '0')}`,
status: (['pending', 'enrolling', 'deleted', 'removed', 'rejected'] as const)[i % 5],
enrolledCount: [128, 256, 512, 64, 0][i % 5],
cancelledCount: [5, 12, 8, 3, 0][i % 5],
}));
/**
* 临时排序：对假数据按创建时间倒序排列。
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
*/
const 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');
/** 状态标签映射 */
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
pending: { label: '待审核', tone: 'warning' },
enrolling: { label: '报名中', tone: 'primary' },
deleted: { label: '已删除', tone: 'neutral' },
removed: { label: '已下架', tone: 'orange' },
rejected: { label: '审核不通过', tone: 'danger' },
'0': { label: '报名中', tone: 'primary' },
'1': { label: '进行中', tone: 'cyan' },
'2': { label: '已结束', tone: 'neutral' },
'3': { label: '已删除', tone: 'neutral' },
'4': { label: '已下架', tone: 'orange' },
};
/** 0/1 → 显示文字 */
const formatDisplayValue = (value: string, map: Record<string, string>) => map[value] ?? value;
const ID_CARD_DISPLAY_MAP: Record<string, string> = { '0': '否', '1': '是' };
const IS_PUBLIC_DISPLAY_MAP: Record<string, string> = { '0': '非公开', '1': '公开' };
// ============================================================
// Model
// ============================================================
/**
* 赛事列表页数据模型
* 筛选字段名与 API query 参数（EventListQueryParams）保持一致，
* 仅日期区间 RangePicker 拆分为 start/end 两个字段、省市区 Cascader 取末级为 areaName。
*/
export function useEventListModel() {
// ===== 筛选条件 =====
// ===== 筛选条件（key 名对齐 API 查询参数） =====
const filterForm = reactive({
createTimeRange: null as [string, string] | null,
eventTimeRange: null as [string, string] | null,
searchName: '',
searchCreator: '',
createDateRange: null as [string, string] | null,
startDateRange: null as [string, string] | null,
name: '',
createName: '',
status: '',
region: [] as string[],
publicEvent: '',
needIdCard: '',
needIdCardImage: '',
isPublic: '',
idCardNo: '',
idCardImg: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedName } = useDebounce(
toRef(filterForm, 'searchName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedName } = useDebounce(toRef(filterForm, 'name') as Ref<string>, {
delay: 300,
});
const { debouncedValue: debouncedCreator } = useDebounce(
toRef(filterForm, 'searchCreator') as Ref<string>,
toRef(filterForm, 'createName') as Ref<string>,
{ delay: 300 },
);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
const [dataSource, setDataSource] = useState<TournamentAdminVO[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: SORTED_MOCK_DATA.length,
total: 0,
});
// ===== 表格列配置 =====
// ===== 表格列配置（dataIndex 对齐 TournamentAdminVO 字段） =====
const columns = [
{ title: '赛事ID', dataIndex: 'eventId', key: 'eventId', width: 180 },
{ title: '赛事ID', dataIndex: 'id', key: 'id', width: 180 },
{
title: '赛事名称',
dataIndex: 'eventName',
key: 'eventName',
dataIndex: 'name',
key: 'name',
width: 160,
},
{
title: '赛事时间',
key: 'eventTime',
width: 260,
customRender: ({ record }: { record: any }) =>
`${record.eventTimeStart} 至 ${record.eventTimeEnd}`,
customRender: ({ record }: { record: TournamentAdminVO }) =>
`${record.startTimeBegin} 至 ${record.startTimeEnd}`,
},
{
title: '省市区',
key: 'region',
dataIndex: 'venueArea',
key: 'venueArea',
width: 200,
customRender: ({ record }: { record: any }) =>
`${record.province} ${record.city} ${record.district}`,
},
{ title: '地点', dataIndex: 'address', key: 'address', width: 180 },
{
title: '地点',
dataIndex: 'venue',
key: 'venue',
width: 180,
},
{
title: '是否公开',
dataIndex: 'isPublic',
key: 'isPublic',
width: 100,
customRender: ({ text }: { text: string }) => formatDisplayValue(text, IS_PUBLIC_DISPLAY_MAP),
},
{
title: '是否提供证件号',
dataIndex: 'needIdCard',
key: 'needIdCard',
dataIndex: 'isRequireIdCardNo',
key: 'isRequireIdCardNo',
width: 160,
customRender: ({ text }: { text: string }) => formatDisplayValue(text, ID_CARD_DISPLAY_MAP),
},
{
title: '是否提供证件图片',
dataIndex: 'needIdCardImage',
key: 'needIdCardImage',
dataIndex: 'isRequireIdCardImg',
key: 'isRequireIdCardImg',
width: 160,
customRender: ({ text }: { text: string }) => formatDisplayValue(text, ID_CARD_DISPLAY_MAP),
},
{
title: '创建人昵称',
dataIndex: 'creatorNickname',
key: 'creatorNickname',
dataIndex: 'createNickname',
key: 'createNickname',
width: 110,
},
{
title: '创建人手机号',
dataIndex: 'creatorPhone',
key: 'creatorPhone',
dataIndex: 'createPhone',
key: 'createPhone',
width: 130,
},
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 170,
},
{
title: '状态',
dataIndex: 'status',
@@ -185,22 +173,72 @@ export function useEventListModel() {
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
{ title: '报名人数', dataIndex: 'enrolledCount', key: 'enrolledCount', width: 90 },
{ title: '取消报名人数', dataIndex: 'cancelledCount', key: 'cancelledCount', width: 140 },
{
title: '报名人数',
dataIndex: 'signupCount',
key: 'signupCount',
width: 90,
},
{
title: '取消报名人数',
dataIndex: 'dropoutCount',
key: 'dropoutCount',
width: 140,
},
];
// ===== 构建 API 查询参数 =====
const buildQueryParams = (): EventListQueryParams => {
const params: EventListQueryParams = {
page: String(pagination.value.current),
limit: String(pagination.value.pageSize),
};
if (filterForm.createDateRange) {
params.createDate = filterForm.createDateRange[0];
params.createDateEnd = filterForm.createDateRange[1];
}
if (filterForm.startDateRange) {
params.startDate = filterForm.startDateRange[0];
params.startDateEnd = filterForm.startDateRange[1];
}
if (filterForm.region.length > 0) {
params.areaName = filterForm.region[filterForm.region.length - 1];
}
if (debouncedName.value.trim()) {
params.name = debouncedName.value.trim();
}
if (debouncedCreator.value.trim()) {
params.createName = debouncedCreator.value.trim();
}
if (filterForm.status) {
params.status = filterForm.status;
}
if (filterForm.isPublic) {
params.isPublic = filterForm.isPublic;
}
if (filterForm.idCardNo) {
params.idCardNo = filterForm.idCardNo;
}
if (filterForm.idCardImg) {
params.idCardImg = filterForm.idCardImg;
}
return params;
};
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
filterForm.createTimeRange !== null ||
filterForm.eventTimeRange !== null ||
filterForm.createDateRange !== null ||
filterForm.startDateRange !== null ||
debouncedName.value.trim() !== '' ||
debouncedCreator.value.trim() !== '' ||
filterForm.status !== '' ||
filterForm.region.length > 0 ||
filterForm.publicEvent !== '' ||
filterForm.needIdCard !== '' ||
filterForm.needIdCardImage !== ''
filterForm.isPublic !== '' ||
filterForm.idCardNo !== '' ||
filterForm.idCardImg !== ''
);
});
@@ -210,21 +248,15 @@ export function useEventListModel() {
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
createTimeRange: filterForm.createTimeRange,
eventTimeRange: filterForm.eventTimeRange,
name: debouncedName.value,
creator: debouncedCreator.value,
status: filterForm.status,
region: filterForm.region,
publicEvent: filterForm.publicEvent,
needIdCard: filterForm.needIdCard,
needIdCardImage: filterForm.needIdCardImage,
});
// TODO: 替换为真实 API 调用
setDataSource(SORTED_MOCK_DATA);
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
message.success('查询成功');
const queryParams = buildQueryParams();
const res = await getEventList(queryParams);
if (res.code === 200) {
setDataSource(res.data.list);
setPagination({ ...pagination.value, total: res.data.total });
} else {
message.error(res.msg || '查询失败');
}
} catch (error: any) {
message.error(error.msg || '查询失败');
} finally {
@@ -234,17 +266,17 @@ export function useEventListModel() {
/** 重置 */
const handleReset = useThrottleFn(() => {
filterForm.createTimeRange = null;
filterForm.eventTimeRange = null;
filterForm.searchName = '';
filterForm.searchCreator = '';
filterForm.createDateRange = null;
filterForm.startDateRange = null;
filterForm.name = '';
filterForm.createName = '';
filterForm.status = '';
filterForm.region = [];
filterForm.publicEvent = '';
filterForm.needIdCard = '';
filterForm.needIdCardImage = '';
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
setDataSource(SORTED_MOCK_DATA);
filterForm.isPublic = '';
filterForm.idCardNo = '';
filterForm.idCardImg = '';
setPagination({ current: 1, pageSize: 10, total: 0 });
setDataSource([]);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {