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

import React, { useEffect, useState } from "react";
import {
  Tag,
  Button,
  Card,
  Form,
  Input,
  InputNumber,
  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 { district } from "~/enumerate/constant";
import { phoneRule } from "~/utils/validators";
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 projectId = router.query?.id;

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

  const fetchData = async () => {
    if (!projectId) return;

    const res = await evalContractGet({ projectId });
    if (res?.success !== false && res?.data) {
      form.setFieldsValue({
        ...res.data,
        scanFileUrl: res.data.scanFileUrl? JSON.parse(res.data.scanFileUrl) :undefined,
        contractStartDate: res.data.contractStartDate
          ? dayjs(res.data.contractStartDate)
          : undefined,
        contractEndDate: res.data.contractEndDate
          ? dayjs(res.data.contractEndDate)
          : undefined,
      });
    } else {
      const orgInfo = JSON.parse(sessionStorage.getItem("orgInfo"));

      form.setFieldsValue({
        orgName: orgInfo?.unitName,
        projectName: evalProjectDetailData?.projectName,
        evalTypeCode: evalProjectDetailData?.evalTypeCode,
        projectRegion: evalProjectDetailData?.districtCode,
      });
      const customerRes = await customerDetail({
        id: evalProjectDetailData.customerId,
      });
      if (customerRes?.success && customerRes?.data) {
        form.setFieldsValue({
          enterpriseName: customerRes.data.customerName,
          officeAddress: customerRes.data.businessAddress,
          creditCode: customerRes.data.creditCode,
          legalPerson: customerRes.data.legalRepresentative,
          contactName: customerRes.data.principalName,
          contactPhone: customerRes.data.principalPhone,
        });
      }
    }
  };

  useEffect(() => {
    if (evalProjectDetailData?.id) {
      fetchData();
    }
  }, [projectId, evalProjectDetailData?.id]);

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      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,
        scanFileUrl: rest.scanFileUrl? JSON.stringify(rest.scanFileUrl) :undefined,
      });
      if (res?.success !== false) {
        message.success("合同保存成功");
        props.getDetail();
      }
    } finally {
    }
  };

  return (
    <Spin spinning={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">
                    <InputNumber style={{width: '100%'}} placeholder="请输入合同金额" min={0} precision={2} max={9999999} />
                  </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: "请填写项目所在地" }]}
                  >
                    <Select
                      placeholder="请选择"
                      allowClear
                      showSearch
                      optionFilterProp="label"
                    >
                      {district.map((opt) => (
                        <Select.Option key={opt.code} value={opt.code}>
                          {opt.name}
                        </Select.Option>
                      ))}
                    </Select>
                  </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"
                    rules={[phoneRule("企业电话", false)]}
                  >
                    <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="contactPhone"
                    rules={[phoneRule("联系人电话")]}
                  >
                    <Input
                      placeholder="请输入联系人电话"
                      maxLength={20}
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="职工人数" name="staffCount">
                    <Input
                      placeholder="请输入职工人数"
                      maxLength={10}
                      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={contractSaveLoading}
            >
              完成合同录入并保存
            </Button>
          </Flex>
        </Card>
      </div>
    </Spin>
  );
};

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