salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/overView.js

137 lines
3.8 KiB
JavaScript

/*
* Author: 黎永顺
* Description: 总览
* Date: 2022-04-20 20:49:23
* LastEditTime: 2022-05-09 15:07:56
*/
import React, { Component } from "react";
import { Button, Icon, Spin, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import { WeaNewScroll, WeaTable } from "ecCom";
import "./index.less";
@inject("standingBookStore")
@observer
export default class OverViewIndex extends Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],
current: 1,
pageSize: 10,
tableData: {
list: [],
columns: [],
total: 0
}
};
}
componentDidMount() {
const { billMonth, paymentOrganization } = this.props;
this.getOverViewList({ billMonth, paymentOrganization });
}
getOverViewList = (payload = {}) => {
const { getOverViewList } = this.props.standingBookStore;
getOverViewList({ ...payload, current: 1 }).then(
({ list, columns = [], total }) => {
columns = _.map(
_.filter(columns, (it) => it.dataIndex !== "id"),
(it) => {
// if (it.dataIndex === "employeeId") {
// it = {
// ...it,
// width: 150,
// fixed: 'left'
// }
// }
return {
...it,
title: (
<span dangerouslySetInnerHTML={{ __html: it.title }}></span>
)
};
}
);
this.setState({
tableData: {
list,
columns,
total
}
});
}
);
};
handleExport = () => {
const { billMonth, paymentOrganization } = this.props;
const url = `${window.location
.origin}/api/bs/hrmsalary/welfare/overView/export?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`;
window.open(url, "_self");
};
render() {
const { remarks, billMonth, selectedKey, paymentOrganization } = this.props;
const { selectedRowKeys } = this.state;
const { loading } = this.props.standingBookStore;
let { list, columns, total } = this.state.tableData;
const pagination = {
total,
showTotal: (total) => `${total}`,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ["10", "20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
this.setState({ current, pageSize });
this.getOverViewList({
billMonth, current,
pageSize, paymentOrganization
});
},
onChange: (current) => {
this.setState({ current });
this.getOverViewList({
billMonth, current,
pageSize: this.state.pageSize, paymentOrganization
});
}
};
return (
<div className="normalWapper">
<div className="topContent">
<div className="month">
<span>
账单月份
<Tooltip
placement="topLeft"
title="提示:正常缴纳,账单月份即社保福利缴纳月份">
<Icon type="question-circle"/>
</Tooltip>
</span>
<span>{billMonth}</span>
</div>
</div>
<div className="tabOption">
<Button type="primary" onClick={this.handleExport}>导出全部</Button>
</div>
{/* table */}
<div className="tableWrapper">
<WeaNewScroll height="100%">
<Spin spinning={loading}>
<WeaTable
rowKey="id"
columns={columns}
dataSource={list}
loading={loading}
pagination={pagination}
scroll={{ x: 1200 }}
/>
</Spin>
</WeaNewScroll>
</div>
</div>
);
}
}