index.js

import React from 'react';
import { Row, Col, Button, message, Upload } from 'antd';
import styles from './index.less';

import { uploadParams } from '@/pages//system/parameter/services/operation';

const beforeUpload = file => {
  // 检查文件类型
  const reg = /\.(xlsx|xls)$/;
  const isXls = reg.test(file.name);
  if (!isXls) {
    message.error('只能上传Excel文件');
    return false;
  }

  // 进行文件大小检查
  const isLt100M = file.size / 1024 / 1024 < 100;
  if (!isLt100M) {
    message.error('文件大小不能超过100M');
  }
  return isXls && isLt100M;
};

const customRequest = ({ file, onSuccess }) => {
  uploadParams({
    file,
    onSuccess: ({ code, data }) => {
      if (code === 'sys.success') {
        message.success('导入成功');
        onSuccess(data);
      }
    },
  });
};
const props = {
  name: 'file',
  headers: {
    authorization: 'authorization-text',
  },
  accept: '.xlsx, .xls',
  beforeUpload,
  customRequest,
};

const Action = ({
  onClickQuery,
  onClickReset,
  onClickExport,
  onClickAdd,
  onSuccessUpload,
  loading,
}) => (
  <Row className={styles.root}>
    <Col span={12} className={styles.left}>
      <Button type="primary" onClick={onClickQuery}>
        查询
      </Button>
      <Button type="primary" onClick={onClickReset}>
        重置
      </Button>
      <div className={styles.uploadBtn}>
        <Upload {...props} fileList={[]} onSuccess={onSuccessUpload}>
          <Button type="primary">导入</Button>
        </Upload>
      </div>
      <Button type="primary" onClick={onClickExport}>
        导出
      </Button>
    </Col>
    <Col span={12} className={styles.right}>
      <Button type="primary" onClick={onClickAdd} disabled={loading}>
        新建
      </Button>
    </Col>
  </Row>
);

export default Action;