88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
/*
|
||
* Author: 黎永顺
|
||
* name: 导入-步骤一
|
||
* Description:
|
||
* Date: 2023/8/11
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { WeaLocaleProvider } from "ecCom";
|
||
import { Icon, Upload, message } from "antd";
|
||
|
||
const Dragger = Upload.Dragger;
|
||
const { getLabel } = WeaLocaleProvider;
|
||
|
||
class ImpStep1 extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
fileList: []
|
||
};
|
||
}
|
||
|
||
handleChange = (data) => {
|
||
const { fileList, file } = data;
|
||
if (file.response && typeof (file.response) != "undefined" && file.status !== "removed") message.success(getLabel(111, "上传成功"));
|
||
this.setState({ fileList: fileList.slice(-1) });
|
||
};
|
||
|
||
render() {
|
||
const { fileList } = this.state;
|
||
const dragger = {
|
||
accept: ".xlsx",
|
||
name: "file",
|
||
multiple: false,
|
||
action: "/api/doc/upload/uploadFile",
|
||
fileList,
|
||
onChange: this.handleChange
|
||
};
|
||
return (
|
||
<div className="weapp-batch-impsteps-picker-content-imp-step1">
|
||
{/* 导入选项 */}
|
||
{
|
||
this.props.importParams &&
|
||
<div className="weapp-salary-tb-border-bottom import-option">
|
||
<div>{getLabel(543201, "导入选项")}</div>
|
||
{this.props.importParams}
|
||
</div>
|
||
}
|
||
<div className="title">{getLabel(543202, "导入Excel")}</div>
|
||
<p className="draggerUploadWrapper">
|
||
<Dragger {...dragger}>
|
||
<div>
|
||
<p className="iconUpload"><Icon type="inbox"/></p>
|
||
<p className="uplaod-title">{getLabel(543203, "点击或将文件拖拽到此区域上传")}</p>
|
||
<p
|
||
className="uplaod-subTitle">{getLabel(543204, "支持单个或批量上传，严禁上传公司内部资料及其他违禁文件")}</p>
|
||
</div>
|
||
</Dragger>
|
||
</p>
|
||
|
||
<div className="bottom-border">
|
||
<div>{getLabel(27577, "操作步骤")}</div>
|
||
<p>
|
||
<span>{`1. ${getLabel(30907, "第一步")},${getLabel(543205, "请选择导出的Excel文件或")}`}</span>
|
||
<a href={this.props.link} className="weapp-salary-link"
|
||
target="_blank">{getLabel(543207, "点击这里下载模板")}</a>
|
||
{this.props.exportDataDom}
|
||
</p>
|
||
<p>{`2. ${getLabel(543211, "第二步")},${getLabel(543212, "请一定要确定Excel文档中的格式是模板中的格式")},${getLabel(543213, "没有被修改掉")}；`}</p>
|
||
<p>{`3. ${getLabel(543216, "第三步")},${getLabel(543215, "选择填写好的Excel文档")},${getLabel(543214, "点击“下一步”按钮进行数据预览")}；`}</p>
|
||
<p>
|
||
{`4. ${getLabel(543217, "第四步")},${getLabel(543218, "如果以上步骤和Excel文档正确的话")},${getLabel(543219, "导入成功会有提示")},${getLabel(543220, "数据会被正确导入")}。${getLabel(543221, "如果有问题")},${getLabel(543222, "则会提示Excel文档的错误之处")}。`}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="description">
|
||
<div>{getLabel(543223, "Excel文件说明")}</div>
|
||
<p>{`1. ${getLabel(543224, "后缀名为xls或者xlsx")};`}</p>
|
||
<p>{`2. ${getLabel(543225, "数据请勿放在合并的单元格中")};`}</p>
|
||
<p><span>{`3. ${getLabel(543226, "账单月份格式必须为")}:YYYY-MM；`}</span></p>
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default ImpStep1;
|