From ad33ec4770be9fd8c8a99edd56a351eef538a86e Mon Sep 17 00:00:00 2001
From: z <2199297992@qq.com>
Date: Mon, 1 Jul 2024 19:16:53 +0800
Subject: [PATCH] feat: 开票功能开发
---
src/pages/Invoice/components/InvoiceRecordDetailModal.tsx | 572 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/pages/Invoice/index.tsx | 41 +++++++++++++++++++++++++++++++++++------
2 files changed, 319 insertions(+), 294 deletions(-)
diff --git a/src/pages/Invoice/components/InvoiceRecordDetailModal.tsx b/src/pages/Invoice/components/InvoiceRecordDetailModal.tsx
index 49cecde..8d4fd27 100644
--- a/src/pages/Invoice/components/InvoiceRecordDetailModal.tsx
+++ b/src/pages/Invoice/components/InvoiceRecordDetailModal.tsx
@@ -20,10 +20,9 @@ import {
import { Button, Divider, Form, Space, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
-export default ({ id }) => {
+export default ({ id, setVisible }) => {
const [readOnly, setReadOnly] = useState(true);
- const [visible, setVisible] = useState(false);
- const [initialValues, setInitialValues] = useState({});
+ const [initialValues] = useState({});
const [detailTableData, setDetailTableData] = useState([]);
const [payees, setPayees] = useState([]);
const [payeeNameOptions, setPayeeNameOptions] = useState([]);
@@ -31,6 +30,7 @@ export default ({ id }) => {
const [form] = Form.useForm();
useEffect(() => {
+ console.log('id' + id);
const getPayees = async () => {
let res = await postServiceConstGetPayeeEnum();
setPayees(res.data);
@@ -57,13 +57,10 @@ export default ({ id }) => {
}),
);
setDetailTableData(updatedInvoiceDetails);
- setInitialValues(ret.data);
};
useEffect(() => {
- if (visible) {
- getRecord(id);
- }
- }, [visible]);
+ getRecord(id);
+ }, []);
const updateDetails = (values) => {
setDetailTableData(values);
@@ -71,292 +68,291 @@ export default ({ id }) => {
return (
<>
<Space>
- <a
- type="primary"
- onClick={() => {
- setVisible(true);
- }}
- >
- 详情
- </a>
- {visible && (
- <ModalForm
- open
- onOpenChange={setVisible}
- title="新建表单"
- formRef={formRef}
- initialValues={initialValues}
- 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>,*/
- ];
+ <ModalForm
+ open
+ title="新建表单"
+ formRef={formRef}
+ initialValues={initialValues}
+ request={async () => {
+ let ret = await postServiceInvoiceGetInvoiceRecord({
+ query: {
+ id: id,
},
- }}
- width={1200}
- form={form}
- autoFocusFirstInput
- modalProps={{
- destroyOnClose: true,
- }}
- submitTimeout={2000}
- onFinish={async (values) => {
- const result = await postServiceInvoiceModifyRecord({
- data: {
- ...values,
- invoiceDetails: {
- ...detailTableData,
- },
- },
- });
- if (result.result === RESPONSE_CODE.SUCCESS) {
- message.success('提交成功');
- }
+ });
+ return ret.data;
+ }}
+ 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);
- return true;
- }}
- >
- 基础信息
- <hr />
- <ProForm.Group>
- <ProFormText
- readonly
- name="id"
- label="订单批号"
- tooltip="最长为 24 位"
- placeholder="请输入名称"
- />
-
- <ProFormText
- readonly
- width="md"
- name="createByName"
- label="销售代表"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly
- width="md"
- name="createTime"
- label="申请时间"
- placeholder="请输入名称"
- />
- <ProFormSelect
- name="type"
- label="发票类型"
- 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="开具类型"
- 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!' },
- ]}
- />
- <ProFormFieldSet
- name="list"
- label="子订单号"
- transform={(value: any) => ({
- list: value,
- startTime: value[0],
- endTime: value[1],
- })}
- >
- {initialValues?.subOrderIds?.map((item) => {
- return (
- <>
- <Button
- className="pl-1 pr-0"
- type="link"
- target="_blank"
- href={'/order?subOrderId=' + item}
- >
- {item}
- </Button>
- <Divider type="vertical" />
- </>
- );
- })}
- </ProFormFieldSet>
- </ProForm.Group>
- 购方信息
- <hr />
- <ProForm.Group>
- <ProFormText
- readonly={readOnly}
- width="md"
- name="partyAName"
- label="购方名称"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly={readOnly}
- width="md"
- name="partyATaxid"
- label="购方税号"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly={readOnly}
- width="md"
- label="开户银行"
- name={'partyAOpenBank'}
- placeholder="请输入名称"
- />
- <ProFormText
- readonly={readOnly}
- width="md"
- name="partyABankAccount"
- label="银行账号"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly={readOnly}
- width="md"
- name="partyAAddress"
- label="购方地址"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly={readOnly}
- width="md"
- name="partyAPhoneNumber"
- label="电话"
- placeholder="请输入名称"
- />
- </ProForm.Group>
- 销方信息
- <hr />
- <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="销方名称"
- placeholder="请输入名称"
- />
+ },
+ }}
+ submitTimeout={2000}
+ onFinish={async (values) => {
+ const result = await postServiceInvoiceModifyRecord({
+ data: {
+ ...values,
+ invoiceDetails: {
+ ...detailTableData,
+ },
+ },
+ });
+ if (result.result === RESPONSE_CODE.SUCCESS) {
+ message.success('提交成功');
+ }
+ return true;
+ }}
+ >
+ 基础信息
+ <hr />
+ <ProForm.Group>
+ <ProFormText
+ readonly
+ name="id"
+ label="订单批号"
+ tooltip="最长为 24 位"
+ placeholder="请输入名称"
+ />
- <ProFormText
- readonly
- width="md"
- name="partyBTaxid"
- label="销方税号"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly
- width="md"
- name="partyBOpenBank"
- label="开户银行"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly
- width="md"
- name="partyBBankAccount"
- label="银行账号"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly
- width="md"
- name="partyBAddress"
- label="销方地址"
- placeholder="请输入名称"
- />
- <ProFormText
- readonly
- width="md"
- name="partyBPhoneNumber"
- label="电话"
- placeholder="请输入名称"
- />
- </ProForm.Group>
- 订单信息
- <hr />
- <InvoiceDetailTable
- recordId={id}
- details={detailTableData}
- updateDetails={updateDetails}
- readOnly={readOnly}
+ <ProFormText
+ readonly
+ width="md"
+ name="createByName"
+ label="销售代表"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly
+ width="md"
+ name="createTime"
+ label="申请时间"
+ placeholder="请输入名称"
+ />
+ <ProFormSelect
+ name="type"
+ label="发票类型"
+ 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="开具类型"
+ 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!' },
+ ]}
/>
- <ProFormTextArea
+ <ProFormFieldSet
+ name="list"
+ label="子订单号"
+ transform={(value: any) => ({
+ list: value,
+ startTime: value[0],
+ endTime: value[1],
+ })}
+ >
+ {initialValues?.subOrderIds?.map((item) => {
+ return (
+ <>
+ <Button
+ className="pl-1 pr-0"
+ type="link"
+ target="_blank"
+ href={'/order?subOrderId=' + item}
+ >
+ {item}
+ </Button>
+ <Divider type="vertical" />
+ </>
+ );
+ })}
+ </ProFormFieldSet>
+ </ProForm.Group>
+ 购方信息
+ <hr />
+ <ProForm.Group>
+ <ProFormText
+ readonly={readOnly}
+ width="md"
+ name="partyAName"
+ label="购方名称"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly={readOnly}
+ width="md"
+ name="partyATaxid"
+ label="购方税号"
+ placeholder="请输入名称"
+ />
+ <ProFormText
readonly={readOnly}
- name="comment"
- label="备注"
- placeholder="请输入备注"
+ width="md"
+ label="开户银行"
+ name={'partyAOpenBank'}
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly={readOnly}
+ width="md"
+ name="partyABankAccount"
+ label="银行账号"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly={readOnly}
+ width="md"
+ name="partyAAddress"
+ label="购方地址"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly={readOnly}
+ width="md"
+ name="partyAPhoneNumber"
+ label="电话"
+ placeholder="请输入名称"
+ />
+ </ProForm.Group>
+ 销方信息
+ <hr />
+ <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="销方名称"
+ placeholder="请输入名称"
+ />
+
+ <ProFormText
+ readonly
+ width="md"
+ name="partyBTaxid"
+ label="销方税号"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly
+ width="md"
+ name="partyBOpenBank"
+ label="开户银行"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly
+ width="md"
+ name="partyBBankAccount"
+ label="银行账号"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly
+ width="md"
+ name="partyBAddress"
+ label="销方地址"
+ placeholder="请输入名称"
+ />
+ <ProFormText
+ readonly
+ width="md"
+ name="partyBPhoneNumber"
+ label="电话"
+ placeholder="请输入名称"
/>
- </ModalForm>
- )}
+ </ProForm.Group>
+ 订单信息
+ <hr />
+ <InvoiceDetailTable
+ recordId={id}
+ details={detailTableData}
+ updateDetails={updateDetails}
+ readOnly={readOnly}
+ />
+ <ProFormTextArea
+ readonly={readOnly}
+ name="comment"
+ label="备注"
+ placeholder="请输入备注"
+ />
+ </ModalForm>
</Space>
</>
);
diff --git a/src/pages/Invoice/index.tsx b/src/pages/Invoice/index.tsx
index dd7abe6..572daed 100644
--- a/src/pages/Invoice/index.tsx
+++ b/src/pages/Invoice/index.tsx
@@ -52,6 +52,9 @@ const InvoicePage = () => {
const [invoiceVerificationVisible, setInvoiceVerificationVisible] =
useState(false);
const [invoiceId, setInvoiceId] = useState(undefined);
+ const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
+ useState(false);
+ const [invoiceRecord, setInvoiceRecord] = useState({});
useEffect(() => {
async function extracted() {
@@ -304,11 +307,24 @@ const InvoicePage = () => {
key: 'option',
render: (text, record) => {
return [
- <InvoiceRecordDetailModal
+ /*<InvoiceRecordDetailModal
key="detail"
id={record.id}
subOrderIds={record.subOrderIds}
- />,
+ onClose={()=>{
+ waitDealrecordActionRef.current?.reload();
+ }
+ }
+ />*/
+ <a
+ key="detail"
+ onClick={() => {
+ setInvoiceRecordDetailVisible(true);
+ setInvoiceRecord(record);
+ }}
+ >
+ 详情
+ </a>,
<InvoiceModal key="invoiceModal" recordId={record.id} />,
];
},
@@ -477,11 +493,15 @@ const InvoicePage = () => {
valueType: 'option',
key: 'option',
render: (text, record) => [
- <InvoiceRecordDetailModal
+ <a
key="detail"
- id={record.id}
- subOrderIds={record.subOrderIds}
- />,
+ onClick={() => {
+ setInvoiceRecordDetailVisible(true);
+ setInvoiceRecord(record);
+ }}
+ >
+ 详情
+ </a>,
<>
{record.status === 'SUCCESS' && (
<>
@@ -1066,6 +1086,15 @@ const InvoicePage = () => {
) : (
''
)}
+ {invoiceRecordDetailVisible ? (
+ <InvoiceRecordDetailModal
+ key="detail"
+ id={invoiceRecord.id}
+ setVisible={setInvoiceRecordDetailVisible}
+ />
+ ) : (
+ ''
+ )}
</div>
);
};
--
libgit2 0.23.3