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

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import {
  Button,
  Col,
  DatePicker,
  Form,
  Image,
  Input,
  InputNumber,
  message,
  Row,
  Select,
  Space,
  Upload,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";

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,
  FILING_RECORD_STATUS_OPTIONS,
  FILING_TYPE_OPTIONS,
} from "~/enumerate/enterpriseOptions";
import { NS_ORG_INFO } from "~/enumerate/namespace";
import { mockUploadFileList } from "~/utils/mockUpload";
import {
  creditCodeRule,
  latitudeRule,
  longitudeRule,
  nonNegativeIntegerRule,
  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 [previewImage, setPreviewImage] = useState("");
  /** 是否已存在机构数据（有 id 视为已入库，只能修改） */
  const [hasExistingData, setHasExistingData] = useState(false);

  const selectDistrictOptions = CHONGQING_DISTRICTS.map((v) => ({
    label: v,
    value: v,
  }));

  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,
        });
        setHasExistingData(true);
        setEditing(false);
      } else {
        setDetail({});
        setHasExistingData(false);
        setEditing(true);
        form.setFieldsValue({
          filingType: "确认备案",
          filingRecordStatus: "未备案",
          attachments: mockUploadFileList("资质申请书.pdf"),
        });
      }
    } catch (err) {
      console.warn("[OrgInfo] loadDetail failed:", err);
      setDetail({});
      setHasExistingData(false);
      setEditing(true);
    }
  };

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

  const handleCancelEdit = () => {
    if (hasExistingData) {
      form.setFieldsValue({
        ...detail,
        productionDate: detail.productionDate
          ? dayjs(detail.productionDate)
          : undefined,
      });
      setEditing(false);
    } else {
      form.resetFields();
    }
  };

  const handleSave = async (submitType) => {
    try {
      const formValues = await form.validateFields();
      const values = {
        ...formValues,
        productionDate: formValues.productionDate
          ? dayjs(formValues.productionDate).format("YYYY-MM-DD")
          : undefined,
      };
      setSubmitting(true);

      let request;
      if (hasExistingData) {
        // 已有数据：仅走修改接口
        request = props.orgInfoSave;
        values.id = detail.id;
      } else {
        // 无数据：暂存、提交均走保存接口（草稿/已提交由 authStatusCode 区分）
        request =
          submitType === "draft" ? props.orgInfoDraft : props.orgInfoSave;
      }

      const res = await request(values);
      if (res?.success !== false) {
        message.success(
          hasExistingData
            ? "修改成功"
            : submitType === "draft"
              ? "暂存成功"
              : "提交成功",
        );
        setEditing(false);
        loadDetail();
      }
    } catch (err) {
      if (err?.errorFields) {
        return;
      }
      message.error(
        hasExistingData ? "修改失败，请稍后重试" : "保存失败，请稍后重试",
      );
    } finally {
      setSubmitting(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="orgName"
              label="生产经营单位名称"
              rules={[{ required: true, message: "请输入生产经营单位名称" }]}
            >
              <Input placeholder="请输入生产经营单位名称" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="creditCode"
              label="统一社会信用代码"
              rules={[creditCodeRule(true)]}
            >
              <Input placeholder="请输入统一社会信用代码" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="safetyIndustryCategory"
              label="安全生产监管行业类别"
              rules={[
                { required: true, message: "请输入安全生产监管行业类别" },
              ]}
            >
              <Input placeholder="请输入安全生产监管行业类别" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="regionCountyName"
              label="属地"
              rules={[{ required: true, message: "请选择属地" }]}
            >
              <Select
                options={selectDistrictOptions}
                placeholder="请选择属地"
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="regionStreetName"
              label="所属镇、街道"
              rules={[{ required: true, message: "请输入所属镇街道" }]}
            >
              <Input placeholder="请输入所属镇街道" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="regionCommunityName" label="属村（社区）">
              <Input placeholder="请输入属村（社区）" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="longitude"
              label="所在地坐标经度"
              rules={[longitudeRule(false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={-180}
                max={180}
                precision={6}
                placeholder="请输入经度"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="latitude"
              label="所在地坐标纬度"
              rules={[latitudeRule(false)]}
            >
              <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="请输入注册地址" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="businessAddress"
              label="经营地址"
              rules={[{ required: true, message: "请输入经营地址" }]}
            >
              <Input.TextArea rows={3} placeholder="请输入经营地址" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="ownershipType" label="归属类型">
              <Input placeholder="请输入归属类型" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="gbIndustryCode"
              label="国民经济行业分类(GB/T4754-2017)"
            >
              <Input placeholder="请输入国民经济行业分类" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="legalRepresentative"
              label="法定代表人"
              rules={[{ required: true, message: "请输入法定代表人" }]}
            >
              <Input placeholder="请输入法定代表人" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="legalRepPhone"
              label="法定代表人联系电话"
              rules={[phoneRule("法定代表人联系电话", false)]}
            >
              <Input placeholder="请输入法定代表人联系电话" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="principal"
              label="主要负责人"
              rules={[{ required: true, message: "请输入主要负责人" }]}
            >
              <Input placeholder="请输入主要负责人" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="principalPhone"
              label="主要负责人联系电话"
              rules={[phoneRule("主要负责人联系电话", true)]}
            >
              <Input placeholder="请输入主要负责人联系电话" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="safetyDeptHead" label="安全管理部门负责人">
              <Input placeholder="请输入安全管理部门负责人" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="safetyDeptPhone"
              label="安全管理部门负责人联系电话"
              rules={[phoneRule("安全管理部门负责人联系电话", false)]}
            >
              <Input
                placeholder="请输入安全管理部门负责人联系电话"
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="safetyVp" label="主管安全副总">
              <Input placeholder="请输入主管安全副总" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="safetyVpPhone"
              label="主管安全副总联系电话"
              rules={[phoneRule("主管安全副总联系电话", false)]}
            >
              <Input placeholder="请输入主管安全副总联系电话" allowClear />
            </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="businessStatus" label="企业经营状态">
              <Input placeholder="请输入企业经营状态" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="disclosureUrl"
              label="信息公开网址"
              rules={[urlRule("信息公开网址", false)]}
            >
              <Input placeholder="请输入信息公开网址" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="workplaceArea"
              label="工作场所建筑面积"
              rules={[positiveNumberRule("工作场所建筑面积", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                precision={2}
                placeholder="请输入工作场所建筑面积"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="archiveRoomArea"
              label="档案室面积"
              rules={[positiveNumberRule("档案室面积", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                precision={2}
                placeholder="请输入档案室面积"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="fullTimeEvaluatorCount"
              label="专职安全评价师数量"
              rules={[nonNegativeIntegerRule("专职安全评价师数量", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                precision={0}
                placeholder="请输入专职安全评价师数量"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="registeredSafetyEngineerCount"
              label="注册安全工程师数量"
              rules={[nonNegativeIntegerRule("注册安全工程师数量", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                precision={0}
                placeholder="请输入注册安全工程师数量"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="enterpriseStatus" label="企业状态">
              <Select
                options={ENTERPRISE_STATUS_OPTIONS}
                placeholder="请选择企业状态"
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="enterpriseScale" label="企业规模">
              <Select
                options={ENTERPRISE_SCALE_OPTIONS}
                placeholder="请选择企业规模"
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="filingType" label="备案类型">
              <Select
                options={FILING_TYPE_OPTIONS}
                placeholder="请选择备案类型"
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="filingRecordStatus" label="备案状态">
              <Select
                options={FILING_RECORD_STATUS_OPTIONS}
                placeholder="请选择备案状态"
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="attachments"
              label="上传附件"
              valuePropName="fileList"
              getValueFromEvent={({ fileList }) => {
                return (
                  fileList?.map((file) => {
                    return {
                      url: file.response?.data.url || file.url,
                      uid: file.uid,
                      name: file.name,
                    };
                  }) || []
                );
              }}
            >
              <Upload
                maxCount={5}
                onPreview={(file) => {
                  const isImage =
                    /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/i.test(
                      file.name || file.url || "",
                    );
                  if (isImage) {
                    setPreviewImage(file.url || file.thumbUrl);
                  } else {
                    window.open(file.url || file.thumbUrl);
                  }
                }}
                listType="picture-card"
                action={`${window.process.env.app.API_HOST}/safety-eval/file/upload`}
              >
                <button style={{ border: 0, background: "none" }} type="button">
                  <PlusOutlined />
                  <div style={{ marginTop: 8 }}>上传附件</div>
                </button>
              </Upload>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      {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>
      )}
      <Image
        style={{ display: "none" }}
        preview={{
          visible: !!previewImage,
          src: previewImage,
          onVisibleChange: (visible) => {
            if (!visible) setPreviewImage("");
          },
        }}
      />
    </PageLayout>
  );
}

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