216 lines
9.4 KiB
JavaScript
216 lines
9.4 KiB
JavaScript
import React from 'react'
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTab, WeaTop } from 'ecCom'
|
||
import { dataSource, payrollColumns } from '../columns';
|
||
import { Menu, Button, Dropdown, Table } from 'antd'
|
||
import CustomTab from '../../../components/customTab'
|
||
import "./index.less"
|
||
import { getQueryString } from '../../../util/url'
|
||
import { renderNoright, getSearchs } from '../../../util';
|
||
import CustomPaginationTable from '../../../components/customPaginationTable';
|
||
|
||
@inject('payrollStore')
|
||
@observer
|
||
export default class PayrollDetail extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
currentId: "",
|
||
current: 1
|
||
}
|
||
this.pageInfo = {current: 1, pageSize: 10}
|
||
}
|
||
|
||
componentWillMount() {
|
||
let id = getQueryString("id")
|
||
this.setState({currentId: id})
|
||
const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
|
||
getPayrollInfo(id)
|
||
getPayrollDetailList({salarySendId: id})
|
||
getPayrollDetailSa()
|
||
}
|
||
|
||
// 撤回
|
||
handleWithdraw(record) {
|
||
const { payrollStore } = this.props;
|
||
const { withdrawPayroll, getInfoList } = payrollStore;
|
||
withdrawPayroll({
|
||
ids: [record.id],
|
||
salarySendId: this.state.currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId:this.state.currentId
|
||
})
|
||
})
|
||
}
|
||
|
||
// 发送
|
||
handleGrant(record) {
|
||
const { payrollStore } = this.props;
|
||
const { grantPayroll, getInfoList } = payrollStore;
|
||
grantPayroll({
|
||
ids: [record.id],
|
||
salarySendId: this.state.currentId
|
||
}).then(() => {
|
||
getInfoList({
|
||
salarySendId:this.state.currentId
|
||
})
|
||
})
|
||
}
|
||
|
||
getColumns() {
|
||
const { payrollStore } = this.props;
|
||
const { salarySendDetailTableStore } = payrollStore
|
||
const { columns } = salarySendDetailTableStore;
|
||
if(!columns) {
|
||
return []
|
||
}
|
||
let result = columns.filter(item => item.hide == "false").map(item => {
|
||
item = {...item}
|
||
if(item.dataIndex == "operation") {
|
||
item.render = (text,record) => {
|
||
if(text == 'ALREADYSEND') {
|
||
return (
|
||
<a onClick={() => {
|
||
this.handleWithdraw(record)
|
||
}}>撤回</a>
|
||
)
|
||
} else {
|
||
return (
|
||
<a onClick={() => {
|
||
this.handleGrant(record)
|
||
}}>发送</a>
|
||
)
|
||
}
|
||
}
|
||
}
|
||
return item;
|
||
})
|
||
return result;
|
||
}
|
||
|
||
// 导出所选
|
||
handleExportSelected() {
|
||
|
||
}
|
||
|
||
// 导出全部
|
||
handleExportAll=()=> {
|
||
// const { payrollStore } = this.props;
|
||
// const { exportDetailList } = payrollStore
|
||
// exportDetailList({salarySendId: this.state.currentId})
|
||
const url= `${window.location.origin}/api/bs/hrmsalary/salaryBill/send/exportDetailList?salarySendId=${this.state.currentId}`
|
||
window.open(url, '_self');
|
||
}
|
||
|
||
getSearchsAdQuick() {
|
||
const handleMenuClick = (e) => {
|
||
switch(e.key) {
|
||
case "1":
|
||
this.handleExportSelected()
|
||
break;
|
||
}
|
||
}
|
||
const menu = (
|
||
<Menu onClick={handleMenuClick}>
|
||
<Menu.Item key="1">导出所选</Menu.Item>
|
||
</Menu>
|
||
);
|
||
return (
|
||
// <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
|
||
<Button type="primary" onClick={this.handleExportAll}>导出全部</Button>
|
||
)
|
||
// return (<div></div>)
|
||
}
|
||
|
||
|
||
// 分页
|
||
handleDataPageChange(value) {
|
||
const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
|
||
getPayrollDetailList({salarySendId: this.state.currentId, ...this.pageInfo})
|
||
}
|
||
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
|
||
getPayrollDetailList({salarySendId: this.state.currentId, ...pageInfo})
|
||
}
|
||
|
||
handleSearch() {
|
||
const { payrollStore: {getPayrollDetailList}} = this.props;
|
||
getPayrollDetailList({salarySendId: this.state.currentId, ...this.pageInfo})
|
||
}
|
||
render() {
|
||
const {payrollStore} = this.props;
|
||
const { setDetailListShowSearchAd, detailListShowSearchAd, getPayrollDetailList, detailListCondition, detailListConditionForm, salarySendDetailBaseInfo, salarySendDetailTableStore, salarySendDetailDataSource, salarySendDetailPageInfo } = payrollStore;
|
||
return (
|
||
<div className="payrollGrant">
|
||
<WeaTop
|
||
title="工资单发放" // 文字
|
||
icon={<i className="icon-coms-fa" />} // 左侧图标
|
||
iconBgcolor='#F14A2D' // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
buttons={[this.getSearchsAdQuick()]}
|
||
></WeaTop>
|
||
<WeaTab
|
||
searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
|
||
setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
|
||
searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
|
||
// buttonsAd={adBtn} // 高级搜索内部按钮
|
||
onSearch={() => {
|
||
this.handleSearch()
|
||
}} // 点搜索按钮时的回调
|
||
// searchsAdQuick={this.getSearchsAdQuick()}
|
||
onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
|
||
searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
|
||
/>
|
||
<div className="titleBar">
|
||
<div className="titleBarLeft">
|
||
<span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
|
||
<WeaHelpfulTip
|
||
style={{marginLeft: '10px', marginRight: "10px"}}
|
||
width={200}
|
||
title={`薪资周期\n
|
||
${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
|
||
税款所属期\n
|
||
${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
|
||
考勤取值周期\n
|
||
${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
|
||
福利台账月份\n
|
||
引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
|
||
placement="topLeft"
|
||
/>
|
||
<span>工资单模板：{salarySendDetailBaseInfo.template}</span>
|
||
</div>
|
||
|
||
<div className="titleBarRight">
|
||
<span>已发放：{salarySendDetailBaseInfo.sendNum}/<span style={{color: "red"}}>{salarySendDetailBaseInfo.sendTotal}</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="tableWrapper">
|
||
|
||
<CustomPaginationTable
|
||
dataSource={salarySendDetailDataSource}
|
||
columns={this.getColumns()}
|
||
scroll={{x: this.getColumns().length * 150}}
|
||
total={salarySendDetailPageInfo.total}
|
||
current={salarySendDetailPageInfo.pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
onPageChange={(value) => {
|
||
this.pageInfo.current = value
|
||
this.handleDataPageChange(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
this.handleShowSizeChange(this.pageInfo)
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|