323 lines
15 KiB
JavaScript
323 lines
15 KiB
JavaScript
import React from 'react'
|
||
import { Row, Col, Icon, Table, Modal } from 'antd'
|
||
import { WeaHelpfulTip, WeaInputSearch, WeaBrowser, WeaTable } from 'ecCom'
|
||
import { inject, observer } from 'mobx-react';
|
||
import { dataSource , monthOnMonthColumns, userSureColumns} from './columns'
|
||
import "./index.less"
|
||
import { getQueryString } from '../../util/url'
|
||
import CustomTable from '../../components/customTable'
|
||
import CustomPaginationTable from '../../components/customPaginationTable';
|
||
|
||
@inject('calculateStore')
|
||
@observer
|
||
export default class UserSure extends React.Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
selectedKey: "0",
|
||
selectedRowKeys: [], // table 选中项
|
||
userListSearchValue: '',
|
||
}
|
||
this.id = ""
|
||
this.current = 1
|
||
this.pageInfo = {current: 1, pageSize: 10}
|
||
this.reducePageInfo = { current: 1, pageSize: 10}
|
||
}
|
||
|
||
componentWillMount() {
|
||
let id = getQueryString("id")
|
||
this.id = id;
|
||
const { calculateStore } = this.props;
|
||
const { salaryacctGetForm, acctemployeeList, reducedemployeeList, getSalarySobCycle } = calculateStore
|
||
salaryacctGetForm(id)
|
||
acctemployeeList({salaryAcctRecordId: id, employeeName: this.state.userListSearchValue, current: 1})
|
||
reducedemployeeList({salaryAcctRecordId: id, employeeName: this.state.userListSearchValue, current: 1})
|
||
this.current = 1
|
||
getSalarySobCycle(id)
|
||
}
|
||
|
||
// 添加人员回调
|
||
handleUserBrowserChange(ids) {
|
||
if(ids && ids.length > 0) {
|
||
let idList = ids.split(",");
|
||
const { calculateStore: { saveAcctemployee, reducedemployeeList, acctemployeeList, checkTaxAgent }} = this.props;
|
||
saveAcctemployee(this.id, idList).then(() => {
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
|
||
acctemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
|
||
this.current = 1
|
||
checkTaxAgent(this.id)
|
||
})
|
||
}
|
||
}
|
||
|
||
// 导出
|
||
handleExport() {
|
||
const { calculateStore: { exportReducedEmployee, exportAcctEmployee }} = this.props;
|
||
if(this.state.selectedKey == 0) {
|
||
exportAcctEmployee(this.id)
|
||
} else {
|
||
exportReducedEmployee(this.id)
|
||
}
|
||
}
|
||
|
||
// 批量删除
|
||
handleBatchDelete() {
|
||
const { selectedRowKeys } = this.state;
|
||
const { calculateStore: { deleteAcctemployee, reducedemployeeList, acctemployeeList } } = this.props;
|
||
if(selectedRowKeys.length == 0) {
|
||
message.warning("未选择条目")
|
||
return
|
||
}
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: '确认删除',
|
||
onOk:() => {
|
||
deleteAcctemployee(this.id, selectedRowKeys).then(() => {
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: this.current})
|
||
acctemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: this.current})
|
||
})
|
||
},
|
||
onCancel: () => {
|
||
},
|
||
});
|
||
}
|
||
|
||
// 人员范围列表
|
||
getUserListColumns = () => {
|
||
const { calculateStore: {acctemployeeListColumns}} = this.props;
|
||
let columns = [...acctemployeeListColumns]
|
||
columns.push({
|
||
key: "cz",
|
||
title: "操作",
|
||
render: (text, record) => {
|
||
return <a onClick={() => {this.handleDeleteItem(record)}}>删除</a>
|
||
}
|
||
})
|
||
return columns;
|
||
}
|
||
|
||
// 获取人员列表，添加key
|
||
getUserListDataSource = () => {
|
||
const { calculateStore: {acctemployeeListDataSource}} = this.props;
|
||
return acctemployeeListDataSource.map(item => {
|
||
item = {...item}
|
||
item.key = item.id
|
||
return item
|
||
})
|
||
}
|
||
|
||
// 删除人员
|
||
handleDeleteItem = (record) => {
|
||
const { calculateStore: {deleteAcctemployee, reducedemployeeList, acctemployeeList}} = this.props;
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: '确认删除',
|
||
onOk:() => {
|
||
deleteAcctemployee(this.id, [record.id]).then(() => {
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: this.current})
|
||
acctemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue,current: this.current})
|
||
})
|
||
},
|
||
onCancel: () => {
|
||
},
|
||
});
|
||
|
||
}
|
||
|
||
// 刷新薪资核算人员的个税扣缴义务人
|
||
handleRefresh = () => {
|
||
const { calculateStore: {refreshTaxAgent, reducedemployeeList, acctemployeeList } } = this.props;
|
||
refreshTaxAgent(this.id).then(() => {
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: 1})
|
||
acctemployeeList({salaryAcctRecordId: this.id , employeeName: this.state.userListSearchValue, current: 1})
|
||
this.current = 1
|
||
})
|
||
}
|
||
|
||
onSelectChange = selectedRowKeys => {
|
||
this.setState({ selectedRowKeys, userListSearchValue: "" });
|
||
}
|
||
|
||
// 核算人员范围分页
|
||
handleUserListPageChange(value) {
|
||
const { calculateStore: {acctemployeeList}} = this.props;
|
||
this.current = value;
|
||
acctemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, ...this.pageInfo})
|
||
}
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
const { calculateStore: {acctemployeeList}} = this.props;
|
||
acctemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, ...pageInfo})
|
||
}
|
||
|
||
// 环比减少人员分页
|
||
handleReducedemployeeListPageChange(value) {
|
||
const { calculateStore: { reducedemployeeList }} = this.props;
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, current: value})
|
||
this.current = value
|
||
}
|
||
|
||
handleReduceShowSizeChange(pageInfo) {
|
||
const { calculateStore: { reducedemployeeList }} = this.props;
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: this.state.userListSearchValue, ...pageInfo})
|
||
}
|
||
// 搜索
|
||
handleUserListSearch(value) {
|
||
const { calculateStore: {acctemployeeList, reducedemployeeList}} = this.props;
|
||
this.pageInfo.current = 1
|
||
if(this.state.selectedKey == 0) {
|
||
acctemployeeList({salaryAcctRecordId: this.id, employeeName: value, ...this.pageInfo})
|
||
this.current = 1
|
||
} else {
|
||
reducedemployeeList({salaryAcctRecordId: this.id, employeeName: value, ...this.pageInfo})
|
||
this.current = 1
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { selectedRowKeys } = this.state;
|
||
const { calculateStore } = this.props;
|
||
const { calculateBaseForm,
|
||
acctemployeeListDataSource,
|
||
acctemployeeListColumns,
|
||
reducedemployeeListDataSource,
|
||
reducedemployeeListColumns,
|
||
baseSalarySobCycle,
|
||
acctemployeeListPageInfo,
|
||
loading,
|
||
reducedemployeeListPageInfo
|
||
} = calculateStore
|
||
|
||
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: this.onSelectChange,
|
||
};
|
||
|
||
|
||
return (
|
||
<div className="userSure">
|
||
<div className="baseInfo">基本信息</div>
|
||
<div className="formWrapper">
|
||
<Row>
|
||
<Col span={12}>
|
||
<Row>
|
||
<Col span={6}>薪资所属月：<WeaHelpfulTip
|
||
width={100}
|
||
title={`薪资周期\n
|
||
${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.fromDate}至${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.endDate}\n
|
||
税款所属期\n
|
||
${baseSalarySobCycle.taxCycle}\n
|
||
考勤取值周期\n
|
||
${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.fromDate}至${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.endDate}\n
|
||
福利台账月份\n
|
||
引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
|
||
placement="topLeft"
|
||
/>
|
||
</Col>
|
||
<Col span={18}>{calculateBaseForm.formDTO && calculateBaseForm.formDTO.salaryMonth}</Col>
|
||
</Row>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Row>
|
||
<Col span={6}>核算账套：
|
||
</Col>
|
||
<Col span={18}>{calculateBaseForm.formDTO && calculateBaseForm.formDTO.salarySobName}</Col>
|
||
</Row>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row>
|
||
<Col span={6}>备注：</Col>
|
||
<Col span={18}>{calculateBaseForm.formDTO && calculateBaseForm.formDTO.description}</Col>
|
||
</Row>
|
||
</div>
|
||
<div className="operateBarWrapper">
|
||
<div>
|
||
<div className="crumbsWrapper">
|
||
<span className={this.state.selectedKey == "0" ? "crumbItem crumbItemSelected": "crumbItem"} onClick={() => {this.setState({selectedKey: "0"})}}>核算人员范围</span>
|
||
<WeaHelpfulTip
|
||
width={200}
|
||
title="核算完若薪资档案中个税扣缴义务人发生调整，需先刷新【核算人员范围】再到【薪资核算】中重新核算"
|
||
placement="topLeft"
|
||
/>
|
||
{' '}|{' '}
|
||
<span className={this.state.selectedKey == "1" ? "crumbItem crumbItemSelected": "crumbItem"} onClick={() => {this.setState({selectedKey: "1"})}}>环比上月减少人员</span>
|
||
<WeaHelpfulTip
|
||
width={200}
|
||
title="提示：环比上期当前选择的账套归档的各个税扣缴义务人下减少的人员"
|
||
placement="topLeft"
|
||
/>
|
||
</div>
|
||
<div className="crumbsOperateWrapper">
|
||
{
|
||
this.state.selectedKey == "0" && <div className="headerIcon">
|
||
<Icon className="iconItem" type="minus-square" onClick={() => {this.handleBatchDelete()}}/>
|
||
<WeaBrowser
|
||
type={17}
|
||
title="添加人员"
|
||
isSingle={false}
|
||
customized
|
||
onChange={(ids, names, datas) =>
|
||
this.handleUserBrowserChange(ids)
|
||
}
|
||
>
|
||
<Icon className="iconItem" type="plus-square" />
|
||
</WeaBrowser>
|
||
<i className="icon-coms-fawen iconItem" onClick={() => {this.handleExport()}} />
|
||
<i className="icon-coms-Synchro iconItem" onClick={() => {this.handleRefresh()}}/>
|
||
</div>
|
||
}
|
||
<WeaInputSearch className="searchInput" value={this.state.userListSearchValue} onChange={(value) => {
|
||
this.setState({userListSearchValue: value})
|
||
}} onSearch={(value) => {this.handleUserListSearch(value)}}/>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div className="tableWrapper">
|
||
{
|
||
this.state.selectedKey == 0 &&
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
rowSelection={rowSelection}
|
||
dataSource={this.getUserListDataSource()}
|
||
columns={this.getUserListColumns()}
|
||
total={acctemployeeListPageInfo.total}
|
||
current={acctemployeeListPageInfo.pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
onPageChange={(value) => {
|
||
this.pageInfo.current = value
|
||
this.handleUserListPageChange(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
this.handleShowSizeChange(this.pageInfo)
|
||
}}
|
||
/>
|
||
}
|
||
{
|
||
this.state.selectedKey == 1 &&
|
||
<CustomPaginationTable
|
||
dataSource={reducedemployeeListDataSource}
|
||
columns={reducedemployeeListColumns}
|
||
total={reducedemployeeListPageInfo.total}
|
||
current={reducedemployeeListPageInfo.pageNum}
|
||
pageSize={this.reducePageInfo.pageSize}
|
||
onPageChange={(value) => {
|
||
this.reducePageInfo.current = value
|
||
this.handleReducedemployeeListPageChange(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
this.handleReduceShowSizeChange(this.pageInfo)
|
||
}}
|
||
/>
|
||
}
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
} |