480 lines
15 KiB
JavaScript
480 lines
15 KiB
JavaScript
import React from "react";
|
||
import { Row, Col, Icon, Table, Modal, message } 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={12}>
|
||
<Row>
|
||
<Col span={6}>备注：</Col>
|
||
<Col span={18}>
|
||
{calculateBaseForm.formDTO &&
|
||
calculateBaseForm.formDTO.description}
|
||
</Col>
|
||
</Row>
|
||
</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();
|
||
}}
|
||
title="批量删除"
|
||
/>
|
||
<WeaBrowser
|
||
type={17}
|
||
title="添加人员"
|
||
isSingle={false}
|
||
customized
|
||
onChange={(ids, names, datas) =>
|
||
this.handleUserBrowserChange(ids)}>
|
||
<Icon className="iconItem" type="plus-square" title="新增" />
|
||
</WeaBrowser>
|
||
<i
|
||
className="icon-coms-fawen iconItem"
|
||
onClick={() => {
|
||
this.handleExport();
|
||
}}
|
||
style={{ fontSize: 20, position: "relative", top: "2px" }}
|
||
title="导出"
|
||
/>
|
||
<i
|
||
className="icon-coms-Synchro iconItem"
|
||
onClick={() => {
|
||
this.handleRefresh();
|
||
}}
|
||
style={{ fontSize: 20, position: "relative", top: "2px" }}
|
||
title="刷新"
|
||
/>
|
||
</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);
|
||
}}
|
||
isWeaTable={false}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = { current, pageSize };
|
||
this.handleShowSizeChange(this.pageInfo);
|
||
}}
|
||
/>}
|
||
{this.state.selectedKey == 1 &&
|
||
<CustomPaginationTable
|
||
isWeaTable={false}
|
||
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>
|
||
);
|
||
}
|
||
}
|