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

import { contractStore } 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'

interface iFileState {
  id: string
  filename: string
  filepath: string
  accountName: string
  createTime: string
}

const File: React.FC<{ type: 'income' | 'expenditure' }> = ({ type }) => {
  const [ data, setData ] = useState<Array<iFileState>>([])
  const [ total, setTotal ] = useState<number>(0)
  const [ id, setId ] = useState<string>('')
  const [ pagination, setPagination ] = useState({
    pageNo: 1,
    pageSize: 7
  })
  useEffect(() => {
    if (contractStore.contract.id) {
      if (contractStore.contract.id !== id) {
        setId(contractStore.contract.id)
        initData()
      } else if (contractStore.shouldUpdate && contractStore.shouldUpdate === '3') {
        initData(pagination.pageNo, pagination.pageSize)
      }
      contractStore.shouldUpdate && (contractStore.changeUpdate(''))
    }
  }, [ contractStore.contract.id, contractStore.shouldUpdate ])

  const initData = async (pageNo: number = 1, pageSize: number = 7) => {
    setPagination({ ...pagination, pageNo, pageSize })
    const { code = -1, data = [], total = 0 } = await apiGetFileList(type === 'income' ? consts.DATA_TYPE.CONTRACT_RETURN : consts.DATA_TYPE.CONTRACT_PAID, contractStore.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)
    if (code === consts.RET_CODE.SUCCESS) {
      const newData = data.filter((file: iFileState) => file.id !== id)
      setData(newData)
    }
  }
  const columns: ColumnsType<iFileState> = [
    {
      dataIndex: 'sort',
      // eslint-disable-next-line react/display-name
      render: (_: any, record: iFileState, idx: number) => <span>{idx + 1}</span>,
      width: 5
    },
    {
      title: '名称',
      dataIndex: 'filename',
      // eslint-disable-next-line react/display-name
      render: (text: string, record: iFileState) => <a href={consts.OSS_PATH.REVIEW + record.filepath} target="_blank" rel="noopener noreferrer">{text}</a>,
      width: 50
    },
    {
      title: '上传者',
      dataIndex: 'accountName',
      width: 10
    },
    {
      title: '上传时间',
      dataIndex: 'createTime',
      // eslint-disable-next-line react/display-name
      render: (time: string) => <span>{dayjsFormat(time, 'YYYY-MM-DD')}</span>,
      width: 20
    },
    {
      title: '操作',
      dataIndex: 'opreate',
      // eslint-disable-next-line react/display-name
      render: (_: string, record: iFileState) => {
        return <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
    }
  ]
  return (
    <Table
      dataSource={data}
      columns={columns}
      bordered
      rowKey={record => record.id}
      pagination={{
        hideOnSinglePage: true,
        size: "small",
        pageSize: 7,
        onChange: (page, pageSize) => initData(page, pageSize),
        total
      }}
    />
  )
}

export default observer(File)