feat:附件删除时使用Popconfirm进行提示是否删除

src/pages/Contract/Content/Income/components/Tabs/File/index.tsx

@@ -2,6 +2,7 @@ import { contractReturnStore } from '@/store/mobx'
 import { apiDelFile, apiGetFileList } from '@/utils/common/api'
 import consts from '@/utils/consts'
 import { dayjsFormat } from '@/utils/util'
+import { Popconfirm } from 'antd'
 import Table, { ColumnsType } from 'antd/lib/table'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
@@ -14,7 +15,7 @@ interface iFileState {
   createTime: string
 }
 
-const File:React.FC<{}> = () => {
+const File: React.FC<{}> = () => {
   const [ data, setData ] = useState<Array<iFileState>>([])
   const [ total, setTotal ] = useState<number>(0)
   const [ id, setId ] = useState<string>('')
@@ -29,15 +30,18 @@ const File:React.FC<{}> = () => {
       contractReturnStore.shouldUpdate && (contractReturnStore.changeUpdate(''))
     }
   }, [ contractReturnStore.contract.id, contractReturnStore.shouldUpdate ])
-  const initData = async(pageNo: number = 1, pageSize: number = 7) => {
+
+  const initData = async (pageNo: number = 1, pageSize: number = 7) => {
     const { code = -1, data = [], total = 0 } = await apiGetFileList(consts.DATA_TYPE.CONTRACT_RETURN, contractReturnStore.contract.id, pageNo, pageSize)
     if (code === consts.RET_CODE.SUCCESS) {
+
       setData(data)
       setTotal(total)
     }
   }
-  const deleteFile = async(id: string) => {
-    const { code = -1 }  = await apiDelFile(id)
+
+  const deleteFile = async (id: string) => {
+    const { code = -1 } = await apiDelFile(id)
     if (code === consts.RET_CODE.SUCCESS) {
       const newData = data.filter((file: iFileState) => file.id !== id)
       setData(newData)
@@ -47,7 +51,7 @@ const File:React.FC<{}> = () => {
     {
       dataIndex: 'sort',
       // eslint-disable-next-line react/display-name
-      render: (_:any, record: iFileState, idx: number) => <span>{idx+1}</span>,
+      render: (_: any, record: iFileState, idx: number) => <span>{idx + 1}</span>,
       width: 5
     },
     {
@@ -73,11 +77,13 @@ const File:React.FC<{}> = () => {
       title: '操作',
       dataIndex: 'opreate',
       // eslint-disable-next-line react/display-name
-      render:(_: string, record: iFileState) => {
+      render: (_: string, record: iFileState) => {
         return <div>
-        <a className="pi-mg-right-5" download href={consts.OSS_PATH.DOWNLOAD + record.filepath}>下载</a>
-        <span className="pi-link-red" onClick={() => deleteFile(record.id)}>删除</span>
-      </div>
+          <a className="pi-mg-right-5" download href={consts.OSS_PATH.DOWNLOAD + record.filepath}>下载</a>
+          <Popconfirm title="确认删除?" cancelText="取消" okText="确认" okButtonProps={{ danger: true }} onConfirm={() => deleteFile(record.id)}>
+            <span className="pi-link-red pi-mg-left-5">删除</span>
+          </Popconfirm>
+        </div>
       },
       width: 15
     }
@@ -95,7 +101,7 @@ const File:React.FC<{}> = () => {
         onChange: (page, pageSize) => initData(page, pageSize),
         total
       }}
-       />
+    />
   )
 }
 

src/pages/Contract/Content/Spending/components/Tabs/File/index.tsx

@@ -2,6 +2,7 @@ import { contractPaidStore } from '@/store/mobx'
 import { apiDelFile, apiGetFileList } from '@/utils/common/api'
 import consts from '@/utils/consts'
 import { dayjsFormat } from '@/utils/util'
+import { Popconfirm } from 'antd'
 import Table, { ColumnsType } from 'antd/lib/table'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
@@ -14,7 +15,7 @@ interface iFileState {
   createTime: string
 }
 
-const File:React.FC<{}> = () => {
+const File: React.FC<{}> = () => {
   const [ data, setData ] = useState<Array<iFileState>>([])
   const [ total, setTotal ] = useState<number>(0)
   const [ id, setId ] = useState<string>('')
@@ -29,15 +30,15 @@ const File:React.FC<{}> = () => {
       contractPaidStore.shouldUpdate && (contractPaidStore.changeUpdate(''))
     }
   }, [ contractPaidStore.contract.id, contractPaidStore.shouldUpdate ])
-  const initData = async(pageNo: number = 1, pageSize: number = 7) => {
+  const initData = async (pageNo: number = 1, pageSize: number = 7) => {
     const { code = -1, data = [], total = 0 } = await apiGetFileList(consts.DATA_TYPE.CONTRACT_PAID, contractPaidStore.contract.id, pageNo, pageSize)
     if (code === consts.RET_CODE.SUCCESS) {
       setData(data)
       setTotal(total)
     }
   }
-  const deleteFile = async(id: string) => {
-    const { code = -1 }  = await apiDelFile(id)
+  const deleteFile = async (id: string) => {
+    const { code = -1 } = await apiDelFile(id)
     if (code === consts.RET_CODE.SUCCESS) {
       const newData = data.filter((file: iFileState) => file.id !== id)
       setData(newData)
@@ -47,7 +48,7 @@ const File:React.FC<{}> = () => {
     {
       dataIndex: 'sort',
       // eslint-disable-next-line react/display-name
-      render: (_:any, record: iFileState, idx: number) => <span>{idx+1}</span>,
+      render: (_: any, record: iFileState, idx: number) => <span>{idx + 1}</span>,
       width: 5
     },
     {
@@ -73,11 +74,14 @@ const File:React.FC<{}> = () => {
       title: '操作',
       dataIndex: 'opreate',
       // eslint-disable-next-line react/display-name
-      render:(_: string, record: iFileState) => {
+      render: (_: string, record: iFileState) => {
         return <div>
-        <a className="pi-mg-right-5" download href={consts.OSS_PATH.DOWNLOAD + record.filepath}>下载</a>
-        <span className="pi-link-red" onClick={() => deleteFile(record.id)}>删除</span>
-      </div>
+          <a className="pi-mg-right-5" download href={consts.OSS_PATH.DOWNLOAD + record.filepath}>下载</a>
+          <Popconfirm title="确认删除?" cancelText="取消" okText="确认" okButtonProps={{ danger: true }} onConfirm={() => deleteFile(record.id)}>
+            <span className="pi-link-red pi-mg-left-5">删除</span>
+          </Popconfirm>
+          {/* <span className="pi-link-red" onClick={() => deleteFile(record.id)}>删除</span> */}
+        </div>
       },
       width: 15
     }
@@ -95,7 +99,7 @@ const File:React.FC<{}> = () => {
         onChange: (page, pageSize) => initData(page, pageSize),
         total
       }}
-       />
+    />
   )
 }