tsg-web/src/views/rcgl/gcdsj/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';

const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const editBtn = role?.rule?.find(item => item.menuName == "编辑");
  const viewBtn = role?.rule?.find(item => item.menuName == "查看");
  const delBtn = role?.rule?.find(item => item.menuName == "删除");
  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const [iframeSrc, setIframeSrc] = useState('')
  const [pdfViewOPen, setPdfViewOPen] = useState(false)
  const [isFetch, setIsFetch] = useState(false)
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '名称', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
    {
      title: '发生日期', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
    },
    {
      title: '事件类型', key: 'eventsType', dataIndex: 'eventsType', width: 140,
      render: (value) => <span>{value == 1 ? "综合大事记" : value == 2 ? "专题大事记" : ''}</span>,
    },
    {
      title: '事件内容描述', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300},
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
        edit={editBtn ? true : false}
        del={delBtn ? true : false}
        view={viewBtn ? true : false}
          command={(cmd) => () => command(cmd)(row)} />)
    },
  ];

  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  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.rcgl.gcdsj.delete + `/${params.id}`);
    }
  }
  
  const download = (params) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/tsg/projectEvents/file/download/${params}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

        // 模拟点击事件，开始下载
        downloadLink.click();
  }

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
  refresh()
  setIsFetch(!isFetch)
}

  
const viewPdf = (params) => {
  setIframeSrc(params)
  setPdfViewOPen(true)
}
  useEffect(()=>{
    const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
  }, [searchVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
            <Tabs defaultActiveKey="1">
              <Tabs.TabPane tab="列表" key="1">
                 <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
              </Tabs.TabPane>
              <Tabs.TabPane tab="时间轴" key="2">
                <div className='time-line'>
                  <Timeline>
                    {tableProps.dataSource.map((item, index) => (
                      <Timeline.Item key={index}>
                        <div className='time-line-item'>
                        <span style={{width:100}}>{item.eventsDate}</span>
                          <div className='item-right'>
                            <span>{item.eventsDesc}</span>
                            <div style={{ display: "flex"}}>
                              <span>附件：</span>
                            <Row gutter={[16]} style={{flex:1}}>
               {
                  item.files.length > 0 && item.files.map(file => {
                  return (
                      <Col span={12}>
                        <div className="file-item" style={{width:"100%"}}>
                          <div className='file-description'>
                          {file.fileName.indexOf('.docx') > -1 ?
                            <div
                              onClick={() => { download(file.fileId) }}
                              style={{ cursor: 'pointer' }}
                            >
                              <FileWordOutlined
                              style={{ fontSize: 40 }}
                            />
                            </div>
                             :
                            file.fileName.indexOf('.pdf') > -1 ?
                              <div
                                onClick={() => { viewPdf(file?.fileId) }}
                                style={{ cursor: 'pointer' }}
                              >
                              <FilePdfOutlined style={{ fontSize: 40 }} /> 
                              </div>
                              :
                              file.fileName.indexOf('.zip') > -1 ?
                                <div
                                  onClick={() => { download(file?.fileId) }}
                                  style={{ cursor: 'pointer' }}
                                >
                                  <FileZipOutlined style={{ fontSize: 40 }} /> 
                                </div>
                                :
                                file.fileName.indexOf('.xlsx') > -1 ?
                                <div
                                  onClick={() => { download(file?.fileId) }}
                                  style={{ cursor: 'pointer' }}
                                >
                                  <FileExcelOutlined style={{ fontSize: 40 }} /> 
                                </div>
                                :
                            <Image width={60} src={url +file?.filePath} alt='' />
                            }
                            <span>{file.fileName}</span>
                          </div>
                        </div>
                      </Col>
                  )
                })
                }
                            </Row>
                            </div>
                        </div>
                        </div>
                      </Timeline.Item>
                    ))}
                  </Timeline>
                 </div>
              </Tabs.TabPane>
            </Tabs>
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={successCallback}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />
      </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/tsg/projectEvents/file/download/${iframeSrc}`)}`}
        />
      </Modal>
    </>
  );
}

export default Page;