1) 增加批量上传查询
This commit is contained in:
zhangds
parent
232c9d7cf5
commit
b6c05cb183
|
|
@ -0,0 +1,362 @@
|
|||
import React, { useState } from "react";
|
||||
import { Button, Icon, BlockLoading, Notify, Grid } from "zent";
|
||||
import "./style.less";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "行号",
|
||||
name: "id",
|
||||
},
|
||||
{
|
||||
title: "key",
|
||||
name: "key",
|
||||
},
|
||||
{
|
||||
title: "错误原因",
|
||||
name: "msg",
|
||||
},
|
||||
];
|
||||
|
||||
const UseUploadExcel = (props) => {
|
||||
const datasets = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
datasets.push({
|
||||
id: `${i}`,
|
||||
key: `key ${i}`,
|
||||
msg: `meg ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
const { title = "提示", onClose, visible = false } = props;
|
||||
|
||||
const [fileState, setFilesState] = useState(null); // 文件
|
||||
const [filesName, setFilesName] = useState(""); // 文件名
|
||||
const [filesTip, setFilesTip] = useState(0); // 解析 tip
|
||||
const [loading, setLoading] = useState(false); // 解析 loading
|
||||
const [sha1, setSha1] = useState(""); // 后端值
|
||||
const [disabledSureBtn, setDisabledSureBtn] = useState(true); // 导入 按钮
|
||||
const [partSuccessTag, setPartSuccessTag] = useState(false); // 部分成功
|
||||
const [showUpType, setShowUpType] = useState(2); // 0无文件上传 1文件上传
|
||||
/**
|
||||
* 文件后端解析
|
||||
*/
|
||||
const excelParseFun = () => {
|
||||
setLoading(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
|
||||
// 200 全部成功
|
||||
// setFilesTip(true);
|
||||
// setDisabledSureBtn(false);
|
||||
|
||||
// 400 全部失败
|
||||
setFilesTip(false);
|
||||
setDisabledSureBtn(true);
|
||||
|
||||
// 401 部分成功
|
||||
}, 3000);
|
||||
|
||||
// const wfForm = new FormData();
|
||||
// wfForm.append("file", fileState);
|
||||
// wfForm.append("remark", fileState.name);
|
||||
// this.apiUpload(`/admin/blacklist/parse`, wfForm).then((res) => {
|
||||
// console.log("res =>", res);
|
||||
// setLoading(false);
|
||||
// if (res.code === 200) {
|
||||
// // 全部成功
|
||||
// setFilesTip(true);
|
||||
// setSha1(res.data);
|
||||
// setDisabledSureBtn(false);
|
||||
// } else if (res.code === 400) {
|
||||
// // 全部失败
|
||||
// setFilesTip(false);
|
||||
// this.isUploadStateTip400 = true;
|
||||
// } else if (res.code === 401) {
|
||||
// // 有些成功有些失败
|
||||
// setFilesTip(false);
|
||||
// } else {
|
||||
// Notify.error(res.error);
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
/**
|
||||
* input 文件改变
|
||||
* @param {file} e
|
||||
*/
|
||||
const fileChange = (e) => {
|
||||
let my_file = e.target.files[0];
|
||||
setFilesState(my_file);
|
||||
setFilesName(my_file.name);
|
||||
|
||||
setShowUpType(1);
|
||||
|
||||
excelParseFun(); // 文件解析
|
||||
console.log("file =>", my_file);
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格文件模版下载
|
||||
*/
|
||||
const downloadMBExcel = () => {
|
||||
window.location.href =
|
||||
"http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx";
|
||||
};
|
||||
|
||||
/**
|
||||
* 确定导入
|
||||
*/
|
||||
const importBtn = () => {};
|
||||
|
||||
/**
|
||||
* 重新上传
|
||||
*/
|
||||
const resetUpload = () => {};
|
||||
|
||||
/**
|
||||
* 弹窗 顶部信息
|
||||
* @returns
|
||||
*/
|
||||
const uploadTop = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="step-bar">
|
||||
<div className="step-group">
|
||||
<div className="step-code active">1</div>
|
||||
<span className="step-label active">上传文件</span>
|
||||
</div>
|
||||
<div className="step-center">
|
||||
<div className="step-line"></div>
|
||||
</div>
|
||||
<div className="step-group">
|
||||
<div className="step-code">2</div>
|
||||
<span className="step-label">导入完成</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="upload-panel1">
|
||||
<div className="upload-label">直接上传</div>
|
||||
<div className="upload-info">
|
||||
<div> - 支持文件类型：xls，xlsx，csv</div>
|
||||
<div>
|
||||
- 支持所有基础字段的导入，一次至多导入 10000
|
||||
条手机号（不符合规则整条任务不予以导入）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 无，文件上传
|
||||
* @returns
|
||||
*/
|
||||
const uploadExcel = () => {
|
||||
return (
|
||||
<div className="upload-excel-01">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input"
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Button
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
上传文件
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析 tip
|
||||
* @returns
|
||||
*/
|
||||
const tipSuccess = () => {
|
||||
return (
|
||||
<div className="upload-success">
|
||||
<Icon type="check-circle" className="success-icon" />
|
||||
<span>文件解析成功， 点击 "确定导入" 即可导入</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const tipErr = () => {
|
||||
return (
|
||||
<div className="upload-error">
|
||||
<Icon type="error-circle" className="error-icon" />
|
||||
<span>文件解析失败, 请查看导入规则并更新文件</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @returns
|
||||
*/
|
||||
const upFilesExcel = () => {
|
||||
return (
|
||||
<div className="up-files-excel">
|
||||
<div className="user-file-box">
|
||||
<p className="user-file-name">
|
||||
<Icon type="text-guide-o" />
|
||||
{filesName}
|
||||
</p>
|
||||
<div className="file-update-box">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input1"
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Icon type="up-circle-o" />
|
||||
<span>更新文件</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* tip */}
|
||||
{filesTip === 1 ? tipSuccess() : tipErr()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 底部
|
||||
* @returns
|
||||
*/
|
||||
const uploadFooter = () => {
|
||||
return (
|
||||
<div className="upload-panel1">
|
||||
<div className="upload-label">下载模板并填写后上传</div>
|
||||
<div className="upload-info">
|
||||
<div>
|
||||
请先下载「数字世界营销管理系统_keys_模板」并按照模板填写后再上传。
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="default"
|
||||
className="btn-upload1"
|
||||
onClick={() => downloadMBExcel()}
|
||||
>
|
||||
下载模板
|
||||
</Button>
|
||||
|
||||
<div className="btn-group">
|
||||
<Button type="default" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={disabledSureBtn}
|
||||
onClick={(e) => {
|
||||
importBtn(e);
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
确定导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 全部错误和全部正确
|
||||
*/
|
||||
const successErrAll = () => {
|
||||
let el = null;
|
||||
if (showUpType === 0) {
|
||||
el = uploadExcel();
|
||||
} else if (showUpType === 1) {
|
||||
el = upFilesExcel();
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{uploadTop()}
|
||||
{el}
|
||||
{uploadFooter()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 部分正确
|
||||
*/
|
||||
const partSuccess = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="file-upload-tip">
|
||||
文件上传成功.共 20 条手机号,其中 10 条可成功导入
|
||||
</div>
|
||||
<div className="file-errmsg1">
|
||||
发现以下 10 条不符合要求,将不会被导入
|
||||
</div>
|
||||
|
||||
<div className="gridpanel1">
|
||||
<Grid
|
||||
columns={columns}
|
||||
datasets={datasets}
|
||||
scroll={{ y: 250 }}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="foot-bar">
|
||||
<div className="btn-group">
|
||||
<Button
|
||||
type="default"
|
||||
onClick={(e) => {
|
||||
resetUpload();
|
||||
}}
|
||||
>
|
||||
重新上传
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={(e) => {
|
||||
importBtn(e);
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
确定导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="import-excel" style={{ height: "auto" }}>
|
||||
<BlockLoading loading={loading} iconText="解析中..." icon="circle">
|
||||
<div className="import-header">
|
||||
<div className="import-title">{title}</div>
|
||||
<Icon type="close" className="import-close" onClick={onClose} />
|
||||
</div>
|
||||
{partSuccessTag ? partSuccess() : successErrAll()}
|
||||
</BlockLoading>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UseUploadExcel;
|
||||
|
|
@ -1,16 +1,55 @@
|
|||
import React, { useState } from "react";
|
||||
import { Dialog, Button } from "zent";
|
||||
import { Dialog, Button, Icon, BlockLoading, InlineLoading } from "zent";
|
||||
import "./style.less";
|
||||
const UseUploadExcel = (props) => {
|
||||
const {
|
||||
maskClosable = false,
|
||||
title = "提示",
|
||||
visible,
|
||||
onClose,
|
||||
closeBtn = false,
|
||||
} = props;
|
||||
const { title = "提示", onClose, visible = false } = props;
|
||||
|
||||
// 顶部
|
||||
const [fileState, setFilesState] = useState(null);
|
||||
const [filesName, setFilesName] = useState("");
|
||||
const [filesTip, setFilesTip] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
/**
|
||||
* 文件后端解析
|
||||
*/
|
||||
const excelParseFun = () => {
|
||||
setLoading(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
setFilesTip(true);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
/**
|
||||
* input 文件改变
|
||||
* @param {file} e
|
||||
*/
|
||||
const fileChange = (e) => {
|
||||
let my_file = e.target.files[0];
|
||||
setFilesState(my_file);
|
||||
setFilesName(my_file.name);
|
||||
|
||||
excelParseFun(); // 文件解析
|
||||
console.log("file =>", my_file);
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格文件模版下载
|
||||
*/
|
||||
const downloadMBExcel = () => {
|
||||
window.location.href =
|
||||
"http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx";
|
||||
};
|
||||
|
||||
/**
|
||||
* 确定导入
|
||||
*/
|
||||
const importBtn = () => {};
|
||||
|
||||
/**
|
||||
* 弹窗 顶部信息
|
||||
* @returns
|
||||
*/
|
||||
const uploadTop = () => {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -42,17 +81,20 @@ const UseUploadExcel = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
// 上传excel组件
|
||||
/**
|
||||
* 无，文件上传
|
||||
* @returns
|
||||
*/
|
||||
const uploadExcel = () => {
|
||||
return (
|
||||
<div className="upload-excel-01">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input"
|
||||
onChange={(e) => this.fileChange(e)}
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Button
|
||||
className="btn-upload"
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
|
|
@ -65,7 +107,54 @@ const UseUploadExcel = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
// 底部
|
||||
/**
|
||||
* 解析 tip
|
||||
* @returns
|
||||
*/
|
||||
const tipSuccess = () => {
|
||||
return (
|
||||
<div className="upload-success">
|
||||
<Icon type="check-circle" className="success-icon" />
|
||||
<span>文件解析成功， 点击 "确定导入" 即可导入</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const tipErr = () => {
|
||||
return (
|
||||
<div className="upload-error">
|
||||
<Icon type="error-circle" className="error-icon" />
|
||||
<span>文件解析失败, 请查看导入规则并更新文件</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @returns
|
||||
*/
|
||||
const upFilesExcel = () => {
|
||||
return (
|
||||
<div className="up-files-excel">
|
||||
<div className="user-file-box">
|
||||
<p className="user-file-name">
|
||||
<Icon type="text-guide-o" />
|
||||
{filesName}
|
||||
</p>
|
||||
<div className="file-update-box">
|
||||
<Icon type="up-circle-o" />
|
||||
<span>更新文件</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* tip */}
|
||||
{filesTip ? tipSuccess() : tipErr()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 底部
|
||||
* @returns
|
||||
*/
|
||||
const uploadFooter = () => {
|
||||
return (
|
||||
<div className="upload-panel1">
|
||||
|
|
@ -77,43 +166,53 @@ const UseUploadExcel = (props) => {
|
|||
</div>
|
||||
<Button
|
||||
type="default"
|
||||
className="btn-download"
|
||||
onClick={(e) => {
|
||||
this.downLoadTemplate();
|
||||
}}
|
||||
className="btn-upload1"
|
||||
onClick={() => downloadMBExcel()}
|
||||
>
|
||||
下载模板
|
||||
</Button>
|
||||
|
||||
<div className="btn-group">
|
||||
<Button type="default" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={(e) => {
|
||||
importBtn(e);
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
确定导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
title={title}
|
||||
className="zent-dialog-demo-basic-dialog"
|
||||
visible={visible}
|
||||
closeBtn={closeBtn}
|
||||
maskClosable={maskClosable}
|
||||
footer={
|
||||
<>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button type="primary">确定导入</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{/* 弹窗头部 */}
|
||||
<div className="dialog-main-header">{uploadTop()}</div>
|
||||
|
||||
{/* 文件上传区域 */}
|
||||
<div className="dialog-main-files">{uploadExcel()}</div>
|
||||
|
||||
{/* 底部 */}
|
||||
<div className="dialog-main-footer">{uploadFooter()}</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<InlineLoading loading={loading} iconText="加载中" />
|
||||
<BlockLoading loading={loading}>
|
||||
{visible ? (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="import-excel" style={{ height: "auto" }}>
|
||||
<div className="import-header">
|
||||
<div className="import-title">{title}</div>
|
||||
<Icon type="close" className="import-close" onClick={onClose} />
|
||||
</div>
|
||||
{uploadTop()}
|
||||
{fileState ? upFilesExcel() : uploadExcel()}
|
||||
{uploadFooter()}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</BlockLoading>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,121 @@
|
|||
import React, { useState } from "react";
|
||||
import { Dialog, Button, Icon } from "zent";
|
||||
import { Button, Icon, BlockLoading, Notify, Grid } from "zent";
|
||||
import "./style.less";
|
||||
const UseUploadExcel = (props) => {
|
||||
const {
|
||||
maskClosable = false,
|
||||
title = "提示",
|
||||
visible,
|
||||
onClose,
|
||||
closeBtn = false,
|
||||
} = props;
|
||||
|
||||
// 顶部
|
||||
const columns = [
|
||||
{
|
||||
title: "行号",
|
||||
name: "id",
|
||||
},
|
||||
{
|
||||
title: "key",
|
||||
name: "key",
|
||||
},
|
||||
{
|
||||
title: "错误原因",
|
||||
name: "msg",
|
||||
},
|
||||
];
|
||||
|
||||
const UseUploadExcel = (props) => {
|
||||
const datasets = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
datasets.push({
|
||||
id: `${i}`,
|
||||
key: `key ${i}`,
|
||||
msg: `meg ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
const { title = "提示", onClose, visible = false } = props;
|
||||
|
||||
const [fileState, setFilesState] = useState(null); // 文件
|
||||
const [filesName, setFilesName] = useState(""); // 文件名
|
||||
const [filesTip, setFilesTip] = useState(2); // 解析 tip 0失败 1成功 2无事发生
|
||||
const [loading, setLoading] = useState(false); // 解析 loading
|
||||
const [sha1, setSha1] = useState(""); // 后端值
|
||||
const [disabledSureBtn, setDisabledSureBtn] = useState(true); // 导入 按钮
|
||||
const [partSuccessTag, setPartSuccessTag] = useState(false); // 部分成功
|
||||
const [showUpType, setShowUpType] = useState(false); // false无文件上传 true文件上传
|
||||
/**
|
||||
* 文件后端解析
|
||||
*/
|
||||
const excelParseFun = () => {
|
||||
setLoading(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
|
||||
// 200 全部成功
|
||||
setFilesTip(1);
|
||||
setDisabledSureBtn(false);
|
||||
|
||||
// 400 全部失败
|
||||
// setFilesTip(0);
|
||||
// setDisabledSureBtn(true);
|
||||
|
||||
// 401 部分成功
|
||||
}, 3000);
|
||||
|
||||
// const wfForm = new FormData();
|
||||
// wfForm.append("file", fileState);
|
||||
// wfForm.append("remark", fileState.name);
|
||||
// this.apiUpload(`/admin/blacklist/parse`, wfForm).then((res) => {
|
||||
// console.log("res =>", res);
|
||||
// setLoading(false);
|
||||
// if (res.code === 200) {
|
||||
// // 全部成功
|
||||
// setFilesTip(true);
|
||||
// setSha1(res.data);
|
||||
// setDisabledSureBtn(false);
|
||||
// } else if (res.code === 400) {
|
||||
// // 全部失败
|
||||
// setFilesTip(false);
|
||||
// this.isUploadStateTip400 = true;
|
||||
// } else if (res.code === 401) {
|
||||
// // 有些成功有些失败
|
||||
// setFilesTip(false);
|
||||
// } else {
|
||||
// Notify.error(res.error);
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
/**
|
||||
* input 文件改变
|
||||
* @param {file} e
|
||||
*/
|
||||
const fileChange = (e) => {
|
||||
let my_file = e.target.files[0];
|
||||
setFilesState(my_file);
|
||||
setFilesName(my_file.name);
|
||||
setShowUpType(true);
|
||||
excelParseFun(); // 文件解析
|
||||
console.log("file =>", my_file);
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格文件模版下载
|
||||
*/
|
||||
const downloadMBExcel = () => {
|
||||
window.location.href =
|
||||
"http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx";
|
||||
};
|
||||
|
||||
/**
|
||||
* 确定导入
|
||||
*/
|
||||
const importBtn = () => {};
|
||||
|
||||
/**
|
||||
* 重新上传
|
||||
*/
|
||||
const resetUpload = () => {};
|
||||
|
||||
/**
|
||||
* 弹窗 顶部信息
|
||||
* @returns
|
||||
*/
|
||||
const uploadTop = () => {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -42,17 +147,20 @@ const UseUploadExcel = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
// 上传excel组件
|
||||
/**
|
||||
* 无，文件上传
|
||||
* @returns
|
||||
*/
|
||||
const uploadExcel = () => {
|
||||
return (
|
||||
<div className="upload-excel-01">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input"
|
||||
onChange={(e) => this.fileChange(e)}
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Button
|
||||
className="btn-upload"
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
|
|
@ -65,7 +173,68 @@ const UseUploadExcel = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
// 底部
|
||||
/**
|
||||
* 解析 tip
|
||||
* @returns
|
||||
*/
|
||||
const tipSuccess = () => {
|
||||
return (
|
||||
<div className="upload-success">
|
||||
<Icon type="check-circle" className="success-icon" />
|
||||
<span>文件解析成功， 点击 "确定导入" 即可导入</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const tipErr = () => {
|
||||
return (
|
||||
<div className="upload-error">
|
||||
<Icon type="error-circle" className="error-icon" />
|
||||
<span>文件解析失败, 请查看导入规则并更新文件</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
* @returns
|
||||
*/
|
||||
const upFilesExcel = () => {
|
||||
return (
|
||||
<div className="up-files-excel">
|
||||
<div className="user-file-box">
|
||||
<p className="user-file-name">
|
||||
<Icon type="text-guide-o" />
|
||||
{filesName}
|
||||
</p>
|
||||
<div className="file-update-box">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input1"
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Icon type="up-circle-o" />
|
||||
<span>更新文件</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* tip */}
|
||||
{(() => {
|
||||
switch (filesTip) {
|
||||
case 0:
|
||||
return tipErr();
|
||||
case 1:
|
||||
return tipSuccess();
|
||||
default:
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 底部
|
||||
* @returns
|
||||
*/
|
||||
const uploadFooter = () => {
|
||||
return (
|
||||
<div className="upload-panel1">
|
||||
|
|
@ -75,23 +244,23 @@ const UseUploadExcel = (props) => {
|
|||
请先下载「数字世界营销管理系统_keys_模板」并按照模板填写后再上传。
|
||||
</div>
|
||||
</div>
|
||||
<Button type="default" className="btn-upload1">
|
||||
<Button
|
||||
type="default"
|
||||
className="btn-upload1"
|
||||
onClick={() => downloadMBExcel()}
|
||||
>
|
||||
下载模板
|
||||
</Button>
|
||||
|
||||
<div className="btn-group">
|
||||
<Button
|
||||
type="default"
|
||||
onClick={(e) => {
|
||||
this.setState({ import_visible: false });
|
||||
}}
|
||||
>
|
||||
<Button type="default" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={disabledSureBtn}
|
||||
onClick={(e) => {
|
||||
this.importClick(e);
|
||||
importBtn(e);
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
|
|
@ -106,19 +275,86 @@ const UseUploadExcel = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="import-excel" style={{ height: "auto" }}>
|
||||
<div className="import-header">
|
||||
<div className="import-title">从Excel导入白名单</div>
|
||||
<Icon type="close" className="import-close" />
|
||||
</div>
|
||||
|
||||
/**
|
||||
* 全部错误和全部正确
|
||||
*/
|
||||
const successErrAll = () => {
|
||||
return (
|
||||
<div>
|
||||
{uploadTop()}
|
||||
{uploadExcel()}
|
||||
{showUpType ? upFilesExcel() : uploadExcel()}
|
||||
{uploadFooter()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 部分正确
|
||||
*/
|
||||
const partSuccess = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="file-upload-tip">
|
||||
文件上传成功.共 20 条手机号,其中 10 条可成功导入
|
||||
</div>
|
||||
<div className="file-errmsg1">
|
||||
发现以下 10 条不符合要求,将不会被导入
|
||||
</div>
|
||||
|
||||
<div className="gridpanel1">
|
||||
<Grid
|
||||
columns={columns}
|
||||
datasets={datasets}
|
||||
scroll={{ y: 250 }}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="foot-bar">
|
||||
<div className="btn-group">
|
||||
<Button
|
||||
type="default"
|
||||
onClick={(e) => {
|
||||
resetUpload();
|
||||
}}
|
||||
>
|
||||
重新上传
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={(e) => {
|
||||
importBtn(e);
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
确定导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="import-excel" style={{ height: "auto" }}>
|
||||
<BlockLoading loading={loading} iconText="解析中..." icon="circle">
|
||||
<div className="import-header">
|
||||
<div className="import-title">{title}</div>
|
||||
<Icon type="close" className="import-close" onClick={onClose} />
|
||||
</div>
|
||||
{partSuccessTag ? partSuccess() : successErrAll()}
|
||||
</BlockLoading>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -70,11 +70,29 @@
|
|||
|
||||
.upload-input{
|
||||
opacity: 0;
|
||||
width: 300px;
|
||||
width: 100px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
.upload-input1{
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
border: 1px solid red;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.import-close{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dialog-main-footer{
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
|
@ -95,3 +113,82 @@
|
|||
margin-top: 10px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
|
||||
.user-file-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 5px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
/* .user-file-box-actv {
|
||||
background: #409eff;
|
||||
border: 1px solid #409eff !important;
|
||||
color: #fff;
|
||||
} */
|
||||
.user-file-box-actv p:first-child {
|
||||
background: #409eff !important;
|
||||
border: 1px solid #409eff !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-file-box-actv p:last-child {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
|
||||
.file-update-box {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-update-box span,
|
||||
.file-update-box i {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.user-file-name {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.user-upload-btn {
|
||||
position: relative;
|
||||
}
|
||||
.upload-error {
|
||||
color: #f56c6c;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.upload-success {
|
||||
color: #67c23a;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.upload-title-p {
|
||||
font-weight: bold;
|
||||
}
|
||||
.black-title {
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
}
|
||||
.up-files-excel,.upload-excel-01{
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.upload-excel-01{
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.file-errmsg1{
|
||||
margin-top: 10px;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.gridpanel1{
|
||||
width: 90%;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue