tsg-web/src/views/fxzb/yaxb/zqya/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Upload, Button,message,Image } from 'antd';
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';
import GcTreeSelector from "./GcTreeSelector";

const Page = () => {
  const url = "http://local.gunshiiot.com:18083/gunshiApp/xfflood"
  const url1 = "http://223.75.53.141:9100/gs-tsg"
  const allowedFileTypes = ['.pdf']; //文件上传格式
  const refModal = useRef();
  const isRender = useRef(true)
  const [code, setCode] = useState()
  const [tag, setTag] = useState()
  const [fileList, setFileList] = useState([])
  const [image, setImage] = useState()
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false)
  const picType = ["png", "jpg", "jpeg", "gif"];
  const bytesToKB = (bytes) => {
    return (bytes / 1024).toFixed(2);
  }
  const columns = [
    {
      title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center",
      render: (_, record, index) => index + 1
    },
    { title: '文件名', key: 'fileName', dataIndex: 'fileName', width: 200 },
    { title: '上传时间', key: 'tmCreate', dataIndex: 'tmCreate', width: 200 },
    { title: '类型', key: 'fileType', dataIndex: 'fileType', width: 80 },
    {
      title: '大小（KB）', key: 'fileLength', dataIndex: 'fileLength', width: 140,
      render: (rec) => <span>{bytesToKB(rec)}</span>
    },
    {
      title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
      render: (value, row, index) => (<CrudOpRender_text
        review={row?.fileType === "pdf"}
        picReview={picType.includes(row?.fileType) }
        download={true}
        del={true}
        command={(cmd) => () => command(cmd)(row)}
      />)
    },
  ];
  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.fxzb.yaxb.page).find_noCode, {});
    // 获取表格的dataSource
  const dataSource = useMemo(() => {
    if (tableProps.dataSource.length > 0) {
      let dataArr = tableProps.dataSource.map((item, index) => {
        let schemeId = item.id;
        let time = item.tmCreate
        return item.attachList.map(attach => ({...attach, schemeId,tmCreate:time}))
      })
      return dataArr.flat()
    }
    },[tableProps.dataSource])
  const command = (type) => (params) => {
    if (type === 'save') {
      refModal.current.showSave({adcd:code});
    } else if (type === 'edit') {
      refModal.current.showEdit(params);
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'download') {
      let downloadLink = document.createElement("a");
        downloadLink.href = `${url}/bzPredictionScheme/file/download/${params.fileId}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

        // 模拟点击事件，开始下载
        downloadLink.click();
    } else if (type === "review") {
      refModal.current.showReView(params);
    }
    else if (type === 'del') {
      refModal.current.onDeleteGet(apiurl.fxzb.yaxb.delete + `/${params.schemeId}`);
    } else if (type === "picReview") {
      setVisible(true)
      getFileInfo(params)
      // refModal.current.showReView(params);
    }
  }

  const getFileInfo = (params) => {
   createCrudService(apiurl.fxzb.yaxb.getFile + `/${params.fileId}`)
        .delGet()    
     .then(res => {
       if (res.code === 200) {
        setImage(res.data)
       }
      }).catch(err => console.log(err))
  }
  /**
   * @description 获取文件类型
   */
  const getFileTypeFromFileName = (fileName) => {
    var lastDotIndex = fileName.lastIndexOf(".");
    if (lastDotIndex !== -1) {
      return fileName.substring(lastDotIndex + 1);
    }
    return "";
  }
  /**
   * @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) => { 
    setLoading(true)
    let fileLists;
    // 防止上传状态一直是uploading
    setFileList([info.file])
    const { status } = info.file;
    if (status === 'done') {
      message.success("文件上传成功 ")
      setLoading(false)
      setFileList([info.file])
      fileLists = info.fileList.map(file => { 
        return {
          fileId: file.response?.data?.fileId,
          fileName: file.response?.data?.fileName,
          tmCreate: file.response?.data?.uploadTime,
          fileLength: file.response?.data?.fileLength,
          filePath: file.response?.data?.filePath,
          fileType: getFileTypeFromFileName(file.response?.data?.fileName)
        }
      })
      let params = {
        attachList: fileLists,
        adcd: code,
        relatedObjectId: code,
        relatedObjectType:"bzPredictionScheme1"
      }
      createCrudService(apiurl.fxzb.yaxb.save).edit(params).then(res => {
        if (res.code === 200) { 
          search(params)
        }
      })
    } else if (status === 'error') {
      message.error(`文件上传失败`);
    }
  }
  
  useEffect(()=>{
    if(isRender.current){
      isRender.current = false
      return
    }

  const params = {
      search: {
      adcd: code,
      relatedObjectId: code,
      relatedObjectType:"bzPredictionScheme1"
      }
    };
    search(params)

  },[code])

  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 168px)'}}>
        <GcTreeSelector setCode={setCode} setTag={setTag} showCheckbox={false} hasAlertBox={false}/>
        </div>
        <div className='lf CrudAdcdTreeTableBox'>
          <Upload
            name="file"
            action="/gunshiApp/xfflood/bzPredictionScheme/file/upload/singleSimple"
            onChange={handleUploadChange}
            beforeUpload={beforeUpload}
            className='upload-file'
            fileList={fileList}
          >
              <Button size='Default' type='primary' onClick={() => {}}>上传</Button>
            </Upload>
            <div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
            <Table
              columns={columns}
              rowKey="inx"
              {...tableProps}
              dataSource={dataSource}
              loading={loading}
              scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={refresh}
        />
      </div>
      {image && 
        <Image
        style={
          {
             display: 'none',
          }
        }
        width={60}
        src={url1 + image?.filePath}
        preview={
          {
            visible,
            onVisibleChange: (value) => {
              setVisible(value);
            },
          }
        }
        alt='' />
      }
    </>
  );
}

export default Page;