import React, { Fragment } from 'react'; import { Button, Modal, Steps, Upload, Icon, message, Spin, Tabs, Table, } from 'antd'; import styles from './ImportUtil.less'; import ButtonDiy from './ButtonDiy/ButtonDiy'; import { exportExcel } from 'xlsx-oc' import config from '../config/config'; import { connect } from 'dva'; const Step = Steps.Step; const TabPane = Tabs.TabPane; @connect(({ DataObj, loading }) => ({ DataObj, loading: loading.models.DataObj, })) export default class ImportUtil extends React.PureComponent { constructor(props) { super(props); 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: [], exportTemplateUrl, isNextDisabled:false, }; } showModal = () => { this.setState({ visible: true, }); }; handleOk = (e) => { this.setState({ visible: false, }); }; handleCancel = (e) => { this.setState({ visible: false, }); }; next() { const current = this.state.current + 1; if (current === 2) { this.setState({ current: current, isShow: false, }); if (this.state.errData.lenth > 0) { message.error('请检查数据'); return; } else { this.import(); } } if (current === 3) { this.setState({ current: current, isShow: true, }); if (this.props.callback) { this.props.callback(); } } } prev() { const current = this.state.current - 1; this.setState({ current }); } import() { const { dispatch ,importParams } = this.props; dispatch({ type: 'DataObj/importExecute', payload: { ...(importParams||{}), cacheKey:this.state.filekey, objId: this.props.objId, }, callback: (res) => { this.next(); message.success('导入成功'); this.setState({ current: 3, isShow: true, visible: false, }); if(this.props.callback){ this.props.callback(); } } }) } getCachKey = (filePath) => { const { dispatch ,importParams } = this.props; dispatch({ type: 'DataObj/importAnalyse', payload: { ...(importParams||{}), isLocal:false, filePath, objId: this.props.objId, }, callback: (res) => { this.setState({ filekey: res.cacheKey, }); this.queryFile(res.cacheKey); } }) }; 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, 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}) } exportError=(column,dataSource)=>{ 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); } render() { const props = { name: 'file', action: config.uploadUrl, headers: { authorization: 'authorization-text', }, accept:'.xlsx', showUploadList: false, onChange: (info) => { if (info.file.status !== 'uploading') { } if (info.file.status === 'done') { message.success(`${info.file.name} 上传成功`); let x = info.file.response; this.getCachKey(x); } else if (info.file.status === 'error') { message.error(`${info.file.name} file upload failed.`); } }, }; const steps = [{ title: '上传Excel', }, { title: '验证数据', }, { title: '数据导入', }, { title: '导入完成', }]; const { current } = this.state; const {name, loading} = this.props const column1=this.state.column?[{title:"序号",dataIndex:"index",fixed:"left",width:50, render:(v,r,i)=>i+1},...this.state.column]:[] var column2=this.state.column?[...this.state.column]:[] if(column1.length>1) column1[1].render=(val)=><span style={{color:"red"}}>{val}</span> column2.splice(0,1) column2=[{title:"序号",fixed:"left",width:50, render:(v,r,i)=>i+1},...column2] return ( <span> <ButtonDiy name={name||'批量导入'} type='default' className='defaultBlue' handleClick={this.showModal}/> <Modal visible={this.state.visible} onOk={this.handleOk} maskClosable={false} destroyOnClose onCancel={this.handleCancel} title={null} footer={null} width={"80%"} > <div className={styles.nomal}> <p className={styles.import}> EXCEL导入向导 </p> <div style={{ margin: 'auto 23px' }}> <Steps current={current}> {steps.map(item => <Step key={item.title} title={item.title}/>)} </Steps> <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" disabled={this.state.current!=3 && this.state.isNextDisabled} className='primaryBlue' handleClick={() => this.next()}/> } { this.state.current > 0 && <ButtonDiy style={{ marginLeft: 8 }} name="上一步" className='defaultBlue' handleClick={() => this.prev()}/> } </div> </div> <div className={styles.tip}> <p className={styles.tipContent}> <span>欢迎使用EXCEL导入向导,首先请您上传需要导入的EXCEL文件。</span> <span>点击“选择文件”选择您要导入的EXCEL文件,点击“开始上传”将其上传到服务器上,点击“清空队列”清空当前上传文件队列。</span> </p> </div> { this.state.isShow ? <div className={styles.buttonDown}> <Upload {...props}> <Button> <Icon type="upload"/>点击上传 </Button> </Upload> <Button href={this.state.exportTemplateUrl } target="_blank" type="danger"> 下载模板 </Button> </div> : <Upload {...props}> <Button> <Icon type="upload"/> 重新上传 </Button> </Upload> } { this.state.isShow ? <div className={styles.attentionItem}> <p>导入事项</p> <p>1. 导入操作一次只能上传 1 个EXCEL文件。</p> <p>2. 导入文件最大文件大小上传 1 GB。</p> <p>3. 只能上传EXCEL文件(XLS, XLSX) 默认支持EXCEL 2003和EXCEL 2007。</p> <p>4. 请将EXCEL文件的所有单元格格式设置为“文本”格式</p> </div> : <div className={styles.error} style={{marginTop:20}}> <Tabs activeKey={this.state.currentKey} key={this.state.ch} onChange={this.changePane} type="card"> {this.state.errData&&this.state.errData.length==0?"":<TabPane tab={<span style={{color:"red"}}>验证错误列表</span>} key="1"> <Button style={{marginTop:5,marginBottom:5}} type="danger" onClick={this.exportError.bind(this,column1,this.state.errData)}>导出错误信息</Button> <Table columns={column1} size="small" style={{overflow: 'auto'}} dataSource={this.state.errData} bordered={true}/></TabPane>} <TabPane tab={<span style={{color:"green"}}>验证成功列表</span>} key="2"> <Button style={{marginTop:5,marginBottom:5}} type="primary" onClick={this.exportError.bind(this,column2,this.state.sucData)}>导出正确信息</Button> <Table columns={column2} size="small" style={{overflow: 'auto'}} dataSource={this.state.sucData} bordered={true}/></TabPane> </Tabs> </div> } </div> </Modal> </span> ); } }