383 lines
12 KiB
JavaScript
383 lines
12 KiB
JavaScript
/*
|
||
* Author: 黎永顺
|
||
* Description: 正常缴纳月份
|
||
* Date: 2022-04-20 08:56:08
|
||
* LastEditTime: 2022-05-09 15:05:57
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { Icon, Tooltip, Button, message, Modal, Spin } from "antd";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { WeaBrowser, WeaTable, WeaPopoverHrm, WeaDialog, WeaInputSearch } from "ecCom";
|
||
import { getSearchs } from "../../../../util";
|
||
import _ from "lodash";
|
||
import "./index.less";
|
||
|
||
@inject("standingBookStore")
|
||
@observer
|
||
export default class NormalIndex extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
date: "",
|
||
current: 1,
|
||
selectedRowKeys: [],
|
||
addProps: {
|
||
title: "",
|
||
visible: false,
|
||
},
|
||
tableData: {
|
||
list: [],
|
||
columns: [],
|
||
total: 0,
|
||
},
|
||
searchValue: ""
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
const { billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const { current } = this.state;
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, current, paymentOrganization })
|
||
: this.getSupplementaryList({ billMonth, current, paymentOrganization });
|
||
}
|
||
|
||
componentWillReceiveProps(nextProps) {
|
||
if (nextProps.selectedKey != this.props.selectedKey) {
|
||
const { billMonth, paymentOrganization } = nextProps;
|
||
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, paymentOrganization, userName:value })
|
||
: this.getSupplementaryList({ billMonth, current, 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 {
|
||
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(","),
|
||
};
|
||
siaccountSupplementarySave(payload).then(() => {
|
||
message.success("添加成功");
|
||
this.getSupplementaryList({
|
||
billMonth,
|
||
current: this.state.current,
|
||
});
|
||
this.setState({
|
||
addProps: {
|
||
...this.state.addProps,
|
||
title: "",
|
||
visible: false,
|
||
},
|
||
});
|
||
});
|
||
} 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 }}></span>,
|
||
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 }}></span>
|
||
),
|
||
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
|
||
);
|
||
Modal.confirm({
|
||
title: "确认信息",
|
||
content: "确认删除勾选的数据吗？",
|
||
onOk: () => {
|
||
siaccountCommonDelete({ billMonth, includes }).then(() => {
|
||
message.success("删除成功");
|
||
this.setState({ selectedRowKeys: [] });
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, paymentOrganization, current: this.state.current })
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current: this.state.current,
|
||
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 { remarks, billMonth, selectedKey, paymentOrganization } = this.props;
|
||
const { commonAccount } =
|
||
this.props.standingBookStore;
|
||
commonAccount({
|
||
billMonth, includes: []
|
||
}).then(() => {
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, paymentOrganization, current: this.state.current })
|
||
: this.getSupplementaryList({ billMonth, paymentOrganization, current: this.state.current });
|
||
})
|
||
}
|
||
render() {
|
||
const { remarks, billMonth, selectedKey } = this.props;
|
||
const { selectedRowKeys, addProps, date } = 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} 条`,
|
||
onChange: (current) => {
|
||
this.setState({ current });
|
||
selectedKey === "1"
|
||
? this.getNormalList({ billMonth, current })
|
||
: this.getSupplementaryList({
|
||
billMonth,
|
||
current,
|
||
});
|
||
},
|
||
};
|
||
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>
|
||
<Tooltip title="批量删除">
|
||
<i
|
||
className="icon-coms-Batch-delete"
|
||
onClick={this.handleBatchDelete}
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title="添加该月正常缴纳人员">
|
||
<i className="icon-coms-Add-to" onClick={this.handleAdd} />
|
||
</Tooltip>
|
||
</span> : <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" && <Button type="primary" onClick={() => {this.handleCommonAccountClick()}}>核算</Button>} */}
|
||
|
||
<WeaInputSearch value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
|
||
</div>
|
||
{/* table */}
|
||
<div style={{ padding: "0 16px" }}>
|
||
<Spin spinning={loading}>
|
||
<WeaTable
|
||
rowKey="id"
|
||
columns={columns}
|
||
dataSource={list}
|
||
loading={loading}
|
||
pagination={pagination}
|
||
rowSelection={rowSelection}
|
||
scroll={{ x: 1200 }}
|
||
/>
|
||
</Spin>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|