Merge branch 'addMenu-v1.4' of codeup.aliyun.com:5f9118049cffa29cfdd3be1c/marketing/frontend into addMenu-v1.4

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 (
+      <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;

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 (
-    <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="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>
+
+  // 顶部
+  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 className="upload-panel1">
+          <div className="upload-label">直接上传</div>
+          <div className="upload-info">
+            <div> - 支持文件类型：xls，xlsx，csv</div>
+            <div>
+              - 支持所有基础字段的导入，一次至多导入 10000
+              条手机号（不符合规则整条任务不予以导入）
             </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>
   );
 };

src/components/UseUploadExcel/style.less

@@ -67,3 +67,31 @@
         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;
+}