dataTool/src/components/ProjectDetailForm.js

import React, {useEffect} from 'react';
import {Modal, Form, Input, Select, Switch, Button} from 'antd';
import dayjs from 'dayjs';

const {Option} = Select;
const {TextArea} = Input;

const ProjectDetailForm = ({visible, project, onCancel, onSave}) => {
    const [form] = Form.useForm();

    useEffect(() => {
        if (project && visible) {
            // 格式化日期字段为字符串
            const formattedProject = {...project};
            ['actual_start_time', 'planned_completion_time', 'completion_time', 'next_review_time'].forEach(field => {
                if (formattedProject[field]) {
                    formattedProject[field] = dayjs(formattedProject[field]).format('YYYY-MM-DD');
                }
            });
            form.setFieldsValue(formattedProject);
        }
    }, [form, project, visible]);

    const handleSave = () => {
        form.validateFields()
            .then(values => {
                onSave({...project, ...values});
            })
            .catch(info => {
                console.log('验证失败:', info);
            });
    };

    return (
        <Modal
            title="项目详情"
            open={visible}
            width={800}
            onCancel={onCancel}
            bodyStyle={{
                maxHeight: '60vh',
                overflowY: 'scroll',
                msOverflowStyle: 'none', // IE, Edge
                scrollbarWidth: 'none'   // Firefox
            }}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    取消
                </Button>,
                <Button key="save" type="primary" onClick={handleSave}>
                    保存
                </Button>
            ]}
        >
            <Form
                form={form}
                layout="vertical"
            >
                <Form.Item label="单位" name="unit">
                    <Input/>
                </Form.Item>
                <Form.Item label="项目编号" name="project_number">
                    <Input/>
                </Form.Item>
                <Form.Item label="安全编码" name="safety_code">
                    <Input/>
                </Form.Item>
                <Form.Item label="大项工程名称" name="major_project_name">
                    <Input/>
                </Form.Item>
                <Form.Item label="单项工程名称" name="sub_project_name">
                    <Input/>
                </Form.Item>
                <Form.Item label="在施工程作业范围" name="construction_scope">
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item label="工程规模" name="project_scale">
                    <Input/>
                </Form.Item>
                <Form.Item label="安全总监" name="safety_director">
                    <Input/>
                </Form.Item>
                <Form.Item label="建设单位" name="construction_unit">
                    <Input/>
                </Form.Item>
                <Form.Item label="监理单位" name="supervision_unit">
                    <Input/>
                </Form.Item>
                <Form.Item label="施工单位" name="construction_company">
                    <Input/>
                </Form.Item>
                <Form.Item label="工程位置" name="project_location">
                    <Input/>
                </Form.Item>
                <Form.Item label="实际开工时间" name="actual_start_time">
                    <Input placeholder="YYYY-MM-DD"/>
                </Form.Item>
                <Form.Item label="计划竣工时间" name="planned_completion_time">
                    <Input placeholder="YYYY-MM-DD"/>
                </Form.Item>
                <Form.Item label="完成时间" name="completion_time">
                    <Input placeholder="YYYY-MM-DD"/>
                </Form.Item>
                <Form.Item label="下次梳理时间" name="next_review_time">
                    <Input placeholder="YYYY-MM-DD"/>
                </Form.Item>
                <Form.Item label="参建人数" name="participants_count">
                    <Input type="number"/>
                </Form.Item>
                <Form.Item label="新班组进场数量" name="new_team_count">
                    <Input type="number"/>
                </Form.Item>
                <Form.Item label="新人进场数量" name="new_person_count">
                    <Input type="number"/>
                </Form.Item>
                <Form.Item label="带班人姓名、电话" name="leader_info">
                    <Input/>
                </Form.Item>
                <Form.Item label="下周作业计划" name="next_week_plan">
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item label="下周8+2工况内容" name="next_week_condition">
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item label="工期是否紧张" name="is_schedule_tight" valuePropName="checked">
                    <Switch/>
                </Form.Item>
                <Form.Item label="是否存在账外事" name="has_off_book_matters" valuePropName="checked">
                    <Switch/>
                </Form.Item>
                <Form.Item label="当前风险等级" name="current_risk_level">
                    <Select>
                        <Option value="高风险">高风险</Option>
                        <Option value="中风险">中风险</Option>
                        <Option value="低风险">低风险</Option>
                    </Select>
                </Form.Item>
                <Form.Item label="当前风险判断理由" name="risk_judgment_reason">
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item label="隐患提示/工作要求" name="risk_tips">
                    <TextArea rows={2}/>
                </Form.Item>

                <Form.Item>
                    <div>
                        <p style={{fontSize: '20px', fontWeight: 'bold'}}>人的变化</p>
                        <Form.Item label="新进班组数量" name="new_team">
                            <Input type="number"/>
                        </Form.Item>
                        <Form.Item label="新进班组骨干数量" name="new_members">
                            <Input type="number"/>
                        </Form.Item>
                        <Form.Item label="新进高空人员数量" name="new_high_altitude">
                            <Input type="number"/>
                        </Form.Item>
                        <Form.Item label="新进一般人员数量" name="new_hired_general">
                            <Input type="number"/>
                        </Form.Item>
                    </div>
                </Form.Item>

                <Form.Item>
                    <div>
                        <p style={{fontSize: '20px', fontWeight: 'bold'}}>机的变化</p>
                        <Form.Item label="新的作业内容" name="new_homework_content">
                            <Select allowClear placeholder="请选择新的作业内容">
                                <Option value="同一班组作业类型调整">同一班组作业类型调整</Option>
                                <Option value="在运变电站新增作业">在运变电站新增作业</Option>
                                <Option value="工程转序">工程转序</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="改变作业方法" name="change_homework_method">
                            <Select allowClear placeholder="请选择改变作业方法">
                                <Option value="同一部位基础开挖由机械变为人工">同一部位基础开挖由机械变为人工</Option>
                                <Option
                                    value="同一部位铁塔组立由起重机变为抱杆">同一部位铁塔组立由起重机变为抱杆</Option>
                                <Option value="同一跨越物改变跨越方式">同一跨越物改变跨越方式</Option>
                                <Option value="同一放线段改变放线方式">同一放线段改变放线方式</Option>
                            </Select>
                        </Form.Item>
                    </div>
                </Form.Item>

                <Form.Item>
                    <div>
                        <p style={{fontSize: '20px', fontWeight: 'bold'}}>环境的变化</p>
                        <Form.Item label="地理环境的变化" name="changes_geographical">
                            <Select allowClear placeholder="请选择地理环境的变化">
                                <Option value="新增带电线路（引起近电作业）">新增带电线路（引起近电作业）</Option>
                                <Option value="新增带电线路（未引起近电作业）">新增带电线路（未引起近电作业）</Option>
                                <Option
                                    value="新增跨越物（新投入使用铁路、高速、电力线等线性工程）">新增跨越物（新投入使用铁路、高速、电力线等线性工程）</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="气象环境的变化" name="changes_meteorological">
                            <Select allowClear placeholder="请选择气象环境的变化">
                                <Option value="降雪预警">降雪预警</Option>
                                <Option value="降雨预警">降雨预警</Option>
                                <Option value="大风预警">大风预警</Option>
                                <Option value="高温预警">高温预警</Option>
                                <Option value="低温预警">低温预警</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="社会环境的变化" name="changes_social">
                            <Select allowClear placeholder="请选择社会环境的变化">
                                <Option value="外部协调引起阻工（属地协调不畅）">外部协调引起阻工（属地协调不畅）</Option>
                                <Option value="物资供应滞后">物资供应滞后</Option>
                            </Select>
                        </Form.Item>
                    </div>
                </Form.Item>

                <Form.Item>
                    <div>
                        <p style={{fontSize: '20px', fontWeight: 'bold'}}>管理的变化</p>
                        <Form.Item label="管理要求的变化" name="changes_management">
                            <Select allowClear placeholder="请选择管理要求的变化">
                                <Option value="投产计划提前（工期紧张）">投产计划提前（工期紧张）</Option>
                                <Option value="特殊时段作业">特殊时段作业</Option>
                                <Option value="停电计划调整">停电计划调整</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="作业计划的变化" name="changes_homework_plan">
                            <Select allowClear placeholder="请选择作业计划的变化">
                                <Option value="原作业计划未按期执行，顺延至今">原作业计划未按期执行，顺延至今</Option>
                                <Option value="下周作业计划无法执行，临时变更">下周作业计划无法执行，临时变更</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="管理人员的变化" name="changes_management_personnel">
                            <Select allowClear placeholder="请选择管理人员变化">
                                <Option value="施工项目部关键人员变化">施工项目部关键人员变化</Option>
                                <Option value="监理项目部关键人员变化">监理项目部关键人员变化</Option>
                                <Option value="业主项目部关键人员变化">业主项目部关键人员变化</Option>
                                <Option value="施工单位主要负责人、分管领导调整">施工单位主要负责人、分管领导调整</Option>
                            </Select>
                        </Form.Item>
                    </div>
                </Form.Item>
                <Form.Item label="备注" name="remarks">
                    <TextArea rows={2}/>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default ProjectDetailForm;