salary-management-front/pc4mobx/hrmSalary/components/importModal/index.js

116 lines
3.4 KiB
JavaScript

import React from 'react';
import { WeaSteps, WeaDatePicker, WeaInput, WeaSelect } from 'ecCom';
import { Upload, Icon, Modal, Row, Col, Button, message } from "antd";
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import ModalStep1 from './modalStep1'
import ModalStep2 from './modalStep2'
import ModalStep3 from './modalStep3'
const Dragger = Upload.Dragger;
const Step = WeaSteps.Step;
@inject("taxAgentStore")
@observer
export default class ImportModal extends React.Component {
constructor(props) {
super(props)
this.state = {
fileId: ""
}
this.props.init && this.props.init()
}
componentWillMount() { // 初始化渲染页面
const { taxAgentStore: {fetchTaxAgentOption} } = this.props;
fetchTaxAgentOption();
}
nextStep() {
const { step } = this.props;
this.props.setStep(step + 1)
}
preStep() {
const { step } = this.props;
this.props.setStep(step - 1);
}
handleStep1Next() {
if(this.state.fileId) {
this.props.setStep(1)
} else {
message.warning("请上传文件")
}
}
handlePreviewDate() {
const { fileId } = this.state;
const { params } = this.props;
this.props.previewImport({
...params,
imageId: fileId
})
}
hanleImportData() {
const { fileId } = this.state;
const { params } = this.props;
this.props.importFile({
...params,
imageId: fileId,
})
}
render() {
const { step, slideDataSource, isInit } = this.props;
return (
<Modal title="数据导入" visible={this.props.visiable}
onCancel={this.props.onCancel}
width={850} className="cumDeductModal"
footer={null}
>
<div className="stepWrapper">
<WeaSteps current={step}>
<Step description="上传Excel" />
<Step description="数据预览" />
<Step description="导入数据" />
</WeaSteps>
</div>
{
this.props.step == 0 && (<ModalStep1
isInit={ isInit }
templateLink={this.props.templateLink}
headerSetCompoent={this.props.headerSetCompoent}
formComponent={this.props.renderFormComponent && this.props.renderFormComponent()}
onFileIdChange={(fileId) => {this.setState({fileId})}}
onStep1Next={() => {
this.handleStep1Next();
}}/>)
}
{
this.props.step == 1 && (<ModalStep2
onPreviewDate={() => this.handlePreviewDate()}
dataSource={slideDataSource}
columns={this.props.columns}
onStep2Next={() => {
this.nextStep();
this.hanleImportData()
}} onStep2Pre={() => {this.preStep()}}/>)
}
{
this.props.step == 2 && (<ModalStep3
// onImportData={() => this.hanleImportData()}
importResult={toJS(this.props.importResult)}
onFinish={() => {this.props.onFinish()}}/>)
}
</Modal>
)
}
}