qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

个税对接-在线申报详情页面开发

This commit is contained in:
黎永顺 2023-08-18 15:27:27 +08:00
parent de80ce6020
commit 55994f1980
9 changed files with 382 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pc4mobx/hrmSalary/apis/declare.js
View File

@ -126,3 +126,11 @@ export const employeeDelete = (params) => {
export const employeedeclareDeclare = (params) => {
return postFetch("/api/bs/hrmsalary/employeedeclare/declare", params);
};
//个税在线对接-获取个税申报记录下的个税申报表TAB
export const getTaxDeclarationTab = params => {
return WeaTools.callApi("/api/bs/hrmsalary/taxdeclaration/getTaxDeclarationTab", "GET", params);
};

2
pc4mobx/hrmSalary/index.js
View File

@ -20,6 +20,7 @@ import Payroll from "./pages/payroll";
import PayrollGrant from "./pages/payroll/payrollGrant";
import PayrollDetail from "./pages/payroll/payrollDetail";
import Declare from "./pages/declare";
import DeclareDetail from "./pages/declareDetail";
import Employeedeclare from "./pages/employeedeclare";
import EmployeedeclareDetail from "./pages/employeedeclareDetail";
import TaxRate from "./pages/taxRate";
@ -157,6 +158,7 @@ const Routes = (
component={TemplatePreview}
/>
<Route key="declare" path="declare" component={Declare}/>
<Route key="declareDetail" path="declareDetail" component={DeclareDetail}/>
<Route key="employeedeclare" path="employeedeclare" component={Employeedeclare}/>
<Route key="employeedeclareDetail" path="employeedeclareDetail" component={EmployeedeclareDetail}/>
<Route

7
pc4mobx/hrmSalary/pages/declare/generateModal.js
View File

@ -11,6 +11,7 @@ import {
} from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import moment from "moment";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
@ -47,7 +48,11 @@ export default class GenerateModal extends React.Component {
return;
}
this.setState({ loading: true });
saveDeclare({ salaryMonthStr: date, taxAgentId, description }).then(() => {
saveDeclare({
salaryMonth: moment(date).startOf("month").format("YYYY-MM-DD"),
taxAgentId,
description
}).then(() => {
this.setState({ loading: false });
this.props.onGenerate();
}).catch(() => {

11
pc4mobx/hrmSalary/pages/declare/index.js
View File

@ -154,13 +154,10 @@ export default class Declare extends React.Component {
render: (text, record) => {
return (
<React.Fragment>
<a href="javascript:void(0);"
onClick={() => {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=" +
record.id
);
}}>
<a
href={`${window.ecologyContentPath || ""}/spa/hrmSalary/static/index.html#/main/hrmSalary/declareDetail?id=${record.id}`}
target="_blank"
>
查看
</a>
{

82
pc4mobx/hrmSalary/pages/declareDetail/components/declareResultDialog.js Normal file
View File

@ -0,0 +1,82 @@
/*
* Author: 黎永顺
* name: 个税申报-异常、失败详情
* Description:
* Date: 2023/8/18
*/
import React, { Component } from "react";
import { WeaDialog, WeaLocaleProvider, WeaTable } from "ecCom";
import { Button, Col, Row } from "antd";
const { getLabel } = WeaLocaleProvider;
class DeclareResultDialog extends Component {
constructor(props) {
super(props);
this.state = {
pageInfo: { current: 1, pageSize: 10, total: 0 },
loading: false, columns: [], dataSource: []
};
}
componentWillReceiveProps(nextProps, nextContext) {
}
render() {
const { loading, columns, dataSource, pageInfo } = this.state;
const pagination = {
...pageInfo,
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
this.setState({
pageInfo: { ...pageInfo, current, pageSize }
}, () => {
});
},
onChange: current => {
this.setState({
pageInfo: { ...pageInfo, current }
}, () => {
});
}
};
return (
<WeaDialog
{...this.props}
scalable hasScroll className="declareResultDialog" initLoadCss
title={(<Row className="declareResultDialogTitle" type="flex">
<Col span={12} className="declareResultDialogTitle-left">
<span className="title">{this.props.title}</span>
</Col>
<Col span={12} className="declareResultDialogTitle-right">
<Button type="primary" onClick={this.handleSubmit}>{getLabel(17416, "导出")}</Button>
</Col>
</Row>)}
style={{
width: 1150,
height: 606.6,
minHeight: 200,
minWidth: 380,
maxHeight: "90%",
maxWidth: "90%",
overflow: "hidden",
transform: "translate(0px, 0px)"
}}
>
<div className="declareResultDialogContent">
<WeaTable
columns={columns} dataSource={dataSource}
loading={loading} className="declareTable"
pagination={pagination}
/>
</div>
</WeaDialog>
);
}
}
export default DeclareResultDialog;

71
pc4mobx/hrmSalary/pages/declareDetail/components/taxDeclarationInfo.js Normal file
View File

@ -0,0 +1,71 @@
/*
* Author: 黎永顺
* name: 个税申报表详情-基本信息
* Description:
* Date: 2023/8/18
*/
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import DeclareResultDialog from "./declareResultDialog";
const { getLabel } = WeaLocaleProvider;
class TaxDeclarationInfo extends Component {
constructor(props) {
super(props);
this.state = {
resDialog: {
visible: false, title: ""
}
};
}
handleSeeResult = (type, title) => {
this.setState({
resDialog: { ...this.state.resDialog, visible: true, title: `${title}${getLabel(111, "详情")}` }
});
};
render() {
const { resDialog } = this.state;
const { declareInfo } = this.props;
const infoItem = [
{ key: "salaryMonth", label: getLabel(542604, "薪资所属月") },
{ key: "taxAgentName", label: getLabel(537996, "个税扣缴义务人") },
{ key: "declareTypeDesc", label: getLabel(111, "申报类型") },
{ key: "declareStatusDesc", label: getLabel(111, "申报状态") },
{ key: "taxCycle", label: getLabel(542240, "税款所属期") },
{ key: "taxPaidAmount", label: getLabel(111, "已缴金额") }
];
return (
<div className="taxDeclarationInfo_layout">
<div className="base-info">
{
_.map(infoItem, item => {
return <div className="info-item">
<span className="label">{item["label"]}</span>
<span className="value">{declareInfo[item["key"]]}</span>
</div>;
})
}
</div>
<div className="weapp-salary-btn-flex tools-line">
<span className="item"
onClick={() => this.handleSeeResult("abnormal", getLabel(111, "申报校验异常"))}>{getLabel(111, "申报校验异常")}（0）</span>
<span className="item"
onClick={() => this.handleSeeResult("fail", getLabel(111, "申报失败数据"))}>{getLabel(111, "申报失败数据")}（0）</span>
<DeclareResultDialog
{...resDialog}
onCancel={() => {
this.setState({
resDialog: { ...resDialog, visible: false, title: "" }
});
}}
/>
</div>
</div>
);
}
}
export default TaxDeclarationInfo;

122
pc4mobx/hrmSalary/pages/declareDetail/index.js Normal file
View File

@ -0,0 +1,122 @@
/*
* Author: 黎永顺
* name: 个税查看详情页面
* Description:
* Date: 2023/8/18
*/
import React, { Component } from "react";
import { WeaLocaleProvider, WeaTab, WeaTable } from "ecCom";
import { Button } from "antd";
import TaxDeclarationInfo from "./components/taxDeclarationInfo";
import { getDeclareInfo, getDetailList, getTaxDeclarationTab } from "../../apis/declare";
import { getQueryString } from "../../util/url";
import "./index.less";
const { getLabel } = WeaLocaleProvider;
class Index extends Component {
constructor(props) {
super(props);
this.state = {
tabs: [], selectedKey: "", columns: [],
loading: { query: false }, dataSource: [],
declareInfo: {}, pageInfo: { current: 0, pageSize: 10, total: 0 }
};
}
componentDidMount() {
const promise = this.init();
}
init = async () => {
const [tabsResult, infoResult] = await Promise.all([this.getTaxDeclarationTab(), this.getDeclareInfo()]);
const { data: tabDataSource, status: tabStatus } = tabsResult;
const { data: infoDataSource, status: infoStatus } = infoResult;
this.setState({
tabs: tabStatus ? _.map(tabDataSource, it => ({
viewcondition: `${it.incomeCategory}%%${it.taxDeclarationId}`,
title: it.tabName
})) : this.state.tabs,
selectedKey: tabStatus ? `${_.take(tabDataSource)[0].incomeCategory}%%${_.take(tabDataSource)[0].taxDeclarationId}` : this.state.selectedKey,
declareInfo: infoStatus ? infoDataSource : this.state.declareInfo
});
this.getDetailList();
};
refresh = async () => {
};
getTaxDeclarationTab = () => {
return getTaxDeclarationTab({ id: getQueryString("id") });
};
getDeclareInfo = () => {
return getDeclareInfo({ id: getQueryString("id") });
};
getDetailList = () => {
const { loading, pageInfo, selectedKey } = this.state;
const [incomeCategory, taxDeclarationId] = selectedKey.split("%%");
const payload = {
...pageInfo, incomeCategory, taxDeclarationId,
taxDeclareRecordId: getQueryString("id")
};
this.setState({ loading: { ...loading, query: true } });
getDetailList(payload).then(({ status, data }) => {
this.setState({ loading: { ...loading, query: false } });
if (status) {
const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
this.setState({
dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
columns: _.map(columns, (it, idx) => {
if (idx <= 1) {
return { ...it, width: 150, fixed: "left" };
}
return { ...it, width: 150 };
})
});
}
}).catch(() => this.setState({ loading: { ...loading, query: false } }));
};
render() {
const { tabs, selectedKey, columns, pageInfo, dataSource, loading, declareInfo } = this.state;
const pagination = {
...pageInfo,
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
this.setState({
pageInfo: { ...pageInfo, current, pageSize }
}, () => this.getDetailList());
},
onChange: current => {
this.setState({
pageInfo: { ...pageInfo, current }
}, () => this.getDetailList());
}
};
return (
<div className="declareDetail-layout">
<TaxDeclarationInfo declareInfo={declareInfo}/>
<div className="declareDetail-layout-content">
<WeaTab
datas={tabs} keyParam="viewcondition" selectedKey={selectedKey}
buttons={[
<Button type="primary">{getLabel(17416, "导出")}</Button>,
<Button type="ghost">{getLabel(111, "在线申报")}</Button>,
<Button type="ghost">{getLabel(111, "刷新数据")}</Button>
]}
/>
<WeaTable
loading={loading.query} bordered
columns={columns} dataSource={dataSource}
pagination={pagination}
scroll={{ x: 1200, y: `calc(100vh - 80px)` }}
/>
</div>
</div>
);
}
}
export default Index;

84
pc4mobx/hrmSalary/pages/declareDetail/index.less Normal file
View File

@ -0,0 +1,84 @@
.declareDetail-layout {
.declareDetail-layout-content {
padding: 0 16px;
}
}
.taxDeclarationInfo_layout {
border-bottom: 1px solid #e5e5e5;
height: 48px;
padding: 0 16px;
font-size: 12px;
color: #111;
display: flex;
justify-content: space-between;
align-items: center;
.base-info {
display: flex;
align-items: center;
justify-content: flex-start;
.info-item {
margin-right: 25px;
.label {
color: #666;
}
.value {
color: #111;
}
}
}
.weapp-salary-btn-flex {
display: flex;
align-items: center;
justify-content: flex-end;
cursor: auto;
}
.tools-line {
font-size: 12px;
display: flex;
align-items: center;
color: #111;
.item {
margin-left: 8px;
cursor: pointer;
}
}
}
.declareResultDialog {
.declareResultDialogTitle {
display: flex;
align-items: center;
.declareResultDialogTitle-left {
text-align: left;
.title {
color: #111;
font-weight: 700;
}
}
.declareResultDialogTitle-right {
text-align: right;
}
}
.declareResultDialogContent {
height: 100%;
padding: 16px;
background: #f6f6f6;
.declareTable {
background: #FFF;
}
}
}

6
pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemSelectDialog.js
View File

@ -15,7 +15,7 @@ class LedgerSalaryItemSelectDialog extends Component {
constructor(props) {
super(props);
this.state = {
pageInfo: { current: 1, pageSize: 10, total: 0 },
pageInfo: { current: 1, pageSize: 20, total: 0 },
loading: false, columns: [], dataSource: [],
keywords: ""
};
@ -57,7 +57,7 @@ class LedgerSalaryItemSelectDialog extends Component {
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
pageSizeOptions: ["20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
this.setState({
pageInfo: { ...pageInfo, current, pageSize }
@ -89,7 +89,7 @@ class LedgerSalaryItemSelectDialog extends Component {
</Col>
</Row>)}
style={{
width: 600,
width: 850,
height: 606.6,
minHeight: 200,
minWidth: 380,