feat: 完善附件上传弹窗

src/components/OssUpload/index.tsx

@@ -1,6 +1,8 @@
+import { ZhCloseButton } from '@/components/Button'
+import { iFile } from '@/types/file'
 import consts from '@/utils/consts'
 import { InboxOutlined } from '@ant-design/icons'
-import { message, Modal, Upload } from 'antd'
+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'
@@ -16,11 +18,20 @@ interface iOSSData {
   policy: string;
   signature: string;
 }
-// interface iUploadModalProps  {
-//   onFileChange: () => void
-//   modalProps: ModalProps
-// }
-const UploadModal:React.FC<ModalProps> = (props) => {
+interface iUploadModalProps extends ModalProps {
+  onCreate: (files: iFile[]) => void
+  onShow: (visible: boolean) => void
+}
+const UploadModal:React.FC<iUploadModalProps> = (props) => {
+  const { onCreate, onShow, ...otherProps } = props
+  const [ files, setFiles ] = useState<iFile[]>([
+    {
+      createTime: new Date(),
+      filename: '',
+      filepath: ''
+    }
+  ])
+  const [ fileList, setFileList ] = useState<Array<UploadFile>>([])
   const [ OSSData, setOssData ] = useState<iOSSData>({
     dir: '',
     expire: '',
@@ -42,13 +53,15 @@ const UploadModal:React.FC<ModalProps> = (props) => {
     }
     if (status === 'done') {
       // message.success(`${info.file.name} 上传成功!`)
-      const newFileList = info.fileList.map((item: UploadFile) => {
+      setFileList([ ...fileList, ...info.fileList ])
+      const newFileList: iFile[] = info.fileList.map((item: UploadFile) => {
         return {
-          createTime: item.lastModified,
+          createTime: new Date(),
           filepath: item.url,
           filename: item.name
         }
       })
+      setFiles(newFileList)
     } else if (status === 'error') {
       message.error(`${info.file.name} 上传失败!`)
     }
@@ -84,8 +97,6 @@ const UploadModal:React.FC<ModalProps> = (props) => {
   }
   // 上传前的回调
   const beforeUpload = (file: any) => {
-    console.log(1111)
-
     const { UPLOAD_LIMIT } = consts
     const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
     if (!isLt30M) {
@@ -105,9 +116,22 @@ const UploadModal:React.FC<ModalProps> = (props) => {
     console.log(file)
   }
   return (
-    <Modal {...props} title="上传附件" getContainer={false}>
+    <Modal
+      {...otherProps}
+      title="上传附件"
+      // getContainer={false}
+      footer={
+        <div className="pi-flex-row pi-justify-end">
+          <ZhCloseButton onClick={() => onShow(false)} size="small" className="pi-mg-right-5">关闭</ZhCloseButton>
+          <Button type="primary" size="small" onClick={() => {
+            onCreate(files)
+            setFileList([])
+          }}>确认</Button>
+        </div>}
+      >
       <Dragger
         name="file"
+        fileList={fileList}
         action={OSSData.host}
         multiple={true}
         onChange={onChange}

src/pages/Safe/Content/Detail/api.ts

@@ -1,3 +1,4 @@
+import { iFile } from "@/types/file"
 import request from "@/utils/common/request"
 
 /**
@@ -8,3 +9,14 @@ export async function apiGetSafeDetail(id: string) {
   const { data } = await request.get('/api/safe/detail', { id })
   return data
 }
+
+/**
+ *
+ * @param fileList - 附件数组
+ * @param dataType - 类型
+ * @param dataId - 数据id
+ */
+export async function apiSaveFileInfo(fileList: iFile[], dataType: number, dataId: string) {
+  const { data } = await request.post('/api/file', { fileList, dataType, dataId })
+  return data
+}

src/pages/Safe/Content/Detail/index.tsx

@@ -1,9 +1,11 @@
-import { ZhCloseButton, ZhSubmitButton, ZhUploadButton } from '@/components/Button'
+import { ZhSubmitButton, ZhUploadButton } from '@/components/Button'
 import DatePicker from '@/components/DatePicker'
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
 import OssUploadModal from '@/components/OssUpload'
 import SvgIcon from '@/components/SvgIcon'
+import { userStore } from '@/store/mobx'
+import { iFile } from '@/types/file'
 import consts from '@/utils/consts'
 import { dayjsFomrat } from '@/utils/util'
 import { Button, Input, Tooltip } from 'antd'
@@ -12,7 +14,7 @@ import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
 import { useActivate } from 'react-activation'
 import { RouteComponentProps } from 'react-router'
-import { apiGetSafeDetail } from './api'
+import { apiGetSafeDetail, apiSaveFileInfo } from './api'
 import styles from './index.module.scss'
 const { TextArea } = Input
 interface iDetailState {
@@ -57,11 +59,17 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
       setDetail({ ...detail, ...data })
     }
   }
-  // const onCreate = () => {
-  //   setDetail({
-
-  //   })
-  // }
+  const onCreate = async (fileList: iFile[]) => {
+    const { code = -1 } = await apiSaveFileInfo(fileList, consts.DATA_TYPE.SAFE, detail.id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      const newFiles = detail.files.concat(fileList.map(file => {
+        return { ...file, accountName: userStore.userInfo.name }
+      }))
+      setDetail({ ...detail, files: newFiles })
+      setVisible(false)
+    }
+  }
+  const onShow = (show: boolean) => setVisible(show)
   return (
     <div className="wrap-contaniner">
       <Header title="安全巡检">
@@ -103,16 +111,23 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
             </thead>
             <tbody>
               <tr><td colSpan={5}><ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload"/>} onClick={() => setVisible(true)}>上传附件</ZhUploadButton></td></tr>
-              <tr>
-                <td style={{ width: 70 }}>1</td>
-                <td><span className="pi-link-blue">安全检查附件.pdf</span></td>
-                <td className="pi-text-center">布尔</td><td className="pi-text-center">{dayjsFomrat("2020-08-01 13:21:33")}</td>
-                <td style={{ width: 90 }} className="pi-text-center">
-                  <Tooltip title="移除">
-                    <Button size="small" type="text" icon={<SvgIcon type="xxh-times-circle1"/>} style={{ color: "#df3f45" }}></Button>
-                  </Tooltip>
-                </td>
-              </tr>
+
+              {
+                detail.files.map((file, idx) => {
+                  return (
+                    <tr key={idx}>
+                      <td style={{ width: 70 }}>1</td>
+                      <td><span className="pi-link-blue">{file.filename}</span></td>
+                      <td className="pi-text-center">{file.accountName}</td><td className="pi-text-center">{dayjsFomrat(file.createTime)}</td>
+                      <td style={{ width: 90 }} className="pi-text-center">
+                        <Tooltip title="移除">
+                          <Button size="small" type="text" icon={<SvgIcon type="xxh-times-circle1"/>} style={{ color: "#df3f45" }}></Button>
+                        </Tooltip>
+                      </td>
+                    </tr>
+                  )
+                })
+              }
             </tbody>
           </table>
         </div>
@@ -120,12 +135,8 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
       <OssUploadModal
         visible={visible}
         onCancel={() => setVisible(false)}
-        // onOk={}
-        footer={
-        <div className="pi-flex-row pi-justify-end">
-          <ZhCloseButton onClick={() => setVisible(false)} size="small" className="pi-mg-right-5">关闭</ZhCloseButton>
-          <Button type="primary" size="small">确认</Button>
-        </div>}
+        onCreate={onCreate}
+        onShow={onShow}
         >
       </OssUploadModal>
     </div>

src/types/file.d.ts

@@ -0,0 +1,5 @@
+export interface iFile {
+  createTime?: Date
+  filepath?: string
+  filename?: string
+}

src/utils/consts.ts

@@ -12,6 +12,7 @@ export default {
   RETRY: { COUNT: 3, DELAY: 1000 }, // 请求重试次数/间隙
   RULE: { SAFE: 'safeRule', QUALITY: 'qualityRule', CONTRACT: 'contractRule' }, // 编号规则弹窗常量
   UPLOAD_WHITE: "'.json', '.txt','.xls', '.xlsx','.doc', '.docx','.pdf','.ppt', '.pptx','.png', '.jpg', '.jpeg', '.gif', '.bmp', '.cad', '.dwg','.zip', '.rar', '.7z'", // 上传类型-白名单
-  UPLOAD_LIMIT: 30 // 上传限制30MB
+  UPLOAD_LIMIT: 30, // 上传限制30MB
+  DATA_TYPE: { CONTRACT: 1, QUALITY: 2, SAFE: 3 } // 附件类型
 }