feat: 安全巡检详情页附件增加分页器。

src/components/FileModal/index.tsx

@@ -68,6 +68,7 @@ export default function FileModal(props: iFileModalProps) {
     },
     {
       title: "操作",
+      align: "center",
       // eslint-disable-next-line react/display-name
       render: (_, record) => <a href={consts.OSS_PATH.DOWNLOAD + record.filepath} download><SvgIcon type="xxh-download"></SvgIcon></a>
     }
@@ -86,6 +87,7 @@ export default function FileModal(props: iFileModalProps) {
         rowKey={record => record.id}
         bordered
         pagination={{
+          hideOnSinglePage: true,
           size: "small",
           pageSize: consts.PAGE_SIZE,
           onChange: (page, pageSize) => initData(page, pageSize),

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

@@ -1,5 +1,6 @@
 import { ZhSubmitButton, ZhUploadButton } from '@/components/Button'
 import DatePicker from '@/components/DatePicker'
+import { apiGetFileList } from '@/components/FileModal/api'
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
 import OssUploadModal from '@/components/OssUpload'
@@ -8,7 +9,7 @@ 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'
+import { Button, Input, Pagination, Tooltip } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
 import dayjs from 'dayjs'
 import React, { useEffect, useState } from 'react'
@@ -24,13 +25,17 @@ interface iDetailState {
   code: string
   createTime: string | undefined
   demand: string
-  files: any[]
+  file: iFileState
   id: string
   inspection: string
   inspectionDetail: string
   position: string
   status: number
 }
+interface iFileState {
+  fileList: any[]
+  total: number
+}
 const Detail:React.FC<RouteComponentProps> = (props) => {
   const [ visible, setVisible ] = useState<boolean>(false)
   const [ detail, setDetail ] = useState<iDetailState>({
@@ -40,7 +45,7 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
     code: "",
     createTime: "",
     demand: "",
-    files: [],
+    file: { fileList: [], total: 0 },
     id: "",
     inspection: "",
     inspectionDetail: "",
@@ -62,14 +67,20 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
   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 => {
+      const newFiles = detail.file.fileList.concat(fileList.map(file => {
         return { ...file, accountName: userStore.userInfo.name }
       }))
-      setDetail({ ...detail, files: newFiles })
+      setDetail({ ...detail, file: { ...detail.file, fileList: newFiles } })
       setVisible(false)
     }
   }
   const onShow = (show: boolean) => setVisible(show)
+  const fileListChange = async (pageNo: number = 1, pageSize: number = 10) => {
+    const { code = -1, data } = await apiGetFileList(consts.DATA_TYPE.SAFE,detail.id, pageNo, pageSize)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setDetail({ ...detail, file: { ...detail.file, fileList: data } })
+    }
+  }
   return (
     <div className="wrap-contaniner">
       <Header title="安全巡检">
@@ -98,6 +109,7 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
               </tr>
               <tr><th style={{ width: "150px" }}>质检员</th><td>{detail.auditName}</td></tr>
             </tbody>
+
           </table>
           <table className="pi-table pi-bordered mt-3">
             <thead>
@@ -113,11 +125,11 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
               <tr><td colSpan={5}><ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload"/>} onClick={() => setVisible(true)}>上传附件</ZhUploadButton></td></tr>
 
               {
-                detail.files.map((file, idx) => {
+                detail.file.fileList?.map((file, idx) => {
                   return (
                     <tr key={idx}>
                       <td className="pi-width-70">{idx+1}</td>
-                      <td><span className="pi-link-blue">{file.filename}</span></td>
+                      <td><a href={consts.OSS_PATH.REVIEW + file.filepath} target="_blank" rel="noopener noreferrer">{file.filename}</a></td>
                       <td className="pi-text-center">{file.accountName}</td><td className="pi-text-center">{dayjsFomrat(file.createTime)}</td>
                       <td className="pi-text-center pi-width-90">
                         <Tooltip title="移除">
@@ -128,6 +140,21 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
                   )
                 })
               }
+              <tr><td colSpan={5} className="pi-text-right">
+              {
+                detail.file.total ?
+                <Pagination
+                defaultCurrent={1}
+                size="small"
+                pageSize={consts.PAGE_SIZE}
+                hideOnSinglePage={true}
+                total={detail.file.total}
+                onChange={(page, pageSize) => fileListChange(page, pageSize)}
+                >
+              </Pagination>
+              : ''
+              }
+              </td></tr>
             </tbody>
           </table>
         </div>

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

@@ -6,8 +6,8 @@ import request from "@/utils/common/request"
  * 获取当前标段的安全巡检列表
  * @param bidsectionId 标段id
  */
-export async function apiSafeList(bidsectionId: string) {
-  const { data } = await request.get('/api/safe', { bidsectionId })
+export async function apiSafeList(bidsectionId: string, pageNo: number, pageSize: number) {
+  const { data } = await request.get('/api/safe', { bidsectionId, pageNo, pageSize })
   return data
 }
 
@@ -34,22 +34,7 @@ export async function apiGetRule(bidsectionId: string) {
  * @param payload 载荷
  */
 export async function apiSaveRule(payload: iRulePayload) {
-  // const egRule: string[] = []
-  // payload.rule?.forEach(rule => {
-  //   if (rule.type === "code") {
-  //     egRule.push(new Array(rule.value.length).fill("_").join(""))
-  //   } else {
-  //     egRule.push(rule.value)
-  //   }
-  // })
-  // console.log(egRule)
-
   const newValue = payload.rule.reduce((prev, curr) => {
-    // if (curr.type === 'code') {
-    //   prev[curr.type] = curr.value.length
-    // } else {
-    //   prev[curr.type] = curr.value
-    // }
     prev[curr.type] = curr.value
     return prev
   }, {})

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

@@ -129,11 +129,12 @@ const SafeList:React.FC<{}> =() => {
       fileCounts: 0
     }
   ])
-
-  const initData = async () => {
-    const { code = -1, data = [] } = await apiSafeList(tenderStore.bidsectionId)
+  const [ total, setTotal ] = useState<number>(0)
+  const initData = async (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
+    const { code = -1, data = [], total = 0 } = await apiSafeList(tenderStore.bidsectionId, pageNo, pageSize)
     if (code === consts.RET_CODE.SUCCESS) {
       setList(data)
+      setTotal(total)
     }
   }
 
@@ -172,7 +173,13 @@ const SafeList:React.FC<{}> =() => {
       <Table
         dataSource={list}
         columns={columns}
-        pagination={false}
+        pagination={{
+          hideOnSinglePage: true,
+          size: "small",
+          pageSize: consts.PAGE_SIZE,
+          onChange: (page, pageSize) => initData(page, pageSize),
+          total
+        }}
         rowKey={record => record.id}
         bordered
         >