feat: update 银行流水导入

zhongnanhuang
1 parent 0c311287
Showing 3 changed files with 429 additions and 142 deletions
src/pages/Invoice/components/BankImportModal.tsx
src/pages/Invoice/constant.tsx
src/pages/Invoice/index.tsx
+import { RESPONSE_CODE } from '@/constants/enum';
+import { postServiceBankStatementImportBankStatementForm } from '@/services';
+import { UploadOutlined } from '@ant-design/icons';
+import { ModalForm } from '@ant-design/pro-components';
+import { Button, Form, Upload, UploadFile, UploadProps, message } from 'antd';
+import { RcFile } from 'antd/es/upload';
+import axios from 'axios';
+import { useState } from 'react';
+
+// import { cloneDeep } from 'lodash';
+export default ({ setVisible, onClose }) => {
+  const [form] = Form.useForm<{ name: string; company: string }>();
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
+
+  const [messageApi] = message.useMessage();
+  const [setUploading] = useState(false);
+
+  const exportLoading = (content: string) => {
+    messageApi.open({
+      type: 'loading',
+      content: content,
+      duration: 0,
+    });
+  };
+
+  const downloadImportTemplate = async () => {
+    axios({
+      url: '/api/service/bankStatement/exportTemplate',
+      method: 'post',
+      responseType: 'blob',
+      headers: { Authorization: localStorage.getItem('token') },
+    })
+      .then((response) => {
+        // 创建一个新的 Blob 对象，它包含了服务器响应的数据（即你的 Excel 文件）
+        const blob = new Blob([response.data]); // Excel 的 MIME 类型
+        const downloadUrl = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = downloadUrl;
+        a.download = '银行流水导入模板.xlsx'; // 你可以为文件命名
+        document.body.appendChild(a);
+        a.click(); // 模拟点击操作来下载文件
+        URL.revokeObjectURL(downloadUrl); // 释放掉 blob 对象所占用的内存
+        document.body.removeChild(a);
+      })
+      .catch((error) => {
+        // 处理错误
+        console.error('导出错误', error);
+      });
+  };
+  const handleUpload = async () => {
+    const formData = new FormData();
+    fileList.forEach((file) => {
+      //originFileObj二进制文件
+      formData.append('file', file.originFileObj as RcFile);
+    });
+    // console.log(fileList[0] as RcFile)
+    // formData.append('file', fileList[0] as RcFile);
+    setUploading(true);
+    // You can use any AJAX library you like
+    const res = await postServiceBankStatementImportBankStatementForm({
+      data: formData,
+      headers: {
+        'Content-Type':
+          'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
+      },
+    });
+
+    if (res.result === RESPONSE_CODE.SUCCESS) {
+      message.success(res.message);
+      onClose();
+    } else {
+      if (res.message === '表格中没有数据') {
+        setUploading(false);
+        return;
+      }
+      //存在错误信息，下载错误信息模板
+      exportLoading('正在下载错误信息...');
+    }
+
+    setUploading(false);
+  };
+  const props: UploadProps = {
+    onRemove: (file) => {
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+      setFileList(newFileList);
+    },
+    beforeUpload: (file) => {
+      setFileList([...fileList, file]);
+
+      return false;
+    },
+    fileList,
+    onChange: handleChange,
+    accept: '.xlsx',
+  };
+
+  return (
+    <>
+      <ModalForm<{
+        name: string;
+        company: string;
+      }>
+        width={500}
+        open
+        title="标题"
+        form={form}
+        autoFocusFirstInput
+        modalProps={{
+          okText: '确定',
+          cancelText: '取消',
+          destroyOnClose: true,
+          onCancel: () => {
+            setVisible(false);
+          },
+        }}
+        onFinish={async () => {
+          handleUpload();
+          onClose();
+        }}
+        onOpenChange={setVisible}
+      >
+        <div className="py-4 font-semibold">
+          导入银行流水
+          <Button type="link" onClick={downloadImportTemplate}>
+            下载导入模板
+          </Button>
+        </div>
+        <Upload {...props}>
+          <Button icon={<UploadOutlined />} disabled={fileList.length > 0}>
+            点击选择文件
+          </Button>
+        </Upload>
+      </ModalForm>
+    </>
+  );
+};
-import { TableDropdown } from '@ant-design/pro-components';
-
 export type InvoiceItem = {
   id: number; //id
   invoiceStatus: string; //发票类型：专票/普票
@@ -82,34 +80,6 @@ export const INVOICE_COLUMNS = [
     valueType: 'text',
     width: 250,
   },
-  {
-    title: '操作',
-    valueType: 'option',
-    key: 'option',
-    fixed: 'right',
-    width: 120,
-    render: (text, record, _, action) => [
-      <a
-        key="editable"
-        onClick={() => {
-          action?.startEditable?.(record.id);
-        }}
-      >
-        编辑
-      </a>,
-      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
-        查看
-      </a>,
-      <TableDropdown
-        key="actionGroup"
-        onSelect={() => action?.reload()}
-        menus={[
-          { key: 'copy', name: '复制' },
-          { key: 'delete', name: '删除' },
-        ]}
-      />,
-    ],
-  },
 ];
 export const INVOICE_STATUS = {
 import { INVOICE_COLUMNS, INVOICE_STATUS } from '@/pages/Invoice/constant';
 import { postServiceInvoiceQueryInvoice } from '@/services';
-import { enumValueToLabel } from '@/utils';
+import { enumValueToLabel, formatDateTime } from '@/utils';
+import { formatDate } from '@/utils/time';
 import { getUserInfo } from '@/utils/user';
-import { EllipsisOutlined } from '@ant-design/icons';
+import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   ActionType,
   PageContainer,
   ProTable,
 } from '@ant-design/pro-components';
 import { history } from '@umijs/max';
