imetting/frontend/src/pages/EditMeeting.jsx

132 lines
4.8 KiB
JavaScript

import React, { useState, useEffect } from 'react';
import {
Card, Form, Input, Button, DatePicker, Select, Space,
Typography, App, Divider, Row, Col
} from 'antd';
import {
ArrowLeftOutlined, TeamOutlined, SaveOutlined,
VideoCameraAddOutlined, TagOutlined
} from '@ant-design/icons';
import { useNavigate, useParams } from 'react-router-dom';
import dayjs from 'dayjs';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
const { Title } = Typography;
const { TextArea } = Input;
const EditMeeting = ({ user }) => {
const { meeting_id } = useParams();
const navigate = useNavigate();
const { message } = App.useApp();
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [fetching, setFetching] = useState(true);
const [users, setUsers] = useState([]);
const [prompts, setPrompts] = useState([]);
useEffect(() => {
fetchData();
}, [meeting_id]);
const fetchData = async () => {
try {
const [uRes, pRes, mRes] = await Promise.all([
apiClient.get(buildApiUrl(API_ENDPOINTS.USERS.LIST)),
apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.ACTIVE('MEETING_TASK'))),
apiClient.get(buildApiUrl(API_ENDPOINTS.MEETINGS.DETAIL(meeting_id)))
]);
setUsers(uRes.data.users || []);
setPrompts(pRes.data.prompts || []);
const meeting = mRes.data;
form.setFieldsValue({
...meeting,
meeting_time: dayjs(meeting.meeting_time),
attendees: meeting.attendees.map(a => typeof a === 'string' ? a : a.caption),
tags: meeting.tags?.map(t => t.name) || []
});
} catch (e) {
message.error('加载会议数据失败');
} finally {
setFetching(false);
}
};
const onFinish = async (values) => {
setLoading(true);
try {
const payload = {
...values,
meeting_time: values.meeting_time.format('YYYY-MM-DD HH:mm:ss'),
attendees: values.attendees.join(','),
tags: values.tags?.join(',') || ''
};
await apiClient.put(buildApiUrl(API_ENDPOINTS.MEETINGS.UPDATE(meeting_id)), payload);
message.success('会议更新成功');
navigate(`/meetings/${meeting_id}`);
} catch (error) {
message.error('更新失败');
} finally {
setLoading(false);
}
};
return (
<div className="edit-meeting-modern" style={{ maxWidth: 800, margin: '0 auto', padding: '24px 0' }}>
<Card bordered={false} loading={fetching} style={{ borderRadius: 16, boxShadow: '0 4px 20px rgba(0,0,0,0.05)' }}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 32 }}>
<Button icon={<ArrowLeftOutlined />} shape="circle" onClick={() => navigate(-1)} style={{ marginRight: 16 }} />
<Title level={3} style={{ margin: 0 }}>编辑会议信息</Title>
</div>
<Form form={form} layout="vertical" onFinish={onFinish}>
<Form.Item label="会议主题" name="title" rules={[{ required: true, message: '请输入会议主题' }]}>
<Input size="large" prefix={<VideoCameraAddOutlined />} placeholder="请输入会议主题..." />
</Form.Item>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="开始时间" name="meeting_time" rules={[{ required: true }]}>
<DatePicker showTime size="large" style={{ width: '100%' }} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="使用总结模板" name="prompt_id">
<Select size="large" placeholder="选择总结模版">
{prompts.map(p => <Select.Option key={p.id} value={p.id}>{p.name}</Select.Option>)}
</Select>
</Form.Item>
</Col>
</Row>
<Form.Item label="参会人员" name="attendees" rules={[{ required: true, message: '请选择参会人员' }]}>
<Select mode="multiple" size="large" placeholder="选择参会人">
{users.map(u => <Select.Option key={u.user_id} value={u.caption}>{u.caption}</Select.Option>)}
</Select>
</Form.Item>
<Form.Item label="标签" name="tags">
<Select mode="tags" size="large" placeholder="输入标签按回车" />
</Form.Item>
<Form.Item label="会议备注" name="description">
<TextArea rows={4} placeholder="添加会议背景或说明..." />
</Form.Item>
<Divider />
<Form.Item>
<Button type="primary" htmlType="submit" size="large" icon={<SaveOutlined />} loading={loading} block style={{ height: 50, fontSize: 16, borderRadius: 8 }}>
保存修改
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
};
export default EditMeeting;