tsg-web/src/views/fxzb/zzjg/zq/toolbar.js

import React, { useEffect,useState } from 'react';
import { Form, Input, Button, message, Upload } from 'antd';
import { getDictService } from '../../../../service/SelectValue'
import AdcdFuzzyTreeSelect from '../../../../components/Form/AdcdFuzzyTreeSelect';
import NormalSelect from '../../../../components/Form/NormalSelect';
import { config } from '../../../../config';
import { createCrudService } from '../../../../components/crud/_';
import apiurl from '../../../../service/apiurl';
import moment from 'moment';



const ToolBar = ({ setSearchVal, onFileChange, onDelete, adcd, id }) => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([])
  const [isShowUploadBtn, setIsShowUploadBtn] = useState()
   /**
   * @description 上传之前的回调
   */
  const beforeUpload = (info) => {
    message.info("文件正在上传")
    if (info.type != "application/pdf") {
      message.error("请上传pdf格式的文件")
      return false
    }
    return true
  }
  /**
   * @description 上传文件后的回调
   * @param {Array} info 
   */
  const handleUploadChange = (info) => { 
    // message.info("文件正在上传")
    // 防止上传状态一直是uploading
    setFileList([info.file])
    const { status } = info.file;
    console.log("info",info);
    if (status === 'done') {
      let params = {
        adcd,
        fileId: info.file.response?.data?.fileId,
      }
      setIsShowUploadBtn(false)
      setFileList([info.file])
      onFileChange(info.file.response?.data?.fileId)
      createCrudService(apiurl.fxzb.zzjg.zq.save).edit(params).then(res => {
        if (res.code === 200) {
          message.success("文件上传成功")
        }
      })
    } else if (status === 'error') {
      message.error(`文件上传失败`);
    }
  }
  /**
   * @description 文件下载
   * @param {String} params 文件fileId
   */
  const download = (params) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xfflood/bzOrganizationFile/file/download/${params}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

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

  /**
   * @description 删除文件
   * @param {String} params 文件fileId
   */
  const handleDelte = () => {
    let fieldId = fileList[0]?.response?.data?.fileId;
    if (fieldId) {
      createCrudService(apiurl.fxzb.zzjg.zq.delete + `/${fieldId}`).delGet().then((res) => {
        if (res.code === 200) {
          message.success("删除成功")
          setFileList([])
          setIsShowUploadBtn(false)
          onDelete()
          onFileChange("")
        } else {
          message.error("删除失败")
        }
      })
    } else {
      message.error("请选择要删除的文件")
    }
  }
  useEffect(() => {
    setIsShowUploadBtn(!id)
    if (id) {
      setFileList([{
        response: {
          data: {
            fileId:id
          }
      }}])  
    }
  }, [id])
  
  return (
    <>
      <div style={{display:'flex',justifyContent:'flex-end',alignItems:'center'}}>
        {
          <>
          <div>
              {isShowUploadBtn && 
                <Upload
                name="file"
                action="/gunshiApp/xfflood/bzOrganizationFile/file/upload/singleSimple"
                onChange={handleUploadChange}
                beforeUpload={beforeUpload}
                className='upload-file'
                fileList={fileList}
              >
                  <Button
                    size='Default'
                    style={{
                      marginLeft:"-100%"
                    }}
                  >上传正式文件(pdf)</Button>
              </Upload>
              }
          </div>
          
            <div>
              {!isShowUploadBtn && <Button style={{marginRight:'20px'}} size='Default' onClick={()=> {download(fileList[0]?.response?.data?.fileId)}}>下载</Button>}
          </div>

            <div>
              {!isShowUploadBtn && <Button style={{marginRight:'20px'}} size='Default' onClick={handleDelte}>删除</Button>}
          </div>
          </>
        }
      </div>
    </>
  );
}

export default ToolBar;