import React, { useState, useEffect } from 'react';
|
import { Form, Input, Select, DatePicker, InputNumber, Button, Card, message, Row, Col, Upload, Spin } from 'antd';
|
import { UploadOutlined } from '@ant-design/icons';
|
import { useNavigate, useParams } from 'react-router-dom';
|
import { activityAPI } from '../../services/api';
|
import dayjs from 'dayjs';
|
import './ActivityCreate.css';
|
|
const { Option } = Select;
|
const { TextArea } = Input;
|
|
const ActivityEdit = () => {
|
const [form] = Form.useForm();
|
const [loading, setLoading] = useState(false);
|
const [pageLoading, setPageLoading] = useState(true);
|
const navigate = useNavigate();
|
const { id } = useParams();
|
const [currentActivity, setCurrentActivity] = useState(null);
|
|
// 获取活动详情
|
const fetchActivityDetail = async () => {
|
try {
|
setPageLoading(true);
|
const response = await activityAPI.getActivityById(id);
|
if (response.code === 0) {
|
const activity = response.data;
|
setCurrentActivity(activity);
|
// 分类映射（从name到value）
|
const categoryValueMap = {
|
'党的建设': '1',
|
'经济发展': '2',
|
'平安法治': '3',
|
'民生服务': '4',
|
'失信违法': '5'
|
};
|
|
form.setFieldsValue({
|
...activity,
|
category: categoryValueMap[activity.categoryDesc] || activity.category, // 映射分类值
|
maxParticipants: activity.maxParticipants || activity.maxVolunteers, // 兼容字段名
|
startTime: dayjs(activity.startTime),
|
endTime: dayjs(activity.endTime),
|
deadline: dayjs(activity.deadline),
|
});
|
} else {
|
message.error('获取活动详情失败');
|
navigate('/activities');
|
}
|
} catch (error) {
|
console.error('获取活动详情失败:', error);
|
message.error('获取活动详情失败');
|
navigate('/activities');
|
} finally {
|
setPageLoading(false);
|
}
|
};
|
|
useEffect(() => {
|
if (id) {
|
fetchActivityDetail();
|
}
|
}, [id]);
|
|
const onFinish = async (values) => {
|
try {
|
setLoading(true);
|
|
// 活动分类映射
|
const categoryMap = {
|
'1': '党的建设',
|
'2': '经济发展',
|
'3': '平安法治',
|
'4': '民生服务',
|
'5': '失信违法'
|
};
|
|
const activityData = {
|
...currentActivity,
|
...values,
|
categoryDesc: categoryMap[values.category] || values.category, // 添加categoryDesc字段
|
startTime: values.startTime.toISOString(),
|
endTime: values.endTime.toISOString(),
|
deadline: values.deadline.toISOString(),
|
};
|
|
const response = await activityAPI.saveActivity(activityData);
|
if (response.code === 0) {
|
message.success('活动更新成功！');
|
navigate('/activities');
|
} else {
|
message.error('更新失败，请检查表单信息');
|
}
|
} catch (error) {
|
console.error('更新活动失败:', error);
|
message.error('更新失败，请检查表单信息');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
const handleCancel = () => {
|
navigate('/activities');
|
};
|
|
if (pageLoading) {
|
return (
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
<Spin size="large" />
|
<div style={{ marginTop: '16px' }}>加载中...</div>
|
</div>
|
);
|
}
|
|
if (!currentActivity) {
|
return (
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
<div>活动不存在</div>
|
<Button type="primary" onClick={() => navigate('/activities')} style={{ marginTop: '16px' }}>
|
返回活动列表
|
</Button>
|
</div>
|
);
|
}
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">编辑活动</h1>
|
<p className="page-description">修改活动信息，确保信息准确完整</p>
|
</div>
|
|
<Card>
|
<Form
|
className="form-container"
|
form={form}
|
layout="vertical"
|
onFinish={onFinish}
|
initialValues={{
|
category: '4',
|
maxParticipants: 30,
|
points: 10,
|
}}
|
>
|
<div className="form-row">
|
<h3>基本信息</h3>
|
<Row gutter={[32, 24]}>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="title"
|
label="活动名称"
|
rules={[{ required: true, message: '请输入活动名称' }]}
|
>
|
<Input
|
size="large"
|
placeholder="请输入活动名称"
|
style={{ borderRadius: '6px' }}
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="category"
|
label="活动分类"
|
rules={[{ required: true, message: '请选择活动分类' }]}
|
>
|
<Select
|
size="large"
|
placeholder="请选择活动分类"
|
style={{ borderRadius: '6px' }}
|
>
|
<Option value="1">党的建设</Option>
|
<Option value="2">经济发展</Option>
|
<Option value="3">平安法治</Option>
|
<Option value="4">民生服务</Option>
|
<Option value="5">失信违法</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
</Row>
|
</div>
|
|
<div className="form-row">
|
<h3>时间安排</h3>
|
<Row gutter={[32, 24]}>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="startTime"
|
label="活动开始时间"
|
rules={[{ required: true, message: '请选择活动开始时间' }]}
|
>
|
<DatePicker
|
showTime
|
format="YYYY-MM-DD HH:mm"
|
size="large"
|
style={{ width: '100%', borderRadius: '6px' }}
|
placeholder="请选择活动开始时间"
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="endTime"
|
label="活动结束时间"
|
rules={[{ required: true, message: '请选择活动结束时间' }]}
|
>
|
<DatePicker
|
showTime
|
format="YYYY-MM-DD HH:mm"
|
size="large"
|
style={{ width: '100%', borderRadius: '6px' }}
|
placeholder="请选择活动结束时间"
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
<Row gutter={[32, 24]}>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="location"
|
label="活动地点"
|
rules={[{ required: true, message: '请输入活动地点' }]}
|
>
|
<Input
|
size="large"
|
placeholder="请输入活动地点"
|
style={{ borderRadius: '6px' }}
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="deadline"
|
label="报名截止时间"
|
rules={[{ required: true, message: '请选择报名截止时间' }]}
|
>
|
<DatePicker
|
showTime
|
format="YYYY-MM-DD HH:mm"
|
size="large"
|
style={{ width: '100%', borderRadius: '6px' }}
|
placeholder="请选择报名截止时间"
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
</div>
|
|
<div className="form-row">
|
<h3>活动设置</h3>
|
<Row gutter={[32, 24]}>
|
<Col xs={24} md={8}>
|
<Form.Item
|
name="maxParticipants"
|
label="最大志愿者人数"
|
rules={[{ required: true, message: '请输入最大志愿者人数' }]}
|
>
|
<InputNumber
|
min={1}
|
size="large"
|
style={{ width: '100%', borderRadius: '6px' }}
|
placeholder="请输入最大志愿者人数"
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={8}>
|
<Form.Item
|
name="points"
|
label="活动积分"
|
rules={[{ required: true, message: '请输入活动积分' }]}
|
>
|
<InputNumber
|
min={0}
|
size="large"
|
style={{ width: '100%', borderRadius: '6px' }}
|
placeholder="请输入活动积分"
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={8}>
|
<Form.Item name="placeholder" label="">
|
<div className="tip-box">
|
<div className="tip-content">
|
<div className="tip-title">提示</div>
|
<div className="tip-text"></div>
|
</div>
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
</div>
|
|
<div className="form-row">
|
<h3>活动内容</h3>
|
<Form.Item
|
name="content"
|
label="活动内容"
|
rules={[{ required: true, message: '请输入活动内容' }]}
|
>
|
<TextArea
|
rows={6}
|
placeholder="请详细描述活动内容、要求、注意事项等"
|
showCount
|
maxLength={500}
|
style={{ borderRadius: '6px' }}
|
/>
|
</Form.Item>
|
</div>
|
|
<div className="form-row">
|
<h3>活动封面</h3>
|
<Form.Item name="cover" label="活动封面">
|
<Upload name="cover" listType="picture-card" maxCount={5} beforeUpload={() => false} multiple>
|
<div className="upload-button">
|
<UploadOutlined className="upload-icon" />
|
<div className="upload-text">上传封面</div>
|
</div>
|
</Upload>
|
</Form.Item>
|
</div>
|
|
<div className="form-actions">
|
<Button
|
onClick={handleCancel}
|
size="large"
|
style={{
|
borderRadius: '6px',
|
padding: '8px 24px',
|
marginRight: '16px'
|
}}
|
>
|
取消
|
</Button>
|
<Button
|
type="primary"
|
htmlType="submit"
|
loading={loading}
|
size="large"
|
style={{
|
borderRadius: '6px',
|
padding: '8px 24px'
|
}}
|
>
|
更新活动
|
</Button>
|
</div>
|
</Form>
|
</Card>
|
</div>
|
);
|
};
|
|
export default ActivityEdit;
|
