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>
</>
);
};