import { RESPONSE_CODE } from '@/constants/enum'; import { postServiceOrderApplyInvoicing } from '@/services'; import { enumToSelect, getAliYunOSSFileNameFromUrl } from '@/utils'; import { ModalForm, ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadDragger, } from '@ant-design/pro-components'; import { Form, message } from 'antd'; import { useEffect, useState } from 'react'; import { PAYEE_OPTIONS } from '../constant'; export default ({ setCheckVisible, isEdit, subOrders, isMainOrder, totalPayment, onClose, }) => { const [isUrgent, setIsUrgent] = useState(''); let sumPrice = totalPayment; let ids = subOrders?.map((item) => { return item.id; }); let mainIdSet = new Set(); subOrders?.forEach((item: { mainOrderId: unknown }) => { mainIdSet.add(item.mainOrderId); }); let mainIds = Array.from(mainIdSet).join(','); let newListAnnex = []; //回显,子订单可以编辑备注跟附件 if (isEdit) { newListAnnex = subOrders.afterAnnexList?.map((path) => { let i = 0; return { uid: i++, name: getAliYunOSSFileNameFromUrl(path), status: 'uploaded', url: path, response: { data: [path] }, }; }); subOrders.filePaths = newListAnnex; } const [form] = Form.useForm<{ applyInvoicingNotes: string; filePaths: any; subIds: any[]; afterInvoicingUpdate: boolean; receivingCompany: string; isUrgent: boolean; deadline: string; }>(); useEffect(() => { //显示拼接的主订单id form.setFieldValue('applyInvoicingNotes', mainIds); }, []); return ( <ModalForm<{ applyInvoicingNotes: string; filePaths: any; subIds: any[]; afterInvoicingUpdate: boolean; }> width={500} open title={isEdit ? '修改信息' : '申请开票'} initialValues={subOrders} form={form} autoFocusFirstInput modalProps={{ okText: '确认', cancelText: '取消', destroyOnClose: true, onCancel: () => { setCheckVisible(false); }, }} submitter={{ render: (props, defaultDoms) => { return defaultDoms; }, }} submitTimeout={2000} onFinish={async (values) => { values.subIds = ids; //附件处理 values.filePaths = values.filePaths?.map((item) => { return { url: item.response.data[0] }; }); if (isEdit) { values.afterInvoicingUpdate = true; } else { values.afterInvoicingUpdate = false; } const res = await postServiceOrderApplyInvoicing({ data: values }); if (res.result === RESPONSE_CODE.SUCCESS) { message.success(res.message); onClose(); } }} onOpenChange={setCheckVisible} > {isMainOrder ? ( <div className="mb-[24px]"> <span>选中子订单金额之和:</span> <span className="text-red-500">{sumPrice}¥</span> </div> ) : ( '' )} <div className="mb-1"> 如果需要合并订单,请将需要合并的订单id写在备注中,id之间用英文逗号隔开。 </div> <ProFormTextArea width="lg" name="applyInvoicingNotes" key="applyInvoicingNotes" placeholder="请输入备注" onMetaChange={(val) => { console.log(val); }} proFieldProps={{ onchange: () => { message.info('change'); }, }} /> <ProFormText width="lg" name="purchaser" label="抬头名称" key="purchaser" placeholder="请输入抬头名称" rules={[{ required: true, message: '抬头名称必填' }]} /> <ProFormSelect placeholder="选择收款单位" name="receivingCompany" width="lg" key="receivingCompany" label={ <div> <span>开票收款单位</span> <span className="pl-2 text-xs text-gray-400"> 财务开票将依据这个字段,选择对应的公司开票(若对[收款单位]没有要求,请任意选择一个) </span> </div> } options={enumToSelect(PAYEE_OPTIONS)} rules={[{ required: true, message: '开票收款单位必填' }]} /> <ProFormSelect placeholder="选择是否加急" name="isUrgent" width="lg" key="isUrgent" label="是否加急" options={[ { label: '是', value: 'true' }, { label: '否', value: 'false' }, ]} rules={[{ required: true, message: '是否加急必填' }]} onChange={(val: any) => { setIsUrgent(val); }} /> {/* <ProFormDatePicker key="deadline" label="期望开票时间" name="deadline" rules={[{ required: isUrgent === 'true', message: '期望开票时间必填' }]} hidden={isUrgent !== 'true'} /> */} <ProFormTextArea key="invoicingUrgentCause" label="加急开票原因" name="invoicingUrgentCause" rules={[{ required: isUrgent === 'true', message: '加急开票原因' }]} hidden={isUrgent !== 'true'} /> <ProFormUploadDragger key="2" label={ <div> <span>开票明细确认表</span> <span className="pl-2 text-xs text-gray-400"> 如果开票信息有变更,如开票内容跟下单内容不一致、下单抬头和付款抬头不一致,请上传开票明细确认表。 </span> </div> } name="filePaths" action="/api/service/order/fileProcess" fieldProps={{ headers: { Authorization: localStorage.getItem('token') }, }} /> </ModalForm> ); };