Ver código fonte

fix:批量导入功能

chenzhen2 1 ano atrás
pai
commit
82a950d62b

+ 20 - 31
src/pages/Member/components/StartImport/ImportError/index.jsx

@@ -1,42 +1,29 @@
 import React, { useState } from 'react';
-import { Button } from 'antd';
-import Modal from 'antd';
-import importIcon from '@/assets/images/page-person-import/import-icon.svg';
+import { Modal, Button } from 'antd';
+import Icon from '@/tenants-ui/SgIcon';
 import styles from './index.less';
+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);
 
   return (
-    <Modal
-      title={
-        <div className={styles.header}>
-          <img src={importIcon} />
+    <Modal open width={760} className={styles.importError} onClose={onClose}>
+      <div className={styles.header}>
+        <div
+          className={styles.close}
+          onClick={() => {
+            onClose();
+          }}
+        >
+          <Icon type="close" />
         </div>
-      }
-      width={760}
-      onClose={onClose}
-      footer={
-        <div className={styles.footer}>
-          <div>
-            您可以
-            <a href={`/api/manage/downloadFailRecords?token=${token}&fileId=${info.failFileId}`}>
-              下载错误报告
-            </a>
-            ,修改后重新导入
-          </div>
-          <Button type="primary" size="large" onClick={() => onClose(true)}>
-            重新导入
-          </Button>
-        </div>
-      }
-    >
+      </div>
       <div className={styles.listW}>
-        <div className={styles.info}>
-          成功导入 {info.successRecord} 条数据,有 {info.failedRecord} 条数据导入失败:
-        </div>
+        <div className={styles.info}>{info.message}</div>
         <div className={styles.list}>
           <div className={styles.row}>
             <div className={styles.col1}>姓名</div>
@@ -45,16 +32,18 @@ export default ({ info, onClose }) => {
             <div className={styles.col4}>职务</div>
             <div className={styles.col5}>原因</div>
           </div>
-          {(info.failData || []).map((item, itemIndex) => {
+          {(info.data || []).map((item, itemIndex) => {
             return (
               // eslint-disable-next-line react/no-array-index-key
               <div className={styles.row} key={itemIndex}>
-                <div className={styles.col1}>{item.userName}</div>
+                <div className={styles.col1}>{item.name}</div>
                 <div className={styles.col2}>{item.manageUserType}</div>
                 <div className={styles.col3}>{item.phone}</div>
                 <div className={styles.col4}>{item.job}</div>
                 <div className={styles.col5}>
-                  <div>{item.failedReason}</div>
+                  {(Array.from(item.remark) || []).map((remark) => {
+                    <div>{remark}</div>;
+                  })}
                 </div>
               </div>
             );

+ 115 - 76
src/pages/Member/components/StartImport/ImportError/index.less

@@ -1,91 +1,130 @@
-.header {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 52px;
-  text-align: center;
-  img {
-    background: #F0DA21;
+.importError {
+  .header {
+    position: relative;
+    z-index: 1;
+    height: 120px;
+    background: #f3f3f3;
+    border-radius: 20px 20px 0 0;
+    .title {
+      position: absolute;
+      top: 52px;
+      // top: -40px;
+      left: 50%;
+      text-align: center;
+      transform: translateX(-50%);
+      img {
+        display: block;
+        width: 88px;
+        height: 88px;
+        margin: 0 auto;
+      }
+      span {
+        display: block;
+        padding-top: 10px;
+        font-weight: 600;
+        font-size: 18px;
+        font-family: PingFang SC;
+        line-height: 25px;
+        text-align: center;
+      }
+    }
+  }
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    color: #c4c4c4;
+    font-size: 20px;
     border-radius: 100%;
-    width: 88px;
-    height: 88px;
+    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;
-  padding-top: 12px;
-  justify-content: space-between;
-  color: #656872;
-  a {
-    color: #000;
-    text-decoration: underline;
-    &:hover {
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 12px;
+    color: #656872;
+    a {
       color: #000;
+      text-decoration: underline;
+      &:hover {
+        color: #000;
+      }
     }
   }
-}
 
-.listW {
-  border: 1px solid #F3F3F3;
-  border-radius: 4px;
-  overflow: hidden;
-  color: #656872;
-}
+  .listW {
+    overflow: hidden;
+    color: #656872;
+    border: 1px solid #f3f3f3;
+    border-radius: 4px;
+  }
 
-.info {
-  line-height: 90px;
-  font-size: 16px;
-  padding: 0 20px;
-  background: #F3F3F3;
-  border-bottom: 1px solid #F3F3F3;
-}
+  .info {
+    padding: 0 20px;
+    font-size: 16px;
+    line-height: 90px;
+    background: #f3f3f3;
+    border-bottom: 1px solid #f3f3f3;
+  }
 
-.list {
-  .row {
-    display: flex;
-    line-height: 24px;
-    border-bottom: 1px solid #F3F3F3;
-    &:first-child {
-      color: #656872;
-      font-weight: 600;
-    }
-    &:last-child {
-      border-bottom: none;
-    }
-    &>div {
-      padding: 10px;
+  .list {
+    background: #fff;
+    .row {
+      display: flex;
       line-height: 24px;
-      min-width: 0;
-      word-break: break-all;
-      border-right: 1px solid #F3F3F3;
+      border-bottom: 1px solid #f3f3f3;
+      &:first-child {
+        color: #656872;
+        font-weight: 600;
+      }
       &:last-child {
-        border-right: none;
+        border-bottom: none;
       }
-    }
-    .col1 {
-      width: 150px;
-      color: #000 !important;
-      font-weight: 600;
-    }
-    .col2 {
-      width: 100px;
-    }
-    .col3 {
-      width: 130px;
-    }
-    .col4 {
-      width: 100px;
-    }
-    .col5 {
-      flex: 1;
-      div {
-        display: -webkit-box;
-        -webkit-line-clamp: 5;
-        overflow: hidden;
-        -webkit-box-orient: vertical;
+      & > div {
+        min-width: 0;
+        padding: 10px;
+        line-height: 24px;
+        word-break: break-all;
+        border-right: 1px solid #f3f3f3;
+        &:last-child {
+          border-right: none;
+        }
+      }
+      .col1 {
+        width: 150px;
+        color: #000 !important;
+        font-weight: 600;
+      }
+      .col2 {
+        width: 100px;
+      }
+      .col3 {
+        width: 130px;
+      }
+      .col4 {
+        width: 100px;
+      }
+      .col5 {
+        flex: 1;
+        div {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 5;
+          -webkit-box-orient: vertical;
+        }
       }
     }
   }
-}
+}

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

@@ -9,11 +9,11 @@ export default ({ info, onClose }) => {
   return (
     <div className={styles.c}>
       <Modal
+        open
         width={320}
         maskClosable={false}
         closable={false}
         footer={null}
-        visible
         getContainer={false}
       >
         <div className={styles.header}>

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

@@ -65,6 +65,7 @@ const ImportModal = ({ onClose, onUploadDone }) => {
             </div>
             <Uploader
               onUploadDone={(info) => {
+                console.log(info);
                 onUploadDone(info);
               }}
             />

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

@@ -365,24 +365,26 @@ const Member: React.FC = () => {
           onUploadDone={(res) => {
             setImportVisible(false);
             setUploadResult(res);
+            console.log(res);
+            console.log(uploadResult);
           }}
           onClose={onImClose}
         ></ImportModal>
       )}
 
-      {uploadResult && uploadResult.failedRecord > 0 && (
+      {uploadResult && uploadResult.result == 'fail' && (
         <ImportError
           info={uploadResult}
           onClose={(reUpload) => {
-            if (reUpload === true) {
-              setImportVisible(false);
-            }
-            setUploadResult(null);
+            // if (reUpload === true) {
+            //   setImportVisible(false);
+            // }
+            // setUploadResult(null);
           }}
         />
       )}
 
-      {uploadResult && uploadResult.failedRecord === 0 && (
+      {uploadResult && uploadResult.result == 'success' && (
         <ImportSuccess
           info={uploadResult}
           onClose={() => {