121 lines
4.8 KiB
JavaScript
121 lines
4.8 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 DeclareWithDrawDialog from "./components/declareWithDrawDaialog";
|
|
import LogDialog from "../../components/logViewModal";
|
|
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()).subtract(1, "year").startOf("year").format("YYYY-MM"),
|
|
moment(new Date()).endOf("year").format("YYYY-MM")
|
|
]
|
|
}, isRefresh: false,
|
|
declareDaialog: { visible: false, title: "" },
|
|
declareWithDrawDaialog: { visible: false, title: "" }, // 撤回申报弹窗
|
|
logDialogVisible: false, filterConditions: "[]"
|
|
};
|
|
this.handleDebounce = null;
|
|
}
|
|
|
|
renderCalculateOpts = () => {
|
|
const { taxAgentStore: { PageAndOptAuth } } = this.props;
|
|
const showOperateBtn = PageAndOptAuth.opts.includes("admin");
|
|
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>,
|
|
<Button type="primary" onClick={() => this.setState({
|
|
declareWithDrawDaialog: {
|
|
visible: true,
|
|
title: <div style={{ display: "flex", alignItems: "center" }}>
|
|
<span style={{ marginRight: 10 }}>撤回申报</span>
|
|
</div>
|
|
}
|
|
})}>批量撤回申报表</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;
|
|
};
|
|
onDropMenuClick = (key, targetid = "") => {
|
|
switch (key) {
|
|
case "log":
|
|
this.setState({
|
|
logDialogVisible: true,
|
|
filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const { queryParams, isRefresh, declareDaialog, declareWithDrawDaialog, logDialogVisible, filterConditions } = this.state;
|
|
return (
|
|
<WeaTop title={getLabel(543353, "个税申报")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
|
|
buttons={this.renderCalculateOpts()} className="declare-main-layout" showDropIcon
|
|
onDropMenuClick={this.onDropMenuClick} dropMenuDatas={[{
|
|
key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
|
|
content: getLabel(545781, "操作日志")
|
|
}
|
|
]}>
|
|
<div className="declare-body">
|
|
<DeclareTablelist queryParams={queryParams} isRefresh={isRefresh}
|
|
onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}/>
|
|
<DeclareDialog {...declareDaialog}
|
|
onCancel={(bool) => this.setState({
|
|
declareDaialog: { ...declareDaialog, visible: false },
|
|
isRefresh: bool === "refresh" ? !isRefresh : isRefresh
|
|
})}
|
|
/>
|
|
<DeclareWithDrawDialog {...declareWithDrawDaialog}
|
|
onCancel={(bool) => this.setState({
|
|
declareWithDrawDaialog: { ...declareWithDrawDaialog, visible: false },
|
|
isRefresh: bool === "refresh" ? !isRefresh : isRefresh
|
|
})}
|
|
/>
|
|
{/*操作日志*/}
|
|
<LogDialog visible={logDialogVisible} logFunction="taxdecla" filterConditions={filterConditions}
|
|
onCancel={() => this.setState({ logDialogVisible: false })}/>
|
|
</div>
|
|
</WeaTop>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Calculate;
|