封装导入文件模态框组件

src/components/UploadModal/index.less

+.step0Description{
+  text-align: left;
+  width: 280px;
+  margin: 0 auto;
+  list-style-type: decimal;
+  li{
+    color: #6B778C;
+    font-size: 14px;
+  }
+}
+.step1Description{
+  h4{
+    height:22px;
+    font-size:14px;
+    font-weight:500;
+    color:rgba(23,43,77,1);
+    line-height:22px;
+  }
+  p{
+    height:20px;
+    font-size:14px;
+    font-weight:400;
+    color:rgba(107,119,140,1);
+    line-height:20px;
+  }
+}

src/components/UploadModal/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Result, Progress, Button } from 'antd';
+import { FileExcelOutlined } from '@ant-design/icons';
+import styles from './index.less';
+import { PublicApi } from '@/services/api';
+
+interface Uploader {
+  visibleModal: boolean;
+  onCancel: Function;
+}
+
+let timeChange: any;
+
+const UploadModal: React.FC<Uploader> = props => {
+  const [modalTitle, setModalTitle] = useState('导入');
+  const [modalStep, setModalStep] = useState(0);
+
+  const downLoadTemplate = () => {};
+
+  const step0Description = (
+    <>
+      <ul className={styles.step0Description}>
+        <li>
+          点击下载 EXCEL文件模板 <a onClick={downLoadTemplate}>下载</a>
+        </li>
+        <li>按照模板整理货品资料</li>
+        <li>点击导入按钮，导入整理好的货品资料</li>
+      </ul>
+    </>
+  );
+
+  const step1Description = (
+    <div className={styles.step1Description}>
+      <h4>正在进行数据导入检查</h4>
+      <p>请稍后…</p>
+    </div>
+  );
+
+  const step1DescripSuccess = (
+    <div className={styles.step1Description}>
+      <h4>无错误格式数据</h4>
+      <p>继续导入请按下一步</p>
+      <Button type="primary" onClick={() => handleUpload('import')}>
+        下一步
+      </Button>
+    </div>
+  );
+
+  const step1Exception = (
+    <div className={styles.step1Description}>
+      <h4>存在错误格式数据，已生成错误日志</h4>
+      <p>请导出错误日志修正数据后再次导入</p>
+    </div>
+  );
+
+  const step2Description = (
+    <div className={styles.step1Description}>
+      <h4>正在进行数据导入</h4>
+      <p>请稍后…</p>
+    </div>
+  );
+
+  const step2DescripSuccess = (
+    <div className={styles.step1Description}>
+      <h4>数据全部导入成功</h4>
+      <p>继续导入请点击继续导入，导入完成请点击导入完成</p>
+      <Button type="primary" onClick={() => handleUpload('continue')}>
+        继续导入
+      </Button>
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <Button onClick={() => props.onCancel()}>完成导入</Button>
+    </div>
+  );
+
+  const step2Exception = (
+    <div className={styles.step1Description}>
+      <h4>导入完成请点击导入完成</h4>
+      <p>已生成错误日志，请导出错误日志修正数据后再次导入</p>
+    </div>
+  );
+
+  // 导入的时候的描述文字
+  const [step1DescriptState, setStep1DescriptState] = useState(
+    step1Description,
+  );
+  const [step2DescriptState, setStep2DescriptState] = useState(
+    step2Description,
+  );
+
+  // timer  计时器模拟导入过程
+  const [exceptionCheck, setExceptionCheck] = useState(false); // 默认无异常
+  const [exceptionData, setExceptionData] = useState(false); // 默认无异常
+  const [time, setTime] = useState(0); // timer
+
+  useEffect(() => {
+    clearInterval(timeChange);
+  }, []);
+
+  useEffect(() => {
+    if (modalStep === 1) runTimer();
+    if (modalStep === 2) runTimer();
+  }, [modalStep]);
+
+  useEffect(() => {
+    if (time >= 100) {
+      clearInterval(timeChange);
+      setTime(100);
+      if (modalStep === 1) setStep1DescriptState(step1DescripSuccess);
+      if (modalStep === 2) setStep2DescriptState(step2DescripSuccess);
+    }
+  }, [time]);
+
+  const runTimer = () => {
+    setTime(0);
+    timeChange = setInterval(
+      () => setTime(t => t + Math.floor(Math.random() * 10)),
+      200,
+    );
+  };
+  //timer end
+
+  // 导入的时候 进度条的颜色配置
+  const step1Icon = (
+    <Progress
+      type="circle"
+      strokeColor={{
+        '0%': '#669EDE',
+        '100%': '#41CC9E',
+      }}
+      percent={time}
+    />
+  );
+
+  const step2Icon = (
+    <Progress
+      type="circle"
+      strokeColor={{
+        '0%': '#669EDE',
+        '100%': '#41CC9E',
+      }}
+      percent={time}
+    />
+  );
+
+  // 上传
+  const handleUpload = (type: string, step: number = 0) => {
+    let title = '';
+    switch (type) {
+      case 'continue':
+        step = 0;
+        title = '继续导入';
+        break;
+      case 'upload':
+        step = 1;
+        title = '导入检查';
+        break;
+      case 'import':
+        step = 2;
+        title = '数据导入';
+        break;
+    }
+    setModalStep(step);
+    setModalTitle(title);
+  };
+
+  const exportErrorLog = () => {};
+
+  const handleClose = () => {
+    setModalStep(0);
+    setModalTitle('导入');
+    setTime(0);
+    clearInterval(timeChange);
+  };
+
+  return (
+    <>
+      <Modal
+        title={modalTitle}
+        visible={props.visibleModal}
+        onCancel={() => props.onCancel()}
+        afterClose={() => handleClose()}
+        maskClosable={false}
+        footer={null}
+        destroyOnClose
+      >
+        {modalStep === 0 && (
+          <>
+            <Result
+              icon={<FileExcelOutlined />}
+              title={step0Description}
+              extra={
+                <Button
+                  style={{ width: '100%' }}
+                  type="primary"
+                  onClick={() => handleUpload('upload')}
+                >
+                  上传
+                </Button>
+              }
+            />
+          </>
+        )}
+        {modalStep === 1 && !exceptionCheck && (
+          <>
+            <Result icon={step1Icon} title={step1DescriptState} />
+          </>
+        )}
+        {modalStep === 1 && exceptionCheck && (
+          <>
+            <Result
+              icon={<Progress type="circle" percent={100} status="exception" />}
+              title={step1Exception}
+              extra={<Button onClick={exportErrorLog}>导出错误日志</Button>}
+            />
+          </>
+        )}
+        {modalStep === 2 && !exceptionData && (
+          <>
+            <Result icon={step2Icon} title={step2DescriptState} />
+          </>
+        )}
+        {modalStep === 2 && exceptionData && (
+          <>
+            <Result
+              icon={<Progress type="circle" percent={100} status="exception" />}
+              title={step2Exception}
+              extra={<Button onClick={exportErrorLog}>导出错误日志</Button>}
+            />
+          </>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export default UploadModal;

src/pages/member/memberImport/addMember.tsx

@@ -25,7 +25,6 @@ import style from './index.less';
 // import japenImg from '../../../../mockStatic/japen.png';
 // import korenImg from '../../../../mockStatic/koren.png';
 // import us from '../../../../mockStatic/us.png';
-
 const { TabPane } = Tabs;
 
 const data = [];
@@ -275,7 +274,7 @@ const addMember: React.FC<[]> = () => {
                     代理地市
                   </>
                 }
-                name="lll"
+                name="agentCities"
                 itemStyle={{ marginBottom: 0 }}
               >
                 <>

src/pages/member/memberLevel/index.tsx

-import React, { ReactNode, useState, useRef, useEffect } from 'react'
-import { history } from 'umi'
-import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd'
-import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { PlayCircleOutlined, PauseCircleOutlined, EyeOutlined } from '@ant-design/icons'
-import { StandardTable } from 'god'
-import { ColumnType } from 'antd/lib/table/interface'
-import style from './index.less'
+import React, { ReactNode, useState, useRef, useEffect } from 'react';
+import { history } from 'umi';
+import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  EyeOutlined,
+} from '@ant-design/icons';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import style from './index.less';
+import { PublicApi } from '@/services/api';
 
 const data = [
   {
@@ -19,7 +24,7 @@ const data = [
     type: '服务消费',
     roleType: '企业会员',
     thresvalue: '100000',
-    status: 1
+    status: 1,
   },
   {
     key: '2',
@@ -32,7 +37,7 @@ const data = [
     type: '服务消费',
     roleType: '企业会员',
     thresvalue: '100000',
-    status: 2
+    status: 2,
   },
   {
     key: '3',
@@ -45,7 +50,7 @@ const data = [
     type: '服务消费',
     roleType: '企业会员',
     thresvalue: '100000',
-    status: 1
+    status: 1,
   },
   {
     key: '4',
@@ -58,13 +63,13 @@ const data = [
     type: '服务消费',
     roleType: '企业会员',
     thresvalue: '100000',
-    status: 2
-  }
-]
+    status: 2,
+  },
+];
 
 const memberLevel: React.FC<[]> = () => {
-  const ref = useRef({})
-  const [keywords, setKeywords] = useState('')
+  const ref = useRef({});
+  const [keywords, setKeywords] = useState('');
 
   const columns: ColumnType<any>[] = [
     {
@@ -78,14 +83,21 @@ const memberLevel: React.FC<[]> = () => {
       dataIndex: 'level',
       align: 'center',
       key: 'level',
-      render: (text: any, record: any) => <div className={style[`levelIcon${record.level}`]}></div>
+      render: (text: any, record: any) => (
+        <div className={style[`levelIcon${record.level}`]}></div>
+      ),
     },
     {
       title: '会员等级标签',
       dataIndex: 'levelTab',
       align: 'center',
       key: 'levelTab',
-      render: (text: any, record: any) => <span className={style.nameCellTitle} onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
+      render: (text: any, record: any) => (
+        <span className={style.nameCellTitle} onClick={() => handleSee(record)}>
+          {text}&nbsp;
+          <EyeOutlined />
+        </span>
+      ),
     },
     {
       title: '会员等级类型',
@@ -129,7 +141,7 @@ const memberLevel: React.FC<[]> = () => {
       align: 'center',
       key: 'status',
       render: (text: any, record: any) => {
-        let component: ReactNode = null
+        let component: ReactNode = null;
         component = (
           <Popconfirm
             title="确定要执行这个操作?"
@@ -139,79 +151,80 @@ const memberLevel: React.FC<[]> = () => {
             cancelText="否"
           >
             <Button
-              type='link'
+              type="link"
               onClick={() => handleModify(record)}
-              style={record.status === 1 ?
-                { color: '#00B37A' } : { color: 'red' }}
+              style={
+                record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
+              }
             >
-              {
-                record.status === 1 ?
+              {record.status === 1 ? (
                 <>
                   <span>有效</span>
                   <PlayCircleOutlined />
                 </>
-                  :
+              ) : (
                 <>
                   <span>无效</span>
                   <PauseCircleOutlined />
                 </>
-              }
+              )}
             </Button>
           </Popconfirm>
-        )
-        return component
-      }
+        );
+        return component;
+      },
     },
     {
       title: '操作',
       dataIndex: 'option',
       align: 'center',
-      render: (record: any) => <Button type='link' onClick={(record) => handleSet(record)}>设置</Button>
-    }
+      render: (record: any) => (
+        <Button type="link" onClick={record => handleSet(record)}>
+          设置
+        </Button>
+      ),
+    },
   ];
 
   // 模拟请求
   const fetchData = (params: any) => {
     return new Promise((resolve, reject) => {
-      const queryResult = data.find(v => v.key === params.keywords)
-      setTimeout(() => {
-        resolve({
-          code: 200,
-          message: '',
-          data: queryResult ? [queryResult] : data
-        })
-      }, 1000)
-    })
-  }
+      PublicApi.postMemberManageLevelPage({
+        levelTag: '',
+        memberLevelTypeEnum: '',
+        roleName: '',
+        current: params.page,
+        pageSize: params.rows,
+      }).then(res => {});
+    });
+  };
 
   useEffect(() => {
-    console.log(keywords)
-  })
+    console.log(keywords);
+  });
 
-  const handleSee = (record: any) => {
-
-  }
+  const handleSee = (record: any) => {};
 
   const confirm = () => {
-    console.log('confirm')
-  }
+    console.log('confirm');
+  };
 
   const cancel = () => {
-    console.log('cancel')
-  }
+    console.log('cancel');
+  };
 
   const handleModify = (record: object) => {
     // 通过传入的params字符串判断是修改那种类型的数据
-    console.log('执行状态修改', record)
-  }
+    console.log('执行状态修改', record);
+  };
 
