23013 学生事务/学生医保管理/学生平安险/保险办理，2001010248 高职界面已购买 导入 报错【接口超时】

one_stop_public/App/ImportUtil.js

@@ -9,14 +9,19 @@ import { connect } from 'dva';
 import { getMessage, getModal } from '@/webPublic/one_stop_public/utils/utils';
 import { giveFilePostDataInfoForTrue } from '@/webPublic/one_stop_public/Base16';
 import { getTransformApi } from '@/webPublic/one_stop_public/2022beidianke/localstorageTransform';
+import ProgressDiy from './ProgressDiy';
 
 const Modal = getModal();
 const message = getMessage();
 const Step = Steps.Step;
 const TabPane = Tabs.TabPane;
-let tempCallback = () => { };
+let tempCallback = () => {
+};
 
-@connect(({ DataObj, loading }) => ({
+@connect(({
+            DataObj,
+            loading,
+          }) => ({
   DataObj,
   loading: loading.models.DataObj,
 }))
@@ -36,6 +41,7 @@ export default class ImportUtil extends React.PureComponent {
       errData: [],
       column: [],
       confirmLoading: false,
+      openProgress: false,
       // exportTemplateUrl,
 
       isNextDisabled: false,
@@ -79,7 +85,7 @@ export default class ImportUtil extends React.PureComponent {
         this.import();
       }
     }
-		if (current === 3) {
+    if (current === 3) { // 导入完成后
       console.log('current === 3');
       this.setState(
         {
@@ -101,8 +107,23 @@ export default class ImportUtil extends React.PureComponent {
     this.setState({ current });
   }
 
+  changeOpenProgress = (v) => {
+    if (v === false) {
+      this.next();
+      message.success('导入成功');
+      this.setState({
+        current: 3,
+        isShow: true,
+        visible: false,
+      });
+    }
+  };
+
   import() {
-		const { dispatch, importParams, importConfig } = this.props;
+    const {
+      dispatch,
+      importParams,
+    } = this.props;
     dispatch({
       type: 'DataObj/importExecute',
       payload: {
@@ -111,9 +132,16 @@ export default class ImportUtil extends React.PureComponent {
         objId: this.props.objId,
       },
       callback: (res) => {
+        if (res && res.sync === false && res.total) {
+          // 23013 学生事务/学生医保管理/学生平安险/保险办理，2001010248 高职界面已购买 导入 报错【接口超时】
+          this.setState({
+            openProgress: res,
+          });
+          return;
+        }
+
         this.next();
         message.success('导入成功');
-
         this.setState({
           current: 3,
           isShow: true,
@@ -125,7 +153,11 @@ export default class ImportUtil extends React.PureComponent {
   }
 
   getCachKey = (filePath) => {
-		const { dispatch, importParams, importConfig } = this.props;
+    const {
+      dispatch,
+      importParams,
+      importConfig,
+    } = this.props;
     dispatch({
       type: 'DataObj/importAnalyse',
       payload: {
@@ -138,7 +170,6 @@ export default class ImportUtil extends React.PureComponent {
       },
       callback: (res) => {
         this.setState({
-          // TODO 23013 学生事务/学生医保管理/学生平安险/保险办理，2001010248 高职界面已购买 导入 报错【接口超时】
           fileCacheKey: res.cacheKey,
         });
         this.queryFile(res.cacheKey);
@@ -146,7 +177,10 @@ export default class ImportUtil extends React.PureComponent {
     });
   };
   queryFile = (cacheKey) => {
-		const { dispatch, importParams } = this.props;
+    const {
+      dispatch,
+      importParams,
+    } = this.props;
     dispatch({
       type: 'DataObj/importDataQuery',
       payload: {
@@ -199,7 +233,12 @@ export default class ImportUtil extends React.PureComponent {
   downloadFile = async () => {
     this.setState({ confirmLoading: true });
 
-		const { objId, fileName, importParams, importConfig } = this.props;
+    const {
+      objId,
+      fileName,
+      importParams,
+      importConfig,
+    } = this.props;
     const params = {
       ...importParams,
       importConfig: importConfig ? JSON.stringify(importConfig) : null,
@@ -211,7 +250,10 @@ export default class ImportUtil extends React.PureComponent {
     if (newParams && newParams.datas) {
       newParams.datas.token = getToken();
     }
-		const { transformApi, headersApi } = await getTransformApi(newParams.url);
+    const {
+      transformApi,
+      headersApi,
+    } = await getTransformApi(newParams.url);
     fetch(transformApi, {
       method: 'POST',
       body: FormdataWrapper(newParams.datas),
@@ -288,7 +330,11 @@ export default class ImportUtil extends React.PureComponent {
       },
     ];
 
-		const { current } = this.state;
+    const {
+      current,
+      openProgress,
+      fileCacheKey,
+    } = this.state;
     const { name } = this.props;
     const column1 = this.state.column
       ? [
@@ -348,6 +394,11 @@ export default class ImportUtil extends React.PureComponent {
           title={null}
           footer={null}
           width={'80%'}>
+          {
+            !!openProgress ? <ProgressDiy fileCacheKey={fileCacheKey}
+                                          {...openProgress}
+                                          changeOpenProgress={this.changeOpenProgress}
+              /> :
               <div className={styles.nomal}>
                 <p className={styles.import}>EXCEL导入向导</p>
                 <div style={{ margin: 'auto 23px' }}>
@@ -356,13 +407,13 @@ export default class ImportUtil extends React.PureComponent {
                       <Step key={item.title} title={item.title} />
                     ))}
                   </Steps>
-							<div className="steps-content">{steps[this.state.current].content}</div>
+                  <div className='steps-content'>{steps[this.state.current].content}</div>
                   <div className={styles.button}>
                     {this.state.current < steps.length - 1 &&
                     this.state.current !== 0 && (
                       <ButtonDiy
                         name={this.state.current == 3 ? '确认导入' : '下一步'}
-											type="primary"
+                        type='primary'
                         disabled={this.state.current != 3 && this.state.isNextDisabled}
                         // className='primaryBlue'
                         handleClick={() => this.next()}
@@ -372,8 +423,8 @@ export default class ImportUtil extends React.PureComponent {
                     {this.state.current > 0 && (
                       <ButtonDiy
                         style={{ marginLeft: 8 }}
-										name="上一步"
-										className="defaultBlue"
+                        name='上一步'
+                        className='defaultBlue'
                         handleClick={() => this.prev()}
                       />
                     )}
@@ -392,13 +443,13 @@ export default class ImportUtil extends React.PureComponent {
                   <div className={styles.buttonDown}>
                     <Upload {...props}>
                       <Button>
-										<Icon type="upload" />
+                        <Icon type='upload' />
                         点击上传
                       </Button>
                     </Upload>
                     <ButtonDiy
                       name={'下载模板'}
-									type="primary"
+                      type='primary'
                       // className='primaryBlue'
                       handleClick={() => this.downloadFile()}
                       loading={this.state.confirmLoading}
@@ -407,7 +458,7 @@ export default class ImportUtil extends React.PureComponent {
                 ) : (
                   <Upload {...props}>
                     <Button>
-									<Icon type="upload" />
+                      <Icon type='upload' />
                       重新上传
                     </Button>
                   </Upload>
@@ -427,14 +478,14 @@ export default class ImportUtil extends React.PureComponent {
                       activeKey={this.state.currentKey}
                       key={this.state.ch}
                       onChange={this.changePane}
-									type="card">
+                      type='card'>
                       {this.state.errData && this.state.errData.length == 0 ? (
                         ''
                       ) : (
-										<TabPane tab={<span style={{ color: 'red' }}>验证错误列表</span>} key="1">
+                        <TabPane tab={<span style={{ color: 'red' }}>验证错误列表</span>} key='1'>
                           <Table
                             columns={column1}
-												size="small"
+                            size='small'
                             style={{ overflow: 'auto' }}
                             dataSource={this.state.errData}
                             bordered={true}
@@ -442,10 +493,10 @@ export default class ImportUtil extends React.PureComponent {
                           />
                         </TabPane>
                       )}
-									<TabPane tab={<span style={{ color: 'green' }}>验证成功列表</span>} key="2">
+                      <TabPane tab={<span style={{ color: 'green' }}>验证成功列表</span>} key='2'>
                         <Table
                           columns={column2}
-											size="small"
+                          size='small'
                           style={{ overflow: 'auto' }}
                           dataSource={this.state.sucData}
                           bordered={true}
@@ -456,6 +507,7 @@ export default class ImportUtil extends React.PureComponent {
                   </div>
                 )}
               </div>
+          }
 				</Modal>
 			</span>
     );

one_stop_public/App/ImportUtil.less

@@ -176,3 +176,17 @@
     padding: 5px 12px;
     border-radius: 5px;
 }
+
+
+.juzhongSpin{
+  min-height: 300px;
+  width: 100%;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.textCenter{
+  margin-top: 20px;
+  text-align: center;
+}

one_stop_public/App/ProgressDiy.js

+import React, { useEffect, useState, useRef } from 'react';
+import { Progress, message } from 'antd';
+import styles from './ImportUtil.less';
+import { connect } from 'dva';
+
+function ProgressDiy(props) {
+  const { fileCacheKey, dispatch, changeOpenProgress = () => {} } = props;
+  const interv = useRef();
+  const [speedData, setData] = useState({ ...props });
+  useEffect(() => {
+    interv.current = setInterval(() => {
+      dispatch({
+        type: 'DataObj/importProcess',
+        payload: {
+          cacheKey: fileCacheKey,
+        },
+        callback: res => {
+          setData(res);
+          if (res.finished) {
+            clearInterval(interv.current);
+            message.success('导入完成');
+            // changeOpenProgress(false); // 导入成功
+          }
+        },
+      });
+    }, 1000);
+  }, []);
+
+  return (
+    <div className={styles.juzhongSpin}>
+      <div style={{ textAlign: 'center' }}>
+        <Progress
+          type="circle"
+          strokeColor={{
+            '0%': '#108ee9',
+            '100%': '#87d068',
+          }}
+          percent={
+            speedData.finished ? 100 : (speedData.success + speedData.fail) / speedData.total
+          }
+          status={speedData.finished ? 'success ' : 'active'}
+          format={percent => `${speedData.success + speedData.fail}/${speedData.total}`}
+        />
+        <div className={styles.textCenter}>
+          正在处理导入数据: 共计 {speedData.total}条  已处理{speedData.success + speedData.fail}条.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default connect(({ DataObj, loading }) => ({
+  DataObj,
+}))(ProgressDiy);

one_stop_public/models/DataObj.js

@@ -42,6 +42,19 @@ export default {
 			});
 			if (callback) callback(response);
 		},
+
+    *importProcess({ payload, callback }, { call, put }) {
+      const response = yield call(apiRequest, api + '/importProcess', payload);
+      if (!response) {
+        yield put({ type: 'nom' });
+        return;
+      }
+      yield put({
+        type: 'nom',
+        payload: response,
+      });
+      if (callback) callback(response);
+    },
 		*importExecute({ payload, callback }, { call, put }) {
 			const response = yield call(apiRequest, api + '/importExecute', {
 				...payload,