135 lines
3.9 KiB
JavaScript
135 lines
3.9 KiB
JavaScript
import { DatePicker, Form, Input, Row, Col, Select } from "antd";
|
|
import { COMMITMENT_PARAGRAPHS } from "../../filingCommitment";
|
|
import FilingUpload, { resolveFilingUploadUrl } from "./FilingUpload";
|
|
import AttachmentUpload from "~/components/AttachmentUpload";
|
|
|
|
const BLANK_STYLE = {
|
|
display: "inline-block",
|
|
minWidth: 120,
|
|
padding: "0 4px 2px",
|
|
borderBottom: "1px solid #333",
|
|
textAlign: "center",
|
|
lineHeight: 1.6,
|
|
};
|
|
|
|
function renderBlank(value) {
|
|
const text = value?.trim() || "";
|
|
return <span style={BLANK_STYLE}>{text || "\u00A0".repeat(8)}</span>;
|
|
}
|
|
|
|
function CommitmentBody({ legalRepName, filingUnitName }) {
|
|
const values = { legalRepName, filingUnitName };
|
|
return (
|
|
<div style={{ fontSize: 14, lineHeight: 2, color: "rgba(0,0,0,0.85)" }}>
|
|
{COMMITMENT_PARAGRAPHS.map((paragraph) => (
|
|
<p
|
|
key={paragraph.key}
|
|
style={{
|
|
margin: paragraph.key === "intro" ? "0 0 12px" : "0 0 10px",
|
|
textIndent: paragraph.key === "intro" ? 0 : "2em",
|
|
}}
|
|
>
|
|
{paragraph.parts.map((part, index) => {
|
|
if (part.type === "blank") {
|
|
return (
|
|
<span key={`${paragraph.key}-${index}`}>
|
|
{renderBlank(values[part.field])}
|
|
</span>
|
|
);
|
|
}
|
|
return <span key={`${paragraph.key}-${index}`}>{part.value}</span>;
|
|
})}
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CommitmentStep({
|
|
form,
|
|
disabled,
|
|
personnelOptions = [],
|
|
onSignatureChange,
|
|
}) {
|
|
|
|
const legalRepName = Form.useWatch("legalRepName", form);
|
|
const filingUnitName = Form.useWatch("filingUnitName", form);
|
|
|
|
const handleLegalRepChange = (personnelId) => {
|
|
if (!personnelId) {
|
|
form.setFieldsValue({ legalRepPersonnelId: undefined, legalRepName: "" });
|
|
return;
|
|
}
|
|
const selected = personnelOptions.find(
|
|
(item) => item.value === personnelId,
|
|
);
|
|
form.setFieldsValue({
|
|
legalRepPersonnelId: personnelId,
|
|
legalRepName: selected?.staffName || selected?.label || "",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{ maxWidth: 920 }}>
|
|
<Form form={form} layout="vertical" disabled={disabled}>
|
|
<Form.Item name="legalRepName" hidden>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="filingUnitName" hidden>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="commitmentContent" hidden>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
<div
|
|
style={{
|
|
border: "1px solid #e8e8e8",
|
|
borderRadius: 4,
|
|
padding: "20px 24px",
|
|
background: "#fafafa",
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
<CommitmentBody
|
|
legalRepName={legalRepName}
|
|
filingUnitName={filingUnitName}
|
|
/>
|
|
</div>
|
|
|
|
<Row gutter={24}>
|
|
<Col xs={24} sm={12} md={8}>
|
|
<Form.Item name="signDate" label="签署日期">
|
|
<DatePicker style={{ width: "100%" }} placeholder="请选择日期" />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col xs={24} sm={12} md={8}>
|
|
<Form.Item
|
|
name="legalRepPersonnelId"
|
|
label="法定代表人"
|
|
rules={[{ required: !disabled, message: "请选择法定代表人" }]}
|
|
>
|
|
<Select
|
|
allowClear
|
|
placeholder="请选择"
|
|
options={personnelOptions}
|
|
showSearch
|
|
optionFilterProp="label"
|
|
onChange={handleLegalRepChange}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<AttachmentUpload
|
|
extra="请上传一张电子签名图片"
|
|
name="legalRepSignatureUrl"
|
|
label="电子签名"
|
|
disabled={disabled}
|
|
maxCount={1}
|
|
accept=".png,.jpg,.jpeg,.bmp,.webp"
|
|
/>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|