tsg-web/src/views/zbgl/zbb/toolbar.js

import React, { useEffect,useState } from 'react';
import { Form, Upload, Button,Row, Col, Select, Badge, message,Modal } from 'antd';
import {RightOutlined,LeftOutlined,FileExcelOutlined,DeleteOutlined} from '@ant-design/icons';
import moment from 'moment';
import { createCrudService } from '../../../components/crud/_';
import apiurl from '../../../service/apiurl';
import { httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
const { Dragger } = Upload;

const ToolBar = ({ value, onChange, tm, callback,role }) => {
  const exportBtn = role?.rule?.find(item => item.menuName == "导入");
  const [yearRange,setYearRange] = useState([])
  const [monthRange,setMonthRange] = useState([])
  const [form] = Form.useForm();
  const [exportOPen, setExportOPen] = useState(false)
  const [fileList, setFileList] = useState([]) //上传文件列表
  const [loading, setLoading] = useState(false)
  useEffect(()=>{ 
    getDefaultValue()
  },[])

  const deleteFile = (fileId) => {
    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
    setFileList(filterFile)
  }
  const beforeUpload = (file) => {
    const accept = [".xlsx",".xls"]
    const fileType = file?.name.split(".");
    const fileDate = fileType.slice(-1);
    const isEecel = accept.includes(`.${fileDate[0]}`)
    if (!isEecel) {
      message.error('请上传.xls .xlsx格式的文件！');
    }
    return isEecel  ? true : Upload.LIST_IGNORE;
  };

  const download = (params) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xfflood/bzPredictionScheme/file/download/${params}`;
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

        // 模拟点击事件，开始下载
        downloadLink.click();
  }
  const fileChange = (info) => {
    console.log(info);
    if (info.file.status === "done") {
      setLoading(false);
      setExportOPen(false)
      callback()
    }
    if (info.file.status === "uploading") { 
      setLoading(true);
    }
    if (info.file.status === "error") {
      message.error("文件上传失败")
      setLoading(false);
    }
    setFileList(info.fileList)
  }
  const getDefaultValue = ()=>{
    const tm = moment()
    const year = tm.year();
    let linshi1 = [];
    for (let i = year - 5; i <= year + 1; i++) {
      linshi1.push(i);
    }
    setYearRange(linshi1)
    let linshi2 = [];
    for (let i = 0; i < 12; i++) {
      linshi2.push(i);
    }
    setMonthRange(linshi2)
  }

  const down = ()=>{
    const stm = tm.format('YYYY-MM')+'-01'
    const etm = tm.endOf('months').format('YYYY-MM-DD')
    createCrudService(apiurl.informationManagement.dutyPlan.down).downLoad({
      stm:stm,
      etm:etm,
    })
  }

  const downTemplate = ()=>{
    httppost5(apiurl.rcgl.zbgl.zbb.import, {}).then(res => {
      exportFile(`值班表.xlsx`,res.data)
  })
  }

  const handleGclqdFileFileChange = async()=>{
    var files = document.getElementById("gclqdFile").files;
    const resData = await createCrudService(apiurl.informationManagement.dutyPlan.upLoad).upLoad({file:files[0]})
    console.log('resData',resData)

  }

 /**
  * @description 回到今天
  */
  const backToday = () => {
    const now = moment();
    onChange(now);
  };
  return (
    <>
     <div className="pagetoolbar">
        <Form layout="inline">
          <Form.Item >
            <Button
              type="primary"
              className='but4'
              onClick={() => onChange(moment().subtract(1, 'months'))}
              icon={<LeftOutlined />}
            >上一月</Button>
          </Form.Item>
          <Form.Item label="年份">
            <Select
              style={{ width: 80 }}
              dropdownMatchSelectWidth={false}
              onChange={newYear => {
                const now = value.clone().year(newYear);
                onChange(now);
              }}
              value={value.year()}
            >
              {
                yearRange.map(o => <Select.Option key={o} value={o}>{o}</Select.Option>)
              }
            </Select>
          </Form.Item>
          <Form.Item label="月份">
            <Select
              style={{ width: 80 }}
              dropdownMatchSelectWidth={false}
              onChange={newMonth => {
                const now = value.clone().month(newMonth);
                onChange(now);
              }}
              value={value.month()}
            >
              {
                monthRange.map(o => <Select.Option key={o} value={o}>{o+1}</Select.Option>)
              }
            </Select>
          </Form.Item>
          <Form.Item >
            <Button
              type="primary"
              className='but4'
              onClick={() => onChange(moment().startOf('month'))}
              icon={<RightOutlined />}
            >下一月</Button>
          </Form.Item>
          <Form.Item>
              <Button type="primary" onClick={() => {backToday()}}>今天</Button>
          </Form.Item>
          {exportBtn ?<Form.Item>
            <Button
              className='but4'
              onClick={() => {setExportOPen(true)}}>导入</Button>
          </Form.Item>: null}
          <Form.Item style={{ marginLeft:"auto" }}>
            <Badge status="error" text="带班领导" style={{ marginRight: 8 }} />
            <Badge status="processing" text="值班领导" style={{ marginRight: 8 }} />
          </Form.Item>
        </Form>
      </div>
      <Modal
        open={exportOPen}
        width={700}
        title="仅支持表格文件上传，请按照模板示例数据填写"
        destroyOnClose
        onCancel={() => setExportOPen(false)}
        footer={null}
      >
        <Row>
          <Col span={24}>
                <Dragger
                name='file'
                // multiple
                action="/gunshiApp/tsg/rota/importData"
                onChange={fileChange}
                beforeUpload={beforeUpload}
                onDrop={(info) => { console.log(info); }}
                  fileList={fileList}
                  disabled={loading}
                  accept=".xls, .xlsx"
              >
                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
                  <p className="ant-upload-hint">
                    支持扩展名：.xls .xlsx
                </p>
              </Dragger>
          </Col>
        </Row>
        {/* <Row gutter={[16]}>
                {
                   loading ? <span>文件正在上传中，请等待</span> :
                  fileList.length > 0 && fileList.map(file => {
                  return (
                      <Col span={12}>
                        <div className='file-item' >
                            <div className='file-description'>
                              <div
                                  onClick={() => { download(file.response?.data?.fileId) }}
                                  style={{ cursor: 'pointer' }}
                                >
                                  <FileExcelOutlined style={{ fontSize: 40 }} /> 
                                </div>
                                <span>{file.name}</span>
                          </div>
                        <div
                          className='delete-icon'
                          onClick={() => deleteFile(file.response?.data?.fileId)}
                        >
                          <DeleteOutlined />
                          </div>
                        </div>
                      </Col>
                  )
                })
                }

        </Row> */}
        <Row>
          <Col span={24} style={{ textAlign: 'right',marginTop:15 }}>
            <Button onClick={downTemplate} type="primary" style={{marginRight:10}}>下载模板</Button>
            {/* <Button type="primary" onClick={() => {}}>提交</Button> */}
          </Col>
        </Row>
      </Modal>
    </>
  );
}

export default ToolBar;