safety-eval-service-frontend/src/pages/Container/QualApplication/FilingForm/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { tools } from "@cqsjjb/jjb-common-lib";
import { Button, Form, message, Modal, Space, Spin, Tabs } from "antd";
import { useCallback, useEffect, useRef, useState } from "react";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { fetchQualFilingDetail, fetchQualChangeDetail, fromFilingPersonnelAddCmd } from "~/api/qualFiling";
import { NS_QUAL_FILING } from "~/enumerate/namespace";
import { FILING_FORM_MODE } from "~/enumerate/qualFilingOptions";
import { FILING_MATERIAL_TEMPLATE } from "../filingMaterialTemplate";
import { clearLocalDraft, saveLocalDraft } from "../filingLocalDraft";
import {
  fetchOrgPersonnelOptions,
  mapEquipRowToFilingEquipment,
  mapStaffRowToFilingPersonnel,
  mergeDetailFromForms,
  persistFilingToBackend,
} from "../filingPersist";
import { verifyFilingPrerequisites } from "../filingVerify";
import { resolveUploadFileId } from "~/utils/mockUpload";
import { goFilingList } from "../filingPaths";
import BasicInfoStep from "./components/BasicInfoStep";
import CommitmentStep from "./components/CommitmentStep";
import EquipmentStep from "./components/EquipmentStep";
import MaterialStep from "./components/MaterialStep";
import PersonnelStep from "./components/PersonnelStep";
import PrerequisiteVerifyModal from "./components/PrerequisiteVerifyModal";

const router = tools.router;

const MODE_TITLE = {
  [FILING_FORM_MODE.APPLICATION]: "资质备案申请",
  [FILING_FORM_MODE.FILED]: "资质备案填报",
  [FILING_FORM_MODE.CHANGE]: "修改备案信息",
};

