salary-management-front/pc4mobx/hrmSalary/pages/declare/declare.js

83 lines
3.0 KiB
JavaScript

/*
* Author: 黎永顺
* name: 个税申报表-重构页面
* Description:
* Date: 2023/10/12
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaHelpfulTip, WeaLocaleProvider, WeaTop } from "ecCom";
import { Button } from "antd";
import moment from "moment";
import DeclareQuery from "./components/declareQuery";
import DeclareTablelist from "./components/declareTablelist";
import DeclareDialog from "./components/declareDialog";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
@inject("taxAgentStore")
@observer
class Calculate extends Component {
constructor(props) {
super(props);
this.state = {
queryParams: {
taxAgentName: "",
dateRange: [
moment(new Date()).startOf("year").format("YYYY-MM"),
moment(new Date()).endOf("month").format("YYYY-MM")
]
}, isRefresh: false,
declareDaialog: { visible: false, title: "" }
};
this.handleDebounce = null;
}
renderCalculateOpts = () => {
const { taxAgentStore: { showOperateBtn } } = this.props;
const { queryParams, isRefresh } = this.state;
let calculateOpts = [
<Button type="primary" onClick={() => this.setState({
declareDaialog: {
visible: true,
title: <div style={{ display: "flex", alignItems: "center" }}>
<span style={{ marginRight: 10 }}>{getLabel(15366, "申报")}</span>
<WeaHelpfulTip
width={200} placement="topLeft"
title={getLabel(543617, "提示:一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报")}
/>
</div>
}
})}>{getLabel(543618, "生成申报表")}</Button>,
<DeclareQuery queryParams={queryParams} onChange={v => this.setState({
isRefresh: _.keys(v)[0] === "taxAgentName" ? isRefresh : !isRefresh,
queryParams: { ...queryParams, ...v }
})} onSearch={() => this.setState({ isRefresh: !isRefresh })}/>
];
return !showOperateBtn ? calculateOpts.slice(1) : calculateOpts;
};
render() {
const { queryParams, isRefresh, declareDaialog } = this.state;
const { taxAgentStore: { showOperateBtn } } = this.props;
return (
<WeaTop title={getLabel(543353, "个税申报")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
buttons={this.renderCalculateOpts()} className="declare-main-layout"
>
<div className="declare-body">
<DeclareTablelist queryParams={queryParams} isRefresh={isRefresh} showOperateBtn={showOperateBtn}/>
<DeclareDialog {...declareDaialog}
onCancel={(bool) => this.setState({
declareDaialog: { ...declareDaialog, visible: false },
isRefresh: bool === "refresh" ? !isRefresh : isRefresh
})}
/>
</div>
</WeaTop>
);
}
}
export default Calculate;