123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- import React, { useState, useCallback, useRef } from 'react';
- import cx from 'classnames';
- import { Button, Checkbox, message } from 'antd';
- import { importUsers } from './service';
- import { useModel, history } from 'umi';
- import iconExcel from './icon-excel.svg';
- import iconErrorExcel from './icon-excel-error.svg';
- import styles from './index.less';
- const isExcel = (type) => {
- return (
- [
- 'text/csv',
- '.csv',
- 'application/vnd.ms-excel',
- 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
- ].indexOf(type) >= 0
- );
- };
- export default ({ onUploadDone }) => {
- const [draggingOver, setDraggingOver] = useState(false);
- const [fileInfo, setFileInfo] = useState({});
- const [autoSendActiveMsg, setAutoSendActiveMsg] = useState(true);
- const [errorInfo, setErrorInfo] = useState('');
- const [uploading, setUploading] = useState(false);
- const fileInputRef = useRef();
- /**
- * 0: 开始选择
- * 1: 文件选择之后,且符合规范
- * 2: 文件选择之后,不符合规范
- * 3: 文件上传失败
- */
- const [uploadState, setUploadState] = useState(0);
- const { initialState } = useModel('@@initialState');
- const handleFileSelected = useCallback((e) => {
- const file = e.target.files[0];
- if (!file) {
- setUploadState(3);
- }
- setFileInfo({
- file,
- name: file.name,
- size: `${Math.ceil(file.size / 1024)}K`,
- });
- if (!isExcel(file.type)) {
- setErrorInfo('不支持此类文件格式');
- setUploadState(2);
- } else if (file.size > 1024 * 1024 * 10) {
- setErrorInfo('文件大小不能超过 10MB');
- setUploadState(2);
- } else {
- setUploadState(1);
- }
- e.target.value = '';
- }, []);
- const beginUpload = useCallback(() => {
- setUploading(true);
- let params = {
- companyId: initialState?.currentUser?.companyId,
- };
- importUsers(fileInfo.file, params)
- .then((res) => {
- setUploading(false);
- if (res.key) {
- onUploadDone(res);
- } else {
- message.error(res.message);
- setUploadState(0);
- }
- })
- .catch(() => {
- // 文件上传失败
- setUploading(false);
- setUploadState(3);
- });
- }, [fileInfo, autoSendActiveMsg, onUploadDone]);
- return (
- <div
- className={cx(styles.c, {
- [styles.dragging]: draggingOver,
- })}
- onDragEnter={(e) => {
- e.preventDefault();
- e.stopPropagation();
- setDraggingOver(true);
- }}
- onDragOver={(e) => {
- setDraggingOver(true);
- e.preventDefault();
- e.stopPropagation();
- return false;
- }}
- onDragLeave={(e) => {
- e.preventDefault();
- e.stopPropagation();
- setDraggingOver(false);
- }}
- onDrop={(e) => {
- e.preventDefault();
- e.stopPropagation();
- setDraggingOver(false);
- handleFileSelected({
- target: {
- files: e.dataTransfer.files,
- },
- });
- }}
- >
- <input type="file" hidden ref={fileInputRef} onChange={(e) => handleFileSelected(e)} />
- <div className={styles.title}>
- <span>2 /</span>
- 上传填写完后的表格文件
- </div>
- {uploadState === 0 && (
- <div className={styles.fileTrigger}>
- <img src={iconExcel} />
- <div>
- <span onClick={() => fileInputRef.current.click()}>点击选择文件</span>
- ,或将文件拖拽到此处
- </div>
- </div>
- )}
- {uploadState === 1 && (
- <div className={styles.fileInfo}>
- <img src={iconExcel} />
- <div>
- {fileInfo.name} ({fileInfo.size})
- <span onClick={() => fileInputRef.current.click()}>重新选择文件</span>
- </div>
- <section>
- <Button
- type="primary"
- size="large"
- style={{ margin: '30px 0 20px' }}
- loading={uploading}
- onClick={() => {
- beginUpload();
- }}
- >
- 开始上传
- </Button>
- <br />
- {/* <Checkbox checked={autoSendActiveMsg} onChange={e => setAutoSendActiveMsg(e.target.checked)}>导入后自动发送短信提醒其激活账号</Checkbox> */}
- </section>
- </div>
- )}
- {uploadState === 2 && (
- <div className={styles.fileError}>
- <img src={iconErrorExcel} />
- <div>
- {errorInfo},<span onClick={() => fileInputRef.current.click()}>重新选择文件</span>
- </div>
- </div>
- )}
- {uploadState === 3 && (
- <div className={styles.fileError}>
- <img src={iconErrorExcel} />
- <div>
- {fileInfo.name} ({fileInfo.size})
- </div>
- <div>
- 文件导入失败,请<span onClick={beginUpload}>再次上传</span>或
- <span onClick={() => fileInputRef.current.click()}>重新选择文件</span>
- </div>
- </div>
- )}
- </div>
- );
- };
|