fix: 合同回款-文件上传多文件并行处理

src/components/FileModal/index.tsx

@@ -26,10 +26,16 @@ interface iFileModalState {
   accountName: string
   createTime: string
 }
+interface FileTable {
+  data: iFileModalState[]
+  total: number
+}
 export default function FileModal(props: iFileModalProps) {
   const { dataId = "", visible = false, onCancel, dataType = 1, showUpload = false, uploadCallBack } = props
-  const [ files, setFiles ] = useState<Array<iFileModalState>>([])
-  const [ total, setTotal ] = useState<number>(0)
+  const [ files, setFiles ] = useState<FileTable>({
+    data: [],
+    total: 0
+  })
   const [ fileList, setFileList ] = useState<UploadFile[]>([])
   const [ OSSData, setOssData ] = useState<iOSSData>({
     dir: '',
@@ -39,7 +45,7 @@ export default function FileModal(props: iFileModalProps) {
     policy: '',
     signature: ''
   })
-  let curFileIndex = 0
+  const [ uidArr, setUidArr ] = useState<string[]>([])
   useEffect(() => {
     if (props.visible) {
       initOssData()
@@ -47,46 +53,42 @@ export default function FileModal(props: iFileModalProps) {
     }
   }, [ visible ])
   const initData = async (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
-    // const { current: pageNo = 1, pageSize = consts.PAGESIZE } = pagination || {}
     const { code = -1, data = [], total = 0 } = await apiGetFileList(dataType, dataId, pageNo, pageSize)
     if (code === consts.RET_CODE.SUCCESS) {
-      setFiles(data)
-      setTotal(total)
+      setFiles({ ...files, data, total })
+      setFileList([])
+      setUidArr([])
     }
   }
 
   const saveFiles = async (newFileList: iFile[]) => {
-    console.log(newFileList)
-
-    const { code = -1 } = await apiSaveFileInfo(newFileList, consts.DATA_TYPE.RETURN, dataId)
+    const { code = -1 } = await apiSaveFileInfo(newFileList, dataType, dataId)
     if (code === consts.RET_CODE.SUCCESS) {
       initData()
       uploadCallBack && uploadCallBack()
     }
   }
 
+  useEffect(() => {
+    if (uidArr.length && uidArr.length === fileList.length) {
+      saveFiles(fileList.filter(file => file.status === 'done').map(file => ({
+        createTime: new Date(),
+        filepath: file.url,
+        filename: file.name
+      })))
+    }
+  }, [ uidArr ])
   // 上传文件改变时的状态
-  const onChange = (info: UploadChangeParam) => {
+  const onChange = async (info: UploadChangeParam) => {
     const { status } = info.file
     // if (status !== 'uploading') {
     // }
     if (status === 'done') {
-      curFileIndex++
-      if (curFileIndex === info.fileList.length) {
-        const newFileList: iFile[] = info.fileList.map(item => ({
-          createTime: new Date(),
-            filepath: item.url,
-            filename: item.name
-        }))
-        saveFiles(newFileList)
-        setFileList([])
-      } else {
-        setFileList(info.fileList)
-      }
-
+      setUidArr([ ...uidArr, info.file.uid ])
     } else if (status === 'error') {
-      message.error(`${info.file.name} 上传失败`)
+      // message.error(`${info.file.name} 上传失败`)
     }
+    setFileList(info.fileList)
   }
 
 
@@ -111,26 +113,38 @@ export default function FileModal(props: iFileModalProps) {
       key: file.url,
       OSSAccessKeyId: OSSData.accessId,
       policy: OSSData.policy,
-      Signature: OSSData.signature
+      signature: OSSData.signature
     }
   }
 
 
   // 上传前的回调
   const beforeUpload = (file: any) => new Promise<File>((resolve, reject) => {
+
     const { UPLOAD_LIMIT } = consts
     const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
+
     if (!isLt30M) {
+      file.status = 'error'
       message.error("上传附件大小限制在30MB")
-      reject()
+      return reject()
     }
     const expire = parseInt(OSSData.expire) * 1000
     if (expire < Date.now()) {
       initOssData()
-      reject()
+      file.status = 'error'
+      return reject()
     }
+
+    const reg = new RegExp(consts.UPLOAD_WHITE)
+    if (!reg.test(file.name)) {
+      file.status = 'error'
+      message.error('不支持该类型文件')
+      return reject()
+    }
+
     file.url = OSSData.dir + file.name
-    resolve(file)
+    return resolve(file)
   })
 
   // 移除文件
@@ -209,7 +223,7 @@ export default function FileModal(props: iFileModalProps) {
           : ''
       }
       <Table
-        dataSource={files}
+        dataSource={files.data}
         columns={columns}
         rowKey={record => record.id}
         bordered
@@ -218,9 +232,8 @@ export default function FileModal(props: iFileModalProps) {
           size: "small",
           pageSize: consts.PAGE_SIZE,
           onChange: (page, pageSize) => initData(page, pageSize),
-          total
+          total: files.total
         }}
-      // onChange={(pagination) => initData(pagination)}
       />
     </Modal>
   )

src/components/OssUpload/index.tsx

@@ -7,7 +7,7 @@ import { Button, message, Modal, Upload } from 'antd'
 import { ModalProps } from 'antd/lib/modal'
 import { UploadChangeParam } from 'antd/lib/upload'
 import { UploadFile } from 'antd/lib/upload/interface'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 const { Dragger } = Upload
 
 interface iUploadModalProps extends ModalProps {
@@ -38,9 +38,14 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
   const onChange = (info: UploadChangeParam) => {
     const { status } = info.file
     if (status === 'done') {
-      setFiles(info.fileList.map(item => ({ createTime: new Date(), filepath: item.url, filename: item.name })))
+      const newFiles = info.fileList
+        .filter(file => file.status !== 'error')
+        .map(item => ({ createTime: new Date(), filepath: item.url, filename: item.name }))
+      setFiles(newFiles)
     } else if (status === 'error') {
-      message.error(`${info.file.name} 上传失败`)
+      // console.log(info)
+
+      // message.error(`${info.file.name} 上传失败`)
     }
     setFileList(info.fileList)
 
@@ -62,31 +67,38 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
       key: file.url,
       OSSAccessKeyId: OSSData.accessId,
       policy: OSSData.policy,
-      Signature: OSSData.signature
+      signature: OSSData.signature
     }
   }
 
   // 上传前的回调
   const beforeUpload = (file: any) => new Promise<File>((resolve, reject) => {
+
     const { UPLOAD_LIMIT } = consts
     const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
+
     if (!isLt30M) {
+      file.status = 'error'
       message.error("上传附件大小限制在30MB")
-      reject()
+      return reject()
     }
     const expire = parseInt(OSSData.expire) * 1000
     if (expire < Date.now()) {
       initOssData()
-      reject()
+      file.status = 'error'
+      message.error('签名已过期，请联系管理员')
+      return reject()
     }
 
     const reg = new RegExp(consts.UPLOAD_WHITE)
     if (!reg.test(file.name)) {
-      reject()
+      file.status = 'error'
+      message.error('不支持该类型文件')
+      return reject()
     }
 
     file.url = OSSData.dir + file.name
-    resolve(file)
+    return resolve(file)
   })
 
   // 移除文件
@@ -119,7 +131,10 @@ const UploadModal: React.FC<iUploadModalProps> = (props) => {
         data={getExtraData}
         onRemove={onRemove}
         onPreview={(file) => {
-          window.open(consts.OSS_PATH.REVIEW + file.url)
+          const status = file.status
+          if (status && status === 'success' || status === 'done') {
+            window.open(consts.OSS_PATH.REVIEW + file.url)
+          }
         }}
 
       >