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 } from "~/api/qualFiling";
import { NS_QUAL_FILING } from "~/enumerate/namespace";
import {
  FILING_FORM_MODE,
  isQualFilingEditable,
} from "~/enumerate/qualFilingOptions";
import { createLocalMaterials, 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 STEP_ITEMS = [
  { key: "basic", label: "1. 备案基本信息" },
  { key: "materials", label: "2. 备案材料上传" },
  { key: "commitment", label: "3. 法定代表人承诺书" },
  { key: "personnel", label: "4. 备案人员管理" },
  { key: "equipment", label: "5. 装备清单" },
];

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



function FilingFormPage(props) {
  const query = tools.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 listMode =
    mode === FILING_FORM_MODE.FILED
      ? "filed"
      : mode === FILING_FORM_MODE.CHANGE
        ? "change"
        : "application";
  const goBackList = useCallback(() => goFilingList(listMode), [listMode]);
  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){
      fetchQualFilingDetail(query.id).then((res) => {
        setDetail((prev) => ({ ...prev, ...res?.data || {} }));
        console.log(res?.data, 'res.data');
        basicForm.setFieldsValue(res?.data || {});
      });
    }
    else{
      setDetail((prev) => ({ ...prev, materials: FILING_MATERIAL_TEMPLATE }));
    }
   
  }, []);

 
  useEffect(() => {
    if (!personnelOptions.length) {
      return;
    }
    const data = detailRef.current;
    const commitment = data?.commitment || {};
    if (commitment.legalRepPersonnelId) {
      commitmentForm.setFieldValue(
        "legalRepPersonnelId",
        String(commitment.legalRepPersonnelId),
      );
      return;
    }
    if (commitment.legalRepName) {
      const matched = personnelOptions.find(
        (item) => item.staffName === commitment.legalRepName,
      );
      if (matched) {
        commitmentForm.setFieldsValue({
          legalRepPersonnelId: matched.value,
          legalRepName: matched.staffName || matched.label,
        });
      }
    }
  }, [commitmentForm, personnelOptions]);


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

  const handleSaveDraft = async () => {
    if (readOnly) {
      return;
    }
    setSubmitting(true);
    try {
      const currentDetail = collectCurrentDetail();
      await persistFilingToBackend(props, currentDetail, mode);
      clearLocalDraft(mode);
      message.success("已暂存");
      goBackList();
    } catch (err) {
      message.error(err?.message || "暂存失败");
    } finally {
      setSubmitting(false);
    }
  };
 
  const handleSubmitRequest = () => {
    if (readOnly) {
      return;
    }
    const currentDetail = collectCurrentDetail();
    const result = verifyFilingPrerequisites(currentDetail);
    setVerifyResult(result);
    setVerifyOpen(true);
  };

  const handleVerifyConfirm = async () => {
    if (!verifyResult?.passed) {
      return;
    }
    setSubmitting(true);
    try {
      const currentDetail = collectCurrentDetail();
      debugger
      const saved = await persistFilingToBackend(props, currentDetail, mode);


      if (mode === FILING_FORM_MODE.CHANGE) {
        const res = await props.qualFilingChangeSubmit({
          draftFilingId: saved.id,
        });
        if (res?.success === false) {
          message.error(res.message || "提交失败");
          return;
        }
      } else {
        const res = await props.qualFilingSubmit({ id: saved.id });
        if (res?.success === false) {
          message.error(res.message || "提交失败");
          return;
        }
      }
      setVerifyOpen(false);
      message.success("提交成功");
      goBackList();
    } catch (err) {
      message.error(err?.message || "提交失败");
    } finally {
      setSubmitting(false);
    }
  };

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

  const handleSignatureChange = (url, files) => {
    commitmentForm.setFieldsValue({
      signatureFiles: files,
      legalRepSignatureUrl: url,
    });
    setDetail((prev) => ({
      ...prev,
      commitment: {
        ...prev.commitment,
        legalRepSignatureUrl: url,
        signatureFiles: files,
      },
    }));
  };

  const handlePersonnelAdd = (sourcePersonnelIds, rows = []) => {
    const existing = new Set(
      (detailRef.current?.personnelList || []).map((item) =>
        String(item.sourcePersonnelId),
      ),
    );
    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
        ? mapStaffRowToFilingPersonnel(row)
        : mapStaffRowToFilingPersonnel({ id });
    });
    setDetail((prev) => ({
      ...prev,
      personnelList: [...(prev.personnelList || []), ...newRows],
    }));
    message.success(`已添加至列表，${saveActionHint}`);
  };

  const handlePersonnelRemove = (record) => {
    Modal.confirm({
      title: "提示",
      content: `确认删除人员「${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) => {
    updateDetail((prev) => ({
      ...prev,
      equipmentList: (prev.equipmentList || []).map((item) =>
        item.id === record.id ? { ...item, calibrationReportUrl: url } : item,
      ),
    }));
  };

  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
      extra={
        <Button
          onClick={() =>
            goFilingList(
              mode === FILING_FORM_MODE.FILED
                ? "filed"
                : mode === FILING_FORM_MODE.CHANGE
                  ? "change"
                  : "application",
            )
          }
        >
          返回列表
        </Button>
      }
    >
      <Spin spinning={loading || submitting}>
        <Tabs
          activeKey={activeStep}
          items={STEP_ITEMS}
          onChange={(key) => {
            if (key === "commitment") {
              commitmentForm.setFieldsValue({
                filingUnitName:
                  basicForm.getFieldValue("filingUnitName") ||
                  detail?.filingUnitName,
              });
             
            }
            setActiveStep(key);
          }}
        />
        <div style={{ marginTop: 16 }}>
          {activeStep === "basic" && (
            <BasicInfoStep
              form={basicForm}
              disabled={readOnly}
            />
          )}
          {activeStep === "materials" && (
            <MaterialStep
              materials={detail?.materials || []}
              disabled={readOnly}
              onUpload={handleMaterialUpload}
            />
          )}
          {activeStep === "commitment" && (
            <CommitmentStep
              form={commitmentForm}
              disabled={readOnly}
              personnelOptions={personnelOptions}
              onSignatureChange={handleSignatureChange}
            />
          )}
          {activeStep === "personnel" && (
            <PersonnelStep
              personnelList={detail?.personnelList || []}
              disabled={readOnly}
              onAdd={handlePersonnelAdd}
              onRemove={handlePersonnelRemove}
            />
          )}
          {activeStep === "equipment" && (
            <EquipmentStep
              equipmentList={detail?.equipmentList || []}
              disabled={readOnly}
              onAdd={handleEquipmentAdd}
              onRemove={handleEquipmentRemove}
              onUploadCalibration={handleEquipmentCalibration}
            />
          )}
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginTop: 24,
            paddingTop: 16,
            borderTop: "1px solid #f0f0f0",
          }}
        >
          <Space>
            <Button
              onClick={() =>
                goFilingList(
                  mode === FILING_FORM_MODE.FILED
                    ? "filed"
                    : mode === FILING_FORM_MODE.CHANGE
                      ? "change"
                      : "application",
                )
              }
            >
              取消
            </Button>
          </Space>
          <Space>
            {stepIndex > 0 && (
              <Button
                onClick={() => setActiveStep(STEP_ITEMS[stepIndex - 1].key)}
              >
                上一步
              </Button>
            )}
            {!isLastStep && (
              <Button
                type="primary"
                onClick={() => {
                  console.log(basicForm.getFieldsValue());
                  setActiveStep(STEP_ITEMS[stepIndex + 1].key)
                }}
              >
                下一步
              </Button>
            )}
            {!readOnly && isLastStep && (
              <>
                {mode !== FILING_FORM_MODE.FILED && (
                  <Button onClick={handleSaveDraft}>暂存</Button>
                )}
                <Button type="primary" onClick={handleSubmitRequest}>
                  {mode === FILING_FORM_MODE.FILED ? "提交填报" : "提交申请"}
                </Button>
              </>
            )}
          </Space>
        </div>
      </Spin>
      <PrerequisiteVerifyModal
        open={verifyOpen}
        result={verifyResult}
        loading={submitting}
        onCancel={() => setVerifyOpen(false)}
        onConfirm={handleVerifyConfirm}
      />
    </PageLayout>
  );
}

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