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

import React from 'react';
import { WeaSteps, WeaDatePicker, WeaInput, WeaSelect } from 'ecCom';
import { Upload, Icon, Modal, Row, Col, Button } from "antd";
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import ModalStep1 from './modalStep1'
import ModalStep2 from './modalStep2'
import ModalStep3 from './modalStep3'

import { columns } from './columns'

const Dragger = Upload.Dragger;

const Step = WeaSteps.Step;

@inject("taxAgentStore", "cumDeductStore")
@observer
export default class ImportModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentStep: 0,
            datetime: "",
            taxAgentId: "",
            fileId: ""
        }
    }

    componentWillMount() { // 初始化渲染页面
        const { taxAgentStore: {fetchTaxAgentOption} } = this.props;
        fetchTaxAgentOption();
    }

    nextStep() {
        const { cumDeductStore: { step, setStep }} = this.props;
        setStep(step + 1)
    }

    preStep() {
        const { cumDeductStore: { step, setStep }} = this.props;
        setStep(step - 1);
    }

    renderFormComponent() {
        const { datetime, taxAgentId } = this.state
        const { taxAgentStore: {taxAgentOption} } = this.props;
        return (
            <Row>
                <Col span={12}>
                    <span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>税款所属期</span>
                    <WeaDatePicker
                        format="yyyy-MM"
                        value={datetime}
                        onChange={value => this.setState({ datetime: value })}
                    />
                </Col>
                <Col span={12}>
                    <span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>个税扣缴义务人</span>
                    <WeaSelect
                        showSearch // 设置select可搜索
                        style={{ width: 200, display: "inline-block" }}
                        options={taxAgentOption}
                        value={taxAgentId}
                        onChange={v => {
                            this.setState({ taxAgentId: v });
                        }}
                    />
                </Col>
            </Row>
        )
    }
    handleStep1Next() {
        const { cumDeductStore: { importFile, setStep }} = this.props;
        const { fileId, datetime, taxAgentId} = this.state;
        setStep(1)
    }

    handlePreviewDate() {
        const { cumDeductStore: { previewImport }} = this.props;
        const { fileId, datetime, taxAgentId } = this.state;
        previewImport({
            imageId: fileId,
            declareMonth: datetime,
            taxAgentId: taxAgentId
        })
    }

    hanleImportData() {
        const { cumDeductStore: { importFile }} = this.props;
        const { fileId, datetime, taxAgentId } = this.state;
        importFile({
            imageId: fileId,
            declareMonth: datetime,
            taxAgentId: taxAgentId
        })
    }

    render() {
        const { cumDeductStore: { step, slideDataSource, importResult, setSlideVisiable, setStep, setModalVisiable }} = 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>
            {
                step == 0 && (<ModalStep1 
                    formComponent={this.renderFormComponent()}
                    onFileIdChange={(fileId) => {this.setState({fileId})}}
                    onStep1Next={() => {
                        this.handleStep1Next();
                    }}/>)
            }
            {
                step == 1 && (<ModalStep2
                    onPreviewDate={() => this.handlePreviewDate()}
                    dataSource={slideDataSource}
                    columns={columns}
                    onStep2Next={() => {this.nextStep()}} onStep2Pre={() => {this.preStep()}}/>)
            }
            {
                step == 2 && (<ModalStep3
                    onImportData={() => this.hanleImportData()}
                    importResult={toJS(importResult)}
                    onFinish={() => {setModalVisiable(false); setStep(0)}}/>)
            }
            
        </Modal>
        )
    }
}