1) 增加批量上传 弹窗
This commit is contained in:
zhangds
parent
24579f8604
commit
a2a9374d81
|
|
@ -0,0 +1,121 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Dialog, Button } from "zent";
|
||||||
|
import "./style.less";
|
||||||
|
const UseUploadExcel = (props) => {
|
||||||
|
const {
|
||||||
|
maskClosable = false,
|
||||||
|
title = "提示",
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
closeBtn = false,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
// 顶部
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上传excel组件
|
||||||
|
const uploadExcel = () => {
|
||||||
|
return (
|
||||||
|
<div className="upload-excel-01">
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
className="upload-input"
|
||||||
|
onChange={(e) => this.fileChange(e)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
className="btn-upload"
|
||||||
|
style={{
|
||||||
|
background: "#1890ff",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
border: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
上传文件
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 底部
|
||||||
|
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-download"
|
||||||
|
onClick={(e) => {
|
||||||
|
this.downLoadTemplate();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
下载模板
|
||||||
|
</Button>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UseUploadExcel;
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Dialog, Button } from "zent";
|
import { Dialog, Button, Icon } from "zent";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
const UseUploadExcel = (props) => {
|
const UseUploadExcel = (props) => {
|
||||||
const {
|
const {
|
||||||
|
|
@ -9,49 +9,116 @@ const UseUploadExcel = (props) => {
|
||||||
onClose,
|
onClose,
|
||||||
closeBtn = false,
|
closeBtn = false,
|
||||||
} = props;
|
} = props;
|
||||||
return (
|
|
||||||
<div>
|
// 顶部
|
||||||
<Dialog
|
const uploadTop = () => {
|
||||||
title={title}
|
return (
|
||||||
className="zent-dialog-demo-basic-dialog"
|
<div>
|
||||||
visible={visible}
|
<div className="step-bar">
|
||||||
closeBtn={closeBtn}
|
<div className="step-group">
|
||||||
maskClosable={maskClosable}
|
<div className="step-code active">1</div>
|
||||||
footer={
|
<span className="step-label active">上传文件</span>
|
||||||
<>
|
|
||||||
<Button onClick={onClose}>取消</Button>
|
|
||||||
<Button type="primary">确定导入</Button>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<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>
|
||||||
|
<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-panel1">
|
||||||
<div className="upload-label">直接上传</div>
|
<div className="upload-label">直接上传</div>
|
||||||
|
<div className="upload-info">
|
||||||
<div className="upload-info">
|
<div> - 支持文件类型：xls，xlsx，csv</div>
|
||||||
<div> - 支持文件类型：xls，xlsx，csv</div>
|
<div>
|
||||||
<div>
|
- 支持所有基础字段的导入，一次至多导入 10000
|
||||||
- 支持所有基础字段的导入，一次至多导入 10000
|
条手机号（不符合规则整条任务不予以导入）
|
||||||
条手机号（不符合规则整条任务不予以导入）
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上传excel组件
|
||||||
|
const uploadExcel = () => {
|
||||||
|
return (
|
||||||
|
<div className="upload-excel-01">
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
className="upload-input"
|
||||||
|
onChange={(e) => this.fileChange(e)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
className="btn-upload"
|
||||||
|
style={{
|
||||||
|
background: "#1890ff",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
border: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
上传文件
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 底部
|
||||||
|
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">
|
||||||
|
下载模板
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="btn-group">
|
||||||
|
<Button
|
||||||
|
type="default"
|
||||||
|
onClick={(e) => {
|
||||||
|
this.setState({ import_visible: false });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={(e) => {
|
||||||
|
this.importClick(e);
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
background: "#1890ff",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
border: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
确定导入
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
{uploadTop()}
|
||||||
|
{uploadExcel()}
|
||||||
|
{uploadFooter()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -66,4 +66,32 @@
|
||||||
.upload-info{
|
.upload-info{
|
||||||
color:#626366;
|
color:#626366;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.upload-input{
|
||||||
|
opacity: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 48px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.dialog-main-footer{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-upload{
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color:#1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-upload1{
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-download{
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue