Browse Source

fix:导入失败页面样式修改

chenzhen2 1 year ago
parent
commit
c3a2ba1436

File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-person-import/close-icon.svg


+ 65 - 7
src/pages/Member/components/StartImport/ImportError/index.jsx

@@ -1,17 +1,55 @@
 import React, { useState } from 'react';
 import { Modal, Button } from 'antd';
-import Icon from '@/tenants-ui/SgIcon';
+import { useModel } from 'umi';
+import iconClose from '@/assets/images/page-person-import/close-icon.svg';
 import styles from './index.less';
+import { exportUsersError } from '../Uploader/service';
 const importTitleIcon = require('@/assets/images/page-person-import/import-icon.svg');
 
 export default ({ info, onClose }) => {
-  const [token] = useState(() => {
-    return localStorage.getItem('token');
-  });
-  console.log('info==', info);
+  const { initialState } = useModel('@@initialState');
+
+  const downloadExcel = () => {
+    let param = {
+      companyId: initialState?.currentUser?.companyId,
+      key: info.key,
+    };
+    exportUsersError(param)
+      .then((resData) => {
+        console.log('resData==', resData);
+        let headers = resData.response && resData.response.headers;
+        console.log(headers.get('content-disposition'));
+        let disposition = headers.get('content-disposition');
+        let filename = disposition
+          ? decodeURI(disposition.split(';')[1].split('filename=')[1])
+          : '错误报告.xls';
+        const link = document.createElement('a');
+        let data = resData.data;
+        let blob = new Blob([resData], {
+          // type: 'application/xlsx',
+          type: 'application/msexcel',
+        });
+        link.style.display = 'none';
+        link.href = URL.createObjectURL(blob);
+        console.log(filename);
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(link);
+      })
+      .catch(() => {});
+  };
 
   return (
-    <Modal open width={760} className={styles.importError} onClose={onClose}>
+    <Modal
+      open
+      width={760}
+      footer={[]}
+      closable={false}
+      className={styles.importError}
+      onClose={onClose}
+    >
       <div className={styles.header}>
         <div
           className={styles.close}
@@ -19,7 +57,11 @@ export default ({ info, onClose }) => {
             onClose();
           }}
         >
-          <Icon type="close" />
+          <img src={iconClose} alt="" />
+        </div>
+
+        <div className={styles.title}>
+          <img src={importTitleIcon} alt="" />
         </div>
       </div>
       <div className={styles.listW}>
@@ -50,6 +92,22 @@ export default ({ info, onClose }) => {
           })}
         </div>
       </div>
+
+      <div className={styles.footer}>
+        <div className={styles.footerLeft}>
+          您可以
+          <span onClick={downloadExcel}>下载错误报告,</span>
+          修改后重新导入
+        </div>
+        <div
+          className={styles.footerRight}
+          onClick={() => {
+            onClose(2);
+          }}
+        >
+          重新导入
+        </div>
+      </div>
     </Modal>
   );
 };

+ 38 - 13
src/pages/Member/components/StartImport/ImportError/index.less

@@ -1,4 +1,10 @@
 .importError {
+  :global {
+    .ant-modal-body {
+      background: #fff;
+      border-radius: 20px;
+    }
+  }
   .header {
     position: relative;
     z-index: 1;
@@ -37,36 +43,54 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: #c4c4c4;
-    font-size: 20px;
+    width: 24px;
+    height: 24px;
     border-radius: 100%;
     cursor: pointer;
-    transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
-    &:hover {
-      background-color: #fff;
-    }
   }
 
   .footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-top: 12px;
+    margin-top: 22px;
+    padding: 10px;
     color: #656872;
-    a {
-      color: #000;
-      text-decoration: underline;
-      &:hover {
+    font-size: 16px;
+    background: #fff;
+    // border: 1px solid #c4c4c466;
+    .footerLeft {
+      padding-left: 66px;
+      font-weight: 400;
+      font-size: 16px;
+      font-family: PingFang SC;
+      line-height: 34px;
+      text-align: left;
+      span {
+        padding: 0 4px;
         color: #000;
+        border-bottom: 1px solid #000;
       }
     }
+    .footerRight {
+      width: 116px;
+      height: 50px;
+      // padding: 17px 30px 17px 30px;
+      color: #000;
+      line-height: 50px;
+      text-align: center;
+      background: #ffe823;
+      border-radius: 30px;
+    }
   }
 
   .listW {
+    max-height: 550px;
+    padding: 65px;
+    padding-top: 40px;
     overflow: hidden;
     color: #656872;
+    background: #fff;
     border: 1px solid #f3f3f3;
     border-radius: 4px;
   }
@@ -81,6 +105,7 @@
 
   .list {
     background: #fff;
+    border: 1px solid #f3f3f3;
     .row {
       display: flex;
       line-height: 24px;

+ 3 - 5
src/pages/Member/components/StartImport/ImportSuccess/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, Button } from 'antd';
 // import Icon from '@/tenants-ui/Icon';
-import Icon from '@/tenants-ui/SgIcon';
+import iconClose from '@/assets/images/page-person-import/close-icon.svg';
 import iconImport from '@/assets/images/page-person-import/import-icon.svg';
 import styles from './index.less';
 
@@ -18,11 +18,9 @@ export default ({ info, onClose }) => {
       >
         <div className={styles.header}>
           <img src={iconImport} />
-          <span className={styles.close} onClick={onClose}>
-            <Icon type="close" />
-          </span>
+          <img src={iconClose} className={styles.close} onClick={onClose}></img>
         </div>
-        <div className={styles.info}>成功导入 {info.successRecord} 条数据</div>
+        <div className={styles.info}>{info.message}</div>
         <div className={styles.f}>
           <Button type="primary" size="large" onClick={onClose}>
             完成

+ 32 - 24
src/pages/Member/components/StartImport/ImportSuccess/index.less

@@ -10,43 +10,51 @@
 .header {
   position: relative;
   height: 90px;
+  // margin: -24px -24px 0;
+  padding-top: 40px;
+  text-align: center;
   background: rgba(196, 196, 196, 0.2);
-  margin: -24px -24px 0;
   border-radius: 20px 20px 0 0;
-  text-align: center;
-  padding-top: 40px;
   img {
     width: 88px;
     height: 88px;
+    background: #f0da21;
     border-radius: 100%;
-    background: #F0DA21;
   }
-}
-.close {
-  position: absolute;
-  right: 15px;
-  top: 15px;
-  font-size: 20px;
-  color: #c4c4c4;
-  width: 36px;
-  height: 36px;
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
-  &:hover {
-    background-color: #fff;
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: #c4c4c4;
+    font-size: 20px;
+    background: transparent;
+    border-radius: 100%;
+    cursor: pointer;
   }
 }
 
 .info {
-  margin: 100px 0 50px;
-  text-align: center;
+  // margin: 50px 0 70px;
+  margin-top: 80px;
+  margin-bottom: 70px;
   font-size: 16px;
+  text-align: center;
 }
 
 .f {
+  padding-bottom: 40px;
   text-align: center;
-}
+  button {
+    font-weight: 500;
+    font-size: 14px;
+    font-family: PingFang SC;
+    line-height: 16px;
+    text-align: center;
+    background: #ffe823;
+  }
+}

+ 5 - 6
src/pages/Member/components/StartImport/Uploader/index.jsx

@@ -36,13 +36,14 @@ export default ({ onUploadDone }) => {
   const { initialState } = useModel('@@initialState');
   const handleFileSelected = useCallback((e) => {
     const file = e.target.files[0];
+
     setFileInfo({
       file,
       name: file.name,
       size: `${Math.ceil(file.size / 1024)}K`,
     });
     if (!isExcel(file.type)) {
-      setErrorInfo('不支持此类文件格式');
+      setErrorInfo('文件格式不正确');
       setUploadState(2);
     } else if (file.size > 1024 * 1024 * 10) {
       setErrorInfo('文件大小不能超过 10MB');
@@ -64,12 +65,10 @@ export default ({ onUploadDone }) => {
         onUploadDone(res);
       })
       .catch(() => {
-        setUploadState(3);
-      })
-      .catch((error) => {
-        console.log(error);
+        // 文件上传失败
         setUploading(false);
-        setUploadState(3);
+        // setErrorInfo('导入失败');
+        setUploadState(1);
       });
   }, [fileInfo, autoSendActiveMsg, onUploadDone]);
 

+ 16 - 13
src/pages/Member/components/StartImport/Uploader/index.less

@@ -1,10 +1,10 @@
 .c {
-  border: 1px solid #F3F3F3;
+  padding-bottom: 30px;
+  border: 1px solid #f3f3f3;
   border-top: none;
   border-radius: 0 0 4px 4px;
-  padding-bottom: 30px;
   &.dragging {
-    background-color: #F3F3F3;
+    background-color: #f3f3f3;
   }
 }
 .title {
@@ -13,50 +13,53 @@
   padding: 30px 90px 20px 25px;
   color: #656872;
   span {
-    color: #F0DA21;
-    font-size: 24px;
     margin-right: 15px;
+    color: #f0da21;
+    font-size: 24px;
   }
 }
 
 .fileTrigger {
-  text-align: center;
   padding: 20px 0;
+  text-align: center;
   div {
     margin-top: 20px;
     color: #656872;
     span {
-      text-decoration: underline;
       color: #000;
+      text-decoration: underline;
       cursor: pointer;
     }
   }
 }
 
 .fileInfo {
-  text-align: center;
   padding: 20px 0;
-  &>div {
+  text-align: center;
+  & > div {
     margin-top: 20px;
     color: #656872;
     span {
-      text-decoration: underline;
       color: #000;
+      text-decoration: underline;
       cursor: pointer;
     }
   }
+  button {
+    background: #ffe823;
+  }
 }
 
 .fileError {
-  text-align: center;
   padding: 20px 0;
+  text-align: center;
   div {
     margin-top: 20px;
     color: #656872;
     span {
-      text-decoration: underline;
       color: #000;
+      text-decoration: underline;
       cursor: pointer;
     }
   }
-}
+}

+ 19 - 0
src/pages/Member/components/StartImport/Uploader/service.js

@@ -9,5 +9,24 @@ export const importUsers = (file, param) => {
   return request('/xiaojing/server/common/userUpload', {
     data,
     method: 'post',
+    parseResponse: true,
+  });
+};
+
+// 导出失败
+export const exportUsersError = (param) => {
+  // // console.log(params);
+  const data = new FormData();
+  // data.append('file', file);
+  let param1 = JSON.stringify(param);
+  data.append('param', param1);
+  return request('/xiaojing/server/common/userErroDownload', {
+    data,
+    method: 'post',
+    responseType: 'blob',
+    headers: {
+      contentType: 'application/json;charset=UTF-8',
+    },
+    getResponse: true,
   });
 };

+ 2 - 1
src/pages/Member/components/StartImport/index.jsx

@@ -22,6 +22,7 @@ import { useModel, history } from 'umi';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import AreaTree from '../areaTree';
+import iconClose from '@/assets/images/page-person-import/close-icon.svg';
 
 import moment from 'moment';
 const importTitleIcon = require('@/assets/images/page-person-import/import-icon.svg');
@@ -42,7 +43,7 @@ const ImportModal = ({ onClose, onUploadDone }) => {
                 onClose();
               }}
             >
-              <Icon type="close" />
+              <img src={iconClose} alt="" />
             </div>
 
             <div className={styles.title}>

+ 2 - 8
src/pages/Member/components/StartImport/index.less

@@ -37,16 +37,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
-    color: #c4c4c4;
-    font-size: 20px;
+    width: 24px;
+    height: 24px;
     border-radius: 100%;
     cursor: pointer;
-    transition: background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
-    &:hover {
-      background-color: #fff;
-    }
   }
   .content {
     position: relative;

+ 8 - 5
src/pages/Member/index.tsx

@@ -375,11 +375,14 @@ const Member: React.FC = () => {
       {uploadResult && uploadResult.result == 'fail' && (
         <ImportError
           info={uploadResult}
-          onClose={(reUpload) => {
-            // if (reUpload === true) {
-            //   setImportVisible(false);
-            // }
-            // setUploadResult(null);
+          onClose={(type) => {
+            console.log(type);
+            if (type == 2) {
+              setImportVisible(true);
+              setUploadResult(null);
+            } else {
+              setUploadResult(null);
+            }
           }}
         />
       )}

+ 0 - 17
src/pages/Member/service.js

@@ -1,17 +0,0 @@
-import { request } from 'umi';
-
-// let http1=
-
-export const importUsers = (file, param) => {
-  const data = new FormData();
-  data.append('file', file);
-  data.append('param: ', param);
-  return request('/manage/users/import', {
-    data,
-    method: 'POST',
-    responseType: 'blob',
-    credentials: 'include',
-    getResponse: true,
-    parseResponse: true,
-  });
-};