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

110 lines
3.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from "react";
import CustomTab from "../../components/customTab";
import { Button } from "antd";
import "./index.less";
import { inject, observer } from "mobx-react";
import { getQueryString } from "../../util/url";
import CustomPaginationTable from "../../components/customPaginationTable";
@inject("declareStore")
@observer
export default class GenerateDeclarationDetail extends React.Component {
constructor(props) {
super(props);
this.id = getQueryString("id");
this.pageInfo = { current: 1, pageSize: 10 };
}
componentWillMount() {
const { declareStore: { getDetailList, getDeclareInfo } } = this.props;
getDetailList(this.id);
getDeclareInfo(this.id);
}
// 导出
handleExport() {
const url = `${window.location.origin}/api/bs/hrmsalary/taxdeclaration/export?taxDeclarationId=${this.id}`;
window.open(url, "_self");
}
getColumns() {
const { declareStore: { datailColumns } } = this.props;
let columns = [...datailColumns];
return columns.map(item => {
item = { ...item };
item.width = "150px";
if (item.dataIndex == "employeeName") {
item.fixed = "left";
}
return item;
});
}
handlePageChange() {
const { declareStore: { getDetailList, getDeclareInfo } } = this.props;
getDetailList(this.id, this.pageInfo);
}
render() {
const {
declareStore: {
detailDataSource,
detailTableStore,
declareInfo,
datailColumns,
detailPageInfo
}
} = this.props;
const renderRightOperation = () => {
return (
<div style={{ display: "inline-block" }}>
<Button type="primary" onClick={() => {
this.handleExport();
}}>导出</Button>
</div>
);
};
const renderLeftOperation = () => {
return (
<div style={{ display: "inline-block", lineHeight: "47px" }}>
<span>薪资所属月{declareInfo.salaryMonth && declareInfo.salaryMonth.year} - {declareInfo.salaryMonth && declareInfo.salaryMonth.monthValue}</span>
<span style={{ marginLeft: "10px" }}>个税扣缴义务人{declareInfo.taxAgentName}</span>
</div>
);
};
return (
<div className="generateDeclarationDetail">
<CustomTab
searchOperationItem={
renderRightOperation()
}
leftOperation={
renderLeftOperation()
}
/>
<div className="tableWrapper">
<CustomPaginationTable
dataSource={detailDataSource}
columns={this.getColumns()}
total={detailPageInfo.total}
current={detailPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
scroll={{ x: 2300 }}
onPageChange={(value) => {
this.pageInfo.current = value;
this.handlePageChange();
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handlePageChange();
}}
/>
</div>
</div>
);
}
}