-import { Avatar, Button, Dropdown, Tag } from 'antd';
-import { useRef } from 'react';
+import { Avatar, Button, Dropdown, Tabs, Tag } from 'antd';
+import { useRef, useState } from 'react';
 import { INVOCING_STATUS, PAYEE_OPTIONS } from '../Order/constant';
+import BankImportModal from './components/BankImportModal';
 import './index.less';
+const InvoicePage = () => {
+  const invoiceActionRef = useRef<ActionType>();
+  const bankActionRef = useRef<ActionType>();
+  const [bankImportModalVisible, setBankImportModalVisible] = useState(false);
-const userInfo = getUserInfo();
+  const userInfo = getUserInfo();
-const BreakWordDiv = ({ text = '暂无内容' }) => {
-  return <div className="overflow-wrap-break-word">{text}</div>;
-};
+  const BreakWordDiv = ({ text = '暂无内容' }) => {
+    return (
+      <div
+        title={text}
+        className="overflow-hidden whitespace-no-wrap overflow-ellipsis whitespace-nowrap"
+      >
+        {text}
+      </div>
+    );
+  };
-const getTableCellText = (target: any) => {
-  if (!target) {
-    return '';
-  }
+  const getTableCellText = (target: any) => {
+    if (!target) {
+      return '';
+    }
-  if (target.props) {
-    return target.props.text;
-  }
+    if (target.props) {
+      return target.props.text;
+    }
-  return target;
-};
+    return target;
+  };
-const InvoicePage = () => {
-  const actionRef = useRef<ActionType>();
+  /**
+   * 加载发票列表表格的各个列格式
+   */
+  const invoicecColumnsInit = () => {
+    let columns = INVOICE_COLUMNS.map((item) => {
+      let newItem = { ...item };
+      let dataIndex = item.dataIndex;
+      let dataType = item.valueType;
+
+      newItem.render = (text, record) => {
+        let textValue = record[dataIndex];
+
+        if (dataType === 'date') {
+          textValue = formatDate(textValue);
+        }
+
+        if (dataType === 'dateTime') {
+          textValue = formatDateTime(textValue);
+        }
+
+        if (dataType === 'money') {
+          textValue = '￥' + textValue;
+        }
+
+        switch (dataIndex) {
+          case 'invoiceStatus':
+            return (
+              <BreakWordDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOCING_STATUS,
+                )}
+              />
+            );
+
+          case 'status':
+            return (
+              <BreakWordDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  INVOICE_STATUS,
+                )}
+              />
+            );
+
+          case 'payee':
+            return (
+              <BreakWordDiv
+                text={enumValueToLabel(
+                  getTableCellText(textValue),
+                  PAYEE_OPTIONS,
+                )}
+              />
+            );
+
+          default:
+            return <BreakWordDiv text={getTableCellText(textValue)} />;
+        }
+      };
+
+      return newItem;
+    });
+
+    columns.push({
+      title: '操作',
+      valueType: 'option',
+      key: 'option',
+      fixed: 'right',
+      width: 120,
+      render: (text, record, _, action) => [
+        <a
+          key="editable"
+          onClick={() => {
+            action?.startEditable?.(record.id);
+          }}
+        >
+          核销
+        </a>,
+        <a
+          href={record.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          key="view"
+        >
+          查看
+        </a>,
+        <a
+          href={record.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          key="view2"
+        >
+          删除
+        </a>,
+      ],
+    });
+
+    return columns;
+  };
+
+  /**
+   * 发票表
+   * @param param0
+   * @returns
+   */
+  const InvoiceTable = ({ actionRef = undefined }) => {
+    return (
+      <ProTable
+        columns={invoicecColumnsInit()}
+        actionRef={actionRef}
+        cardBordered
+        pagination={{
+          pageSize: 10,
+        }}
+        request={async (params) => {
+          const res = await postServiceInvoiceQueryInvoice({
+            data: { ...params },
+          });
+          if (res) {
+            return {
+              data: res?.data?.data || [],
+              total: res?.data?.total || 0,
+            };
+          }
+        }}
+        columnsState={{
+          persistenceKey: 'pro-table-singe-demos',
+          persistenceType: 'localStorage',
+          defaultValue: {
+            option: { fixed: 'right', disable: true },
+          },
+          onChange(value) {
+            console.log('value: ', value);
+          },
+        }}
+        rowKey="id"
+        search={{
+          labelWidth: 'auto',
+        }}
+        options={{
+          setting: {
+            listsHeight: 400,
+          },
+        }}
+        form={{
+          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
+          syncToUrl: (values, type) => {
+            if (type === 'get') {
+              return {
+                ...values,
+                created_at: [values.startTime, values.endTime],
+              };
+            }
+            return values;
+          },
+        }}
+        dateFormatter="string"
+        headerTitle="发票列表"
+        scroll={{ x: 1400, y: 360 }}
+      />
+    );
+  };
+  /**
+   * 银行流水表
+   * @param param0
+   * @returns
+   */
+  const BankTable = ({ actionRef = undefined }) => {
+    return (
+      <ProTable
+        columns={invoicecColumnsInit()}
+        actionRef={actionRef}
+        cardBordered
+        pagination={{
+          pageSize: 10,
+        }}
+        request={async (params) => {
+          const res = await postServiceInvoiceQueryInvoice({
+            data: { ...params },
+          });
+          if (res) {
+            return {
+              data: res?.data?.data || [],
+              total: res?.data?.total || 0,
+            };
+          }
+        }}
+        columnsState={{
+          persistenceKey: 'pro-table-singe-demos',
+          persistenceType: 'localStorage',
+          defaultValue: {
+            option: { fixed: 'right', disable: true },
+          },
+          onChange(value) {
+            console.log('value: ', value);
+          },
+        }}
+        rowKey="id"
+        search={{
+          labelWidth: 'auto',
+        }}
+        options={{
+          setting: {
+            listsHeight: 400,
+          },
+        }}
+        form={{
+          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
+          syncToUrl: (values, type) => {
+            if (type === 'get') {
+              return {
+                ...values,
+                created_at: [values.startTime, values.endTime],
+              };
+            }
+            return values;
+          },
+        }}
+        dateFormatter="string"
+        headerTitle="银行流水列表"
+        scroll={{ x: 1400, y: 360 }}
+        toolBarRender={() => [
+          <Button
+            key="button"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setBankImportModalVisible(true);
+            }}
+            type="primary"
+          >
+            导入
+          </Button>,
+        ]}
+      />
+    );
+  };
+
+  const tabsItems = [
+    {
+      key: 1,
+      label: '发票管理',
+      children: <InvoiceTable actionRef={invoiceActionRef} />,
+    },
+    {
+      key: 2,
+      label: '银行流水',
+      children: <BankTable actionRef={bankActionRef} />,
+    },
+  ];
   return (
     <>
       <PageContainer
@@ -73,100 +333,17 @@ const InvoicePage = () =&gt; {
           ],
         }}
       >
