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

import React,{useEffect,useState,useRef,useMemo} from 'react'
import { Table, Button,Modal} from 'antd'
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import { httppost2 } from '../../../utils/request';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import BasicCrudModal from '../../../components/crud/BasicCrudModal2';
import moment from "moment"
export default function Zrtx() {
  const refModal = useRef();
  const [iframeSrc, setIframeSrc] = useState('')
  const [pdfViewOPen, setPdfViewOPen] = 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: (r) => <span>{r ? moment(r).format("YYYY-MM-DD") : ''}</span>
       },
      { title: '批复部门', key: 'apprOrg', dataIndex: 'apprOrg', width: 200 ,align:"center" },
      {
        title: '批复日期', key: 'apprTime', dataIndex: 'apprTime', width: 200, align: "center",
        render: (r) => <span>{r ? moment(r).format("YYYY-MM-DD") : ''}</span>
       },
      {
        title: '文件', key: 'planName', dataIndex: 'planName', width: 200, align: "center",
        render: (rec, record) => <a onClick={() => reviewFile(record?.files[0])}>{record?.files[0]?.fileName}</a>
       },
      { title: '上传时间', key: 'moditime', dataIndex: 'moditime', width: 150,align:"center"  },
        {
            title: '操作', dataIndex: 'orgName', key: 'orgName', align: "center",width: 240, fixed: 'right',
            render: (value, row, index) => (<CrudOpRender_text view={true} del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />)
         },
    ];
    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
    const [data, setData] = useState([])
    const getData = async () => {
        try {
            const res = await httppost2(apiurl.fxya.page, { resCode: "42112230001",type:2 })
            let newData = res.data.filter(s => s.type == 2)
            setData(newData.map((item,i) => ({...item,idx:i+1})))
        } catch (error) {
            console.log(error);
            
        }
    }
    const download = (params) => {
      let downloadLink = document.createElement("a");
          downloadLink.href = `http://223.75.53.141:83/gunshiApp/tsg/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 {
        download(params)
      }
    }
    const command = (type) => (params) => {
        if (type === 'save') {
          refModal.current.showSave({});
        } else if (type === 'edit') {
          refModal.current.showEdit(params)
        } else if (type === 'view') {
          refModal.current.showView(params);
        } else if (type === 'del') {
          refModal.current.onDeleteGet(apiurl.fxya.delete + `/${params.id}`);
        } 
      }
    useEffect(() => {
      getData();
    }, [])
    
  return (
      <div style={{background:"#fff",padding:10}}>
         <h1><Button type='primary' onClick={() => {refModal.current.showSave({})}}>新增</Button></h1>
          <Table
              rowKey="id"
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                x: width,
                y: "calc( 100vh - 400px )"
              }} 
          />

        <BasicCrudModal
          width={800}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={getData}
      />
      
      <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/tsg/resPlanB/file/download/${iframeSrc.fileId}`)}`}
        />
      </Modal>
    </div>
  )
}