From a2a9374d81c53703dc8f3535a6958c383476f9d3 Mon Sep 17 00:00:00 2001 From: zhangds Date: Mon, 25 Jul 2022 15:36:22 +0800 Subject: [PATCH] =?UTF-8?q?1)=20=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=20=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UseUploadExcel/index copy.jsx | 121 ++++++++++++++++ src/components/UseUploadExcel/index.jsx | 145 ++++++++++++++----- src/components/UseUploadExcel/style.less | 30 +++- 3 files changed, 256 insertions(+), 40 deletions(-) create mode 100644 src/components/UseUploadExcel/index copy.jsx diff --git a/src/components/UseUploadExcel/index copy.jsx b/src/components/UseUploadExcel/index copy.jsx new file mode 100644 index 00000000..90efbee5 --- /dev/null +++ b/src/components/UseUploadExcel/index copy.jsx @@ -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 ( +
+
+
+
1
+ 上传文件 +
+
+
+
+
+
2
+ 导入完成 +
+
+ +
+
直接上传
+
+
- 支持文件类型：xls，xlsx，csv
+
+ - 支持所有基础字段的导入，一次至多导入 10000 + 条手机号（不符合规则整条任务不予以导入） +
+
+
+
+ ); + }; + + // 上传excel组件 + const uploadExcel = () => { + return ( +
+ this.fileChange(e)} + /> + +
+ ); + }; + + // 底部 + const uploadFooter = () => { + return ( +
+
下载模板并填写后上传
+
+
+ 请先下载「数字世界营销管理系统_keys_模板」并按照模板填写后再上传。 +
+
+ +
+ ); + }; + + return ( +
+ + + + + } + > +
+ {/* 弹窗头部 */} +
{uploadTop()}
+ + {/* 文件上传区域 */} +
{uploadExcel()}
+ + {/* 底部 */} +
{uploadFooter()}
+
+ +
+ ); +}; + +export default UseUploadExcel; diff --git a/src/components/UseUploadExcel/index.jsx b/src/components/UseUploadExcel/index.jsx index 576f985b..234427af 100644 --- a/src/components/UseUploadExcel/index.jsx +++ b/src/components/UseUploadExcel/index.jsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Dialog, Button } from "zent"; +import { Dialog, Button, Icon } from "zent"; import "./style.less"; const UseUploadExcel = (props) => { const { @@ -9,49 +9,116 @@ const UseUploadExcel = (props) => { onClose, closeBtn = false, } = props; - return ( -
- - - - - } - > -
-
-
-
1
- 上传文件 -
-
-
-
-
-
2
- 导入完成 -
+ + // 顶部 + const uploadTop = () => { + return ( +
+
+
+
1
+ 上传文件
+
+
+
+
+
2
+ 导入完成 +
+
-
-
直接上传
- -
-
- 支持文件类型：xls，xlsx，csv
-
- - 支持所有基础字段的导入，一次至多导入 10000 - 条手机号（不符合规则整条任务不予以导入） -
+
+
直接上传
+
+
- 支持文件类型：xls，xlsx，csv
+
+ - 支持所有基础字段的导入，一次至多导入 10000 + 条手机号（不符合规则整条任务不予以导入）
-
+
+ ); + }; + + // 上传excel组件 + const uploadExcel = () => { + return ( +
+ this.fileChange(e)} + /> + +
+ ); + }; + + // 底部 + const uploadFooter = () => { + return ( +
+
下载模板并填写后上传
+
+
+ 请先下载「数字世界营销管理系统_keys_模板」并按照模板填写后再上传。 +
+
+ + +
+ + +
+
+ ); + }; + + return ( +
+
+
+
+
从Excel导入白名单
+ +
+ + {uploadTop()} + {uploadExcel()} + {uploadFooter()} +
); }; diff --git a/src/components/UseUploadExcel/style.less b/src/components/UseUploadExcel/style.less index 4ddb2606..943b9a09 100644 --- a/src/components/UseUploadExcel/style.less +++ b/src/components/UseUploadExcel/style.less @@ -66,4 +66,32 @@ .upload-info{ color:#626366; } -} \ No newline at end of file +} + +.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; +}