Skip to content

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

屏蔽导入组件的 错误信息 导入 导出功能

因为要报错 Bad range (0): A1:[2 Reduce of empty array with no initial value 28492 参军入伍管理、政治考核管理、役前集训管理、体检管理，批量导入错误时--导出错误信息无反应（101458，bdk@2022*$）
上级 beb746e3
隐藏空白字符变更
内嵌 并排
正在显示 包含 427 行增加 和 417 行删除
one_stop_public/App/ImportUtil.js
浏览文件 @ 21a482ab
...@@ -14,380 +14,387 @@ const Modal = getModal(); ...@@ -14,380 +14,387 @@ 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;
const exportExcel = CLIENT_TYPE == 'mobile' ? null : require('xlsx-oc').exportExcel; // const exportExcel = CLIENT_TYPE == 'mobile' ? null : require('xlsx-oc').exportExcel;
let tempCallback = () => { let tempCallback = () => {};
};
@connect(({ DataObj, loading }) => ({ @connect(({ DataObj, loading }) => ({
DataObj, DataObj,
loading: loading.models.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;
// const exportTemplateUrl = encodeURI(
// `${config.httpServer}/DataObjApi/importTemplateDownload?objId=${this.props.objId}&name=${
// props.fileName
// }`,
// );
this.state = {
ch: false,
currentKey: '1',
visible: false,
current: 0,
isShow: true,
filekey: '',
sucData: [],
errData: [],
column: [],
confirmLoading: false,
// exportTemplateUrl,
isNextDisabled: false,
};
}
// const exportTemplateUrl = encodeURI( showModal = () => {
// `${config.httpServer}/DataObjApi/importTemplateDownload?objId=${this.props.objId}&name=${ this.setState({
// props.fileName sucData: [],
// }`, errData: [],
// ); column: [],
current: 0,
isShow: true,
isNextDisabled: false,
filekey: '',
visible: true,
});
};
handleOk = (e) => {
this.setState({
visible: false,
});
};
handleCancel = (e) => {
this.setState({
visible: false,
});
};
this.state = { next() {
ch: false, const current = this.state.current + 1;
currentKey: '1', if (current === 2) {
visible: false, this.setState({
current: 0, current: current,
isShow: true, isShow: false,
filekey: '', });
sucData: [], if (this.state.errData.lenth > 0) {
errData: [], message.error('请检查数据');
column: [], return;
confirmLoading: false, } else {
// exportTemplateUrl, this.import();
}
}
if (current === 3) {
console.log('current === 3');
this.setState(
{
current: current,
isShow: true,
},
() => {
if (tempCallback && typeof tempCallback === 'function') {
tempCallback();
tempCallback = null;
}
},
);
}
}
isNextDisabled: false, prev() {
}; const current = this.state.current - 1;
} this.setState({ current });
}
showModal = () => { import() {
this.setState({ const { dispatch, importParams, importConfig } = this.props;
sucData: [], dispatch({
errData: [], type: 'DataObj/importExecute',
column: [], payload: {
current: 0, ...(importParams || {}),
isShow: true, cacheKey: this.state.filekey,
isNextDisabled: false, objId: this.props.objId,
filekey: '', },
visible: true, callback: (res) => {
}); this.next();
}; message.success('导入成功');
handleOk = (e) => {
this.setState({
visible: false,
});
};
handleCancel = (e) => {
this.setState({
visible: false,
});
};
next() { this.setState({
const current = this.state.current + 1; current: 3,
if (current === 2) { isShow: true,
this.setState({ visible: false,
current: current, });
isShow: false, // if (typeof tempCallback === 'function') {
}); // tempCallback();
if (this.state.errData.lenth > 0) { // tempCallback = null;
message.error('请检查数据'); // }
return; },
} else { });
this.import(); }
}
}
if (current === 3) {
console.log('current === 3');
this.setState({
current: current,
isShow: true,
}, () => {
if (tempCallback && typeof tempCallback === 'function') {
tempCallback();
tempCallback = null;
}
});
}
}
prev() { getCachKey = (filePath) => {
const current = this.state.current - 1; const { dispatch, importParams, importConfig } = this.props;
this.setState({ current }); dispatch({
} type: 'DataObj/importAnalyse',
payload: {
...(importParams || {}),
isLocal: false,
filePath,
import() { importConfig: importConfig ? JSON.stringify(importConfig) : null,
const { dispatch, importParams, importConfig } = this.props; objId: this.props.objId,
dispatch({ },
type: 'DataObj/importExecute', callback: (res) => {
payload: { this.setState({
...(importParams || {}), filekey: res.cacheKey,
cacheKey: this.state.filekey, });
objId: this.props.objId, this.queryFile(res.cacheKey);
}, },
callback: (res) => { });
this.next(); };
message.success('导入成功'); 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,
this.setState({ sucData: res.pass,
current: 3, errData: res.noPass,
isShow: true, column: res.column,
visible: false, });
}); if (res.noPass && res.noPass.length == 0) {
// if (typeof tempCallback === 'function') { if (res.pass.length == 0) {
// tempCallback(); message.error('当前没有验证成功的数据，无法导入。');
// tempCallback = null; 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,
});
}
},
});
};
getCachKey = (filePath) => { changePane = (activeKey) => {
const { dispatch, importParams, importConfig } = this.props; this.setState({ currentKey: activeKey });
dispatch({ };
type: 'DataObj/importAnalyse',
payload: {
...(importParams || {}),
isLocal: false,
filePath,
importConfig: importConfig ? JSON.stringify(importConfig) : null, // exportError = (column, dataSource) => {
objId: this.props.objId, // if (exportExcel == null) {
}, // message.info('当前终端暂不支持此功能');
callback: (res) => { // return;
this.setState({ // }
filekey: res.cacheKey, // var _headers = [];
}); // for (var i = 0; i < column.length; i++) {
this.queryFile(res.cacheKey); // _headers.push({
}, // k: column[i].dataIndex,
}); // v: column[i].title,
}; // });
queryFile = (cacheKey) => { // }
const { dispatch, importParams } = this.props; // for (var j = 0; j < dataSource.length; j++) {
dispatch({ // dataSource[j].index = j + 1;
type: 'DataObj/importDataQuery', // }
payload: { // exportExcel(_headers, dataSource);
...(importParams || {}), // };
cacheKey,
objId: this.props.objId,
},
callback: (res) => {
this.setState({
current: 1,
isShow: false,
sucData: res.pass, downloadFile = async () => {
errData: res.noPass, this.setState({ confirmLoading: true });
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 });
};
exportError = (column, dataSource) => {
if (exportExcel == null) {
message.info('当前终端暂不支持此功能');
return;
}
var _headers = [];
for (var i = 0; i < column.length; i++) {
_headers.push({ k: column[i].dataIndex, v: column[i].title });
}
for (var j = 0; j < dataSource.length; j++) {
dataSource[j].index = j + 1;
}
exportExcel(_headers, dataSource);
};
downloadFile = async () => {
this.setState({ confirmLoading: true });
const { objId, fileName, importParams, importConfig } = this.props; const { objId, fileName, importParams, importConfig } = this.props;
const params = { const params = {
...importParams, ...importParams,
importConfig: importConfig ? JSON.stringify(importConfig) : null, importConfig: importConfig ? JSON.stringify(importConfig) : null,
objId, objId,
fileName, fileName,
}; };
let url = `${config.httpServer}/DataObjApi/importTemplateDownload`; let url = `${config.httpServer}/DataObjApi/importTemplateDownload`;
let newParams = giveFilePostDataInfoForTrue(params, url); let newParams = giveFilePostDataInfoForTrue(params, url);
if(newParams && newParams.datas){ if (newParams && newParams.datas) {
newParams.datas.token = getToken(); newParams.datas.token = getToken();
} }
const { transformApi, headersApi } = await getTransformApi(newParams.url); const { transformApi, headersApi } = await getTransformApi(newParams.url);
fetch(transformApi, { fetch(transformApi, {
method: 'POST', method: 'POST',
body: FormdataWrapper(newParams.datas), body: FormdataWrapper(newParams.datas),
headers: { headers: {
apis: headersApi, apis: headersApi,
} },
}) })
.then((res) => { .then((res) => {
if (res.status != '200') { if (res.status != '200') {
return res.json(); return res.json();
} else { } else {
return res.blob(); return res.blob();
} }
}) })
.then((data) => { .then((data) => {
if (data instanceof Blob) { if (data instanceof Blob) {
let a = document.createElement('a'); let a = document.createElement('a');
let url = window.URL.createObjectURL(data); let url = window.URL.createObjectURL(data);
let filename = let filename =
(this.props.fileName ? this.props.fileName : '导入模板.') + (this.props.ext || 'xlsx'); (this.props.fileName ? this.props.fileName : '导入模板.') + (this.props.ext || 'xlsx');
a.href = url; a.href = url;
a.download = filename; a.download = filename;
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
a = null; a = null;
} else { } else {
message.error(`文件导出错误`); message.error(`文件导出错误`);
} }
}) })
.catch((err) => { .catch((err) => {
message.error(`网络请求超时`); message.error(`网络请求超时`);
}) })
.finally(() => { .finally(() => {
this.setState({ confirmLoading: false }); this.setState({ confirmLoading: false });
}); });
}; };
render() { render() {
const props = { const props = {
name: 'file', name: 'file',
action: config.uploadUrl, action: config.uploadUrl,
headers: { headers: {
Authorization: `bearer ${getToken()}`, Authorization: `bearer ${getToken()}`,
}, },
data: { data: {
token: getToken(), token: getToken(),
}, },
accept: '.xlsx', accept: '.xlsx',
showUploadList: false, showUploadList: false,
onChange: (info) => { onChange: (info) => {
if (info.file.status !== 'uploading') { if (info.file.status !== 'uploading') {
} }
if (info.file.status === 'done') { if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`); message.success(`${info.file.name} 上传成功`);
let x = info.file.response; let x = info.file.response;
this.getCachKey(x); this.getCachKey(x);
} else if (info.file.status === 'error') { } else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`); message.error(`${info.file.name} 上传失败`);
} }
}, },
}; };
const steps = [ const steps = [
{ {
title: '上传Excel', title: '上传Excel',
}, },
{ {
title: '验证数据', title: '验证数据',
}, },
{ {
title: '数据导入', title: '数据导入',
}, },
{ {
title: '导入完成', title: '导入完成',
}, },
]; ];
const { current } = this.state; const { current } = this.state;
const { name } = this.props; const { name } = this.props;
const column1 = this.state.column const column1 = this.state.column
? [ ? [
{ {
title: '序号', title: '序号',
dataIndex: 'index', dataIndex: 'index',
fixed: 'left', fixed: 'left',
width: 50, width: 50,
render: (v, r, i) => i + 1, render: (v, r, i) => i + 1,
}, },
...this.state.column, ...this.state.column,
] ]
: []; : [];
let column2 = this.state.column ? [...this.state.column] : []; let column2 = this.state.column ? [...this.state.column] : [];
if (column1.length > 1) { if (column1.length > 1) {
column1[1].render = (val) => <span style={{ color: 'red' }}>{val}</span>; column1[1].render = (val) => <span style={{ color: 'red' }}>{val}</span>;
} }
if (column2) { if (column2) {
let xuhao = column2.find((g) => g.dataIndex === '序号'); let xuhao = column2.find((g) => g.dataIndex === '序号');
if (!xuhao) { if (!xuhao) {
column2.unshift({ column2.unshift({
title: '序号', title: '序号',
fixed: 'left', fixed: 'left',
width: 50, width: 50,
render: (v, r, i) => i + 1, render: (v, r, i) => i + 1,
dataIndex: '序号', dataIndex: '序号',
}); });
} }
} }
const btn = { const btn = {
name: name || '批量导入', name: name || '批量导入',
type: 'default', type: 'default',
className: 'defaultBlue', className: 'defaultBlue',
...(this.props.btn ? this.props.btn : {}), ...(this.props.btn ? this.props.btn : {}),
}; };
return ( return (
<span> <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}> <div className={styles.nomal}>
<p className={styles.import}>EXCEL导入向导</p> <p className={styles.import}>EXCEL导入向导</p>
<div style={{ margin: 'auto 23px' }}> <div style={{ margin: 'auto 23px' }}>
<Steps current={current}> <Steps current={current}>
{steps.map((item) => ( {steps.map((item) => (
<Step key={item.title} title={item.title} /> <Step key={item.title} title={item.title} />
))} ))}
</Steps> </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}> <div className={styles.button}>
{this.state.current < steps.length - 1 && {this.state.current < steps.length - 1 &&
this.state.current !== 0 && ( this.state.current !== 0 && (
<ButtonDiy <ButtonDiy
name={this.state.current == 3 ? '确认导入' : '下一步'} name={this.state.current == 3 ? '确认导入' : '下一步'}
type='primary' type="primary"
disabled={this.state.current != 3 && this.state.isNextDisabled} disabled={this.state.current != 3 && this.state.isNextDisabled}
// className='primaryBlue' // className='primaryBlue'
handleClick={() => this.next()} 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>
...@@ -399,90 +406,93 @@ export default class ImportUtil extends React.PureComponent { ...@@ -399,90 +406,93 @@ export default class ImportUtil extends React.PureComponent {
</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">
<Button {/*<Button
style={{ marginTop: 5, marginBottom: 5 }} style={{ marginTop: 5, marginBottom: 5 }}
type='danger' type='danger'
onClick={this.exportError.bind(this, column1, this.state.errData)}> onClick={this.exportError.bind(this, column1, this.state.errData)}>
导出错误信息 导出错误信息
</Button> </Button>*/}
<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">
<Button {/*<Button
style={{ marginTop: 5, marginBottom: 5 }} style={{
type='primary' marginTop: 5,
onClick={this.exportError.bind(this, column2, this.state.sucData)}> marginBottom: 5,
导出正确信息 }}
</Button> type="primary"
onClick={this.exportError.bind(this, column2, this.state.sucData)}>
导出正确信息
</Button>*/}
<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>
); );
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论