708 lines
22 KiB
JavaScript
708 lines
22 KiB
JavaScript
/*
|
||
* Author: 黎永顺
|
||
* Description: 正常缴纳月份
|
||
* Date: 2022-04-20 08:56:08
|
||
* LastEditTime: 2022-06-29 09:53:36
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { Button, Icon, message, Modal, Spin, Tooltip } from "antd";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { WeaDialog, WeaInputSearch, WeaTable } from "ecCom";
|
||
import { calcPageNo, getSearchs } from "../../../../util";
|
||
import { getQueryString } from "../../../../util/url";
|
||
import ProgressModal from "../../../../components/progressModal";
|
||
import AcctResultImportModal from "../../../calculateDetail/acctResult/importModal/acctResultImportModal";
|
||
import AdjustmentSlide from "./adjustmentSlide";
|
||
import { getCalculateProgress } from "../../../../apis/calculate";
|
||
import _ from "lodash";
|
||
import "./index.less";
|
||
import RegEditDetial from "./regEditDetial";
|
||
|
||
@inject("standingBookStore")
|
||
@observer
|
||
export default class NormalIndex extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
date: "",
|
||
current: 1,
|
||
pageSize: 10,
|
||
selectedRowKeys: [],
|
||
addProps: {
|
||
title: "",
|
||
visible: false
|
||
},
|
||
adjustSlide: {
|
||
title: "调差",
|
||
visible: false
|
||
},
|
||
tableData: {
|
||
list: [],
|
||
columns: [],
|
||
total: 0
|
||
},
|
||
searchValue: "",
|
||
progressVisible: false,
|
||
progress: 0,
|
||
fieldData: {}, //选中的表单头信息
|
||
importParams: { //导入信息的弹框表示
|
||
visible: false
|
||
},
|
||
returnEditPersonSlide: {
|
||
title: "",
|
||
editId: "",
|
||
visible: false
|
||
}
|
||
};
|
||
this.timer = null;
|
||
this.timerDelete = null;
|
||
}
|
||
|
||
componentDidMount() {
|
||
const { selectedKey, location } = this.props;
|
||
const { current } = this.state;
|
||
const billMonth = location.query.billMonth;
|
||
const paymentOrganization = location.query.paymentOrganization;
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, current, paymentOrganization })
|
||
: this.getSupplementaryList({ billMonth, current, paymentOrganization });
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
// 清除轮询
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
}
|
||
if (this.timerDelete) {
|
||
clearInterval(this.timerDelete);
|
||
}
|
||
}
|
||
|
||
componentWillReceiveProps(nextProps) {
|
||
if (nextProps.selectedKey != this.props.selectedKey) {
|
||
const { billMonth, paymentOrganization } = nextProps;
|
||
this.setState({
|
||
current: 1
|
||
}, () => {
|
||
const { current } = this.state;
|
||
nextProps.selectedKey === "1"
|
||
? this.getNormalList({ billMonth, current, paymentOrganization })
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current,
|
||
paymentOrganization
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
handleSearch(value) {
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const { current } = this.state;
|
||
selectedKey === "1"
|
||
? this.getNormalList({
|
||
billMonth,
|
||
current: 1,
|
||
paymentOrganization,
|
||
userName: value
|
||
})
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current: 1,
|
||
paymentOrganization,
|
||
userName: value
|
||
});
|
||
}
|
||
|
||
handleSave = () => {
|
||
const {
|
||
siaccountCommonSave,
|
||
siaccountSupplementarySave,
|
||
form
|
||
} = this.props.standingBookStore;
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
if (selectedKey === "1") {
|
||
const { includes, excludes } = form.getFormParams();
|
||
const payload = {
|
||
billMonth,
|
||
includes: includes.split(","),
|
||
excludes: _.isEmpty(excludes) ? excludes.split(",") : []
|
||
};
|
||
siaccountCommonSave(payload).then(() => {
|
||
message.success("添加成功");
|
||
this.getNormalList({
|
||
billMonth,
|
||
paymentOrganization,
|
||
current: this.state.current
|
||
});
|
||
this.setState({
|
||
addProps: {
|
||
...this.state.addProps,
|
||
title: "",
|
||
visible: false
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
const paymentOrganization = getQueryString("paymentOrganization");
|
||
form.validateForm().then(f => {
|
||
if (f.isValid) {
|
||
const {
|
||
includes,
|
||
billMonth: billMonthList,
|
||
excludes,
|
||
projects
|
||
} = form.getFormParams();
|
||
const payload = {
|
||
billMonth,
|
||
billMonthList: billMonthList.split(","),
|
||
includes: includes.split(","),
|
||
// excludes: excludes.split(","),
|
||
projects: projects.split(","),
|
||
paymentOrganization
|
||
};
|
||
siaccountSupplementarySave(payload).then(() => {
|
||
message.success("添加成功");
|
||
this.getSupplementaryList({
|
||
billMonth,
|
||
current: this.state.current,
|
||
paymentOrganization
|
||
});
|
||
this.setState(
|
||
{
|
||
addProps: {
|
||
...this.state.addProps,
|
||
title: "",
|
||
visible: false
|
||
}
|
||
},
|
||
() => {
|
||
form.resetForm();
|
||
}
|
||
);
|
||
});
|
||
} else {
|
||
f.showErrors();
|
||
this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
getNormalList = (payload = {}) => {
|
||
const { getNormalList } = this.props.standingBookStore;
|
||
getNormalList({ ...payload }).then(({ list, columns = [], total }) => {
|
||
columns = _.map(_.filter(columns, it => it.dataIndex !== "id"), it => {
|
||
if (it.dataIndex === "employeeId") {
|
||
it = {
|
||
...it,
|
||
width: 150,
|
||
fixed: "left",
|
||
render: (text, r) => {
|
||
const { userName, employeeId } = r;
|
||
return (
|
||
<span>
|
||
{userName}
|
||
</span>
|
||
);
|
||
}
|
||
};
|
||
it.title = "姓名";
|
||
}
|
||
return {
|
||
...it,
|
||
title: <span dangerouslySetInnerHTML={{ __html: it.title }}/>,
|
||
width: 150
|
||
};
|
||
});
|
||
this.setState({
|
||
tableData: {
|
||
list,
|
||
columns,
|
||
total
|
||
}
|
||
});
|
||
});
|
||
};
|
||
getSupplementaryList = (payload = {}) => {
|
||
const { getSupplementaryList } = this.props.standingBookStore;
|
||
getSupplementaryList({
|
||
...payload
|
||
}).then(({ list, columns = [], total }) => {
|
||
columns = _.map(_.filter(columns, it => it.dataIndex !== "id"), it => {
|
||
if (it.dataIndex === "employeeId") {
|
||
it = {
|
||
...it,
|
||
width: 150,
|
||
fixed: "left",
|
||
render: (text, r) => {
|
||
const { userName, employeeId } = r;
|
||
return (
|
||
<span>
|
||
{userName}
|
||
</span>
|
||
);
|
||
}
|
||
};
|
||
it.title = "姓名";
|
||
}
|
||
return {
|
||
...it,
|
||
title: <span dangerouslySetInnerHTML={{ __html: it.title }}/>,
|
||
width: 150
|
||
};
|
||
});
|
||
this.setState({
|
||
tableData: {
|
||
list,
|
||
columns,
|
||
total
|
||
}
|
||
});
|
||
});
|
||
};
|
||
onSelectChange = selectedRowKeys => {
|
||
this.setState({ selectedRowKeys });
|
||
};
|
||
handleBatchDelete = () => {
|
||
const { siaccountCommonDelete } = this.props.standingBookStore;
|
||
const { list } = this.state.tableData;
|
||
const { selectedRowKeys } = this.state;
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
if (_.isEmpty(selectedRowKeys)) {
|
||
message.warning("未勾选数据！");
|
||
} else {
|
||
const includes = _.map(
|
||
_.filter(list, it => selectedRowKeys.includes(it.id)),
|
||
item => item.employeeId
|
||
);
|
||
const ids = _.map(
|
||
_.filter(list, it => selectedRowKeys.includes(it.id)),
|
||
item => item.id
|
||
);
|
||
Modal.confirm({
|
||
title: "确认信息",
|
||
content: "确认删除勾选的数据吗？",
|
||
onOk: () => {
|
||
this.setState({
|
||
progressVisible: true
|
||
}, () => {
|
||
this.timerDelete = setInterval(() => {
|
||
if (this.state.progress !== 100) {
|
||
this.setState({
|
||
progress: this.state.progress + 10
|
||
});
|
||
} else {
|
||
clearInterval(this.timerDelete);
|
||
this.setState({
|
||
progressVisible: false,
|
||
progress: 0
|
||
}, () => {
|
||
message.success("删除成功");
|
||
selectedKey === "1"
|
||
? this.getNormalList({
|
||
billMonth,
|
||
paymentOrganization,
|
||
current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length)
|
||
})
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length),
|
||
paymentOrganization
|
||
});
|
||
});
|
||
}
|
||
}, 800);
|
||
});
|
||
|
||
siaccountCommonDelete({
|
||
billMonth,
|
||
includes,
|
||
ids,
|
||
paymentOrganization
|
||
}).then(() => {
|
||
clearInterval(this.timerDelete);
|
||
message.success("删除成功");
|
||
this.setState({ selectedRowKeys: [], progressVisible: false, progress: 0 });
|
||
selectedKey === "1"
|
||
? this.getNormalList({
|
||
billMonth,
|
||
paymentOrganization,
|
||
current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length)
|
||
})
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length),
|
||
paymentOrganization
|
||
});
|
||
});
|
||
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
}
|
||
};
|
||
handleAdd = () => {
|
||
const {
|
||
siaccountCommonForm,
|
||
querySupplementaryForm
|
||
} = this.props.standingBookStore;
|
||
const { billMonth, selectedKey } = this.props;
|
||
if (selectedKey === "1") {
|
||
siaccountCommonForm();
|
||
} else {
|
||
querySupplementaryForm();
|
||
}
|
||
this.setState({
|
||
addProps: {
|
||
...this.state.addProps,
|
||
title: "添加缴纳人员",
|
||
visible: true
|
||
}
|
||
});
|
||
};
|
||
|
||
// 核算按钮点击
|
||
handleCommonAccountClick() {
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const { commonAccount } = this.props.standingBookStore;
|
||
commonAccount({ billMonth, paymentOrganization, includes: [] });
|
||
this.setState({
|
||
progressVisible: true
|
||
}, () => {
|
||
this.timer = setInterval(() => {
|
||
getCalculateProgress(billMonth).then(({ status, data }) => {
|
||
if (status) {
|
||
if (this.state.progress !== 100) {
|
||
this.setState({
|
||
progress: (Number(data.progress).toFixed(2)) * 100
|
||
});
|
||
} else {
|
||
clearInterval(this.timer);
|
||
this.setState({
|
||
progressVisible: false,
|
||
progress: 0
|
||
}, () => {
|
||
message.success("核算成功");
|
||
selectedKey === "1"
|
||
? this.getNormalList({
|
||
billMonth,
|
||
paymentOrganization,
|
||
current: this.state.current
|
||
})
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
paymentOrganization,
|
||
current: this.state.current
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
clearInterval(this.timer);
|
||
this.setState({
|
||
progressVisible: false,
|
||
progress: 0
|
||
});
|
||
}
|
||
}).catch(() => {
|
||
clearInterval(this.timer);
|
||
this.setState({
|
||
progressVisible: false,
|
||
progress: 0
|
||
});
|
||
});
|
||
}, 600);
|
||
});
|
||
}
|
||
|
||
handleExport = () => {
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const urlObj = {
|
||
"1": "/api/bs/hrmsalary/welfare/common/export",
|
||
"3": "/api/bs/hrmsalary/welfare/supplementary/export"
|
||
};
|
||
const url = `${window.location
|
||
.origin}${urlObj[selectedKey]}?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`;
|
||
window.open(url, "_self");
|
||
};
|
||
|
||
handleEditNormalStandingBook = (record) => {
|
||
const { userName, id: editId } = record;
|
||
const { returnEditPersonSlide } = this.state;
|
||
this.setState({
|
||
returnEditPersonSlide: { ...returnEditPersonSlide, visible: true, title: userName, editId }
|
||
});
|
||
};
|
||
handleCloseNormalStandingBookModal = () => {
|
||
const { returnPersonModal, returnEditPersonSlide } = this.state;
|
||
this.setState({
|
||
returnEditPersonSlide: { ...returnEditPersonSlide, visible: false, title: "", editId: "" }
|
||
}, () => {
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { remarks, billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const { selectedRowKeys, addProps, adjustSlide, importParams, returnEditPersonSlide } = this.state;
|
||
const { loading, form, condition, saveLoading } = this.props.standingBookStore;
|
||
let { list, columns, total } = this.state.tableData;
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: this.onSelectChange
|
||
};
|
||
const pagination = {
|
||
total,
|
||
current: this.state.current,
|
||
showTotal: total => `共 ${total} 条`,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
pageSizeOptions: ["10", "20", "50", "100"],
|
||
onShowSizeChange: (current, pageSize) => {
|
||
this.setState({ current, pageSize });
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, current, pageSize, paymentOrganization })
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current,
|
||
pageSize,
|
||
paymentOrganization
|
||
});
|
||
},
|
||
onChange: current => {
|
||
this.setState({ current });
|
||
selectedKey === "1"
|
||
? this.getNormalList({
|
||
billMonth, current,
|
||
pageSize: this.state.pageSize, paymentOrganization
|
||
})
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current,
|
||
pageSize: this.state.pageSize,
|
||
paymentOrganization
|
||
});
|
||
}
|
||
};
|
||
columns = _.map(toJS(columns), item => {
|
||
if (item.dataIndex === "employeeId") {
|
||
return { ...item };
|
||
}
|
||
return {
|
||
...item,
|
||
render: (text) => {
|
||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||
}
|
||
};
|
||
});
|
||
if (selectedKey === "3") {
|
||
columns = [
|
||
...columns,
|
||
{
|
||
title: "操作",
|
||
dataIndex: "operate",
|
||
fixed: "right",
|
||
width: "120px",
|
||
render: (text, record) => {
|
||
return (
|
||
<div className="optWrapper">
|
||
<a
|
||
href="javascript:void(0);"
|
||
className="mr10"
|
||
onClick={() => this.handleEditNormalStandingBook(record)}
|
||
>编辑</a>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
];
|
||
}
|
||
return (
|
||
<div className="normalWapper">
|
||
{
|
||
selectedKey === "1" &&
|
||
<div className="topContent">
|
||
<div className="month">
|
||
<span>
|
||
账单月份
|
||
<Tooltip placement="topLeft" title="提示：正常缴纳，账单月份即社保福利缴纳月份">
|
||
<Icon type="question-circle"/>
|
||
</Tooltip>
|
||
</span>
|
||
<span>
|
||
{billMonth}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span>备注：</span>
|
||
<span>
|
||
{remarks}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
}
|
||
<div className="tabOption">
|
||
{this.props.type !== "detail" && this.props.selectedKey == "3"
|
||
? <span style={{ display: "flex", alignItems: "center" }}>
|
||
<Tooltip title="批量删除">
|
||
<i
|
||
style={{ color: "#2db7f5", fontSize: 18 }}
|
||
className="icon-coms-Batch-delete"
|
||
onClick={this.handleBatchDelete}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="添加该月正常缴纳人员">
|
||
<i className="icon-coms-Add-to" onClick={this.handleAdd} style={{ color: "#2db7f5", fontSize: 18 }}/>
|
||
</Tooltip>
|
||
</span>
|
||
: <span/>}
|
||
|
||
{addProps.visible &&
|
||
<WeaDialog
|
||
{...addProps}
|
||
onCancel={() =>
|
||
this.setState({
|
||
addProps: {
|
||
...addProps,
|
||
title: "",
|
||
visible: false
|
||
}
|
||
})}
|
||
buttons={[
|
||
<Button
|
||
type="primary"
|
||
onClick={this.handleSave}
|
||
loading={saveLoading}>
|
||
保存
|
||
</Button>,
|
||
<Button onClick={() => form.resetForm()}>重置</Button>
|
||
]}>
|
||
{getSearchs(form, toJS(condition), 1)}
|
||
</WeaDialog>}
|
||
{/* {selectedKey === "3" && (
|
||
<Tooltip title="导入">
|
||
<i className="icon-coms02-Import" />
|
||
</Tooltip>
|
||
)}
|
||
<Tooltip title="导出全部">
|
||
<i className="icon-coms02-coms2-export" />
|
||
</Tooltip> */}
|
||
{
|
||
selectedKey === "1" && this.props.type !== "detail" &&
|
||
<React.Fragment>
|
||
<Button type="primary" onClick={() => {
|
||
this.handleCommonAccountClick();
|
||
}}>核算</Button>
|
||
<Button type="ghost" onClick={() => {
|
||
this.setState({
|
||
adjustSlide: {
|
||
...adjustSlide,
|
||
visible: true
|
||
}
|
||
});
|
||
}}>调差</Button>
|
||
</React.Fragment>
|
||
}
|
||
{
|
||
selectedKey === "1" &&
|
||
<React.Fragment>
|
||
<Button type="primary" onClick={() => {
|
||
window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/sbofflineComparison?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`);
|
||
}}>线下对比</Button>
|
||
</React.Fragment>
|
||
}
|
||
{/*核算进度条*/}
|
||
<ProgressModal
|
||
title={selectedKey === "3" ? "正在删除请稍后" : "正在核算请稍后"}
|
||
visible={this.state.progressVisible}
|
||
onCancel={() => {
|
||
this.setState({ progressVisible: false, progress: 0 });
|
||
}}
|
||
progress={this.state.progress}
|
||
/>
|
||
{
|
||
this.props.type !== "detail" &&
|
||
<Tooltip title="导入数据">
|
||
<i
|
||
className="icon-coms02-Import"
|
||
style={{ color: "#2db7f5", fontSize: 18, marginRight: 10 }}
|
||
onClick={() => this.setState({ importParams: { ...importParams, visible: true } })}
|
||
/>
|
||
</Tooltip>
|
||
}
|
||
{/*导入弹框*/}
|
||
{
|
||
importParams.visible &&
|
||
<AcctResultImportModal
|
||
visiable={importParams.visible}
|
||
fieldData={this.state.fieldData}
|
||
onAdd={fieldData => {
|
||
this.setState({
|
||
fieldData
|
||
});
|
||
}}
|
||
onCancel={() => {
|
||
this.setState({ importParams: { ...importParams, visible: false }, fieldData: {} }, () => {
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const { current } = this.state;
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, current, paymentOrganization })
|
||
: this.getSupplementaryList({ billMonth, current, paymentOrganization });
|
||
});
|
||
}}
|
||
isStandingBook
|
||
standingBookTabKey={selectedKey}
|
||
/>
|
||
}
|
||
|
||
<Tooltip title="导出全部">
|
||
<i
|
||
className="icon-coms02-coms2-export"
|
||
style={{ color: "#2db7f5", fontSize: 18 }}
|
||
onClick={this.handleExport}
|
||
/>
|
||
</Tooltip>
|
||
<WeaInputSearch
|
||
value={this.state.searchValue}
|
||
onChange={value => {
|
||
this.setState({ searchValue: value });
|
||
}}
|
||
placeholder={"请输入姓名"}
|
||
onSearch={value => {
|
||
this.handleSearch(value);
|
||
}}
|
||
/>
|
||
</div>
|
||
{/* table */}
|
||
<div>
|
||
<Spin spinning={loading}>
|
||
<WeaTable
|
||
rowKey="id"
|
||
columns={columns}
|
||
dataSource={list}
|
||
loading={loading}
|
||
pagination={pagination}
|
||
rowSelection={rowSelection}
|
||
scroll={{ x: 1200, y: "calc(100vh - 233px)" }}
|
||
/>
|
||
</Spin>
|
||
{/*编辑弹框*/}
|
||
<RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseNormalStandingBookModal}/>
|
||
<AdjustmentSlide
|
||
{...adjustSlide}
|
||
onCancel={() => {
|
||
this.setState({
|
||
adjustSlide: {
|
||
...adjustSlide,
|
||
visible: false
|
||
}
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|