pfmBackMana/src/components/KCIMUpload/index.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2023-02-15 16:48:56
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-09-26 10:49:17
 * @FilePath: /BudgetManaSystem/src/components/BMSUpload/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import React, { useState } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import { Alert, UploadFile, UploadProps } from 'antd';
import { Upload } from 'antd';

import './style.less';

const { Dragger } = Upload;

type KCIMUploadPropsType = {
  onChange?: () => void;
  ifShowTip?: boolean; //是否展示黄底提示
  ifShowTemplateDownload?: boolean; //是否展示模板下载
  downloadTemplateFile?: () => void; //模板下载回调
} & UploadProps;

const KCIMUpload = (props: KCIMUploadPropsType) => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const {
    onChange,
    downloadTemplateFile,
    ifShowTip = true,
    ifShowTemplateDownload = true,
  } = props;

  const config: UploadProps = {
    action: () => Promise.resolve(''),
    name: 'file',
    multiple: false,
    beforeUpload: (file) => {
      setFileList([...fileList, file]);
      return false;
    },
    //onChange:onChange?onChange:()=>{},
    onChange: (fileInfo) => {
      onChange && onChange(fileInfo);
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  const download = () => {
    downloadTemplateFile && downloadTemplateFile();
  };

  return (
    <div className="KCIMUpload" style={{ paddingBottom: 16 }}>
      {ifShowTemplateDownload && (
        <div className="toolBar">
          <span>文件下载</span>
          <span onClick={() => download()}>模板下载</span>
        </div>
      )}
      {ifShowTip && (
        <Alert
          message="注意，导入的数据将会覆盖当前数据"
          type="warning"
          style={{ height: 24, fontSize: 12, marginBottom: 16, marginTop: 16 }}
          showIcon
          closable
          banner
        />
      )}

      <Dragger {...config} height={140}>
        <p className="ant-upload-drag-icon" style={{ marginBottom: 5 }}>
          <InboxOutlined style={{ fontSize: 50, color: '#3376FE' }} />
        </p>
        <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
      </Dragger>
    </div>
  );
};

export default KCIMUpload;