-  const handleSearch = () => { }
+  const handleSearch = () => {};
 
-  const handleReset = () => { }
+  const handleReset = () => {};
 
   const handleSet = (record: any) => {
-    history.push('/memberCenter/memberAbility/manage/level/addEquity')
-  }
+    history.push('/memberCenter/memberAbility/manage/level/addEquity');
+  };
 
   return (
     <PageHeaderWrapper>
@@ -226,24 +239,33 @@ const memberLevel: React.FC<[]> = () => {
                 <Tooltip
                   trigger={['focus']}
                   placement="top"
-                  title={<span>输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索</span>}
+                  title={
+                    <span>
+                      输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索
+                    </span>
+                  }
                 >
                   <Input.Search
                     style={{ width: '232px' }}
                     value={keywords}
                     placeholder="搜索"
-                    onChange={(e) => setKeywords(e.target.value)}
+                    onChange={e => setKeywords(e.target.value)}
                     onSearch={() => handleSearch}
                   />
                 </Tooltip>
-                <Button className={style.resetBtn} onClick={() => handleReset()}>重置</Button>
+                <Button
+                  className={style.resetBtn}
+                  onClick={() => handleReset()}
+                >
+                  重置
+                </Button>
               </Col>
             </Row>
           }
         />
       </Card>
     </PageHeaderWrapper>
-  )
-}
+  );
+};
 
-export default memberLevel
+export default memberLevel;
\ No newline at end of file