1

src/pages/piles/components/TempFormModal.tsx

@@ -0,0 +1,64 @@
+/*
+ * @Note:
+ * @Author: 2058827620@qq.com
+ * @Date: 2022-04-03 17:02:15
+ */
+
+import { Divider, Modal, Upload, Button, UploadProps, UploadFile } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
+
+
+export default ({ modalOpenState, onModalOpenState, onSubmit }) => {
+
+  const [fileList, setFileList] = useState([]);
+  const [uploading, setUploading] = useState(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,
+  };
+
+  const handleUpload = () => {
+    const formData = new FormData();
+    fileList.forEach((file) => {
+      formData.append('file', file);
+    });
+    onSubmit(formData)
+    setFileList([])
+  };
+
+  return (
+    <>
+      <Modal title="导入提现结果" open={modalOpenState} onCancel={() => {
+        onModalOpenState(false)
+      }} onOk={handleUpload} footer={(_, { OkBtn, CancelBtn }) => (
+        <>
+          <CancelBtn />
+          <OkBtn />
+        </>
+      )}>
+        <div className='flex'>
+          <Upload className='mr-6' {...props}>
+            <Button icon={<UploadOutlined />}>选择文件</Button>
+          </Upload>
+          <Button icon={<DownloadOutlined />} onClick={() => {
+            window.open('https://zhongshuai-test.oss-cn-beijing.aliyuncs.com/upload/20240911/11ecca80-3f06-43c9-9c63-e9a9e4ef0173.xlsx');
+          }}>下载模板</Button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+

src/pages/piles/index.tsx

@@ -1,17 +1,28 @@
-import { devicePage } from '@/services/piles';
+import { devicePage,importDeviceData } from '@/services/piles';
 import { exportData } from '@/utils/func';
 import React, { useRef, useEffect, useState } from 'react';
 import { useIntl, useAccess } from '@umijs/max';
 import { message, Tag, Image, Button, Select } from 'antd';
 import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
 import BonusFormModal from './components/BonusFormModal';
-
+import TempFormModal from './components/TempFormModal';
 
 const LogTableList: React.FC = () => {
     const actionRef = useRef<ActionType>();
     const [searchParams, setSearchParams] = useState(null);
     const [bonusFormModal, setBonusFormModal] = useState(false);
     const [row, setRow] = useState();
+    const [tempFormModal, setTempFormModal] = useState(false);
+
+
+    const handleTemp = async (fields) => {
+        const { success } = await importDeviceData(fields);
+        if (success) {
+            message.success('导入成功');
+            actionRef.current?.reload();
+            setTempFormModal(false);
+        }
+    };
 
     const columns = [
         {
@@ -115,6 +126,11 @@ const LogTableList: React.FC = () => {
                     modalOpenState={bonusFormModal}
                     onModalOpenState={setBonusFormModal}
                 />
+                <TempFormModal
+                    modalOpenState={tempFormModal}
+                    onModalOpenState={setTempFormModal}
+                    onSubmit={handleTemp}
+                />
                 <ProTable
                     actionRef={actionRef}
                     rowKey="id"
@@ -122,6 +138,11 @@ const LogTableList: React.FC = () => {
                     search={{
                         labelWidth: 120,
                     }}
+                    toolBarRender={() => [
+                        <Button onClick={async () => {
+                            setTempFormModal(true)
+                        }}>导入</Button>
+                    ]}
                     request={async (params, sorter, filter) => {
                         setSearchParams({ ...params });
                         let { data } = await devicePage(params)