fix: 修复tenderid在leftSide跳转丢失id的问题

package.json

@@ -179,7 +179,7 @@
     "@ant-design/icons": "^4.2.2",
     "antd": "^4.6.4",
     "axios": "^0.20.0",
-    "dayjs": "^1.9.5",
+    "dayjs": "^1.9.6",
     "mobx": "^5.15.4",
     "mobx-react": "^6.1.7",
     "nprogress": "^0.2.0",

src/components/LeftSide/index.tsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import "./index.scss"
 
 const leftSide:React.FC<iNavSide> = ({ childRoutes, location }) => {
+
   if (location.state?.id) {
     tenderStore.saveBidsectionId(location.state?.id)
   }

src/components/OssUpload/ali-oss.ts

@@ -3,6 +3,6 @@ import request from "@/utils/common/request"
 
 // 获取签名
 export async function getSignature() {
-  const { data } = await request.get('')
+  const { data } = await request.get('/api/oss/signature')
   return data
 }

src/components/OssUpload/index.tsx

@@ -4,8 +4,10 @@ import { 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, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { getSignature } from './ali-oss'
+const { Dragger } = Upload
+
 interface iOSSData {
   dir: string;
   expire: string;
@@ -27,7 +29,11 @@ const UploadModal:React.FC<ModalProps> = (props) => {
     policy: '',
     signature: ''
   })
-  const { Dragger } = Upload
+  useEffect(() => {
+    if (props.visible) {
+      initOssData()
+    }
+  }, [ props.visible ])
   // 上传文件改变时的状态
   const onChange = (info: UploadChangeParam) => {
     const { status } = info.file
@@ -35,9 +41,16 @@ const UploadModal:React.FC<ModalProps> = (props) => {
       console.log(info.file, info.fileList)
     }
     if (status === 'done') {
-      message.success(`${info.file.name} file uploaded successfully.`)
+      // message.success(`${info.file.name} 上传成功!`)
+      const newFileList = info.fileList.map((item: UploadFile) => {
+        return {
+          createTime: item.lastModified,
+          filepath: item.url,
+          filename: item.name
+        }
+      })
     } else if (status === 'error') {
-      message.error(`${info.file.name} file upload failed.`)
+      message.error(`${info.file.name} 上传失败!`)
     }
   }
   // 初始化、获取签名
@@ -70,15 +83,29 @@ const UploadModal:React.FC<ModalProps> = (props) => {
     return file
   }
   // 上传前的回调
-  const beforeUpload = () => {
+  const beforeUpload = (file: any) => {
+    console.log(1111)
+
+    const { UPLOAD_LIMIT } = consts
+    const isLt30M = file.size / 1024 / 1024 < UPLOAD_LIMIT
+    if (!isLt30M) {
+      message.error("上传附件大小限制在30MB!")
+      return false
+    }
     const expire = parseInt(OSSData.expire) * 1000
     if (expire < Date.now()) {
       initOssData()
+      return false
     }
     return true
   }
+
+  // 移除文件
+  const onRemove = (file: any) => {
+    console.log(file)
+  }
   return (
-    <Modal {...props}>
+    <Modal {...props} title="上传附件" getContainer={false}>
       <Dragger
         name="file"
         action={OSSData.host}
@@ -87,11 +114,13 @@ const UploadModal:React.FC<ModalProps> = (props) => {
         beforeUpload={beforeUpload}
         data={getExtraData}
         transformFile={transformFile}
+        // accept={consts.UPLOAD_WHITE}
+        onRemove={onRemove}
         >
         <p className="ant-upload-drag-icon">
         <InboxOutlined />
         </p>
-        <p className="ant-upload-text">请点击或者拖动文件至此区域进行上传</p>
+        <p className="ant-upload-text">把文件拖入指定区域，完成上传，同样支持点击上传。</p>
         <p className="ant-upload-hint">
           支持单文件/多文件上传。附件大小最大为30MB！
         </p>

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

@@ -0,0 +1,10 @@
+import request from "@/utils/common/request"
+
+/**
+ * 获取安全巡检详情
+ * @param id - 安全巡检id
+ */
+export async function apiGetSafeDetail(id: string) {
+  const { data } = await request.get('/api/safe/detail', { id })
+  return data
+}

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

@@ -1,14 +1,67 @@
-import { ZhSubmitButton, ZhUploadButton } from '@/components/Button'
+import { ZhCloseButton, 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 consts from '@/utils/consts'
 import { dayjsFomrat } from '@/utils/util'
 import { Button, Input, Tooltip } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
-import React from 'react'
+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 styles from './index.module.scss'
-const Detail:React.FC<{}> = () => {
+const { TextArea } = Input
+interface iDetailState {
+  auditName: string
+  auditors: any[]
+  bidsectionId: string
+  code: string
+  createTime: string | undefined
+  demand: string
+  files: any[]
+  id: string
+  inspection: string
+  inspectionDetail: string
+  position: string
+  status: number
+}
+const Detail:React.FC<RouteComponentProps> = (props) => {
+  const [ visible, setVisible ] = useState<boolean>(false)
+  const [ detail, setDetail ] = useState<iDetailState>({
+    auditName: "",
+    auditors: [],
+    bidsectionId: "",
+    code: "",
+    createTime: "",
+    demand: "",
+    files: [],
+    id: "",
+    inspection: "",
+    inspectionDetail: "",
+    position: "",
+    status: 0
+  })
+
+  useEffect(() => {
+    initData()
+  }, [])
+  useActivate(() => initData())
+  const initData = async() => {
+    const { saveId = "" } = props.location.state as any
+    const { code = -1, data = {} } = await apiGetSafeDetail(saveId)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setDetail({ ...detail, ...data })
+    }
+  }
+  // const onCreate = () => {
+  //   setDetail({
+
+  //   })
+  // }
   return (
     <div className="wrap-contaniner">
       <Header title="安全巡检">
@@ -20,7 +73,7 @@ const Detail:React.FC<{}> = () => {
       </Header>
       <div className={styles.detailContainer}>
         <div className={styles.content}>
-          <h4 className={styles.header}>WC-202008-0001</h4>
+          <h4 className={styles.header}>{detail.code}</h4>
           <table className="pi-table pi-bordered">
             <thead>
               <tr>
@@ -28,11 +81,14 @@ const Detail:React.FC<{}> = () => {
               </tr>
             </thead>
             <tbody>
-              <tr><th style={{ width: "150px" }}>检查项目</th><td><Input.TextArea></Input.TextArea></td></tr>
-              <tr><th style={{ width: "150px" }}>现场检查情况</th><td><Input.TextArea></Input.TextArea></td></tr>
-              <tr><th style={{ width: "150px" }}>处理要求及措施</th><td><Input.TextArea></Input.TextArea></td></tr>
-              <tr><th style={{ width: "150px" }}>检查日期</th><td><DatePicker size="small" locale={locale} allowClear></DatePicker></td></tr>
-              <tr><th style={{ width: "150px" }}>质检员</th><td>布尔</td></tr>
+              <tr><th style={{ width: "150px" }}>检查项目</th><td><TextArea value={detail.inspection}></TextArea></td></tr>
+              <tr><th style={{ width: "150px" }}>现场检查情况</th><td><TextArea value={detail.inspectionDetail}></TextArea></td></tr>
+              <tr><th style={{ width: "150px" }}>处理要求及措施</th><td><TextArea value={detail.demand}></TextArea></td></tr>
+              <tr>
+                <th style={{ width: "150px" }}>检查日期</th>
+                <td><DatePicker size="small" locale={locale} allowClear={false} value={dayjs(detail.createTime)} onChange={(value) => setDetail({ ...detail, createTime: value?.format() })}></DatePicker></td>
+              </tr>
+              <tr><th style={{ width: "150px" }}>质检员</th><td>{detail.auditName}</td></tr>
             </tbody>
           </table>
           <table className="pi-table pi-bordered mt-3">
@@ -46,7 +102,7 @@ const Detail:React.FC<{}> = () => {
               </tr>
             </thead>
             <tbody>
-              <tr><td colSpan={5}><ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload"/>}>上传附件</ZhUploadButton></td></tr>
+              <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>
@@ -61,6 +117,17 @@ const Detail:React.FC<{}> = () => {
           </table>
         </div>
       </div>
+      <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>}
+        >
+      </OssUploadModal>
     </div>
   )
 }

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

@@ -45,8 +45,8 @@ const SafeList:React.FC<{}> =() => {
       title: '编号',
       dataIndex: 'code',
       // eslint-disable-next-line react/display-name
-      render: (text: string) => {
-        return <Link to={{ pathname: "/console/safe/content/detail", state: { id: tenderStore.bidsectionId } }}>{text}</Link>
+      render: (text: string, record) => {
+        return <Link to={{ pathname: "/console/safe/content/detail", state: { id: tenderStore.bidsectionId, saveId: record.id } }}>{text}</Link>
       }
     },
     {

src/utils/consts.ts

@@ -10,6 +10,8 @@ export default {
   TOKEN_WHITE_LIST: [ '/api/login' ], // 不需要设置token的白名单
   RET_CODE: { SUCCESS: 0, FAIL: 1, TOKEN_UNDEFINED: 19, TOKEN_EXPIRED: 1 }, // 接口返回状态码
   RETRY: { COUNT: 3, DELAY: 1000 }, // 请求重试次数/间隙
-  RULE: { SAFE: 'safeRule', QUALITY: 'qualityRule', CONTRACT: 'contractRule' } // 规则弹窗常量
+  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
 }