tsg-web/src/views/rcgl/byfz/fzxc/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Upload, message,Image,Button } from 'antd';
import {PaperClipOutlined,DownloadOutlined,DeleteOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../../service/apiurl';
import { httpget2,httppost2 } from '../../../../utils/request';
import "./index.less"
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  console.log("role",role);
  
  const uploadBtn = role?.rule?.find(item => item.menuName == "上传");
  const refModal = useRef();
  const [fileList, setFileList] = useState([]) //上传文件列表
  const [loading, setLoading] = useState(false)
  const [zlList, setZlList] = useState([])
  const [data, setData] = useState([])
  const fileType = {
    "jpg": 'pic',
    "png": 'pic',
    "jpeg": 'pic',
    "gif": 'gif',
    "xlsx": 'excel',
    "xls": 'excel',
    "doc": 'word',
    "docx": 'word',
    "ppt": 'PPT',
    "pptx": 'PPT',
    "pdf": 'pdf',
  }

  const iconFile = (name) => {
    let icon;
    const type = name.split('.').pop();
    icon = fileType[type]
   return icon
  }

  const fileChange = (info) => {
    if (info.file.status === "done") {
      setLoading(false);
      getFileList()
    }
    if (info.file.status === "uploading") { 
      setLoading(true);
    }
    if (info.file.status === "error") {
      message.error("文件上传失败")
      setLoading(false);
     }
    setFileList(info.fileList)
  }

  const getFileList = async () => {
    try {
      const res = await httpget2(apiurl.rcgl.byfz.fzxc.list)
      if (res.code == 200) {
        setZlList(res.data)

      }
      
    } catch (error) {
      console.log(error);
    }
  }
  const getPicList = async () => {
    try {
      const res = await httppost2(apiurl.rcgl.byfz.fzxc.picList)
      if (res.code == 200) {
        setData(res.data)
      }
      
    } catch (error) {
      console.log(error);
    }
  }
  const download = (params) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/termite/adver/file/download/${params}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

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


  const deleteFile = async (id, type) => {
    const urlRequest = type == "file" ? apiurl.rcgl.byfz.fzxc.delete : apiurl.rcgl.byfz.fzxc.picDelete
    try {
      const res = await httpget2(urlRequest + `/${id}`)
      if (res.code == 200) {
        message.success('删除成功');
        if (type == "file") {
          getFileList()
        }
        if (type == "pic") {
          getPicList()
        }
      }
    } catch (error) {
      console.log(error);
      
    }
  }
  const bytesToKB = (bytes) => {
    return (bytes / 1024).toFixed(2);
  }
 
  useEffect(() => {
    getFileList();
    getPicList();
  }, [])
  return (
    <>
       <div className='content-box' style={{height: '100%',display:'flex',padding:'10px',paddingTop:0 }}>
      <div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 90px)',width:'350px', backgroundColor: '#fff',padding:10,marginRight:10 }}>
        <div className='comomn1-title'>
            <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
            <span>宣传资料</span>
            {uploadBtn ? <Upload 
              name='file'
              action="/gunshiApp/xyt/termite/adver/file/upload/singleSimple"
              onChange={fileChange}
              fileList={fileList}
              disabled={loading}
              showUploadList={false}
            >
              <div style={{display:"flex",alignItems:"center",columnGap:5,color:"#4f85ec"}}>
              <PaperClipOutlined />
                <a style={{cursor:"pointer"}}>上传</a>
              </div>
            </Upload> : null}
        </div>
          <div className='xczl-list'>
            {
               loading ? <span>文件正在上传中，请等待</span> :
              zlList.length > 0 ? zlList.map(item => (
                <div className='xczl-item'>
                <div className='item-left'>
                  <img alt='' src={`${process.env.PUBLIC_URL}/assets/xyt/rcgl/${iconFile(item.fileName)}.png`} />
                  <div className='item-name'>
                      {item?.fileName}
                      <div style={{fontSize:12,color:"#bfbfbf"}}>{ bytesToKB(item?.fileLength) || ''}KB</div>
                  </div>
                    
                </div>
                <div className='item-right'>
                    <DownloadOutlined
                      style={{ fontSize: 15, cursor: "pointer"}}
                      title="下载"
                      onClick={() => download(item.fileId)}
                    />
                    <DeleteOutlined
                      style={{ fontSize: 15, cursor: "pointer" }}
                      title="删除" 
                      onClick={() => deleteFile(item.fileId,"file")}
                    />
                </div>
              </div>
              )):null
            }
        </div>
        </div>
      <div className='AdcdTreeTableBox' style={{flex:1,overflowX:"auto", backgroundColor: '#fff',padding:6 }}>
          <div className='comomn1-title'>
            <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
            <span>宣传图片墙</span>
            {uploadBtn ?  <Button
              type="primary"
              style={{ marginLeft: "auto", marginRight: 100 }}
              onClick={() => refModal.current.showSave()}
            >上传</Button> : null}
           
          </div>     
          <div className='pic1-box'>
         {
          data.length> 0 ? 
          data.map(item => {
            return (
              <div className='pic-item'>
                <Image
                  src={url + item?.pic?.filePath}
                  style={{
                    width: 340,
                    height: 270,
                    margin:10
                  }}
                />
                <div className='pic-title'>
                  <span style={{flex:1,textAlign:"center"}}>{item?.picTitle}</span>
                  <DeleteOutlined
                    style={{ width: 20, cursor: "pointer" }}
                    onClick={() => deleteFile(item.id,"pic")}
                  />
                </div>
                </div>
              )
          })
          :
          <div style={{textAlign: "center", margin: "10%",width:"100%"}}>
            <img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt="" />
          </div>
         }
         </div>
      </div>
      
      <BasicCrudModal
          width={800}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={getPicList}
      />
    </div>
    </>
  );
}

export default Page;