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

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'
import SvgIcon from '@/components/SvgIcon'
import { userStore } from '@/store/mobx'
import { iFile } from '@/types/file'
import { apiDelFile } from '@/utils/common/api'
import consts from '@/utils/consts'
import { dayjsFormat } from '@/utils/util'
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'
import { RouteComponentProps } from 'react-router'
import { apiGetSafeDetail, apiSaveFileInfo } from './api'
import styles from './index.module.scss'
const { TextArea } = Input
interface iDetailState {
  auditName: string
  auditors: any[]
  bidsectionId: string
  code: string
  createTime: string | undefined
  demand: string
  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>({
    auditName: "",
    auditors: [],
    bidsectionId: "",
    code: "",
    createTime: "",
    demand: "",
    file: { fileList: [], total: 0 },
    id: "",
    inspection: "",
    inspectionDetail: "",
    position: "",
    status: 0
  })

  useEffect(() => {
    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 = async (fileList: iFile[]) => {
    const { code = -1 } = await apiSaveFileInfo(fileList, consts.DATA_TYPE.SAFE, detail.id)
    if (code === consts.RET_CODE.SUCCESS) {
      const newFiles = detail.file.fileList.concat(fileList.map(file => {
        return { ...file, accountName: userStore.userInfo.name }
      }))
      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 } })
    }
  }

  const delFile = async(id: string) => {
    const { code = -1 } = await apiDelFile(id)
    if (code === consts.RET_CODE.SUCCESS) {
      const newFiles = detail.file.fileList.map(file => file.id !== id)
      setDetail({ ...detail, file: { ...detail.file, fileList: newFiles } })
    }
  }
  return (
    <div className="wrap-contaniner">
      <Header title="安全巡检">
        <Slot position="right">
          <div>
            <ZhSubmitButton size="small">提交审批</ZhSubmitButton>
          </div>
        </Slot>
      </Header>
      <div className={styles.detailContainer}>
        <div className={styles.content}>
          <h4 className={styles.header}>{detail.code}</h4>
          <table className="pi-table pi-bordered">
            <thead>
              <tr>
                <th colSpan={2} className="pi-text-center">安全巡检单</th>
              </tr>
            </thead>
            <tbody>
              <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">
            <thead>
              <tr>
                <th></th>
                <th className="pi-text-center">附件</th>
                <th className="pi-text-center">上传者</th>
                <th className="pi-text-center" style={{ width: 200 }}>上传时间</th>
                <th className="pi-text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr><td colSpan={5}><ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload"/>} onClick={() => setVisible(true)}>上传附件</ZhUploadButton></td></tr>

              {
                detail.file.fileList?.map((file, idx) => {
                  return (
                    <tr key={idx}>
                      <td className="pi-width-70">{idx+1}</td>
                      <td style={{ width: 383, maxWidth: 383, overflow: 'hidden', whiteSpace: 'nowrap',textOverflow:'ellipsis' }}>
                        <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">{dayjsFormat(file.createTime)}</td>
                      <td className="pi-text-center pi-width-90">
                        <Tooltip title="移除">
                          <Button size="small" type="text" icon={<SvgIcon type="xxh-times-circle1"/>} style={{ color: "#df3f45" }} onClick={() => delFile(file.id)}></Button>
                        </Tooltip>
                      </td>
                    </tr>
                  )
                })
              }
              <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>
      </div>
      <OssUploadModal
        visible={visible}
        onCancel={() => setVisible(false)}
        onCreate={onCreate}
        onShow={onShow}
        >
      </OssUploadModal>
    </div>
  )
}

export default Detail