89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { Info } from 'lucide-react';
|
||
import { adminApi, type ApplicationReportField } from '@/api/adminApi';
|
||
import { Button, Input, Modal, Textarea } from '@/components/ui';
|
||
import { formatDateTime } from '@/utils/dateTime';
|
||
import { DynamicReportFields } from './SignatureMaterialFields';
|
||
import { hasMissingRequiredReportValue } from './signature.helpers';
|
||
import type { DrainageInfo, UploadedFileRef } from './signature.types';
|
||
|
||
export function DrainageFormModal({ applicationId, item, onClose, onSubmit }: { applicationId?: string | null; item?: DrainageInfo; onClose: () => void; onSubmit: (item: DrainageInfo) => void }) {
|
||
const [reportFields, setReportFields] = useState<ApplicationReportField[]>([]);
|
||
const [form, setForm] = useState<DrainageInfo>(() => item ?? {
|
||
id: `drain-${Date.now()}`,
|
||
siteName: '',
|
||
url: '',
|
||
field1File: null,
|
||
field2: '',
|
||
field3: '',
|
||
field4: '',
|
||
field5: '',
|
||
field6: '',
|
||
field7File: null,
|
||
field8: '',
|
||
field9: '',
|
||
field10: '',
|
||
mobile: 'filing',
|
||
unicom: 'filing',
|
||
telecom: 'filing',
|
||
submittedAt: formatDateTime(new Date()),
|
||
remark: '',
|
||
reportValues: {},
|
||
});
|
||
|
||
useEffect(() => {
|
||
const request = applicationId
|
||
? adminApi.listApplicationReportFields(applicationId, 'drainage')
|
||
: adminApi.listCommonApplicationReportFields('drainage');
|
||
request.then(setReportFields).catch(() => setReportFields([]));
|
||
}, [applicationId]);
|
||
|
||
function update<Key extends keyof DrainageInfo>(key: Key, value: DrainageInfo[Key]) {
|
||
setForm((current) => ({ ...current, [key]: value }));
|
||
}
|
||
|
||
function updateReportValue(code: string, value: string | UploadedFileRef | null) {
|
||
setForm((current) => ({ ...current, reportValues: { ...current.reportValues, [code]: value } }));
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
footer={(
|
||
<>
|
||
<Button onClick={onClose} variant="ghost">取消</Button>
|
||
<Button disabled={!form.url || hasMissingRequiredReportValue(reportFields, form.reportValues)} onClick={() => onSubmit(form)}>保存</Button>
|
||
</>
|
||
)}
|
||
onClose={onClose}
|
||
open
|
||
size="xl"
|
||
title={item ? '编辑引流信息' : '添加引流信息'}
|
||
>
|
||
<div className="signature-form drainage-edit-form">
|
||
<section>
|
||
<h3>基本信息</h3>
|
||
<Input
|
||
label="* 引流url或号码"
|
||
onChange={(event) => update('url', event.target.value)}
|
||
placeholder="请输入引流url或号码"
|
||
required
|
||
value={form.url}
|
||
/>
|
||
<div className="signature-alert drainage-form-note">
|
||
<Info size={18} />
|
||
<ol>
|
||
<li>本页面中所填的信息需与短信内容应用所包含的网站或服务保持一致；</li>
|
||
<li>图片仅支持 PNG、JPG 或 JPEG 格式的正版文件，且大小不超过 3M；</li>
|
||
<li>文件格式支持 PDF 格式或者图片，且大小不超过 10M。</li>
|
||
</ol>
|
||
</div>
|
||
<div className="signature-form-grid">
|
||
<Textarea className="signature-form-grid__wide" label="备注" onChange={(event) => update('remark', event.target.value)} rows={4} value={form.remark} />
|
||
</div>
|
||
<DynamicReportFields fields={reportFields} onChange={updateReportValue} title="引流信息报备资料（通用 + 通道）" values={form.reportValues} />
|
||
</section>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|