safety-eval-service-frontend/src/pages/Container/SafetyEvalBusiness/ProjectFlow/ContractContent.js

import React, { useEffect, useState } from "react";
import {
  Tag,
  Button,
  Card,
  Form,
  Input,
  Select,
  DatePicker,
  Row,
  Col,
  Flex,
  message,
  Spin,
} from "antd";
import dayjs from "dayjs";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import { tools } from "@cqsjjb/jjb-common-lib";
import AttachmentUpload from "~/components/AttachmentUpload";

const { router } = tools;
const { TextArea } = Input;

const PROJECT_TYPE_OPTIONS = [
  { label: "新建项目", value: "NEW" },
  { label: "续评项目", value: "RENEW" },
  { label: "变更项目", value: "CHANGE" },
];

const EVAL_TYPE_OPTIONS = [
  { label: "安全预评价", value: "PRE" },
  { label: "安全验收评价", value: "ACCEPT" },
  { label: "安全现状评价", value: "STATUS" },
];

const YES_NO_OPTIONS = [
  { label: "是", value: 1 },
  { label: "否", value: 2 },
];

const ContractContent = (props) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  const projectId = router.query?.id;

  const { safetyEvalBusiness, evalContractGet, evalContractSave } = props;
  const { contractLoading } = safetyEvalBusiness || {};

  const fetchData = async () => {
    if (!projectId) return;
    setLoading(true);
    try {
      const res = await evalContractGet({ projectId });
      if (res?.success !== false && res?.data) {
        form.setFieldsValue({
          ...res.data,
          contractStartDate: res.data.contractStartDate ? dayjs(res.data.contractStartDate) : undefined,
          contractEndDate: res.data.contractEndDate ? dayjs(res.data.contractEndDate) : undefined,
        });
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [projectId]);

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      const { contractStartDate, contractEndDate, ...rest } = values;
      const res = await evalContractSave({
        ...rest,
        projectId,
        contractStartDate: contractStartDate ? contractStartDate.format("YYYY-MM-DD") : undefined,
        contractEndDate: contractEndDate ? contractEndDate.format("YYYY-MM-DD") : undefined,
      });
      if (res?.success !== false) {
        message.success("合同保存成功");
      }
    } finally {
      setSaving(false);
    }
  };

  return (
    <Spin spinning={loading || contractLoading}>
      <div>
        <div className="pf-permission">
          <Tag color="blue" className="pf-tag">
            机构管理员 / 项目负责人
          </Tag>
          <span className="pf-desc">
            按照已批准的风险分析结论录入项目合同和被评价企业信息，上传PDF格式的正式合同扫描件。
          </span>
        </div>
        <Card title="项目合同信息" styles={{ header: { textAlign: "center" } }}>
          <Form form={form} layout="vertical">
            <Card type="inner" size="small" title="项目合同信息" extra={<Tag color="blue">合同基本信息</Tag>} className="pf-section">
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item label="机构名称" name="orgName" rules={[{ required: true, message: "请填写机构名称" }]}>
                    <Input placeholder="请输入机构名称" maxLength={100} allowClear />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="合同编号" name="contractNo" rules={[{ required: true, message: "请填写合同编号" }]}>
                    <Input placeholder="请输入合同编号" maxLength={50} allowClear />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="项目名称" name="projectName" rules={[{ required: true, message: "请填写项目名称" }]}>
                    <Input placeholder="请输入项目名称" maxLength={100} allowClear />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="项目简介" name="projectIntro" rules={[{ required: true, message: "请填写项目简介" }]}>
                    <TextArea rows={3} maxLength={500} showCount placeholder="请输入项目简介" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="合同金额(万元)" name="amount">
                    <Input placeholder="请输入合同金额" maxLength={20} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="项目类型" name="projectTypeCode" rules={[{ required: true, message: "请选择项目类型" }]}>
                    <Select placeholder="请选择项目类型" allowClear>
                      {PROJECT_TYPE_OPTIONS.map((opt) => (
                        <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="项目风险分析" name="riskSummary" rules={[{ required: true, message: "请填写项目风险分析" }]}>
                    <TextArea rows={3} maxLength={500} showCount placeholder="自动带入风险分析结论，可补充说明" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="项目所在地" name="projectRegion" rules={[{ required: true, message: "请填写项目所在地" }]}>
                    <TextArea rows={2} maxLength={200} showCount placeholder="请输入项目所在地" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="项目详细地址" name="projectAddress" rules={[{ required: true, message: "请填写项目详细地址" }]}>
                    <Input placeholder="请输入项目详细地址" maxLength={200} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="合同开始时间" name="contractStartDate" rules={[{ required: true, message: "请选择合同开始时间" }]}>
                    <DatePicker className="pf-w-full" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="合同结束时间" name="contractEndDate" rules={[{ required: true, message: "请选择合同结束时间" }]}>
                    <DatePicker className="pf-w-full" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="评价类型" name="evalTypeCode" rules={[{ required: true, message: "请选择评价类型" }]}>
                    <Select placeholder="请选择评价类型" allowClear>
                      {EVAL_TYPE_OPTIONS.map((opt) => (
                        <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="是否生产剧毒化学品" name="toxicFlag" rules={[{ required: true, message: "请选择" }]}>
                    <Select placeholder="请选择" allowClear>
                      {YES_NO_OPTIONS.map((opt) => (
                        <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="是否生产易制毒化学品" name="precursorFlag" rules={[{ required: true, message: "请选择" }]}>
                    <Select placeholder="请选择" allowClear>
                      {YES_NO_OPTIONS.map((opt) => (
                        <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="是否跨省建设项目" name="crossProvinceFlag" rules={[{ required: true, message: "请选择" }]}>
                    <Select placeholder="请选择" allowClear>
                      {YES_NO_OPTIONS.map((opt) => (
                        <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="项目业务范围" name="businessScope" rules={[{ required: true, message: "请填写项目业务范围" }]}>
                    <Input placeholder="请输入项目业务范围" maxLength={200} allowClear />
                  </Form.Item>
                </Col>
              </Row>
            </Card>

            <Card type="inner" size="small" title="被评价企业信息" extra={<Tag color="blue">合同服务对象</Tag>} className="pf-section">
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item label="企业名称" name="enterpriseName" rules={[{ required: true, message: "请填写企业名称" }]}>
                    <Input placeholder="请输入企业名称" maxLength={100} allowClear />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="国民经济行业类别" name="industryCategory">
                    <TextArea rows={2} maxLength={200} showCount placeholder="请输入国民经济行业类别" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="办公地址" name="officeAddress">
                    <Input placeholder="请输入办公地址" maxLength={200} allowClear />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="社会统一信用代码" name="creditCode">
                    <Input placeholder="请输入社会统一信用代码" maxLength={18} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="邮政编码" name="postCode">
                    <Input placeholder="请输入邮政编码" maxLength={10} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="企业电话" name="enterprisePhone">
                    <Input placeholder="请输入企业电话" maxLength={20} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="传真" name="fax">
                    <Input placeholder="请输入传真" maxLength={20} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="法人代表" name="legalPerson">
                    <Input placeholder="请输入法人代表" maxLength={20} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="联系人" name="contactName" rules={[{ required: true, message: "请填写联系人" }]}>
                    <Input placeholder="请输入联系人" maxLength={20} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="职工人数" name="staffCount">
                    <Input placeholder="请输入职工人数" maxLength={10} allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="联系人电话" name="contactPhone" rules={[{ required: true, message: "请填写联系人电话" }]}>
                    <Input placeholder="请输入联系人电话" maxLength={20} allowClear />
                  </Form.Item>
                </Col>
              </Row>
            </Card>

            <AttachmentUpload
              name="scanFileUrl"
              label="项目合同扫描件"
              accept=".pdf"
              maxCount={10}
              extra="请上传PDF文件，大小不应超过500MB，不超过10个文件。"
            />
          </Form>

          <Flex justify="flex-end" gap={8}>
            <Button onClick={() => props.history.goBack()}>取消</Button>
            <Button type="primary" onClick={handleSave} loading={saving}>完成合同录入并保存</Button>
          </Flex>
        </Card>
      </div>
    </Spin>
  );
};

export default Connect(
  [NS_SAFETY_EVAL_BUSINESS],
  true,
)(ContractContent);