-        <ProTable
-          columns={INVOICE_COLUMNS.map((item) => {
-            let newItem = { ...item };
-            if (item.dataIndex === 'invoiceStatus') {
-              newItem.render = (text) => {
-                return (
-                  <BreakWordDiv
-                    text={enumValueToLabel(
-                      getTableCellText(text),
-                      INVOCING_STATUS,
-                    )}
-                  />
-                );
-              };
-            }
-            if (item.dataIndex === 'status') {
-              newItem.render = (text) => {
-                console.log(text);
-                return (
-                  <BreakWordDiv
-                    text={enumValueToLabel(
-                      getTableCellText(text),
-                      INVOICE_STATUS,
-                    )}
-                  />
-                );
-              };
-            }
-            if (item.dataIndex === 'payee') {
-              newItem.render = (text) => {
-                return (
-                  <BreakWordDiv
-                    text={enumValueToLabel(
-                      getTableCellText(text),
-                      PAYEE_OPTIONS,
-                    )}
-                  />
-                );
-              };
-            }
-            return newItem;
-          })}
-          actionRef={actionRef}
-          cardBordered
-          pagination={{
-            pageSize: 10,
-          }}
-          request={async (params) => {
-            const res = await postServiceInvoiceQueryInvoice({
-              data: { ...params },
-            });
-            if (res) {
-              return {
-                data: res?.data?.data || [],
-                total: res?.data?.total || 0,
-              };
-            }
-          }}
-          columnsState={{
-            persistenceKey: 'pro-table-singe-demos',
-            persistenceType: 'localStorage',
-            defaultValue: {
-              option: { fixed: 'right', disable: true },
-            },
-            onChange(value) {
-              console.log('value: ', value);
-            },
-          }}
-          rowKey="id"
-          search={{
-            labelWidth: 'auto',
-          }}
-          options={{
-            setting: {
-              listsHeight: 400,
-            },
-          }}
-          form={{
-            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
-            syncToUrl: (values, type) => {
-              if (type === 'get') {
-                return {
-                  ...values,
-                  created_at: [values.startTime, values.endTime],
-                };
-              }
-              return values;
-            },
-          }}
-          dateFormatter="string"
-          headerTitle="发票列表"
-          scroll={{ x: 1400, y: 420 }}
-        />
+        <Tabs defaultActiveKey="1" items={tabsItems} />
       </PageContainer>
+
+      {bankImportModalVisible ? (
+        <BankImportModal
+          setVisible={setBankImportModalVisible}
+          onClose={() => {}}
+        ></BankImportModal>
+      ) : (
+        ''
+      )}
     </>
   );
 };