Skip to content

W
WebPublic
提交 62236816 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

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

上级 60e38016
隐藏空白字符变更
内嵌 并排
正在显示 包含 599 行增加 和 467 行删除
one_stop_public/App/ImportUtil.js
浏览文件 @ 62236816
...@@ -9,455 +9,507 @@ import { connect } from 'dva'; ...@@ -9,455 +9,507 @@ import { connect } from 'dva';
import { getMessage, getModal } from '@/webPublic/one_stop_public/utils/utils'; import { getMessage, getModal } from '@/webPublic/one_stop_public/utils/utils';
import { giveFilePostDataInfoForTrue } from '@/webPublic/one_stop_public/Base16'; import { giveFilePostDataInfoForTrue } from '@/webPublic/one_stop_public/Base16';
import { getTransformApi } from '@/webPublic/one_stop_public/2022beidianke/localstorageTransform'; import { getTransformApi } from '@/webPublic/one_stop_public/2022beidianke/localstorageTransform';
import ProgressDiy from './ProgressDiy';
const Modal = getModal(); const Modal = getModal();
const message = getMessage(); const message = getMessage();
const Step = Steps.Step; const Step = Steps.Step;
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
let tempCallback = () => { }; let tempCallback = () => {
};
@connect(({ DataObj, loading }) => ({ @connect(({
DataObj, DataObj,
loading: loading.models.DataObj, loading,
}) => ({
DataObj,
loading: loading.models.DataObj,
})) }))
export default class ImportUtil extends React.PureComponent { export default class ImportUtil extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
tempCallback = this.props.callback; tempCallback = this.props.callback;
this.state = { this.state = {
ch: false, ch: false,
currentKey: '1', currentKey: '1',
visible: false, visible: false,
current: 0, current: 0,
isShow: true, isShow: true,
fileCacheKey: '', fileCacheKey: '',
sucData: [], sucData: [],
errData: [], errData: [],
column: [], column: [],
confirmLoading: false, confirmLoading: false,
// exportTemplateUrl, openProgress: false,
// exportTemplateUrl,
isNextDisabled: false, isNextDisabled: false,
}; };
} }
showModal = () => { showModal = () => {
this.setState({ this.setState({
sucData: [], sucData: [],
errData: [], errData: [],
column: [], column: [],
current: 0, current: 0,
isShow: true, isShow: true,
isNextDisabled: false, isNextDisabled: false,
fileCacheKey: '', fileCacheKey: '',
visible: true, visible: true,
}); });
}; };
handleOk = (e) => { handleOk = (e) => {
this.setState({ this.setState({
visible: false, visible: false,
}); });
}; };
handleCancel = (e) => { handleCancel = (e) => {
this.setState({ this.setState({
visible: false, visible: false,
}); });
}; };
next() { next() {
const current = this.state.current + 1; const current = this.state.current + 1;
if (current === 2) { if (current === 2) {
this.setState({ this.setState({
current: current, current: current,
isShow: false, isShow: false,
}); });
if (this.state.errData.lenth > 0) { if (this.state.errData.lenth > 0) {
message.error('请检查数据'); message.error('请检查数据');
return; return;
} else { } else {
this.import(); this.import();
} }
} }
if (current === 3) { if (current === 3) { // 导入完成后
console.log('current === 3'); console.log('current === 3');
this.setState( this.setState(
{ {
current: current, current: current,
isShow: true, isShow: true,
}, },
() => { () => {
if (tempCallback && typeof tempCallback === 'function') { if (tempCallback && typeof tempCallback === 'function') {
tempCallback(); tempCallback();
tempCallback = null; tempCallback = null;
} }
}, },
); );
} }
} }
prev() { prev() {
const current = this.state.current - 1; const current = this.state.current - 1;
this.setState({ current }); this.setState({ current });
} }
import() { changeOpenProgress = (v) => {
const { dispatch, importParams, importConfig } = this.props; if (v === false) {
dispatch({ this.next();
type: 'DataObj/importExecute', message.success('导入成功');
payload: { this.setState({
...(importParams || {}), current: 3,
cacheKey: this.state.fileCacheKey, isShow: true,
objId: this.props.objId, visible: false,
}, });
callback: (res) => { }
this.next(); };
message.success('导入成功');
this.setState({ import() {
current: 3, const {
isShow: true, dispatch,
visible: false, importParams,
}); } = this.props;
dispatch({
type: 'DataObj/importExecute',
payload: {
...(importParams || {}),
cacheKey: this.state.fileCacheKey,
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,
visible: false,
});
getCachKey = (filePath) => { },
const { dispatch, importParams, importConfig } = this.props; });
dispatch({ }
type: 'DataObj/importAnalyse',
payload: {
...(importParams || {}),
isLocal: false,
filePath,
importConfig: importConfig ? JSON.stringify(importConfig) : null, getCachKey = (filePath) => {
objId: this.props.objId, const {
}, dispatch,
callback: (res) => { importParams,
this.setState({ importConfig,
// TODO 23013 学生事务/学生医保管理/学生平安险/保险办理，2001010248 高职界面已购买 导入 报错【接口超时】 } = this.props;
fileCacheKey: res.cacheKey, dispatch({
}); type: 'DataObj/importAnalyse',
this.queryFile(res.cacheKey); payload: {
}, ...(importParams || {}),
}); isLocal: false,
}; filePath,
queryFile = (cacheKey) => {
const { dispatch, importParams } = this.props;
dispatch({
type: 'DataObj/importDataQuery',
payload: {
...(importParams || {}),
cacheKey,
objId: this.props.objId,
},
callback: (res) => {
this.setState({
current: 1,
isShow: false,
sucData: res.pass, importConfig: importConfig ? JSON.stringify(importConfig) : null,
errData: res.noPass, objId: this.props.objId,
column: res.column, },
}); callback: (res) => {
if (res.noPass && res.noPass.length === 0) { this.setState({
if (res.pass.length === 0) { fileCacheKey: res.cacheKey,
message.error('当前没有验证成功的数据，无法导入。'); });
this.setState({ this.queryFile(res.cacheKey);
currentKey: '1', },
ch: !this.state.ch, });
isNextDisabled: true, };
}); queryFile = (cacheKey) => {
} else { const {
message.success('所有数据验证通过，请确认后点击下一步。'); dispatch,
this.setState({ importParams,
currentKey: '2', } = this.props;
ch: !this.state.ch, dispatch({
isNextDisabled: false, type: 'DataObj/importDataQuery',
}); payload: {
} ...(importParams || {}),
} else { cacheKey,
message.error('当前存在未验证通过的数据，请按错误提示检测更正导入文件'); objId: this.props.objId,
this.setState({ },
currentKey: '1', callback: (res) => {
ch: !this.state.ch, this.setState({
isNextDisabled: true, current: 1,
}); isShow: false,
}
},
});
};
changePane = (activeKey) => { sucData: res.pass,
this.setState({ currentKey: activeKey }); errData: res.noPass,
}; column: res.column,
});
if (res.noPass && res.noPass.length === 0) {
if (res.pass.length === 0) {
message.error('当前没有验证成功的数据，无法导入。');
this.setState({
currentKey: '1',
ch: !this.state.ch,
isNextDisabled: true,
});
} else {
message.success('所有数据验证通过，请确认后点击下一步。');
this.setState({
currentKey: '2',
ch: !this.state.ch,
isNextDisabled: false,
});
}
} else {
message.error('当前存在未验证通过的数据，请按错误提示检测更正导入文件');
this.setState({
currentKey: '1',
ch: !this.state.ch,
isNextDisabled: true,
});
}
},
});
};
changePane = (activeKey) => {
this.setState({ currentKey: activeKey });
};
downloadFile = async () => {
this.setState({ confirmLoading: true });
const { objId, fileName, importParams, importConfig } = this.props; downloadFile = async () => {
const params = { this.setState({ confirmLoading: true });
...importParams,
importConfig: importConfig ? JSON.stringify(importConfig) : null,
objId,
fileName,
};
let url = `${config.httpServer}/DataObjApi/importTemplateDownload`;
let newParams = giveFilePostDataInfoForTrue(params, url);
if (newParams && newParams.datas) {
newParams.datas.token = getToken();
}
const { transformApi, headersApi } = await getTransformApi(newParams.url);
fetch(transformApi, {
method: 'POST',
body: FormdataWrapper(newParams.datas),
})
.then((res) => {
console.log(res.status);
if (res.status != 200 && res.status !== 202) {
return res.json();
} else {
return res.blob();
}
})
.then((data) => {
if (data instanceof Blob) {
let a = document.createElement('a');
let url = window.URL.createObjectURL(data);
let filename =
(this.props.fileName ? this.props.fileName : '导入模板.') + (this.props.ext || 'xlsx');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a = null;
} else {
message.error(`文件导出错误`);
}
})
.catch((err) => {
console.error(err);
message.error(`网络请求超时`);
})
.finally(() => {
this.setState({ confirmLoading: false });
});
};
render() { const {
const props = { objId,
name: 'file', fileName,
action: config.uploadUrl, importParams,
headers: { importConfig,
Authorization: `bearer ${getToken()}`, } = this.props;
}, const params = {
data: { ...importParams,
token: getToken(), importConfig: importConfig ? JSON.stringify(importConfig) : null,
}, objId,
accept: '.xlsx', fileName,
showUploadList: false, };
onChange: (info) => { let url = `${config.httpServer}/DataObjApi/importTemplateDownload`;
if (info.file.status !== 'uploading') { let newParams = giveFilePostDataInfoForTrue(params, url);
} if (newParams && newParams.datas) {
if (info.file.status === 'done') { newParams.datas.token = getToken();
message.success(`${info.file.name} 上传成功`); }
let x = info.file.response; const {
transformApi,
headersApi,
} = await getTransformApi(newParams.url);
fetch(transformApi, {
method: 'POST',
body: FormdataWrapper(newParams.datas),
})
.then((res) => {
console.log(res.status);
if (res.status != 200 && res.status !== 202) {
return res.json();
} else {
return res.blob();
}
})
.then((data) => {
if (data instanceof Blob) {
let a = document.createElement('a');
let url = window.URL.createObjectURL(data);
let filename =
(this.props.fileName ? this.props.fileName : '导入模板.') + (this.props.ext || 'xlsx');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a = null;
} else {
message.error(`文件导出错误`);
}
})
.catch((err) => {
console.error(err);
message.error(`网络请求超时`);
})
.finally(() => {
this.setState({ confirmLoading: false });
});
};
this.getCachKey(x); render() {
} else if (info.file.status === 'error') { const props = {
message.error(`${info.file.name} 上传失败`); name: 'file',
} action: config.uploadUrl,
}, headers: {
}; Authorization: `bearer ${getToken()}`,
const steps = [ },
{ data: {
title: '上传Excel', token: getToken(),
}, },
{ accept: '.xlsx',
title: '验证数据', showUploadList: false,
}, onChange: (info) => {
{ if (info.file.status !== 'uploading') {
title: '数据导入', }
}, if (info.file.status === 'done') {
{ message.success(`${info.file.name} 上传成功`);
title: '导入完成', let x = info.file.response;
},
];
const { current } = this.state; this.getCachKey(x);
const { name } = this.props; } else if (info.file.status === 'error') {
const column1 = this.state.column message.error(`${info.file.name} 上传失败`);
? [ }
{ },
title: '序号', };
dataIndex: 'index', const steps = [
fixed: 'left', {
width: 50, title: '上传Excel',
render: (v, r, i) => i + 1, },
}, {
{ title: '验证数据',
title: '数据行数', },
dataIndex: 'row_index', {
width: 50, title: '数据导入',
}, },
...this.state.column, {
] title: '导入完成',
: []; },
let column2 = this.state.column ? [{ ];
title: '数据行数',
dataIndex: 'row_index',
width: 50,
}, ...this.state.column] : [];
if (column1.length > 1) {
column1[1].render = (val) => <span style={{ color: 'red' }}>{val}</span>;
}
if (column2) { const {
let xuhao = column2.find((g) => g.dataIndex === '序号'); current,
if (!xuhao) { openProgress,
column2.unshift({ fileCacheKey,
title: '序号', } = this.state;
fixed: 'left', const { name } = this.props;
width: 50, const column1 = this.state.column
render: (v, r, i) => i + 1, ? [
dataIndex: '序号', {
}); title: '序号',
} dataIndex: 'index',
} fixed: 'left',
width: 50,
render: (v, r, i) => i + 1,
},
{
title: '数据行数',
dataIndex: 'row_index',
width: 50,
},
...this.state.column,
]
: [];
let column2 = this.state.column ? [{
title: '数据行数',
dataIndex: 'row_index',
width: 50,
}, ...this.state.column] : [];
if (column1.length > 1) {
column1[1].render = (val) => <span style={{ color: 'red' }}>{val}</span>;
}
const btn = { if (column2) {
name: name || '批量导入', let xuhao = column2.find((g) => g.dataIndex === '序号');
type: 'default', if (!xuhao) {
className: 'defaultBlue', column2.unshift({
...(this.props.btn ? this.props.btn : {}), title: '序号',
}; fixed: 'left',
width: 50,
render: (v, r, i) => i + 1,
dataIndex: '序号',
});
}
}
return ( const btn = {
<span> name: name || '批量导入',
type: 'default',
className: 'defaultBlue',
...(this.props.btn ? this.props.btn : {}),
};
return (
<span>
<ButtonDiy {...btn} handleClick={this.showModal} /> <ButtonDiy {...btn} handleClick={this.showModal} />
<Modal <Modal
visible={this.state.visible} visible={this.state.visible}
onOk={this.handleOk} onOk={this.handleOk}
maskClosable={false} maskClosable={false}
destroyOnClose destroyOnClose
onCancel={this.handleCancel} onCancel={this.handleCancel}
title={null} title={null}
footer={null} footer={null}
width={'80%'}> width={'80%'}>
<div className={styles.nomal}> {
<p className={styles.import}>EXCEL导入向导</p> !!openProgress ? <ProgressDiy fileCacheKey={fileCacheKey}
<div style={{ margin: 'auto 23px' }}> {...openProgress}
<Steps current={current}> changeOpenProgress={this.changeOpenProgress}
{steps.map((item) => ( /> :
<Step key={item.title} title={item.title} /> <div className={styles.nomal}>
))} <p className={styles.import}>EXCEL导入向导</p>
</Steps> <div style={{ margin: 'auto 23px' }}>
<div className="steps-content">{steps[this.state.current].content}</div> <Steps current={current}>
<div className={styles.button}> {steps.map((item) => (
{this.state.current < steps.length - 1 && <Step key={item.title} title={item.title} />
this.state.current !== 0 && ( ))}
<ButtonDiy </Steps>
name={this.state.current == 3 ? '确认导入' : '下一步'} <div className='steps-content'>{steps[this.state.current].content}</div>
type="primary" <div className={styles.button}>
disabled={this.state.current != 3 && this.state.isNextDisabled} {this.state.current < steps.length - 1 &&
// className='primaryBlue' this.state.current !== 0 && (
handleClick={() => this.next()} <ButtonDiy
/> name={this.state.current == 3 ? '确认导入' : '下一步'}
)} type='primary'
disabled={this.state.current != 3 && this.state.isNextDisabled}
// className='primaryBlue'
handleClick={() => this.next()}
/>
)}
{this.state.current > 0 && ( {this.state.current > 0 && (
<ButtonDiy <ButtonDiy
style={{ marginLeft: 8 }} style={{ marginLeft: 8 }}
name="上一步" name='上一步'
className="defaultBlue" className='defaultBlue'
handleClick={() => this.prev()} handleClick={() => this.prev()}
/> />
)} )}
</div> </div>
</div> </div>
<div className={styles.tip}> <div className={styles.tip}>
<p className={styles.tipContent}> <p className={styles.tipContent}>
<span>欢迎使用EXCEL导入向导，首先请您上传需要导入的EXCEL文件。</span> <span>欢迎使用EXCEL导入向导，首先请您上传需要导入的EXCEL文件。</span>
<span> <span>
点击“选择文件”选择您要导入的EXCEL文件，点击“开始上传”将其上传到服务器上，点击“清空队列”清空当前上传文件队列。 点击“选择文件”选择您要导入的EXCEL文件，点击“开始上传”将其上传到服务器上，点击“清空队列”清空当前上传文件队列。
</span> </span>
</p> </p>
</div> </div>
{this.state.isShow ? ( {this.state.isShow ? (
<div className={styles.buttonDown}> <div className={styles.buttonDown}>
<Upload {...props}> <Upload {...props}>
<Button> <Button>
<Icon type="upload" /> <Icon type='upload' />
点击上传 点击上传
</Button> </Button>
</Upload> </Upload>
<ButtonDiy <ButtonDiy
name={'下载模板'} name={'下载模板'}
type="primary" type='primary'
// className='primaryBlue' // className='primaryBlue'
handleClick={() => this.downloadFile()} handleClick={() => this.downloadFile()}
loading={this.state.confirmLoading} loading={this.state.confirmLoading}
/> />
</div> </div>
) : ( ) : (
<Upload {...props}> <Upload {...props}>
<Button> <Button>
<Icon type="upload" /> <Icon type='upload' />
重新上传 重新上传
</Button> </Button>
</Upload> </Upload>
)} )}
{this.state.isShow ? ( {this.state.isShow ? (
<div className={styles.attentionItem}> <div className={styles.attentionItem}>
<p>导入事项</p> <p>导入事项</p>
<p>1. 导入操作一次只能上传 1 个EXCEL文件。</p> <p>1. 导入操作一次只能上传 1 个EXCEL文件。</p>
<p>2. 导入文件最大文件大小上传 1 GB。</p> <p>2. 导入文件最大文件大小上传 1 GB。</p>
<p>3. 只能上传EXCEL文件(XLS, XLSX) 默认支持EXCEL 2003和EXCEL 2007。</p> <p>3. 只能上传EXCEL文件(XLS, XLSX) 默认支持EXCEL 2003和EXCEL 2007。</p>
<p>4. 请将EXCEL文件的所有单元格格式设置为“文本”格式</p> <p>4. 请将EXCEL文件的所有单元格格式设置为“文本”格式</p>
</div> </div>
) : ( ) : (
<div className={styles.error} style={{ marginTop: 20 }}> <div className={styles.error} style={{ marginTop: 20 }}>
<Tabs <Tabs
activeKey={this.state.currentKey} activeKey={this.state.currentKey}
key={this.state.ch} key={this.state.ch}
onChange={this.changePane} onChange={this.changePane}
type="card"> type='card'>
{this.state.errData && this.state.errData.length == 0 ? ( {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 <Table
columns={column1} columns={column1}
size="small" size='small'
style={{ overflow: 'auto' }} style={{ overflow: 'auto' }}
dataSource={this.state.errData} dataSource={this.state.errData}
bordered={true} bordered={true}
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
/> />
</TabPane> </TabPane>
)} )}
<TabPane tab={<span style={{ color: 'green' }}>验证成功列表</span>} key="2"> <TabPane tab={<span style={{ color: 'green' }}>验证成功列表</span>} key='2'>
<Table <Table
columns={column2} columns={column2}
size="small" size='small'
style={{ overflow: 'auto' }} style={{ overflow: 'auto' }}
dataSource={this.state.sucData} dataSource={this.state.sucData}
bordered={true} bordered={true}
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
/> />
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
)} )}
</div> </div>
}
</Modal> </Modal>
</span> </span>
); );
} }
} }
one_stop_public/App/ImportUtil.less
浏览文件 @ 62236816
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
padding: 10px; padding: 10px;
} }
.title{ .title{
display: flex; display: flex;
margin-bottom: 20px; margin-bottom: 20px;
} }
.info{ .info{
...@@ -19,36 +19,36 @@ ...@@ -19,36 +19,36 @@
margin: auto 10px; margin: auto 10px;
} }
.button{ .button{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex; display: -moz-flex;
display: flex; display: flex;
-moz-box-pack: center; /*Firefox*/ -moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/ -webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center; box-pack: center;
-moz-justify-content: center; -moz-justify-content: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
} }
.operation{ .operation{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex; display: -moz-flex;
display: flex; display: flex;
-moz-box-pack: center; /*Firefox*/ -moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/ -webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center; box-pack: center;
-moz-justify-content: center; -moz-justify-content: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
} }
.button Button{ .button Button{
margin: auto 10px; margin: auto 10px;
} }
.titleInfo p span{ .titleInfo p span{
font-weight: bold; font-weight: bold;
...@@ -106,25 +106,25 @@ ...@@ -106,25 +106,25 @@
margin-left: 34px; margin-left: 34px;
} }
.contentTable{ .contentTable{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex; display: -moz-flex;
display: flex; display: flex;
-moz-box-pack: justify; /*Firefox*/ -moz-box-pack: justify; /*Firefox*/
-webkit-box-pack:justify; /*Safari,Opera,Chrome*/ -webkit-box-pack:justify; /*Safari,Opera,Chrome*/
box-pack: justify; box-pack: justify;
-moz-justify-content: space-between; -moz-justify-content: space-between;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
} }
.left{ .left{
width: 50%; width: 50%;
} }
.right{ .right{
width: 50%; width: 50%;
border-left: 1px solid #317ecc; border-left: 1px solid #317ecc;
} }
.error p{ .error p{
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
} }
.download{ .download{
background: #f5f5f5; background: #f5f5f5;
padding: 5px; padding: 5px;
margin-top: -16px; margin-top: -16px;
} }
.download img{ .download img{
...@@ -154,18 +154,18 @@ ...@@ -154,18 +154,18 @@
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
.buttonDown{ .buttonDown{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex; display: -moz-flex;
display: flex; display: flex;
-moz-box-pack: start; /*Firefox*/ -moz-box-pack: start; /*Firefox*/
-webkit-box-pack: start; /*Safari,Opera,Chrome*/ -webkit-box-pack: start; /*Safari,Opera,Chrome*/
box-pack: start; box-pack: start;
-moz-justify-content: flex-start; -moz-justify-content: flex-start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 20px; margin-bottom: 20px;
} }
.buttonDown>button{ .buttonDown>button{
...@@ -175,4 +175,18 @@ ...@@ -175,4 +175,18 @@
color: #fff; color: #fff;
padding: 5px 12px; padding: 5px 12px;
border-radius: 5px; border-radius: 5px;
} }
\ No newline at end of file
.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 0 → 100644
浏览文件 @ 62236816
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
浏览文件 @ 62236816
...@@ -42,6 +42,19 @@ export default { ...@@ -42,6 +42,19 @@ export default {
}); });
if (callback) callback(response); 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 }) { *importExecute({ payload, callback }, { call, put }) {
const response = yield call(apiRequest, api + '/importExecute', { const response = yield call(apiRequest, api + '/importExecute', {
...payload, ...payload,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论