function FilingFormPage(props) {
  const query = router.query;
  const mode = query.mode;
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [activeStep, setActiveStep] = useState("basic");
  const [detail, setDetail] = useState(null);
  const [personnelOptions, setPersonnelOptions] = useState([]);
  const [verifyOpen, setVerifyOpen] = useState(false);
  const [verifyResult, setVerifyResult] = useState(null);
  const [basicForm] = Form.useForm();
  const [commitmentForm] = Form.useForm();

  const detailRef = useRef(null);
  const readOnly = query.readOnly;

  const saveActionHint =
    mode === FILING_FORM_MODE.FILED
      ? "请点击提交后保存"
      : "请点击暂存或提交后保存";

  const loadPersonnelOptions = useCallback(async () => {
    if (personnelOptions.length) {
      return personnelOptions;
    }
    const options = await fetchOrgPersonnelOptions().catch(() => []);

    setPersonnelOptions(options);
    return options;
  }, [personnelOptions.length]);

  useEffect(() => {
    detailRef.current = detail;
  }, [detail]);

  useEffect(() => {
    loadPersonnelOptions();
    if (query.id) {
      let aciotn = () => {};

      if (mode === FILING_FORM_MODE.CHANGE) {
        aciotn = fetchQualChangeDetail;
      } else {
        aciotn = fetchQualFilingDetail;
      }
      aciotn(query.id).then((res) => {
        setDetail((prev) => ({ ...prev, ...(res?.data || {}) }));
        console.log(res?.data, "res.data");
        basicForm.setFieldsValue(res?.data || {});
        commitmentForm.setFieldsValue(res?.data?.commitment || {});
      });
    } else {
      setDetail((prev) => ({ ...prev, materials: FILING_MATERIAL_TEMPLATE }));
    }
  }, []);

  const collectCurrentDetail = useCallback(() => {
    const current = detailRef.current || detail;
    return mergeDetailFromForms(current, {
      basicValues: basicForm.getFieldsValue(true),
      commitmentValues: commitmentForm.getFieldsValue(true),
    });
  }, [basicForm, commitmentForm, detail]);

  const syncCommitmentFromBasic = useCallback(() => {
    const filingUnitName =
      basicForm.getFieldValue("filingUnitName") || detail?.filingUnitName || "";
    const legalRepName = commitmentForm.getFieldValue("legalRepName") || "";
    commitmentForm.setFieldsValue({ filingUnitName, legalRepName });
  }, [basicForm, commitmentForm, detail?.filingUnitName]);

  const goToStep = useCallback(
    (key) => {
      if (key === "commitment") {
        syncCommitmentFromBasic();
      }
      setActiveStep(key);
    },
    [syncCommitmentFromBasic],
  );

  const handleSaveDraft = async () => {
    if (readOnly) {
      return;
    }
    setSubmitting(true);
    try {
      const currentDetail = collectCurrentDetail();
      await persistFilingToBackend(props, currentDetail, mode);
      message.success("暂存成功");
      props.history.goBack();
    } catch (err) {
      message.error(err?.message || "暂存失败");
    } finally {
      setSubmitting(false);
    }
  };

  useEffect(() => {
    if (activeStep === "commitment") {
      syncCommitmentFromBasic();
    }
  }, [activeStep, syncCommitmentFromBasic]);

  const handleSubmitRequest = async () => {
    if (readOnly) {
      return;
    }
    try {
      await basicForm.validateFields();
    } catch (err) {
      setActiveStep("basic");
      return;
    }
    try {
      await commitmentForm.validateFields();
    } catch (err) {
      setActiveStep("commitment");
      return;
    }
    const currentDetail = collectCurrentDetail();
    if (!currentDetail?.personnelList?.length) {
      message.warning("请至少添加一位备案人员");
      setActiveStep("personnel");
      return;
    }
    if (!currentDetail?.equipmentList?.length) {
      message.warning("请至少添加一条装备清单");
      setActiveStep("equipment");
      return;
    }
    const result = verifyFilingPrerequisites(currentDetail);
    setVerifyResult(result);
    setVerifyOpen(true);
  };

  const handleVerifyConfirm = async (config) => {
    if (!verifyResult?.passed) {
      return;
    }
    setSubmitting(true);

    const currentDetail = collectCurrentDetail();
    const word = mode === "change" ? "Change" : "";
    const body = {
      [`qualFiling${word}AddCmd`]: {
        ...currentDetail,
        filingStatusCode: config.isSaveDraft ? 5 : 2,
        applyTypeCode: mode === "application" ? 1 : 3,
      },
    };

    const params = body[`qualFiling${word}AddCmd`];
    if (params.materials) {
      body[`qualFilingMaterial${word}AddCmds`] = params.materials;
      delete params.materials;
    }
    if (params.personnelList) {
      body[`qualFilingPersonnel${word}AddCmds`] = params.personnelList.map(fromFilingPersonnelAddCmd);
      delete params.personnelList;
    }
    if (params.equipmentList) {
      body[`qualFilingEquipment${word}AddCmds`] = params.equipmentList;
      delete params.equipmentList;
    }
    if (params.commitment) {
      body[`qualFilingCommitment${word}AddCmd`] = params.commitment;
      delete params.commitment;
    }

    let action = props.submitQualFiling;
    if (mode === FILING_FORM_MODE.CHANGE) {
      action = props.submitQualFilingChange;
    }
    const result = await action(body);

    if (result?.success) {
      setVerifyOpen(false);
      message.success(config.isSaveDraft ? "暂存成功" : "提交成功");
      props.history.goBack();
    }
    setSubmitting(false);
  };

  const handleMaterialUpload = (record, { url, ext }) => {
    const attachmentUrl = url;
    setDetail((prev) => ({
      ...prev,
      materials: (prev.materials || []).map((item) => {
        return item.id === record.id
          ? {
              ...item,
              attachmentUrl,
              materialFormat: ext,
              uploadStatusCode: 2,
              uploadStatusName: "已上传",
            }
          : item;
      }),
    }));
    message.success(`材料已选择，${saveActionHint}`);
  };

  const handlePersonnelAdd = (sourcePersonnelIds, rows = []) => {
    const existing = new Set(
      (detailRef.current?.personnelList || []).map((item) =>
        String(item.sourcePersonnelId || item.id),
      ),
    );
    const idsToAdd = sourcePersonnelIds.filter(
      (id) => !existing.has(String(id)),
    );
    if (!idsToAdd.length) {
      return;
    }
    const rowMap = new Map((rows || []).map((row) => [String(row.id), row]));
    const newRows = idsToAdd.map((id) => {
      const row = rowMap.get(String(id));
      return row;
    });
    setDetail((prev) => ({
      ...prev,
      personnelList: [...(prev.personnelList || []), ...newRows],
    }));
    message.success(`已添加至列表，${saveActionHint}`);
  };

  const handlePersonnelRemove = (record) => {
    Modal.confirm({
      title: "提示",
      content: `确认删除人员「${record.userName || record.personName}」？`,
      onOk: () => {
        setDetail((prev) => ({
          ...prev,
          personnelList: (prev.personnelList || []).filter(
            (item) => item.id !== record.id,
          ),
        }));
      },
    });
  };

  const handleEquipmentAdd = (sourceEquipmentIds, rows = []) => {
    const existing = new Set(
      (detailRef.current?.equipmentList || []).map((item) =>
        String(item.sourceEquipmentId),
      ),
    );
    const idsToAdd = sourceEquipmentIds.filter(
      (id) => !existing.has(String(id)),
    );
    if (!idsToAdd.length) {
      return;
    }
    const rowMap = new Map((rows || []).map((row) => [String(row.id), row]));
    const newRows = idsToAdd.map((id) => {
      const row = rowMap.get(String(id));
      return row
        ? mapEquipRowToFilingEquipment(row)
        : mapEquipRowToFilingEquipment({ id });
    });
    setDetail((prev) => ({
      ...prev,
      equipmentList: [...(prev.equipmentList || []), ...newRows],
    }));
    message.success(`已添加至列表，${saveActionHint}`);
  };

  const handleEquipmentRemove = (record) => {
    Modal.confirm({
      title: "提示",
      content: `确认移除装备「${record.deviceName}」？`,
      onOk: () => {
        setDetail((prev) => ({
          ...prev,
          equipmentList: (prev.equipmentList || []).filter(
            (item) => item.id !== record.id,
          ),
        }));
      },
    });
  };

  const handleEquipmentCalibration = (record, { url }) => {
    setDetail((prev) => ({
      ...prev,
      equipmentList: (prev.equipmentList || []).map((item) =>
        item.id === record.id ? { ...item, calibrationReportUrl: url } : item,
      ),
    }));
  };

  const STEP_ITEMS = [
    {
      key: "basic",
      label: "1. 备案基本信息",
      children: <BasicInfoStep form={basicForm} disabled={readOnly} />,
      forceRender: true,
    },
    {
      key: "materials",
      label: "2. 备案材料上传",
      children: (
        <MaterialStep
          materials={detail?.materials || []}
          disabled={readOnly}
          onUpload={handleMaterialUpload}
        />
      ),
    },
    {
      key: "commitment",
      label: "3. 法定代表人承诺书",
      children: (
        <CommitmentStep
          form={commitmentForm}
          disabled={readOnly}
          personnelOptions={personnelOptions}
        />
      ),
      forceRender: true,
    },
    {
      key: "personnel",
      label: "4. 备案人员管理",
      children: (
        <PersonnelStep
          personnelList={detail?.personnelList || []}
          disabled={readOnly}
          onAdd={handlePersonnelAdd}
          onRemove={handlePersonnelRemove}
        />
      ),
    },
    {
      key: "equipment",
      label: "5. 装备清单",
      children: (
        <EquipmentStep
          equipmentList={detail?.equipmentList || []}
          disabled={readOnly}
          onAdd={handleEquipmentAdd}
          onRemove={handleEquipmentRemove}
          onUploadCalibration={handleEquipmentCalibration}
        />
      ),
    },
  ];

  const stepIndex = STEP_ITEMS.findIndex((item) => item.key === activeStep);
  const isLastStep = stepIndex === STEP_ITEMS.length - 1;

  return (
    <PageLayout
      title={MODE_TITLE[mode] || "资质备案表单"}
      history={props.history}
      previous
    >
      <Spin spinning={loading || submitting}>
        <Tabs
          activeKey={activeStep}
          items={STEP_ITEMS}
          onChange={goToStep}
        />

        <Space>
          {stepIndex > 0 && (
            <Button
              onClick={() => {
                goToStep(STEP_ITEMS[stepIndex - 1].key);
              }}
            >
              上一步
            </Button>
          )}
          {!isLastStep && (
            <Button
              type="primary"
              onClick={() => {
                goToStep(STEP_ITEMS[stepIndex + 1].key);
              }}
            >
              下一步
            </Button>
          )}
          {!readOnly && isLastStep && (
            <>
              {mode !== FILING_FORM_MODE.FILED && (
                <Button loading={submitting} onClick={handleSaveDraft}>
                  暂存
                </Button>
              )}
              <Button type="primary" onClick={handleSubmitRequest}>
                {mode === FILING_FORM_MODE.FILED ? "提交填报" : "提交申请"}
              </Button>
            </>
          )}
        </Space>
      </Spin>
      <PrerequisiteVerifyModal
        open={verifyOpen}
        result={verifyResult}
        loading={submitting}
        onCancel={() => setVerifyOpen(false)}
        onConfirm={handleVerifyConfirm}
      />
    </PageLayout>
  );
}

export default Connect([NS_QUAL_FILING], true)(FilingFormPage);