safety-eval-service-frontend/src/pages/Container/EnterpriseInfo/OrgInfo/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import {
  Button,
  Col,
  DatePicker,
  Form,
  Input,
  InputNumber,
  message,
  Row,
  Select,
  Space,
  Flex,
} from "antd";
import AttachmentUpload from "~/components/AttachmentUpload";
import BaiduMapPicker from "~/components/BaiduMapPicker";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";

import {
  CHONGQING_DISTRICTS,
  ENTERPRISE_SCALE_OPTIONS,
  ENTERPRISE_STATUS_OPTIONS,
  REGISTERED_ORG_FILING_RECORD_STATUS_OPTIONS,
  REGISTERED_ORG_FILING_TYPE_SEARCH_OPTIONS,
  QUALIFICATION_INDUSTRY_OPTIONS,
  ECONOMY_INDUSTRY_OPTIONS,
} from "~/enumerate/enterpriseOptions";
import { NS_ORG_INFO } from "~/enumerate/namespace";

import {
  coordinatePairRule,
  creditCodeRule,
  latitudeRule,
  longitudeRule,
  nonNegativeIntegerRule,
  normalizeUrl,
  phoneRule,
  positiveNumberRule,
  urlRule,
} from "~/utils/validators";

function OrgInfoPage(props) {
  const [form] = Form.useForm();
  const { orgInfoLoading } = props.orgInfo;
  const [editing, setEditing] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [detail, setDetail] = useState({});
  const [mapPickerVisible, setMapPickerVisible] = useState(false);
  /** 是否已存在机构数据（有 id 视为已入库，只能修改） */
  const [hasExistingData, setHasExistingData] = useState(false);

  const loadDetail = async () => {
    try {
      const res = await props.orgInfoGet();
      if (res?.data?.id) {
        setDetail(res.data);
        form.setFieldsValue({
          ...res.data,
          productionDate: res.data.productionDate
            ? dayjs(res.data.productionDate)
            : undefined,
          attachmentUrls: res.data.attachmentUrls
            ? JSON.parse(res.data.attachmentUrls)
            : null,
        });
        setHasExistingData(true);
        setEditing(false);
      } else {
        setDetail({});
        setHasExistingData(false);
        setEditing(true);
      }
    } catch (err) {
      console.warn("[OrgInfo] loadDetail failed:", err);
      setDetail({});
      setHasExistingData(false);
      setEditing(true);
    }
  };

  useEffect(() => {
    loadDetail();
  }, []);

  const handleCancelEdit = () => {
    setEditing(false);
  };

  const handleSave = async (submitType) => {
    try {
      const formValues = await form.validateFields();
      const values = {
        ...formValues,
        productionDate: formValues.productionDate
          ? dayjs(formValues.productionDate).format("YYYY-MM-DD")
          : undefined,
        attachmentUrls: formValues.attachmentUrls
          ? JSON.stringify(formValues.attachmentUrls)
          : null,
        infoDisclosureUrl: formValues.infoDisclosureUrl
          ? normalizeUrl(formValues.infoDisclosureUrl)
          : undefined,
        authStatusCode: submitType === "draft" ? 0 : 1,
        authStatusName: submitType === "draft" ? "草稿" : "已提交",
      };
      setSubmitting(true);

      let request;
      if (hasExistingData) {
        request = props.orgInfoModify;
        values.id = detail.id;
      } else {
        request =
          submitType === "draft" ? props.orgInfoDraft : props.orgInfoSave;
      }

      const res = await request(values);
      if (res?.success !== false) {
        message.success(
          hasExistingData
            ? "修改成功"
            : submitType === "draft"
              ? "暂存成功"
              : "提交成功",
        );
        setEditing(false);
        loadDetail();
      }
    } finally {
      setSubmitting(false);
    }
  };
  const handleMapConfirm = ({ lng, lat }) => {
    form.setFieldsValue({ longitude: lng, latitude: lat });
    setMapPickerVisible(false);
  };

  return (
    <PageLayout
      title={
        <div>
          <span>机构信息管理</span>
          <div className="pageLayout-extra">
            新成立或首次使用系统的安全评价机构，可通过系统提供的引导页面，详细填写机构的基本信息。
          </div>
        </div>
      }
      extra={
        hasExistingData &&
        !editing && (
          <Button
            type="primary"
            loading={orgInfoLoading}
            onClick={() => setEditing(true)}
          >
            修改
          </Button>
        )
      }
    >
      <Form form={form} labelCol={{ span: 10 }} disabled={!editing}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Form.Item
              name="unitName"
              label="生产经营单位名称"
              rules={[{ required: true, message: "请输入生产经营单位名称" }]}
            >
              <Input
                placeholder="请输入生产经营单位名称"
                allowClear
                maxLength={200}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="creditCode"
              label="统一社会信用代码"
              rules={[creditCodeRule(true)]}
            >
              <Input
                placeholder="请输入统一社会信用代码"
                allowClear
                maxLength={18}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="safetyIndustryCategoryCode"
              label="安全生产监管行业类别"
              rules={[
                { required: true, message: "请选择安全生产监管行业类别" },
              ]}
            >
              <Select
                options={QUALIFICATION_INDUSTRY_OPTIONS}
                // mode="multiple"
                placeholder="请选择安全生产监管行业类别"
                allowClear
                onChange={(value, option) => {
                  form.setFieldValue(
                    "safetyIndustryCategoryName",
                    option?.label || "",
                    //option?.map((item) => item.label).join(",") || "",
                  );
                }}
              />
            </Form.Item>
            <Form.Item name="safetyIndustryCategoryName" noStyle />
          </Col>
          <Col span={12}>
            <Form.Item
              name="districtCode"
              label="属地"
              rules={[{ required: true, message: "请选择属地" }]}
            >
              <Select
                options={CHONGQING_DISTRICTS}
                placeholder="请选择属地"
                allowClear
                onChange={(value, option) => {
                  form.setFieldValue("districtName", option?.label || "");
                }}
              />
            </Form.Item>
            <Form.Item name="districtName" noStyle />
          </Col>
          <Col span={12}>
            <Form.Item
              name="townStreet"
              label="所属镇、街道"
              rules={[{ required: true, message: "请输入所属镇街道" }]}
            >
              <Input
                placeholder="请输入所属镇街道"
                allowClear
                maxLength={100}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="villageCommunity" label="属村（社区）">
              <Input
                placeholder="请输入属村（社区）"
                allowClear
                maxLength={100}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="所在地坐标经度">
              <Flex>
                <Form.Item
                  name="longitude"
                  noStyle
                  dependencies={["latitude"]}
                  rules={[
                    {
                      validator(_, value) {
                        const latitude = form.getFieldValue("latitude");
                        if (
                          value !== undefined &&
                          value !== null &&
                          value !== "" &&
                          (latitude === undefined ||
                            latitude === null ||
                            latitude === "")
                        ) {
                          return Promise.reject(
                            new Error("填写经度后，纬度必填"),
                          );
                        }
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <InputNumber
                    style={{ width: "100%" }}
                    min={-180}
                    max={180}
                    precision={6}
                    placeholder="请输入经度"
                    allowClear
                  />
                </Form.Item>

                <Button onClick={() => setMapPickerVisible(true)}>选择</Button>
              </Flex>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="latitude"
              label="所在地坐标纬度"
              dependencies={["longitude"]}
              rules={[
                latitudeRule(false),
                coordinatePairRule("longitude", "纬度", "经度"),
              ]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={-90}
                max={90}
                precision={6}
                placeholder="请输入纬度"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="registerAddress"
              label="注册地址"
              rules={[{ required: true, message: "请输入注册地址" }]}
            >
              <Input.TextArea
                rows={3}
                placeholder="请输入注册地址"
                maxLength={200}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="businessAddress"
              label="经营地址"
              rules={[{ required: true, message: "请输入经营地址" }]}
            >
              <Input.TextArea
                rows={3}
                placeholder="请输入经营地址"
                maxLength={200}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="ownershipTypeName" label="归属类型">
              <Input placeholder="请输入归属类型" allowClear maxLength={50} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="economyIndustryCode"
              label="国民经济行业分类(GB/T4754-2017)"
            >
              <Select
                options={ECONOMY_INDUSTRY_OPTIONS}
                placeholder="请选择国民经济行业分类"
                allowClear
                onChange={(value, option) => {
                  form.setFieldValue(
                    "economyIndustryName",
                    option?.label || "",
                  );
                }}
              />
            </Form.Item>
            <Form.Item name="economyIndustryName" noStyle />
          </Col>
          <Col span={12}>
            <Form.Item
              name="legalRepresentative"
              label="法定代表人"
              rules={[{ required: true, message: "请输入法定代表人" }]}
            >
              <Input placeholder="请输入法定代表人" allowClear maxLength={50} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="legalRepresentativePhone"
              label="法定代表人联系电话"
              rules={[phoneRule("法定代表人联系电话", false)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入法定代表人联系电话"
                allowClear
                maxLength={11}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="principalName"
              label="主要负责人"
              rules={[{ required: true, message: "请输入主要负责人" }]}
            >
              <Input placeholder="请输入主要负责人" allowClear maxLength={50} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="principalPhone"
              label="主要负责人联系电话"
              rules={[phoneRule("主要负责人联系电话", true)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入主要负责人联系电话"
                allowClear
                maxLength={11}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="safetyDeptManager" label="安全管理部门负责人">
              <Input
                placeholder="请输入安全管理部门负责人"
                allowClear
                maxLength={50}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="safetyDeptManagerPhone"
              label="安全管理部门负责人联系电话"
              rules={[phoneRule("安全管理部门负责人联系电话", false)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入安全管理部门负责人联系电话"
                allowClear
                maxLength={11}
              />
            </Form.Item>
          </Col>

          <Col span={12}>
            <Form.Item
              name="safetyDeputyPhone"
              label="主管安全副总联系电话"
              rules={[phoneRule("主管安全副总联系电话", false)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入主管安全副总联系电话"
                allowClear
                maxLength={11}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="productionDate" label="投产日期">
              <DatePicker
                style={{ width: "100%" }}
                placeholder="请选择投产日期"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="businessStatusName" label="企业经营状态">
              <Input
                placeholder="请输入企业经营状态"
                allowClear
                maxLength={50}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="infoDisclosureUrl"
              label="信息公开网址"
              rules={[urlRule("信息公开网址", false)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入信息公开网址"
                allowClear
                maxLength={200}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="workplaceArea"
              label="工作场所建筑面积"
              rules={[positiveNumberRule("工作场所建筑面积", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={2}
                placeholder="请输入工作场所建筑面积"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="archiveRoomArea"
              label="档案室面积"
              rules={[positiveNumberRule("档案室面积", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={2}
                placeholder="请输入档案室面积"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="fulltimeEvaluatorCount"
              label="专职安全评价师数量"
              rules={[nonNegativeIntegerRule("专职安全评价师数量", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={0}
                placeholder="请输入专职安全评价师数量"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="registeredEngineerCount"
              label="注册安全工程师数量"
              rules={[nonNegativeIntegerRule("注册安全工程师数量", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={0}
                placeholder="请输入注册安全工程师数量"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="enterpriseStatusCode" label="企业状态">
              <Select
                options={ENTERPRISE_STATUS_OPTIONS}
                placeholder="请选择企业状态"
                allowClear
                onChange={(value, option) => {
                  console.log(value, option);
                  form.setFieldValue(
                    "enterpriseStatusName",
                    option?.label || "",
                  );
                }}
              />
            </Form.Item>
            <Form.Item name="enterpriseStatusName" noStyle />
          </Col>
          <Col span={12}>
            <Form.Item name="enterpriseScaleCode" label="企业规模">
              <Select
                options={ENTERPRISE_SCALE_OPTIONS}
                placeholder="请选择企业规模"
                allowClear
                onChange={(value, option) => {
                  form.setFieldValue(
                    "enterpriseScaleName",
                    option?.label || "",
                  );
                }}
              />
            </Form.Item>
            <Form.Item name="enterpriseScaleName" noStyle />
          </Col>
          <Col span={12}>
            <Form.Item name="filingTypeCode" label="备案类型">
              <Select
                options={REGISTERED_ORG_FILING_TYPE_SEARCH_OPTIONS}
                placeholder="请选择备案类型"
                allowClear
                onChange={(value, option) => {
                  form.setFieldValue("filingTypeName", option?.label);
                }}
              />
            </Form.Item>
            <Form.Item name="filingTypeName" noStyle />
          </Col>
          <Col span={12}>
            <Form.Item name="filingRecordStatusCode" label="备案状态">
              <Select
                options={REGISTERED_ORG_FILING_RECORD_STATUS_OPTIONS}
                placeholder="请选择备案状态"
                allowClear
                onChange={(value, option) => {
                  form.setFieldValue(
                    "filingRecordStatusName",
                    option?.label || "",
                  );
                }}
              />
            </Form.Item>
            <Form.Item name="filingRecordStatusName" noStyle />
          </Col>
          <Col span={12}>
            <AttachmentUpload
              name="attachmentUrls"
              label="上传附件"
              extra={"最多上传10个PDF、DOC、DOCX格式文件"}
              maxCount={10}
              accept=".pdf,.doc,.docx"
            />
          </Col>
        </Row>
      </Form>
      <BaiduMapPicker
        visible={mapPickerVisible}
        onCancel={() => setMapPickerVisible(false)}
        onConfirm={handleMapConfirm}
      />
      {editing && (
        <div style={{ marginTop: 24, textAlign: "center" }}>
          <Space>
            <Button onClick={handleCancelEdit}>取消</Button>
            {!hasExistingData && (
              <Button loading={submitting} onClick={() => handleSave("draft")}>
                暂存
              </Button>
            )}
            <Button
              type="primary"
              loading={submitting}
              onClick={() => handleSave("submit")}
            >
              提交
            </Button>
          </Space>
        </div>
      )}
    </PageLayout>
  );
}

export default Connect([NS_ORG_INFO], true)(OrgInfoPage);