import React, { useState, useEffect } from 'react';
|
import { Table, Button, Modal, Form, Input, Select, DatePicker, Space, Card, message, Popconfirm, Tag, Row, Col, Upload } from 'antd';
|
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, UserOutlined, UploadOutlined } from '@ant-design/icons';
|
import { useNavigate } from 'react-router-dom';
|
import { activityAPI } from '../../services/api';
|
import dayjs from 'dayjs';
|
|
const { Option } = Select;
|
const { RangePicker } = DatePicker;
|
|
const ActivityList = () => {
|
const [form] = Form.useForm();
|
const [modalVisible, setModalVisible] = useState(false);
|
const [editingRecord, setEditingRecord] = useState(null);
|
const [loading, setLoading] = useState(false);
|
const [searchForm] = Form.useForm();
|
const [viewModalVisible, setViewModalVisible] = useState(false);
|
const [viewingRecord, setViewingRecord] = useState(null);
|
const [activities, setActivities] = useState([]);
|
const [pagination, setPagination] = useState({
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
const [filters, setFilters] = useState({});
|
|
const navigate = useNavigate();
|
|
// 获取活动列表
|
const fetchActivities = async (params = {}) => {
|
try {
|
setLoading(true);
|
const queryParams = {
|
page: pagination.current,
|
size: pagination.pageSize,
|
...filters,
|
...params,
|
};
|
|
const response = await activityAPI.getActivityList(queryParams);
|
if (response.code === 0) {
|
setActivities(response.data.content || []);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.totalElements || 0,
|
}));
|
}
|
} catch (error) {
|
console.error('获取活动列表失败:', error);
|
message.error('获取活动列表失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
fetchActivities();
|
}, [pagination.current, pagination.pageSize]);
|
|
// 处理分页变化
|
const handleTableChange = (paginationInfo) => {
|
setPagination(prev => ({
|
...prev,
|
current: paginationInfo.current,
|
pageSize: paginationInfo.pageSize,
|
}));
|
};
|
|
|
const columns = [
|
{
|
title: '活动名称',
|
dataIndex: 'title',
|
key: 'title',
|
width: 200,
|
},
|
{
|
title: '活动分类',
|
dataIndex: 'categoryDesc',
|
key: 'categoryDesc',
|
width: 120,
|
render: (categoryDesc) => {
|
const colorMap = {
|
'党的建设': 'red',
|
'经济发展': 'blue',
|
'平安法治': 'green',
|
'民生服务': 'orange',
|
'失信违法': 'purple',
|
};
|
return <Tag color={colorMap[categoryDesc]}>{categoryDesc}</Tag>;
|
},
|
},
|
{
|
title: '活动时间',
|
key: 'time',
|
width: 200,
|
render: (_, record) => (
|
<div>
|
<div>开始：{dayjs(record.startTime).format('MM-DD HH:mm')}</div>
|
<div>结束：{dayjs(record.endTime).format('MM-DD HH:mm')}</div>
|
</div>
|
),
|
},
|
{
|
title: '活动地点',
|
dataIndex: 'location',
|
key: 'location',
|
width: 150,
|
},
|
{
|
title: '最大志愿者人数',
|
dataIndex: 'maxParticipants',
|
key: 'maxParticipants',
|
width: 120,
|
render: (maxParticipants) => (
|
<span>
|
{maxParticipants}
|
</span>
|
),
|
},
|
{
|
title: '报名截止时间',
|
dataIndex: 'deadline',
|
key: 'deadline',
|
width: 150,
|
render: (deadline) => dayjs(deadline).format('YYYY-MM-DD HH:mm'),
|
},
|
{
|
title: '活动积分',
|
dataIndex: 'points',
|
key: 'points',
|
width: 80,
|
render: (points) => <span style={{ color: '#52c41a', fontWeight: 'bold' }}>+{points}</span>,
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
width: 100,
|
render: (status) => {
|
const statusMap = {
|
1: { text: '未开始', color: 'default' },
|
2: { text: '进行中', color: 'processing' },
|
3: { text: '已结束', color: 'success' }
|
};
|
const statusInfo = statusMap[status] || { text: '未知', color: 'default' };
|
return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
|
},
|
},
|
{
|
title: '创建时间',
|
dataIndex: 'createTime',
|
key: 'createTime',
|
width: 150,
|
render: (time) => dayjs(time).format('YYYY-MM-DD HH:mm'),
|
},
|
{
|
title: '操作',
|
key: 'action',
|
width: 200,
|
render: (_, record) => (
|
<Space size="middle">
|
<Button
|
type="link"
|
icon={<EyeOutlined />}
|
onClick={() => handleView(record)}
|
>
|
查看
|
</Button>
|
<Button
|
type="link"
|
icon={<UserOutlined />}
|
onClick={() => navigate(`/activities/registrations/${record.id}`)}
|
>
|
报名管理
|
</Button>
|
{record.status !== '已结束' && (
|
<>
|
<Button
|
type="link"
|
icon={<EditOutlined />}
|
onClick={() => handleEdit(record)}
|
>
|
编辑
|
</Button>
|
<Popconfirm
|
title="确定要删除这个活动吗？"
|
onConfirm={() => handleDelete(record.id)}
|
okText="确定"
|
cancelText="取消"
|
>
|
<Button type="link" danger icon={<DeleteOutlined />}>
|
删除
|
</Button>
|
</Popconfirm>
|
</>
|
)}
|
</Space>
|
),
|
},
|
];
|
|
const handleAdd = () => {
|
navigate('/activities/create');
|
};
|
|
const handleView = (record) => {
|
setViewingRecord(record);
|
setViewModalVisible(true);
|
};
|
|
const handleEdit = (record) => {
|
navigate(`/activities/edit/${record.id}`);
|
};
|
|
const handleDelete = async (id) => {
|
try {
|
const response = await activityAPI.deleteActivities(id.toString());
|
if (response.code === 0) {
|
message.success('删除成功');
|
fetchActivities();
|
}
|
} catch (error) {
|
console.error('删除活动失败:', error);
|
message.error('删除活动失败');
|
}
|
};
|
|
const handleModalCancel = () => {
|
setViewModalVisible(false);
|
};
|
|
const handleSearch = (values) => {
|
const searchParams = { ...values };
|
if (values.timeRange && values.timeRange.length === 2) {
|
searchParams.createStart = values.timeRange[0].format('YYYY-MM-DD');
|
searchParams.createEnd = values.timeRange[1].format('YYYY-MM-DD');
|
delete searchParams.timeRange;
|
}
|
|
setFilters(searchParams);
|
setPagination(prev => ({ ...prev, current: 1 }));
|
fetchActivities({ ...searchParams, page: 1 });
|
};
|
|
const handleReset = () => {
|
searchForm.resetFields();
|
setFilters({});
|
setPagination(prev => ({ ...prev, current: 1 }));
|
fetchActivities({ page: 1 });
|
};
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">活动列表</h1>
|
<p className="page-description">管理所有志愿者活动，查看活动状态和报名情况</p>
|
</div>
|
|
{/* 搜索表单 */}
|
<Card className="search-form">
|
<Form
|
form={searchForm}
|
layout="inline"
|
onFinish={handleSearch}
|
>
|
<Row gutter={[16, 16]} style={{ width: '100%' }}>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="title" label="活动名称">
|
<Input placeholder="请输入活动名称" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="category" label="活动分类">
|
<Select placeholder="请选择活动分类" allowClear>
|
<Option value="党的建设">党的建设</Option>
|
<Option value="经济发展">经济发展</Option>
|
<Option value="平安法治">平安法治</Option>
|
<Option value="民生服务">民生服务</Option>
|
<Option value="失信违法">失信违法</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="status" label="活动状态">
|
<Select placeholder="请选择活动状态" allowClear>
|
<Option value="报名中">报名中</Option>
|
<Option value="进行中">进行中</Option>
|
<Option value="已结束">已结束</Option>
|
<Option value="已取消">已取消</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="timeRange" label="活动时间">
|
<RangePicker style={{ width: '100%' }} />
|
</Form.Item>
|
</Col>
|
</Row>
|
<div className="form-actions">
|
<Button type="primary" htmlType="submit">
|
搜索
|
</Button>
|
<Button onClick={handleReset}>
|
重置
|
</Button>
|
</div>
|
</Form>
|
</Card>
|
|
<Card>
|
<div className="table-actions">
|
<Button
|
type="primary"
|
icon={<PlusOutlined />}
|
onClick={handleAdd}
|
>
|
发布活动
|
</Button>
|
</div>
|
|
<Table
|
columns={columns}
|
dataSource={activities}
|
rowKey="id"
|
loading={loading}
|
scroll={{ x: 1400 }}
|
pagination={{
|
current: pagination.current,
|
pageSize: pagination.pageSize,
|
total: pagination.total,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
|
}}
|
onChange={handleTableChange}
|
/>
|
</Card>
|
|
{/* 查看活动弹窗 */}
|
<Modal
|
title="查看活动详情"
|
open={viewModalVisible}
|
onCancel={handleModalCancel}
|
footer={[
|
<Button key="close" onClick={handleModalCancel}>
|
关闭
|
</Button>
|
]}
|
width={800}
|
>
|
{viewingRecord && (
|
<div>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>活动名称：</strong>{viewingRecord.title}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>活动分类：</strong>{viewingRecord.categoryDesc}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>活动开始时间：</strong>{dayjs(viewingRecord.startTime).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>活动结束时间：</strong>{dayjs(viewingRecord.endTime).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>活动地点：</strong>{viewingRecord.location}</div>
|
</Col>
|
<Col span={12}>
|
<div><strong>报名截止时间：</strong>{dayjs(viewingRecord.deadline).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={8}>
|
<div><strong>最大志愿者人数：</strong>{viewingRecord.maxParticipants}</div>
|
</Col>
|
<Col span={8}>
|
<div><strong>活动积分：</strong>{viewingRecord.points}</div>
|
</Col>
|
<Col span={8}>
|
<div><strong>状态：</strong>{
|
(() => {
|
const statusMap = {
|
1: '未开始',
|
2: '进行中',
|
3: '已结束'
|
};
|
return statusMap[viewingRecord.status] || '未知';
|
})()
|
}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={12}>
|
<div><strong>创建时间：</strong>{dayjs(viewingRecord.createTime).format('YYYY-MM-DD HH:mm')}</div>
|
</Col>
|
</Row>
|
<Row gutter={[24, 16]}>
|
<Col span={24}>
|
<div><strong>活动内容：</strong></div>
|
<div style={{ marginTop: '8px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
{viewingRecord.content}
|
</div>
|
</Col>
|
</Row>
|
{viewingRecord.cover && (
|
<Row gutter={[24, 16]}>
|
<Col span={24}>
|
<div><strong>活动封面：</strong></div>
|
<div style={{ marginTop: '8px' }}>
|
<img src={viewingRecord.cover} alt="活动封面" style={{ maxWidth: '200px', borderRadius: '4px' }} />
|
</div>
|
</Col>
|
</Row>
|
)}
|
</div>
|
)}
|
</Modal>
|
</div>
|
);
|
};
|
|
export default ActivityList;
|
