tsg-web/src/views/fxzb/ddgc/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Modal, Image } from 'antd';
import { useSelector } from 'react-redux';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable';
import { createCrudService } from '../../../components/crud/_';
import { httppost2 } from '../../../utils/request';
import moment from 'moment';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const downloadBtn = role?.rule?.find(item => item.menuName == "下载");
  const [visible, setVisible] = useState(false);

  const columns = [
    { title: '序号', key: 'idx', dataIndex: 'idx', width: 60, align:"center" },
    { title: '调度规程名称', key: 'planName', dataIndex: 'planName', width: 200,align:"center"  },
    { title: '编制单位', key: 'prepOrg', dataIndex: 'prepOrg', width: 200 ,align:"center" },
    {
      title: '编制日期', key: 'prepTime', dataIndex: 'prepTime', width: 200, align: "center",
      render: (rec) => <span>{rec?moment(rec).format("YYYY-MM-DD"):''}</span>
     },
    { title: '批复部门', key: 'apprOrg', dataIndex: 'apprOrg', width: 200 ,align:"center" },
    {
      title: '批复日期', key: 'apprTime', dataIndex: 'apprTime', width: 200, align: "center",
      render: (rec) => <span>{rec?moment(rec).format("YYYY-MM-DD"):''}</span>
      
     },
    {
      title: '文件', key: 'planName', dataIndex: 'planName', width: 200, align: "center",
      render: (rec, record) =>
        (<div>
          <a onClick={() => reviewFile(record?.files[0])}>{record?.files[0]?.fileName}</a>
          <Image
            src={url + record?.files[0]?.filePath}
            style={{
              display: 'none',
            }}
            preview={{
              visible,
              src:url + record?.files[0]?.filePath ,
              onVisibleChange: (value) => {
                setVisible(value);
              },
            }}
          />
          </div>)
     },
    { title: '上传时间', key: 'moditime', dataIndex: 'moditime', width: 150,align:"center"  },
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (downloadBtn ?<a onClick={() => download(row?.files[0])}>下载</a> : null)
    },
  ];
  const [dataSources, setDataSources] = useState([])
  const [iframeSrc, setIframeSrc] = useState('')
  const [pdfViewOPen, setPdfViewOPen] = useState(false)
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  /**
   * @description 文件下载
   * @param {String} params 文件fileId
   */
  const download = (params) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/resPlanB/file/download/${params?.fileId}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

        // 模拟点击事件，开始下载
        downloadLink.click();
  }
  const reviewFile = (params) => {
    if (params?.fileName.split('.').pop() == "pdf") {
      setPdfViewOPen(true)
      setIframeSrc(params)
    } else if (params.fileName.split('.').pop() == "png" ||
      params.fileName.split('.').pop() == "jpg" || 
      params.fileName.split('.').pop() == "jpeg"
    ) {
      setVisible(true)
    }
    else{
      download(params)
    }
  }
  const getList = async() => {
   try {
     const res = await httppost2(apiurl.fxzb1.ddgc.page, { resCode: "42120250085" })
     let newData = res.data.filter(s => s.type == 2)
     setDataSources(newData.map((item,i) => ({...item,idx:i+1})))
   } catch (error) {
    console.log(error);
   }
 }
  useEffect(()=>{
    getList()
  },[])

  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='adcdTableBox'>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Table
              columns={columns}
              rowKey="id"
              dataSource={dataSources}
              pagination={false}
              scroll={{
                x: width,
                y: "calc( 100vh - 400px )"
              }} />
          </div>
        </div>
        <Modal
        open={pdfViewOPen}
        width={1000}
        title=""
        footer={null}
        style={{marginTop:"-5%"}}
        onCancel={() => {
          setPdfViewOPen(false)
        }}
      >
      <iframe
          style={{
            height: '80vh',
            width: '100%',
            border: 0,
            marginTop: 20,
          }}
         src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/resPlanB/file/download/${iframeSrc.fileId}`)}`}
        />
      </Modal>
      </div>
    </>
  );
}

export default Page;