495 lines
19 KiB
JavaScript
495 lines
19 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 个税在线申报-银行端缴款凭证打印查看页面
|
|
* Description:
|
|
* Date: 2023/8/24
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { Button, message, Spin } from "antd";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
import { printDom } from "../../util";
|
|
import { getQueryString } from "../../util/url";
|
|
import { taxPaymentVoucherPrintFeedback } from "../../apis/declare";
|
|
import "./index.less";
|
|
|
|
const { getLabel } = WeaLocaleProvider;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
loading: false,
|
|
bankVoucherDetail: {}
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.taxPaymentVoucherPrintFeedback();
|
|
}
|
|
|
|
taxPaymentVoucherPrintFeedback = () => {
|
|
const payload = {
|
|
taxDeclareRecordId: getQueryString("taxDeclareRecordId"),
|
|
taxAgentId: getQueryString("taxAgentId"),
|
|
taxYearMonth: getQueryString("taxYearMonth"),
|
|
checkFeedback: 0
|
|
};
|
|
this.setState({ loading: true });
|
|
taxPaymentVoucherPrintFeedback(payload).then(({ status, data, errormsg }) => {
|
|
this.setState({ loading: false });
|
|
if (status) {
|
|
this.setState({ bankVoucherDetail: data });
|
|
} else {
|
|
message.error(errormsg || "");
|
|
}
|
|
}).catch(() => this.setState({ loading: false }));
|
|
};
|
|
print = () => {
|
|
printDom({
|
|
hideDomId: "header_print_btn"
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { loading, bankVoucherDetail } = this.state;
|
|
if (loading) {
|
|
return <div className="loading-layout">
|
|
<Spin spinning={loading}/>
|
|
</div>;
|
|
}
|
|
return (
|
|
<div className="printBankLayout">
|
|
<div className="print-bank-voucher-container">
|
|
<div id="header_print_btn">
|
|
<Button type="primary" onClick={this.print}>{getLabel(111, "打印")}</Button>
|
|
</div>
|
|
<div className="content">
|
|
<div id="bank_voucher_detail_area" style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "1000px"
|
|
}}>
|
|
<div style={{
|
|
"height": " calc(36 * 1px)",
|
|
"fontSize": "calc(20 * 1px)",
|
|
"textAlign": "center",
|
|
"lineHeight": " calc(32 * 1px)",
|
|
"fontWeight": "900"
|
|
}}>{getLabel(111, "银行端查询缴税凭证")}</div>
|
|
<div style={{
|
|
height: "calc(28 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<div style={{ display: "flex" }}>
|
|
<div className="label">{getLabel(111, "银行端查询缴税凭证号：")}</div>
|
|
<div className="value">{bankVoucherDetail.voucherNo || ""}</div>
|
|
</div>
|
|
<div className="time">{bankVoucherDetail.firstPrintDate}</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
borderRight: "calc(2 * 1px) solid #999"
|
|
}}>
|
|
<div style={{
|
|
width: "100%",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexGrow: "0",
|
|
flexShrink: "0",
|
|
borderTop: "calc(2 * 1px) solid #999"
|
|
}}>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "纳税人识别码")}</div>
|
|
<div className="value" style={{
|
|
flexBasis: "60%",
|
|
flexShrink: "0",
|
|
flexGrow: "0",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{bankVoucherDetail.taxCode || ""}</div>
|
|
</div>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "税务机关代码")}</div>
|
|
<div className="value" style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{bankVoucherDetail.taxAuthoritiesNo || ""}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: "100%",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexGrow: "0",
|
|
flexShrink: "0",
|
|
borderTop: "calc(2 * 1px) solid #999"
|
|
}}>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "纳税人名称")}</div>
|
|
<div className="value" style={{
|
|
flexBasis: "60%",
|
|
flexShrink: "0",
|
|
flexGrow: "0",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{bankVoucherDetail.taxAgentName || ""}</div>
|
|
</div>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "税务机关名称")}</div>
|
|
<div className="value" style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{bankVoucherDetail.taxAuthoritiesName}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: "100%",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexGrow: "0",
|
|
flexShrink: "0",
|
|
borderTop: "calc(2 * 1px) solid #999"
|
|
}}>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "付款人名称")}</div>
|
|
<div className="value" style={{
|
|
flexBasis: "60%",
|
|
flexShrink: "0",
|
|
flexGrow: "0",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{}</div>
|
|
</div>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "开户银行名称")}</div>
|
|
<div className="value" style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
width: "100%",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexGrow: "0",
|
|
flexShrink: "0",
|
|
borderTop: "calc(2 * 1px) solid #999"
|
|
}}>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "付款人账号")}</div>
|
|
<div className="value" style={{
|
|
flexBasis: "60%",
|
|
flexShrink: "0",
|
|
flexGrow: "0",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{}</div>
|
|
</div>
|
|
<div style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}>
|
|
<div className="label" style={{
|
|
height: "100%",
|
|
padding: "calc(16 * 1px)",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexBasis: "40%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRight: "calc(2 * 1px) solid #999",
|
|
flexShrink: "0",
|
|
flexGrow: "0"
|
|
}}>{getLabel(111, "税款限缴日期")}</div>
|
|
<div className="value" style={{
|
|
width: "50%",
|
|
alignSelf: "stretch",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "calc(16 * 1px)"
|
|
}}>{bankVoucherDetail.deadline || ""}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="table" style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
borderBottom: "calc(2 * 1px) solid #999",
|
|
width: "100%"
|
|
}}>
|
|
<div className="thead" style={{
|
|
borderTop: "calc(2 * 1px) solid #999",
|
|
display: "flex",
|
|
width: "100%",
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<div style={{
|
|
width: "calc(100%/ 3)",
|
|
padding: "calc(16 * 1px)",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexGrow: "0",
|
|
flexShrink: "0"
|
|
}}>{getLabel(111, "征收顶目名称")}</div>
|
|
<div style={{
|
|
width: "calc(100%/ 3)",
|
|
padding: "calc(16 * 1px)",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexGrow: "0",
|
|
flexShrink: "0"
|
|
}}>{getLabel(111, "征收品目名称")}</div>
|
|
<div style={{
|
|
width: "calc(100%/ 3)",
|
|
padding: "calc(16 * 1px)",
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexGrow: "0",
|
|
flexShrink: "0"
|
|
}}>{getLabel(111, "应繳税额")}</div>
|
|
</div>
|
|
<div className="tbody" style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%"
|
|
}}>
|
|
{
|
|
!_.isEmpty(bankVoucherDetail.details) ? bankVoucherDetail.details.map((row, index) => (
|
|
<div className="tr" key={index} style={{
|
|
display: "flex",
|
|
borderTop: " calc(2 * 1px) solid #999",
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<div style={{
|
|
width: "calc(100%/ 3)",
|
|
padding: "calc(16 * 1px)",
|
|
minHeight: " calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexGrow: "0",
|
|
flexShrink: "0"
|
|
}}>{row.paymentCode}</div>
|
|
<div style={{
|
|
width: "calc(100%/ 3)",
|
|
padding: "calc(16 * 1px)",
|
|
minHeight: " calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexGrow: "0",
|
|
flexShrink: "0"
|
|
}}>{row.paymentItem}</div>
|
|
<div style={{
|
|
width: "calc(100%/ 3)",
|
|
padding: "calc(16 * 1px)",
|
|
minHeight: " calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
flexGrow: "0",
|
|
flexShrink: "0"
|
|
}}>{row.payAmount}</div>
|
|
</div>
|
|
)) : null
|
|
}
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "calc(16 * 1px)",
|
|
borderBottom: "calc(2 * 1px) solid #999"
|
|
}}>{getLabel(111, "金额合计（小写）：")} {bankVoucherDetail.lowerFormatAmount}</div>
|
|
<div style={{
|
|
minHeight: "calc(50 * 1px)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "calc(16 * 1px)",
|
|
borderBottom: "calc(2 * 1px) solid #999"
|
|
}}>{getLabel(111, "金额合计（大写）：")} {bankVoucherDetail.upperFormatAmount}</div>
|
|
|
|
<div className="signet" style={{
|
|
minHeight: "calc(140 * 1px)",
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderBottom: " calc(2 * 1px) solid #999",
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<div className="item one" style={{
|
|
alignSelf: "stretch",
|
|
width: "calc(100%/ 3)",
|
|
display: "flex",
|
|
alignItems: "flex-start",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
padding: "calc(16 * 1px)"
|
|
|
|
}}>
|
|
<div className="drawee" style={{
|
|
marginBottom: "calc(16 * 1px)"
|
|
}}>{getLabel(111, "付款人 （签章）")}</div>
|
|
<div className="operator">{getLabel(111, "经办人 （签章）")}</div>
|
|
</div>
|
|
<div style={{
|
|
alignSelf: "stretch",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
width: "calc(100%/ 3)",
|
|
display: "flex",
|
|
alignItems: "flex-start",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
padding: "calc(16 * 1px)"
|
|
}}>
|
|
<div>{getLabel(111, "银行记账员")}</div>
|
|
<div> {getLabel(111, "（签章）")}</div>
|
|
</div>
|
|
<div style={{
|
|
alignSelf: "stretch",
|
|
borderLeft: "calc(2 * 1px) solid #999",
|
|
width: "calc(100%/ 3)",
|
|
display: "flex",
|
|
alignItems: "flex-start",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
padding: "calc(16 * 1px)"
|
|
}}>
|
|
<div>{getLabel(111, "备注：")}</div>
|
|
<div> {bankVoucherDetail.remark}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|