feat: 手动开票功能开发

曾国涛
1 parent 1b5105f2
Showing 3 changed files with 139 additions and 0 deletions
src/pages/Invoice/components/ManualInvoicingModal.tsx
src/pages/Invoice/components/UploadSingleImg.tsx
src/pages/Invoice/index.tsx
+import UploadC from '@/pages/Invoice/components/UploadSingleImg';
+import { postOrderErpOrderStagesUpload } from '@/services';
+import {
+  ModalForm,
+  ProFormDatePicker,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Col, Form, Row, message } from 'antd';
+import { RcFile } from 'antd/es/upload';
+
+export default () => {
+  const [form] = Form.useForm<{ name: string; company: string }>();
+  return (
+    <ModalForm<{
+      name: string;
+      company: string;
+    }>
+      title="手动开票"
+      trigger={<a type="primary">手动开票</a>}
+      width={400}
+      layout={'horizontal'}
+      form={form}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => console.log('run'),
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        console.log(values);
+        message.success('提交成功');
+        return true;
+      }}
+    >
+      <ProFormText width={'md'} name="invoicingPerson" label="开票人" />
+      <ProFormText width={'md'} name="invoiceNumber" label="发票号码" />
+      <ProFormDatePicker
+        fieldProps={{
+          format: 'YY-MM-DD',
+        }}
+        name="invoicingDate"
+        label="开票日期"
+      />
+      <ProFormText hidden name="url" label="發票地址" />
+      <Row>
+        <Col span={4}>上传发票</Col>
+        <Col span={20}>
+          <UploadC
+            onFilesChange={async (newFileList) => {
+              if (newFileList.length > 0) {
+                const formData = new FormData();
+                formData.append('file', newFileList[0].originFileObj as RcFile);
+                const res = await postOrderErpOrderStagesUpload({
+                  data: formData,
+                  headers: {
+                    'Content-Type':
+                      'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+                  },
+                });
+                const url = res.data;
+                form.setFieldValue('url', url);
+              } else {
+                form.setFieldValue('url', null);
+              }
+            }}
+          ></UploadC>
+        </Col>
+      </Row>
+    </ModalForm>
+  );
+};
+import { PlusOutlined } from '@ant-design/icons';
+import type { GetProp, UploadFile, UploadProps } from 'antd';
+import { Image, Upload } from 'antd';
+import { useState } from 'react';
+
+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+const getBase64 = (file: FileType): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+
+export default ({ onFilesChange }) => {
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+  const handlePreview = async (file: UploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj as FileType);
+    }
+
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+  };
+
+  const uploadButton = (
+    <button style={{ border: 0, background: 'none' }} type="button">
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </button>
+  );
+  return (
+    <>
+      <Upload
+        listType="picture-card"
+        fileList={fileList}
+        onPreview={handlePreview}
+        onChange={({ fileList: newFileList }) => {
+          setFileList(newFileList);
+          console.log('file' + JSON.stringify(newFileList));
+          onFilesChange(newFileList);
+        }}
+      >
+        {fileList.length >= 1 ? null : uploadButton}
+      </Upload>
+      {previewImage && (
+        <Image
+          wrapperStyle={{ display: 'none' }}
+          preview={{
+            visible: previewOpen,
+            onVisibleChange: (visible) => setPreviewOpen(visible),
+            afterOpenChange: (visible) => !visible && setPreviewImage(''),
+          }}
+          src={previewImage}
+        />
+      )}
+    </>
+  );
+};
@@ -5,6 +5,7 @@ import AddInvoiceDrawerForm from &#39;@/pages/Invoice/components/AddInvoiceDrawerFor
 import InvoiceModal from '@/pages/Invoice/components/InvoiceModal';
 import InvoiceRecordDetailModal from '@/pages/Invoice/components/InvoiceRecordDetailModal';
 import InvoicingModal from '@/pages/Invoice/components/InvoicingModal';
+import ManualInvoicingModal from '@/pages/Invoice/components/ManualInvoicingModal';
 import {
   BANK_STATEMENT_COLUMNS,
   INVOICE_COLUMNS,
@@ -334,6 +335,10 @@ const InvoicePage = () =&gt; {
             详情
           </a>,
           <InvoiceModal key="invoiceModal" recordId={record.id} />,
+          <ManualInvoicingModal
+            key={'ManualInvoicingModal'}
+            record={record}
+          ></ManualInvoicingModal>,
         ];
       },
     },