|
@@ -0,0 +1,178 @@
|
|
|
+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>
|
|
|
+ );
|
|
|
+};
|