import { RESPONSE_CODE } from '@/constants/enum'; import InvoiceDetailTable from '@/pages/Invoice/InvoiceVerification/components/InvoiceDetailTable'; import { postServiceConstGetPayeeEnum, postServiceConstInvoiceType, postServiceConstInvoicingType, postServiceInvoiceGetInvoiceRecord, postServiceInvoiceModifyRecord, } from '@/services'; import { enumToSelect } from '@/utils'; import { ModalForm, ProCard, ProForm, ProFormInstance, ProFormList, ProFormSelect, ProFormText, ProFormTextArea, } from '@ant-design/pro-components'; import { Button, Divider, Form, Space, message } from 'antd'; import { useEffect, useRef, useState } from 'react'; export default ({ id, setVisible }) => { const [readOnly, setReadOnly] = useState(true); const [detailTableData, setDetailTableData] = useState([]); const [payees, setPayees] = useState([]); const [payeeNameOptions, setPayeeNameOptions] = useState([]); const formRef = useRef<ProFormInstance>(); const [form] = Form.useForm(); useEffect(() => { console.log('id' + id); const getPayees = async () => { let res = await postServiceConstGetPayeeEnum(); setPayees(res.data); let payeeNameOptions = res.data.map((item) => { return { label: item.payeeName, value: item.payeeName, }; }); setPayeeNameOptions(payeeNameOptions); }; getPayees(); }, []); const getRecord = async (id) => { let ret = await postServiceInvoiceGetInvoiceRecord({ query: { id: id, }, }); console.log(ret.data); const updatedInvoiceDetails = ret.data.invoiceDetails?.map( (item, index) => ({ ...item, // 保留原有属性 tid: index + 1, // 添加tid属性,这里以T开头,后面跟索引+1,仅作示例,实际可根据需求生成tid }), ); setDetailTableData(updatedInvoiceDetails); }; useEffect(() => { getRecord(id); }, []); const updateDetails = (values) => { setDetailTableData(values); }; return ( <> <Space> <ModalForm open title="发票详情" formRef={formRef} request={async () => { let ret = await postServiceInvoiceGetInvoiceRecord({ query: { id: id, }, }); const data = ret.data; const orderIdMap = data.orderIdMap; const orderIdList = []; // 使用Object.entries()遍历属性 Object.entries(orderIdMap).forEach(([key, value]) => { const orderId = { mainId: key, subIds: value, }; orderIdList.push(orderId); }); return { ...data, orderIdList: orderIdList, }; }} submitter={{ render: () => { return [ <Button type={readOnly ? 'primary' : 'default'} key="ok" onClick={() => { setReadOnly(!readOnly); }} > {readOnly ? '编辑' : '取消编辑'} </Button>, <> {!readOnly && ( <Button type="primary" key="submit" onClick={async () => { const result = await postServiceInvoiceModifyRecord({ data: { ...form.getFieldsValue(), invoiceDetails: [...detailTableData], }, }); if (result.result === RESPONSE_CODE.SUCCESS) { message.success('提交成功'); } setVisible(false); return true; }} > 提交 </Button> )} </>, /*<Button type={'default'} key="ok" onClick={() => { setVisible(false) }} > 取消 </Button>,*/ ]; }, }} width={1200} form={form} autoFocusFirstInput modalProps={{ destroyOnClose: true, onCancel: () => { setVisible(false); }, }} grid={true} layout="horizontal" rowProps={{ gutter: [0, 0], }} submitTimeout={2000} onFinish={async (values) => { const result = await postServiceInvoiceModifyRecord({ data: { ...values, invoiceDetails: { ...detailTableData, }, }, }); if (result.result === RESPONSE_CODE.SUCCESS) { message.success('提交成功'); } return true; }} > <ProCard title="基础信息" bordered // headStyle={{}} headerBordered size={'small'} > <ProForm.Group> <ProFormText readonly name="id" label="订单批号" colProps={{ span: 5, }} tooltip="最长为 24 位" placeholder="请输入名称" /> <ProFormText readonly width="md" colProps={{ span: 5, }} name="createByName" label="销售代表" placeholder="请输入名称" /> <ProFormText readonly width="md" colProps={{ span: 5, }} name="createTime" label="申请时间" placeholder="请输入名称" /> <ProFormSelect name="type" label="发票类型" colProps={{ span: 5, }} readonly={readOnly} request={async () => { let invoiceTypeRet = await postServiceConstInvoiceType(); return enumToSelect(invoiceTypeRet.data); }} placeholder="Please select a country" rules={[ { required: true, message: 'Please select your country!' }, ]} /> <ProFormSelect name="invoicingType" readonly={readOnly} label="开具类型" colProps={{ span: 4, }} request={async () => { let invoicingTypeRet = await postServiceConstInvoicingType(); let options = enumToSelect(invoicingTypeRet.data); return options; }} placeholder="Please select a country" rules={[ { required: true, message: 'Please select your country!' }, ]} /> <ProFormList label="订单号" name="orderIdList" creatorButtonProps={false} itemRender={({}, { record }) => { console.log('record' + JSON.stringify(record)); return ( <Space> <Button key={record.mainId} className="pl-1 pr-0" type="link" target="_blank" href={'/order/order?id=' + record.mainId} > {record.mainId} </Button> ( {record.subIds.map((item) => { return ( <Button key={item} className="pl-1 pr-0" type="link" target="_blank" href={'/order/order?subOrderId=' + item} > {item} </Button> ); })} ) <Divider type="vertical" /> </Space> ); }} > <ProFormText allowClear={false} width="xs" name={['name']} /> </ProFormList> </ProForm.Group> </ProCard> <hr /> <ProCard title="购方信息" bordered headerBordered size={'small'}> <ProForm.Group> <ProFormText readonly={readOnly} width="md" colProps={{ span: 8, }} name="partyAName" label="购方名称" placeholder="请输入名称" /> <ProFormText readonly={readOnly} width="md" colProps={{ span: 8, }} name="partyATaxid" label="购方税号" placeholder="请输入名称" /> <ProFormText readonly={readOnly} width="md" colProps={{ span: 8, }} label="开户银行" name={'partyAOpenBank'} placeholder="请输入名称" /> <ProFormText readonly={readOnly} width="md" colProps={{ span: 8, }} name="partyABankAccount" label="银行账号" placeholder="请输入名称" /> <ProFormText readonly={readOnly} width="md" colProps={{ span: 8, }} name="partyAAddress" label="购方地址" placeholder="请输入名称" /> <ProFormText readonly={readOnly} width="md" colProps={{ span: 8, }} name="partyAPhoneNumber" label="电话" placeholder="请输入名称" /> </ProForm.Group> </ProCard> <hr /> <ProCard title="销方信息" bordered headerBordered size={'small'}> <ProForm.Group> <ProFormSelect readonly={readOnly} width="md" name="partyBName" options={payeeNameOptions} onChange={(value: any) => { let payee = payees.find((item: any) => { return item.payeeName === value; }); console.log(JSON.stringify(payee)); form.setFieldsValue({ partyBTaxid: payee.taxId, partyBBankAccount: payee.bankAccount, partyBOpenBank: payee.openBank, partyBAddress: payee.address, partyBPhoneNumber: payee.phoneNumber, }); }} label="销方名称" colProps={{ span: 8, }} placeholder="请输入名称" /> <ProFormText readonly width="md" name="partyBTaxid" label="销方税号" colProps={{ span: 8, }} placeholder="请输入名称" /> <ProFormText readonly width="md" name="partyBOpenBank" label="开户银行" colProps={{ span: 8, }} placeholder="请输入名称" /> <ProFormText readonly width="md" name="partyBBankAccount" label="银行账号" colProps={{ span: 8, }} placeholder="请输入名称" /> <ProFormText readonly width="md" colProps={{ span: 8, }} name="partyBAddress" label="销方地址" placeholder="请输入名称" /> <ProFormText readonly width="md" colProps={{ span: 8, }} name="partyBPhoneNumber" label="电话" placeholder="请输入名称" /> </ProForm.Group> </ProCard> <hr /> <ProCard title="发票明细" bordered headerBordered size={'small'}> <InvoiceDetailTable recordId={id} details={detailTableData} updateDetails={updateDetails} readOnly={readOnly} /> </ProCard> <hr /> <ProCard title="备注" bordered headerBordered size={'small'}> <ProFormTextArea readonly={readOnly} name="comment" placeholder="请输入备注" /> </ProCard> </ModalForm> </Space> </> ); };