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

import React from 'react'
import { WeaSteps, WeaDatePicker, WeaInput, WeaSelect, message, WeaCheckbox  } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Upload, Icon, Row, Col, Button } from "antd";
import uploadImg from './upload.svg'

const Dragger = Upload.Dragger;

@inject("taxAgentStore")
@observer
export default class ModalStep1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            datetime: "",
            taxAgentId: "",
            hasData: "0",
            fileList: []
        }
    }

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

    handleChange(info) {
        let fileList = info.fileList;
    
        // 1. 上传列表数量的限制
        //    只显示最近上传的一个，旧的会被新的顶掉
        fileList = fileList.slice(-1);
        // 2. 读取远程路径并显示链接
        fileList = fileList.map((file) => {
          if (file.response) {
            // 组件会将 file.url 作为链接进行展示
            file.url = file.response.url;
          }
          return file;
        });

        // 3. 按照服务器返回信息筛选成功上传的文件
        fileList = fileList.filter((file) => {
          if (file.response) {
            return file.response.status === 1;
          }
          return true;
        });

        if(fileList && fileList.length > 0 && fileList[0].response && fileList[0].response.status === 1) {
            this.props.onFileIdChange(fileList[0].response.data.fileid)
        }
    
        this.setState({ fileList });
      }

    render() {
        const { datetime, taxAgentId, hasData } = this.state
        const { taxAgentStore: {taxAgentOption}, isInit } = this.props;
        let downloadExtra= '';
        if(isInit){
          downloadExtra= hasData === '1' ? `&hasData=true` : `&hasData=false`;
        }
        const dragger = {
            name: 'file',
            multiple: false,
            action: "/api/doc/upload/uploadFile",	//上传地址
            onChange: (info) => {
                this.handleChange(info)
            },
        };
        return (
            <div style={{ height: "550px", display: "flex", flexFlow: "column"}}>
                <div style={{ flex: "1", overflow: "scroll" }}>
                    {
                        this.props.formComponent && <div className="stepInformItem">
                            <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
                                导入选项
                            </div>
                            <div className="formWrapper" style={{ border: "1px solid #eee", borderRadiu: "5px", padding: "10px" }}>
                                {this.props.formComponent}
                            </div>
                        </div>
                    }

                    <div className="stepInformItem">
                        <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
                            导入excel
                        </div>
                        <div>
                            <Dragger {...dragger} fileList={this.state.fileList}>
                                <div style={{ padding: '25px 0' }}>
                                    <p className="ant-upload-drag-icon">
                                        <Icon type="inbox" />
                                    </p>
                                    <p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
                                    <p className="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
                                </div>
                            </Dragger>
                        </div>

                    </div>

                    <div className="stepInformItem">
                        <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
                            操作步骤
                        </div>

                        <div style={{ lineHeight: "30px" }}>
                            <p>1. 第一步，请选择导出的Excel文件或
                                {
                                    (typeof this.props.templateLink) == "string" ? 
                                    <a href={`${this.props.templateLink}${downloadExtra}`}>点击这里下载模板</a>
                                    :
                                    <a onClick={() => {this.props.templateLink()}}>点击这里下载模板</a>
                                }
                                
                                {this.props.headerSetCompoent && this.props.headerSetCompoent };
                                {
                                  this.props.isInit &&
                                  <WeaCheckbox 
                                    value={hasData}
                                    content="导出现有数据" 
                                    helpfulTip="提示：建议先导出现有最新数据，修改后再导入" 
                                    style={{ marginLeft: 10 }} 
                                    onChange={(hasData)=> this.setState({hasData})}
                                  />
                                }
                            </p>
                            <p>2. 第二步，请一定要确定Excel文档中的格式是模板中的格式，没有被修改掉；</p>
                            <p>3. 第三步，选择填写好的Excel文档，点击“下一步”按钮进行数据预览；</p>
                            <p>4. 第四步，如果以上步骤和Excel文档正确的话，数据会被正确导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处。</p>
                        </div>

                    </div>

                    <div className="stepInformItem">
                        <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
                            Excel文件说明
                        </div>

                        <div style={{ lineHeight: "30px" }}>
                            1. 后缀名为xls或者xlsx；<br />
                            2. 数据请勿放在合并的单元格中；<br />
                        </div>

                    </div>
                </div>
                <div className="footerBtnWrapper" style={{ overflow: "hidden", height: "30px" }}>
                    <Button type="primary" style={{ float: "right" }} onClick={this.props.onStep1Next}>下一步</Button>
                </div>
            </div>
        )
    }
}