efc-workload-base-web/src/page/Dashboard/DataManager/EditDataManageDrawer.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Drawer, Flex, Form, Input, Select, Typography } from "antd";
import CourseTypeTag from "../../../component/Workload/CourseTypeTag";

const EditDataManageDrawer = props => {
    const { open, setOpen, commonAxios, fetchWorkload, messageApi, initialValues } = props;

    // 表单布局配置，与添加组件保持一致
    const formLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 20 },
    };

    const [form] = Form.useForm();
    const { Title } = Typography;

    // 课程性质选项（根据实际业务调整）
    const courseNatureOptions = [
        { label: '必修课', value: '必修课' },
        { label: '选修课', value: '选修课' },
        { label: '通识课', value: '通识课' },
        { label: '实践课', value: '实践课' }
    ];

    // 当抽屉打开且有初始值时，填充表单数据
    React.useEffect(() => {
        if (open && initialValues) {
            form.setFieldsValue({
                semesterInfo: initialValues.semesterInfo,
                courseName: initialValues.courseName,
                teacherName: initialValues.teacherName,
                courseNature: initialValues.courseNature,
                teachingMajor: initialValues.teachingMajor,
                actualClassSize: initialValues.actualClassSize,
                teachingGrade: initialValues.teachingGrade,
                totalClassHours: initialValues.totalClassHours
            });
        } else {
            form.resetFields();
        }
    }, [open, initialValues, form]);

    // 提交编辑表单
    const onSubmit = (values) => {
        // 拼接ID用于后端识别更新对象
        const updateData = { ...values, id: initialValues.id };
        commonAxios.put('/api/v1/workload/update', updateData).then(response => {
            const result = response.data.data || false;
            if (result) {
                messageApi.success('编辑工作量信息成功');
                setOpen(false);
                fetchWorkload(); // 刷新列表
            } else {
                messageApi.error('编辑工作量信息失败');
            }
        }).catch(error => {
            messageApi.error('网络错误，编辑失败');
        });
    };

    return (
        <Drawer
            open={open}
            onClose={() => setOpen(false)}
            title={'编辑工作量'}
            destroyOnClose
        >
            <div>
                <Title level={5}>编辑工作量信息</Title>
                <Form
                    form={form}
                    {...formLayout}
                    onFinish={onSubmit}
                >
                    <Form.Item
                        label="学期"
                        name="semesterInfo"
                        rules={[{ required: true, message: '请输入学期' }]}
                    >
                        <Input placeholder="请输入学期"/>
                    </Form.Item>
                    <Form.Item
                        label="授课名称"
                        name="courseName"
                        rules={[{ required: true, message: '请输入授课名称' }]}
                    >
                        <Input placeholder="请输入授课名称"/>
                    </Form.Item>
                    <Form.Item
                        label="姓名"
                        name="teacherName"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input placeholder="请输入姓名"/>
                    </Form.Item>
                    <Form.Item
                        label="课程性质"
                        name="courseNature"
                        rules={[{ required: true, message: '请选择课程性质' }]}
                    >
                        <Select
                            placeholder="请选择课程性质"
                            options={courseNatureOptions}
                            // 保持与表格中一致的标签显示
                            formatLabel={(option) => <CourseTypeTag courseNature={option.value} />}
                        />
                    </Form.Item>
                    <Form.Item
                        label="授课专业"
                        name="teachingMajor"
                        rules={[{ required: true, message: '请输入授课专业' }]}
                    >
                        <Input placeholder="请输入授课专业"/>
                    </Form.Item>
                    <Form.Item
                        label="学生数"
                        name="actualClassSize"
                        rules={[
                            { required: true, message: '请输入学生数' },
                            { type: 'number', message: '请输入数字' }
                        ]}
                    >
                        <Input type="number" placeholder="请输入学生数"/>
                    </Form.Item>
                    <Form.Item
                        label="授课对象"
                        name="teachingGrade"
                        rules={[{ required: true, message: '请输入授课对象' }]}
                    >
                        <Input placeholder="请输入授课对象"/>
                    </Form.Item>
                    <Form.Item
                        label="工作量"
                        name="totalClassHours"
                        rules={[
                            { required: true, message: '请输入工作量' },
                            { type: 'number', message: '请输入数字' }
                        ]}
                    >
                        <Input type="number" placeholder="请输入工作量"/>
                    </Form.Item>
                    <Flex justify={"center"} align={"center"}>
                        <Button onClick={() => setOpen(false)} style={{ marginRight: 8 }}>取消</Button>
                        <Button htmlType={'submit'} type={'primary'}>保存</Button>
                    </Flex>
                </Form>
            </div>
        </Drawer>
    );
};

// 属性校验，与添加组件保持一致
EditDataManageDrawer.propTypes = {
    open: PropTypes.bool.isRequired,
    setOpen: PropTypes.func.isRequired,
    commonAxios: PropTypes.func.isRequired,
    fetchWorkload: PropTypes.func.isRequired,
    messageApi: PropTypes.object.isRequired,
    initialValues: PropTypes.object // 编辑的初始数据
};

export default EditDataManageDrawer;