133 lines
6.1 KiB
JavaScript
133 lines
6.1 KiB
JavaScript
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"
|
||
}
|
||
}
|
||
|
||
componentWillMount() { // 初始化渲染页面
|
||
const { taxAgentStore: {fetchTaxAgentOption} } = this.props;
|
||
fetchTaxAgentOption();
|
||
}
|
||
|
||
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) => {
|
||
const { status } = info.file;
|
||
if (status !== 'uploading') {
|
||
//获得服务端返回的资源url
|
||
console.log(info.file.response.data);
|
||
}
|
||
if (status === 'done') {
|
||
this.props.onFileIdChange(info.file.response.data.fileid)
|
||
} else if (status === 'error') {
|
||
message.error(`${info.file.name} file upload failed.`);
|
||
}
|
||
},
|
||
};
|
||
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}>
|
||
<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>
|
||
)
|
||
}
|
||
} |