421 lines
12 KiB
JavaScript
421 lines
12 KiB
JavaScript
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 } 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 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((item) => ({
|
|
...item,
|
|
personName: item.userName,
|
|
}));
|
|
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),
|
|
),
|
|
);
|
|
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}」？`,
|
|
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={async (key) => {
|
|
if (key === "commitment") {
|
|
commitmentForm.setFieldsValue({
|
|
filingUnitName:
|
|
basicForm.getFieldValue("filingUnitName") ||
|
|
detail?.filingUnitName,
|
|
});
|
|
}
|
|
setActiveStep(key);
|
|
}}
|
|
/>
|
|
|
|
<Space>
|
|
{stepIndex > 0 && (
|
|
<Button
|
|
onClick={async () => {
|
|
setActiveStep(STEP_ITEMS[stepIndex - 1].key);
|
|
}}
|
|
>
|
|
上一步
|
|
</Button>
|
|
)}
|
|
{!isLastStep && (
|
|
<Button
|
|
type="primary"
|
|
onClick={async () => {
|
|
setActiveStep(STEP_ITEMS[stepIndex + 1].key);
|
|
}}
|
|
>
|
|
下一步
|
|
</Button>
|
|
)}
|
|
{!readOnly && isLastStep && (
|
|
<>
|
|
{mode !== FILING_FORM_MODE.FILED && (
|
|
<Button
|
|
onClick={() => handleVerifyConfirm({ isSaveDraft: true })}
|
|
>
|
|
暂存
|
|
</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);
|