import { RESPONSE_CODE } from '@/constants/enum'; import { postServiceOrderEditOrder, postServiceOrderInvoicing, } from '@/services'; import { FloatAdd, enumToSelect, enumValueToLabel } from '@/utils'; import { getReceivingCompanyOptions } from '@/utils/order'; import { DrawerForm, ProFormDatePicker, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea, } from '@ant-design/pro-components'; import { Button, Form, message } from 'antd'; import { useEffect, useState } from 'react'; import { INVOCING_STATUS_OPTIONS_OLD, PAYEE_OPTIONS } from '../../constant'; export default ({ mainOrder, subOrders, isEdit, isMainOrder, cancel, onClose, }) => { const [invoicingStatus, setInvoicingStatus] = useState(''); const subIds = subOrders.map((item) => item.id); useEffect(() => { // 在组件挂载或数据变化时,更新组件状态 if (mainOrder) { setInvoicingStatus(subOrders[0]?.invoicingStatus); } }, [mainOrder]); useEffect(() => { console.log(JSON.stringify(subOrders)); }, []); const [form] = Form.useForm<{ name: string; company: string }>(); /** * 自动选择收款公司 * @param receivingCompany */ function chooseReceivingCompany(receivingCompany: any) { form.setFieldValue('payee', receivingCompany); } /** * 计算选中子订单的主订单金额之和 */ function computeTotalPayment() { let distinctMap = new Map(); subOrders?.forEach((item: any) => { distinctMap.set(item.mainOrderId, item.totalPayment); }); let sum = 0; for (let p of distinctMap.values()) { sum = FloatAdd(p, sum); } form.setFieldValue('money', sum); } return ( <DrawerForm<{ name: string; company: string; }> open title="财务信息" resize={{ onResize() { console.log('resize!'); }, maxWidth: window.innerWidth * 0.8, minWidth: 400, }} initialValues={mainOrder} form={form} autoFocusFirstInput drawerProps={{ destroyOnClose: true, }} submitTimeout={2000} onFinish={async (values) => { let res; let body = values; body.subIds = subIds; if (isEdit) { res = await postServiceOrderEditOrder({ data: body }); } else { res = await postServiceOrderInvoicing({ data: body }); } if (res.result === RESPONSE_CODE.SUCCESS) { message.success(res.message); onClose(); } }} onOpenChange={(val) => { return !val && cancel(); }} > {isMainOrder ? ( <ProFormSelect placeholder="选择是否需要开票" name="invoicingStatus" width="lg" label="是否需要开票" options={enumToSelect(INVOCING_STATUS_OPTIONS_OLD)} onChange={setInvoicingStatus} initialValue={subOrders[0]?.invoicingStatus} // disabled={mainInfoDisbled} rules={[{ required: true, message: '是否需要开票必填' }]} /> ) : ( '' )} <ProFormTextArea width="lg" name="invoiceIdentificationNumber" label="开票信息" placeholder="请输入开票信息" disabled /> <ProFormText width="lg" name="bank" label="开户银行" placeholder="请输入开户银行" disabled /> <ProFormText width="lg" name="bankAccountNumber" label="开户银行账号" placeholder="请输入开户银行账号" disabled /> {invoicingStatus !== 'UN_INVOICE' ? [ <ProFormDatePicker key="invoicingTime" width="lg" name="invoicingTime" label="开票时间" disabled={isEdit} rules={[ { required: !isEdit ? true : false, message: '这是必填项' }, ]} initialValue={subOrders[0]?.invoicingTime} />, <ProFormText key="purchaser" width="lg" name="purchaser" label="抬头名称" disabled={isEdit} rules={[ { required: !isEdit ? true : false, message: '这是必填项' }, ]} initialValue={subOrders[0]?.purchaser} />, <ProFormDatePicker key="financialReceiptIssuanceTime" width="lg" name="financialReceiptIssuanceTime" label="开收据时间" initialValue={subOrders[0]?.financialReceiptIssuanceTime} />, <ProFormDatePicker key="collectMoneyTime" width="lg" name="collectMoneyTime" label="收款时间" initialValue={subOrders[0]?.collectMoneyTime} />, <ProFormText width="lg" key="invoiceNumber" name="invoiceNumber" label="发票号码" initialValue={subOrders[0]?.invoiceNumber} rules={[{ required: true, message: '发票号码必填' }]} />, <div key="salesChooseReceivingCompany" hidden={subOrders[0].receivingCompany === null} > <span className={'pl-2 text-xs text-gray-400'}> 销售申请开票时选择了: {enumValueToLabel( subOrders[0].receivingCompany, getReceivingCompanyOptions(PAYEE_OPTIONS), )} </span> <span hidden={subOrders[0].receivingCompany === 'ANY'} className={ 'pl-2 text-xs text-[#1677ff] cursor-pointer hover:text-[#64abf7]' } onClick={() => { chooseReceivingCompany(subOrders[0].receivingCompany); }} > 选择 </span> </div>, <ProFormSelect key="payee" placeholder="选择收款单位" name="payee" width="lg" showSearch label="收款单位" options={enumToSelect(PAYEE_OPTIONS)} initialValue={subOrders[0]?.payee} rules={[{ required: true, message: '收款单位必填' }]} />, <div id="total-payment" key="money"> <ProFormDigit key="money" name="money" width="lg" label="金额" rules={[{ required: true, message: '金额必填' }]} tooltip="点击计算,合计所有子订单对应主订单总额" fieldProps={{ addonAfter: ( <Button className="rounded-l-none" type="primary" onClick={computeTotalPayment} > 计算 </Button> ), }} /> </div>, ] : ''} <ProFormSelect placeholder="是否完全开票" name="afterInvoicingStatus" width="lg" label="是否完全开票" options={[ { label: '完全开票', value: 'COMPLETE_INVOICING' }, { label: '部分开票', value: 'PARTIAL_INVOICING' }, ]} // disabled={mainInfoDisbled} initialValue={ subOrders[0]?.afterInvoicingStatus === 'APPLY_FOR_INVOICING' ? 'COMPLETE_INVOICING' : subOrders[0]?.afterInvoicingStatus } rules={[{ required: true, message: '是否完全开票必填' }]} /> <ProFormTextArea width="lg" name="invoicingNotes" label="备注" initialValue={subOrders[0]?.invoicingNotes} /> </DrawerForm> ); };