tsg-web/src/views/sz/pxjhgl/toolbar.js

import React, { useEffect,useState } from 'react';
import { Form, Upload, Button,Row, Col, Input, DatePicker, message,Modal } from 'antd';
import {RightOutlined,LeftOutlined,FileExcelOutlined,DeleteOutlined} from '@ant-design/icons';
import { createCrudService } from '../../../components/crud/_';
import apiurl from '../../../service/apiurl';
import { httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
import moment from 'moment';
const { Dragger } = Upload;
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFile }) => {
  const [form] = Form.useForm();
  const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
  const searchBtn = role?.rule?.find(item => item.menuName == "查询") || true;
  
  const [exportOPen, setExportOPen] = useState(false)
  const [fileList, setFileList] = useState([]) //上传文件列表
  const [loading, setLoading] = useState(false)
  const onFinish = (values) => {
    let dateSo;
    if (values.tm) {
      dateSo = {
        start: moment(values.tm[0]).format('YYYY'),
        end: moment(values.tm[1]).format('YYYY')
      }
    }
    delete values.tm
    setSearchVal({...values, dateSo});
  }

  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 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 downTemplate = ()=>{
    httppost5(apiurl.rcgl.zbgl.zbb.import, {}).then(res => {
      exportFile(`培训计划管理.xlsx`,res.data)
  })
  }

  return (
    <>
      <div style={{display:'flex',justifyContent:'space-between'}}>
        <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
         
          <Form.Item label="计划年度" name="tm">
            <RangePicker
              allowClear
              showTime 
              style={{ width: "300px" }}
              picker='year'
            />
          </Form.Item>
          <Form.Item label="填报人" name="teamName">
            <Input allowClear  style={{width:'150px'}}/>
          </Form.Item>
          <Form.Item label="培训班名称" name="teamName">
            <Input allowClear  style={{width:'150px'}}/>
          </Form.Item>
          {searchBtn ? <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item> : null }
          
          <Form.Item>
            <Button onClick={() => form.resetFields()}>重置</Button>
          </Form.Item>
          {
            (onSave && addBtn) ?
              <Form.Item>
                <Button onClick={onSave}>新增</Button>
              </Form.Item>
            :null
          }
          <Form.Item>
            <Button onClick={() => {setExportOPen(true)}}>导入</Button>
          </Form.Item><Form.Item>
            <Button onClick={()=>exportFile()}>导出</Button>
          </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/xyt/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>
          <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;