187 lines
7.4 KiB
JavaScript
187 lines
7.4 KiB
JavaScript
import React from "react";
|
||
import { WeaCheckbox, WeaLocaleProvider, WeaTools } from "ecCom";
|
||
import { inject, observer } from "mobx-react";
|
||
import { Icon, message, Upload } from "antd";
|
||
|
||
const Dragger = Upload.Dragger;
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
;
|
||
|
||
@inject("taxAgentStore")
|
||
@observer
|
||
export default class ModalStep1 extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
datetime: "",
|
||
taxAgentId: "",
|
||
hasData: "0",
|
||
fileList: WeaTools.ls.getJSONObj("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);
|
||
} else if (fileList && fileList.length === 0) {
|
||
this.props.onFileIdChange("");
|
||
}
|
||
|
||
this.setState({ fileList }, () => localStorage.setItem("fileList", JSON.stringify(this.state.fileList)));
|
||
}
|
||
|
||
render() {
|
||
const { datetime, taxAgentId, hasData } = this.state;
|
||
const { taxAgentStore: { taxAgentOption }, isInit, needimportSelected, params } = this.props;
|
||
let downloadExtra = "";
|
||
if (isInit) {
|
||
downloadExtra = hasData === "1" ? `&hasData=true` : `&hasData=false`;
|
||
}
|
||
const dragger = {
|
||
accept: ".xlsx",
|
||
name: "file",
|
||
multiple: false,
|
||
action: "/api/doc/upload/uploadFile", //上传地址
|
||
onChange: (info) => {
|
||
this.handleChange(info);
|
||
}
|
||
};
|
||
return (
|
||
<div style={{ display: "flex", flexFlow: "column" }}>
|
||
<div>
|
||
{
|
||
this.props.formComponent && <div className="stepInformItem">
|
||
<div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
|
||
{getLabel(543201, "导入选项")}
|
||
</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" }}>
|
||
{getLabel(543202, "导入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">{getLabel(543203, "点击或将文件拖拽到此区域上传")}</p>
|
||
<p
|
||
className="ant-upload-hint">{getLabel(543204, "支持单个或批量上传，严禁上传公司内部资料及其他违禁文件")}</p>
|
||
</div>
|
||
</Dragger>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="stepInformItem">
|
||
<div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
|
||
{getLabel(27577, "操作步骤")}
|
||
</div>
|
||
|
||
<div style={{ lineHeight: "30px" }}>
|
||
<p>{`1. ${getLabel(30907, "第一步")},${getLabel(543205, "请选择导出的Excel文件或")}`}
|
||
{
|
||
(typeof this.props.templateLink) == "string" ?
|
||
<a href="javascript:void(0);" onClick={() => {
|
||
let url = `${this.props.templateLink}${downloadExtra}`;
|
||
if (needimportSelected) {
|
||
try {
|
||
params && Object.keys(params).forEach((key) => {
|
||
if (!params[key] || params[key] == "") {
|
||
message.warning(`${getLabel(543199, "请完善导入选项")}, ${getLabel(543206, "再下载")}！`);
|
||
throw new Error(`${getLabel(543199, "请完善导入选项")}, ${getLabel(543206, "再下载")}！`);
|
||
} else {
|
||
if (url.indexOf("?") > 0) {
|
||
url = `${url}&${key}=${params[key]}`;
|
||
} else {
|
||
url = `${url}?${key}=${params[key]}`;
|
||
}
|
||
}
|
||
});
|
||
} catch (e) {
|
||
return;
|
||
}
|
||
}
|
||
window.open(url, "_blank");
|
||
}}>{getLabel(543207, "点击这里下载模板")}</a>
|
||
:
|
||
<a onClick={() => {
|
||
this.props.templateLink(hasData === "1" ? `true` : `false`);
|
||
}}>{getLabel(543207, "点击这里下载模板")}</a>
|
||
}
|
||
|
||
{this.props.headerSetCompoent && this.props.headerSetCompoent};
|
||
{
|
||
this.props.isInit &&
|
||
<WeaCheckbox
|
||
value={hasData}
|
||
content={getLabel(543208, "导出现有数据")}
|
||
helpfulTip={`${getLabel(558, "提示")}:${getLabel(543210, "建议先导出现有最新数据")}，${getLabel(543209, "修改后再导入")}`}
|
||
style={{ marginLeft: 10 }}
|
||
onChange={(hasData) => this.setState({ hasData })}
|
||
/>
|
||
}
|
||
</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>
|
||
|
||
<div className="stepInformItem">
|
||
<div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
|
||
{getLabel(543223, "Excel文件说明")}
|
||
</div>
|
||
|
||
<div style={{ lineHeight: "30px" }}>
|
||
{`1. ${getLabel(543224, "后缀名为xls或者xlsx")};`}<br/>
|
||
{`2. ${getLabel(543225, "数据请勿放在合并的单元格中")};`}<br/>
|
||
{
|
||
this.props.isStandingBook &&
|
||
<span>{`3. ${getLabel(543226, "账单月份格式必须为")}:YYYY-MM；`}</span>
|
||
}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|