feat: 开票功能开发

曾国涛
1 parent adfd7a78
Showing 7 changed files with 161 additions and 73 deletions
src/pages/Invoice/components/Invoice.tsx
src/pages/Invoice/components/InvoiceModal.tsx
src/pages/Invoice/components/InvoiceRecordDetailModal.tsx
src/pages/Invoice/index.tsx
src/pages/Order/components/InvoicingDrawerForm.tsx
src/pages/Order/index.tsx
src/services/exportRequest.ts
-import { postServiceInvoiceGetInvoiceRecord } from '@/services';
-import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 const InvoiceTmpDiv = styled.div`
   font-size: 12px;
@@ -147,19 +145,7 @@ const ProjectContainer = styled.div`
     height: 30px;
   }
 `;
-export default ({ recordId }) => {
-  const [data, setData] = useState<any>({});
-  useEffect(() => {
-    const getData = async () => {
-      let ret = await postServiceInvoiceGetInvoiceRecord({
-        query: {
-          id: recordId,
-        },
-      });
-      setData(ret.data);
-    };
-    getData();
-  }, []);
+export default ({ data }) => {
   return (
     <div>
       <InvoiceTmpDiv>
 import Invoice from '@/pages/Invoice/components/Invoice';
+import { postServiceInvoiceGetInvoiceRecord } from '@/services';
 import { ModalForm } from '@ant-design/pro-components';
-import { Form, message } from 'antd';
-import { useEffect } from 'react';
+import { Form } from 'antd';
+import { useEffect, useState } from 'react';
  
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default ({ recordId }) => {
-  const [form] = Form.useForm();
+export default ({ recordId, getRecord, button }) => {
+  const [data, setData] = useState<any>({});
   useEffect(() => {
-    console.log('recordId', recordId);
+    const getData = async () => {
+      let ret = await postServiceInvoiceGetInvoiceRecord({
+        query: {
+          id: recordId,
+        },
+      });
+      setData(ret.data);
+    };
+    if (recordId) {
+      getData();
+    }
   }, []);
+  const [form] = Form.useForm();
   return (
     <ModalForm
       title="预览发票"
-      trigger={<a type="primary">预览</a>}
+      trigger={button ? button : <a type="primary">预览</a>}
+      onOpenChange={(open) => {
+        if (open && getRecord) {
+          setData(getRecord());
+        }
+      }}
       width={1200}
       form={form}
       autoFocusFirstInput
       modalProps={{
         destroyOnClose: true,
-        onCancel: () => console.log('run'),
-      }}
-      submitTimeout={2000}
-      onFinish={async (values) => {
-        await waitTime(2000);
-        console.log(values.name);
-        message.success('提交成功');
-        return true;
       }}
     >
       <hr />
-      <Invoice recordId={recordId} />
+      <Invoice data={data} />
     </ModalForm>
   );
 };
@@ -70,7 +70,7 @@ export default ({ id, setVisible }) =&gt; {
       <Space>
         <ModalForm
           open
-          title="新建表单"
+          title="发票详情"
           formRef={formRef}
           initialValues={initialValues}
           request={async () => {
@@ -24,6 +24,7 @@ import {
   postServiceInvoiceQueryInvoiceRecordList,
   postServiceOrderQuerySalesCode,
 } from '@/services';
+import { excelExport } from '@/services/exportRequest';
 import {
   enumToProTableEnumValue,
   enumToSelect,
@@ -55,6 +56,7 @@ const InvoicePage = () =&gt; {
   const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] =
     useState(false);
   const [invoiceRecord, setInvoiceRecord] = useState({});
+  const [messageApi] = message.useMessage();
  
   useEffect(() => {
     async function extracted() {
@@ -199,7 +201,13 @@ const InvoicePage = () =&gt; {
       hideInSearch: true,
       ellipsis: true,
     },
-
+    {
+      title: '申请备注',
+      valueType: 'text',
+      dataIndex: 'applyInvoicingNotes',
+      hideInSearch: true,
+      ellipsis: true,
+    },
     {
       title: '购方名称',
       valueType: 'Text',
@@ -419,6 +427,13 @@ const InvoicePage = () =&gt; {
       hideInSearch: true,
       ellipsis: true,
     },
+    {
+      title: '失败原因',
+      valueType: 'text',
+      dataIndex: 'failureReason',
+      hideInSearch: true,
+      ellipsis: true,
+    },
  
     {
       title: '购方名称',
@@ -826,6 +841,8 @@ const InvoicePage = () =&gt; {
                   'AUDITING_NOT_PASSED',
                   'CANCELED',
                 ],
+                needBuildDetails: false,
+                needBuildSubOrders: true,
               },
             });
             return {
@@ -880,6 +897,37 @@ const InvoicePage = () =&gt; {
               defaultDom.cancel,
             ],
           }}
+          search={{
+            labelWidth: 'auto',
+            defaultCollapsed: false,
+            optionRender: (searchConfig, formProps, dom) => [
+              ...dom,
+              <Button
+                key="out"
+                onClick={() => {
+                  const values = searchConfig?.form?.getFieldsValue();
+                  console.log(values);
+                  messageApi.open({
+                    type: 'loading',
+                    content: '正在导出文件...',
+                    duration: 0,
+                  });
+                  excelExport(
+                    '/api/service/invoice/exportInvoiceRecords',
+                    {
+                      ...values,
+                      statusIn: ['INVOICING', 'SUCCESS', 'FAIL'],
+                    },
+                    () => {
+                      messageApi.destroy();
+                    },
+                  );
+                }}
+              >
+                导出
+              </Button>,
+            ],
+          }}
           request={async (params) => {
             let res = await postServiceInvoiceQueryInvoiceRecordList({
               data: {
@@ -903,9 +951,6 @@ const InvoicePage = () =&gt; {
             },
           }}
           rowKey="id"
-          search={{
-            labelWidth: 'auto',
-          }}
           options={{
             setting: {
               listsHeight: 400,
 // import { PlusOutlined } from '@ant-design/icons';
+import InvoiceModal from '@/pages/Invoice/components/InvoiceModal';
 import {
+  postServiceConstGetPayeeEnum,
   postServiceConstInvoiceType,
   postServiceConstInvoicingType,
   postServiceConstListInvoiceDetailNames,
@@ -16,11 +18,9 @@ import {
   ProFormSelect,
   ProFormText,
   ProFormTextArea,
-  ProFormUploadDragger,
 } from '@ant-design/pro-components';
-import { Form } from 'antd';
+import { Button, Form } from 'antd';
 import { useEffect } from 'react';
-import { PAYEE_OPTIONS } from '../constant';
  
 export default ({ dataList, mainOrder, setVisible, onClose }) => {
   // let subOrderIds = dataList?.map((item) => {
@@ -44,6 +44,18 @@ export default ({ dataList, mainOrder, setVisible, onClose }) =&gt; {
       drawerProps={{
         destroyOnClose: true,
       }}
+      submitter={{
+        render: (props, defaultDoms) => {
+          return [
+            <InvoiceModal
+              key={'invoicePreview'}
+              button={<Button type="primary"> 发票预览 </Button>}
+              getRecord={form.getFieldsValue}
+            />,
+            ...defaultDoms,
+          ];
+        },
+      }}
       submitTimeout={2000}
       onFinish={async (values) => {
         postServiceInvoiceApplyInvoice({
@@ -142,12 +154,42 @@ export default ({ dataList, mainOrder, setVisible, onClose }) =&gt; {
         }}
       />
       <ProFormSelect
-        name="partyBName"
+        name="partyB"
         label="开票收款单位"
-        options={enumToSelect(PAYEE_OPTIONS)}
+        request={async () => {
+          const res = await postServiceConstGetPayeeEnum();
+          let options = res?.data?.map((payee: any) => {
+            return {
+              ...payee,
+              label: payee.payeeName,
+              value: payee.name,
+            };
+          });
+          return options;
+        }}
+        onChange={(_, option) => {
+          if (option) {
+            form.setFieldsValue({
+              partyBName: option.payeeName,
+              partyBTaxid: option.taxId,
+            });
+          }
+        }}
         placeholder="请选择收款单位"
         rules={[{ required: true, message: '请选择收款单位!' }]}
       />
+      <ProFormText
+        name="partyBName"
+        label="开票收款单位名称"
+        hidden
+        rules={[{ required: true, message: '请选择收款单位!' }]}
+      />
+      <ProFormText
+        name="partyBTaxid"
+        label="开票收款单位税号"
+        hidden
+        rules={[{ required: true, message: '请选择收款单位!' }]}
+      />
       <ProFormSelect
         name="isUrgent"
         label="是否加急"
@@ -158,15 +200,6 @@ export default ({ dataList, mainOrder, setVisible, onClose }) =&gt; {
         placeholder="请选择是否加急"
         rules={[{ required: true, message: '请选择是否加急!' }]}
       />
-      <ProFormUploadDragger
-        key="filePaths"
-        label="附件"
-        name="filePaths"
-        action="/api/service/order/fileProcess"
-        fieldProps={{
-          headers: { Authorization: localStorage.getItem('token') },
-        }}
-      />
       <ProFormList
         name="invoiceDetails"
         label="开票明细"
@@ -213,7 +213,6 @@ const OrderPage = () =&gt; {
   };
  
   const refreshTable = () => {
-    console.log('刷新表格');
     mainTableRef.current?.reload();
     //刷新表格数据的时候,取消选中行
     setSelectedRows([]);
@@ -604,9 +603,6 @@ const OrderPage = () =&gt; {
       mainOrderSelectedMap.clear();
       subOrderSelectedMap.clear();
     }
-
-    console.log(mainOrderSelectedMap);
-    console.log(subOrderSelectedMap);
   };
  
   //表头渲染
@@ -1289,7 +1285,6 @@ const OrderPage = () =&gt; {
                   setCurrentMainId(record.id);
                   setCurretnOptSubId(optRecord.mainOrderId);
                   setReissueVisible(true);
-                  console.log(reissueVisible);
                 }}
               >
                 重新开票
@@ -1320,7 +1315,6 @@ const OrderPage = () =&gt; {
                 className="p-0"
                 type="link"
                 onClick={() => {
-                  console.log('here');
                   setCurrentMainId(record.id);
                   setCurretnOptSubId(optRecord.id);
                   setCheckVisible(true);
@@ -1355,7 +1349,6 @@ const OrderPage = () =&gt; {
                 className="p-0"
                 type="link"
                 onClick={() => {
-                  console.log('here');
                   setCurrentMainId(record.id);
                   setCurretnOptSubId(optRecord.id);
                   setCheckVisible(true);
@@ -2251,9 +2244,6 @@ const OrderPage = () =&gt; {
  
             setSelectedSubOrderKeys(newSelectedSubOrderKeys);
             setSelectedRows(currentMainOrderSelectedSubOrderList);
-
-            console.log(mainOrderSelectedMap);
-            console.log(subOrderSelectedMap);
           },
           selectedRowKeys: selectedSubOrderKeys,
           // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
@@ -2685,7 +2675,6 @@ const OrderPage = () =&gt; {
                       onClick={() => {
                         setCurrentMainId(record.id);
                         setReissueVisible(true);
-                        console.log(reissueVisible);
                       }}
                     >
                       重新开票
@@ -3396,7 +3385,6 @@ const OrderPage = () =&gt; {
                           selectedSubOrders = record.subOrderInformationLists;
                         }
  
-                        console.log(selectedSubOrders);
                         for (let i = 0; i < selectedSubOrders.length; i++) {
                           if (
                             selectedSubOrders[i].afterInvoicingStatus !==
@@ -4128,9 +4116,6 @@ const OrderPage = () =&gt; {
           let flat = [...subOrderSelectedMap.values()].flat();
           //遍历flat，判断afterInvoicingStatusList存在于canApplyAfterInvoicingStatus
           flat.forEach((item) => {
-            console.log(item);
-            console.log(item.invoicingStatus === 'UN_INVOICE');
-            console.log(item.afterInvoicingStatus !== null);
             if (
               item.invoicingStatus === 'UN_INVOICE' ||
               (item.afterInvoicingStatus !== null &&
@@ -4695,7 +4680,6 @@ const OrderPage = () =&gt; {
         <ReissueModal
           setVisible={(val: boolean) => {
             setReissueVisible(val);
-            console.log(reissueVisible);
             if (!val) {
               clearOptObject();
             }
+import axios from 'axios';
+
+export const excelExport = async (
+  url: any = '',
+  data: any = {},
+  exportLoadingDestory: any,
+) => {
+  axios({
+    url: url,
+    method: 'post',
+    responseType: 'blob',
+    headers: { Authorization: localStorage.getItem('token') },
+    data,
+  })
+    .then((response) => {
+      // 我这里在拦截器里直接返回的response.data
+      const body = response.data;
+      let fileUrl = window.URL.createObjectURL(
+        new Blob([body], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        }),
+      );
+      let a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = fileUrl;
+      a.download = '开票记录.xlsx';
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(a.href);
+      document.body.removeChild(a);
+    })
+    .catch((error) => {
+      // 处理错误
+      console.error('导出错误', error);
+    })
+    .finally(() => {
+      exportLoadingDestory();
+    });
+};