feat: 附件弹窗组件增加分页功能。

src/assets/css/common.scss

@@ -23,6 +23,9 @@
   color: $pi-red;
 }
 
+.pi-blue {
+  color: $pi-blue;
+}
 .pi-link-blue {
   color: $pi-blue;
   &:hover {

src/components/FileModal/api.ts

@@ -0,0 +1,11 @@
+import request from "@/utils/common/request"
+
+/**
+ * 根据类型获取附件列表
+ * @param dataType - 类型
+ * @param dataId - 数据id
+ */
+export async function apiGetFileList(dataType: number, dataId: string, pageNo: number, pageSize: number) {
+  const { data } = await request.get('/api/file', { dataType, dataId, pageNo, pageSize })
+  return data
+}

src/components/FileModal/index.tsx

@@ -0,0 +1,98 @@
+import SvgIcon from '@/components/SvgIcon'
+import consts from '@/utils/consts'
+import { dayjsFomrat } from '@/utils/util'
+import { Modal, Table } from 'antd'
+import { ColumnsType } from 'antd/lib/table'
+import React, { useEffect, useState } from 'react'
+import { ZhCloseButton } from '../Button'
+import { apiGetFileList } from './api'
+interface iFileModalProps {
+  dataId: string
+  visible: boolean
+  dataType: number
+  onCancel: () => void
+}
+interface iFileModalState {
+  id: string
+  filename: string
+  filepath: string
+  accountName: string
+  createTime: string
+}
+export default function FileModal(props: iFileModalProps) {
+  const { dataId = "", visible = false, onCancel, dataType = 1 } = props
+  const [ files, setFiles ] = useState<Array<iFileModalState>>([])
+  const [ total, setTotal ] = useState<number>(0)
+  useEffect(() => {
+    visible && initData()
+  }, [ 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)
+    }
+  }
+  // const onTableChange = (pagination: TablePaginationConfig) => {
+
+  // }
+  const columns: ColumnsType<iFileModalState> = [
+    {
+      title: "文件名",
+      dataIndex: "filepath",
+      width: 287,
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 287,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow:'ellipsis',
+            cursor:'pointer'
+          }
+        }
+      },
+      // eslint-disable-next-line react/display-name
+      render: (path: string, record: iFileModalState) => <a href={consts.OSS_PATH.REVIEW + path} target="_blank" rel="noopener noreferrer">{record.filename}</a>
+    },
+    {
+      title: "上传人",
+      dataIndex: "accountName"
+    },
+    {
+      title: "上传时间",
+      dataIndex: "createTime",
+      // eslint-disable-next-line react/display-name
+      render: text => <span>{dayjsFomrat(text, "YYYY-MM-DD")}</span>
+    },
+    {
+      title: "操作",
+      // eslint-disable-next-line react/display-name
+      render: (_, record) => <a href={consts.OSS_PATH.DOWNLOAD + record.filepath} download><SvgIcon type="xxh-download"></SvgIcon></a>
+    }
+  ]
+  return (
+    <Modal
+      title="附件"
+      getContainer={false}
+      visible={visible}
+      onCancel={onCancel}
+      footer={<ZhCloseButton onClick={() => onCancel()} size="small">关闭</ZhCloseButton>}
+      >
+      <Table
+        dataSource={files}
+        columns={columns}
+        rowKey={record => record.id}
+        bordered
+        pagination={{
+          size: "small",
+          pageSize: consts.PAGE_SIZE,
+          onChange: (page, pageSize) => initData(page, pageSize),
+          total
+        }}
+        // onChange={(pagination) => initData(pagination)}
+        ></Table>
+    </Modal>
+  )
+}

src/components/OssUpload/index.tsx

@@ -42,6 +42,7 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
   })
   useEffect(() => {
     if (props.visible) {
+      setFileList([])
       initOssData()
     }
   }, [ props.visible ])
