tsg-web/src/views/fxzb/sxfd/fxkhgzh/meetingPage.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { useSelector } from 'react-redux';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card, Row, Col, Divider,Image,Modal } from 'antd';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../../service/apiurl';
import { getDictService } from '../../../../service/SelectValue'
import usePageTable from '../../../../components/crud/usePageTable';
import { createCrudService } from '../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';
import { dealValue } from '../../../../utils/tools';
import ListSelect from "../../../../components/Form/ListSelect";
import Form from './form'
import moment from 'moment';


const Page = ({data,fileList,isMeetData=false}) => {
    const url = "http://223.75.53.141:9100/gs-tsg"
    const [iframeSrc, setIframeSrc] = useState('')
    const [pdfViewOPen, setPdfViewOPen] = useState(false)
     /**
   * @description pdf文件预览
   * @param {String} params 文件预览url
   */
    const viewPdf = (params) => {
    console.log(params);
    setIframeSrc(params)
    setPdfViewOPen(true)
  }
  /**
   * @description 文件下载
   * @param {String} params 文件fileId
   */
  const download = (params) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xfflood/xfIdeoFcB/file/download/${params}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

        // 模拟点击事件，开始下载
        downloadLink.click();
  }
  return (
    <>
        <div className="ant-card-body meetingPage" style={{padding:"20px 0 0 0"}}>
            <div className='meetingPage_header'>
            <div className='meetingPage_header_item'>
                <div className='meetingPage_header_item_lable'>会议主题：</div>
            <div className='meetingPage_header_item_value'>
              {data.theme}
            </div>
            </div>
            <div className='meetingPage_header_item'>
                <div className='meetingPage_header_item_lable'>主办单位：</div>
                <div className='meetingPage_header_item_value'>{data.organiser}</div>
            </div>
            <Divider dashed />
            <div className='meetingPage_header_item'>
                <div className='meetingPage_header_item_lable'>会议时间：</div>
                <div className='meetingPage_header_item_value'>{ !isMeetData ?data.meetDate:data.startDate}</div>
            </div>
            <div className='meetingPage_header_item'>
                <div className='meetingPage_header_item_lable'>会议地点：</div>
                <div className='meetingPage_header_item_value'>{data.loc}</div>
            </div>
            <Divider dashed />
            <div className='meetingPage_header_item'>
                <div className='meetingPage_header_item_lable'>局内参加人员：</div>
                <div className='meetingPage_header_item_value'>{data.participant}</div>
            </div>
            <div className='meetingPage_header_item'>
                <div className='meetingPage_header_item_lable'>会议类型：</div>
            <div className='meetingPage_header_item_value'>
              {
               data.meetType === "0" ? "视频会议" :
                data.meetType === "1" ? "现场会议" :
                data.meetType === "2" ? "电话会议" : "网络会议"
              }
            </div>
            </div>
            <Divider dashed />
            <div className='meetingPage_header_item'>
                <div 
                    className='meetingPage_header_item_lable'
                    // style={{width:"51%"}}
                    >会议主要内容：</div>
            </div>
            </div>
            <div className='meetingPage_content'  dangerouslySetInnerHTML={{ __html:data.content }} />
            <Divider dashed />
            <div className='meetingPage_footer'>
            <div className='meetingPage_footer_title'>
                附件：
            </div>
            <div className='attach-list'>
                {  
                      fileList.length > 0 && fileList.map(file => {
                          return (
                      <>     
                        <div className={'file-item'}>
                          <div className='file-description'>
                          {file.name.indexOf('.docx') > -1 ?
                            <div
                              onClick={() => { download(file.response?.data?.fileId) }}
                              style={{ cursor: 'pointer' }}
                            >
                              <FileWordOutlined
                              style={{ fontSize: 40 }}
                            />
                            </div>
                             :
                            file.name.indexOf('.pdf') > -1 ?
                              <div
                                onClick={() => { viewPdf(file.response?.data?.fileId) }}
                                style={{ cursor: 'pointer' }}
                              >
                              <FilePdfOutlined style={{ fontSize: 40 }} /> 
                              </div>
                              :
                              file.name.indexOf('.zip') > -1 ?
                                <div
                                  onClick={() => { download(file.response?.data?.fileId) }}
                                  style={{ cursor: 'pointer' }}
                                >
                                  <FileZipOutlined style={{ fontSize: 40 }} /> 
                                </div>
                                :
                                file.name.indexOf('.xlsx') > -1 ?
                                <div
                                  onClick={() => { download(file.response?.data?.fileId) }}
                                  style={{ cursor: 'pointer' }}
                                >
                                  <FileExcelOutlined style={{ fontSize: 40 }} /> 
                                </div>
                                :
                            <Image width={60} src={url +file.response?.data?.filePath} alt='' />
                            }
                            <div style={{display:'flex',flexDirection:"column"}}>
                             <span>{file.name}</span>
                             <span>{((file.response?.data?.fileLength)/1024).toFixed(2) }KB</span>
                            </div>
                          </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/xfflood/xfIdeoFcB/file/download/${iframeSrc}`)}`}
        />
      </Modal>
                      </>
                      
                        )
                 })
                }
            </div>
            </div>
        </div>  
    </>
  );
}

export default Page;