@@ -49,7 +50,7 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
   const onChange = (info: UploadChangeParam) => {
     const { status } = info.file
     if (status !== 'uploading') {
-      console.log(info.file, info.fileList)
+      // console.log(info.file, info.fileList)
     }
     if (status === 'done') {
       // message.success(`${info.file.name} 上传成功!`)
@@ -123,10 +124,7 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
       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>
+          <Button type="primary" size="small" onClick={() => onCreate(files)}>确认</Button>
         </div>}
       >
       <Dragger

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

@@ -116,10 +116,10 @@ const Detail:React.FC<RouteComponentProps> = (props) => {
                 detail.files.map((file, idx) => {
                   return (
                     <tr key={idx}>
-                      <td style={{ width: 70 }}>1</td>
+                      <td className="pi-width-70">{idx+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">
+                      <td className="pi-text-center pi-width-90">
                         <Tooltip title="移除">
                           <Button size="small" type="text" icon={<SvgIcon type="xxh-times-circle1"/>} style={{ color: "#df3f45" }}></Button>
                         </Tooltip>

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

@@ -1,3 +1,4 @@
+import FileModal from '@/components/FileModal'
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
 import RuleModal from '@/components/RuleModal'
@@ -32,7 +33,31 @@ interface iModal {
   loading: boolean
 }
 
+interface iFileModal {
+  visible: boolean
+  dataType: number
+  dataId: string
+}
 const SafeList:React.FC<{}> =() => {
+  const [ ruleModal, setRuleModal ] = useState<iModal>({
+    visible: false,
+    loading: false
+  })
+  const [ addModal, setAddModal ] = useState<iModal>({
+    visible: false,
+    loading: false
+  })
+  const [ fileModal, setFileModal ] = useState<iFileModal>({
+    visible: false,
+    dataType: consts.DATA_TYPE.SAFE,
+    dataId: ''
+  })
+  useEffect(() => {
+    initData()
+  }, [])
+  useActivate(() => {
+    initData()
+  })
   const columns:ColumnsType<iSafeList> = [
     {
       title: '序号',
@@ -77,8 +102,8 @@ const SafeList:React.FC<{}> =() => {
       title: '附件',
       dataIndex: 'fileCounts',
       // eslint-disable-next-line react/display-name
-      render: (text: string) => {
-      return <span><SvgIcon type="xxh-paperclip1"></SvgIcon> {text}</span>
+      render: (text: string, record) => {
+      return <span className="pi-pointer" onClick={() => setFileModal({ ...fileModal, dataId: record.id, visible: true })}><SvgIcon type="xxh-paperclip1"></SvgIcon> {text}</span>
       }
     },
     {
@@ -89,7 +114,6 @@ const SafeList:React.FC<{}> =() => {
       return <span className={safeStatus[statu].className}>{safeStatus[statu].text}</span>
       }
     }
-
   ]
   const [ list, setList ] = useState<iSafeList[]>([
     {
@@ -105,26 +129,14 @@ const SafeList:React.FC<{}> =() => {
       fileCounts: 0
     }
   ])
-  useEffect(() => {
-    initData()
-  }, [])
-  useActivate(() => {
-    initData()
-  })
+
   const initData = async () => {
     const { code = -1, data = [] } = await apiSafeList(tenderStore.bidsectionId)
     if (code === consts.RET_CODE.SUCCESS) {
       setList(data)
     }
   }
-  const [ ruleModal, setRuleModal ] = useState<iModal>({
-    visible: false,
-    loading: false
-  })
-  const [ addModal, setAddModal ] = useState<iModal>({
-    visible: false,
-    loading: false
-  })
+
   const onRuleCreate = async (ruleValue: any) => {
     setRuleModal({ ...ruleModal, loading: true })
     const { code = -1 } = await apiSaveRule({ bidsectionId: tenderStore.bidsectionId, type: 'safe_rule', rule: ruleValue })
@@ -181,6 +193,12 @@ const SafeList:React.FC<{}> =() => {
         onCancel={() => setAddModal({ ...addModal, visible: false })}
         >
       </AddModel>
+      <FileModal
+        visible={fileModal.visible}
+        dataType={fileModal.dataType}
+        dataId={fileModal.dataId}
+        onCancel={() => setFileModal({ ...fileModal, visible: false })}
+      ></FileModal>
     </div>
   )
 }

src/utils/consts.ts

@@ -13,6 +13,11 @@ export default {
   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
-  DATA_TYPE: { CONTRACT: 1, QUALITY: 2, SAFE: 3 } // 附件类型
+  DATA_TYPE: { CONTRACT: 1, QUALITY: 2, SAFE: 3 }, // 附件类型
+  PAGE_SIZE: 10, // 默认页数
+  OSS_PATH: {
+    REVIEW: 'https://file-upload.6jlzf.cn/',
+    DOWNLOAD: 'https://measuresaas.oss-cn-shenzhen.aliyuncs.com/'
+  }
 }