548 lines
17 KiB
JavaScript
548 lines
17 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { Button, DatePicker, Dropdown, Menu, message, Modal } from "antd";
|
||
import { WeaRightMenu, WeaTop } from "ecCom";
|
||
import { renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import Accountdialog from "./components/accountDialog";
|
||
import AbnormalDrawer from "./components/abnormalDrawer";
|
||
import CustomPaginationTable from "../../../components/customPaginationTable";
|
||
import moment from "moment";
|
||
import _ from "lodash";
|
||
import ProgressModal from "../../../components/progressModal";
|
||
import "./index.less";
|
||
|
||
const MonthPicker = DatePicker.MonthPicker;
|
||
|
||
@inject("standingBookStore", "taxAgentStore")
|
||
@observer
|
||
export default class StandingBook extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
tableParams: {
|
||
startTime: moment(new Date()).startOf("year").format("YYYY-MM"),
|
||
endTime: moment(new Date()).startOf("month").format("YYYY-MM")
|
||
},
|
||
current: 1,
|
||
dialogProps: {
|
||
title: "",
|
||
visible: false,
|
||
options: [],
|
||
isAdmin: false
|
||
},
|
||
drawerProps: {
|
||
title: "",
|
||
visible: false
|
||
},
|
||
tableData: {
|
||
list: [],
|
||
columns: [],
|
||
total: 0
|
||
},
|
||
dbnormalTableData: {
|
||
list: [],
|
||
total: 0
|
||
},
|
||
adminData: {
|
||
isDefaultOpen: false,
|
||
isAdminEnable: false,
|
||
isChief: false,
|
||
isOpenDevolution: false
|
||
},
|
||
progressVisible: false,
|
||
progress: 0
|
||
};
|
||
this.payload = {};
|
||
this.pageInfo = { current: 1, pageSize: 10 };
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.init();
|
||
}
|
||
|
||
init = () => {
|
||
const { current, dialogProps } = this.state;
|
||
const {
|
||
taxAgentStore: { getPermission, fetchTaxAgentOption },
|
||
standingBookStore: { getAdminTaxAgentList }
|
||
} = this.props;
|
||
getPermission().then(({ status, data }) => {
|
||
if (status) {
|
||
this.setState({ adminData: data });
|
||
if (data.isOpenDevolution) {
|
||
getAdminTaxAgentList().then((data) => {
|
||
let taxAgentList = data.map(item => {
|
||
let result = {};
|
||
result.showname = item.name;
|
||
result.key = item.id + "";
|
||
result.selected = false;
|
||
return result;
|
||
});
|
||
this.setState({
|
||
dialogProps: {
|
||
...dialogProps,
|
||
options: taxAgentList,
|
||
isAdmin: true
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
fetchTaxAgentOption().then(({ data }) => {
|
||
let taxAgentList = data.map(item => {
|
||
let result = {};
|
||
result.showname = item.content;
|
||
result.key = item.id + "";
|
||
result.selected = false;
|
||
return result;
|
||
});
|
||
this.setState({
|
||
dialogProps: {
|
||
...dialogProps,
|
||
options: taxAgentList
|
||
}
|
||
});
|
||
});
|
||
}
|
||
this.getCommonList({ ...this.state.tableParams, current });
|
||
}
|
||
});
|
||
};
|
||
|
||
getCommonList = (payload = {}) => {
|
||
const { getCommonList } = this.props.standingBookStore;
|
||
getCommonList({ ...payload }).then(({ list, columns, total, pageNum }) => {
|
||
columns = _.map(columns, (it) => {
|
||
if (it.dataIndex === "billMonth") {
|
||
it = {
|
||
...it,
|
||
render: (text, r) => {
|
||
const { billMonth, creator } = r;
|
||
return (
|
||
<a
|
||
href="javascript:void(0);"
|
||
className="linkTo"
|
||
onClick={() => this.handleGoDetail(billMonth, "detail", r.paymentOrganizationId, creator)}>
|
||
{text}
|
||
</a>
|
||
);
|
||
}
|
||
};
|
||
}
|
||
return { ...it };
|
||
});
|
||
if (!this.state.adminData.isDefaultOpen || (this.state.adminData.isDefaultOpen && this.state.adminData.isAdminEnable)) {
|
||
columns = [
|
||
...columns,
|
||
{
|
||
title: "操作",
|
||
dataIndex: "action",
|
||
key: "action",
|
||
fixed: "right",
|
||
render: (text, r) => {
|
||
const { billStatus, billMonth, creator } = r;
|
||
return (
|
||
<React.Fragment>
|
||
{billStatus === "未归档" && (
|
||
<a
|
||
href="javascript:void(0);"
|
||
className="linkTo"
|
||
onClick={() => this.handleGoDetail(billMonth, "", r.paymentOrganizationId, creator)}>
|
||
核算
|
||
</a>
|
||
)}
|
||
{billStatus === "已归档" && (
|
||
<a
|
||
href="javascript:void(0);"
|
||
className="linkTo"
|
||
onClick={() => this.socialSecurityBenefitsRecalculate({ id: r.id })}>
|
||
重新核算
|
||
</a>
|
||
)}
|
||
{billStatus === "未归档" && (
|
||
<Dropdown
|
||
overlay={
|
||
<Menu
|
||
onClick={({ key }) =>
|
||
this.handleOperate({
|
||
key,
|
||
billMonth,
|
||
paymentOrganizationId: r.paymentOrganizationId,
|
||
creator
|
||
})
|
||
}>
|
||
<Menu.Item key="archive">归档</Menu.Item>
|
||
{/* <Menu.Item key="detail">异常详情</Menu.Item> */}
|
||
<Menu.Item key="delete">删除</Menu.Item>
|
||
{/* <Menu.Item key="operate">操作日志</Menu.Item> */}
|
||
</Menu>
|
||
}>
|
||
<i className="icon-coms-more more"/>
|
||
</Dropdown>
|
||
)}
|
||
{billStatus === "已归档" && (
|
||
<Dropdown
|
||
overlay={
|
||
<Menu
|
||
onClick={({ key }) =>
|
||
this.handleOperate({
|
||
key,
|
||
billMonth,
|
||
paymentOrganizationId: r.paymentOrganizationId,
|
||
creator
|
||
})
|
||
}>
|
||
<Menu.Item key="view">查看</Menu.Item>
|
||
</Menu>
|
||
}>
|
||
<i className="icon-coms-more more"/>
|
||
</Dropdown>
|
||
)}
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
];
|
||
}
|
||
this.setState({
|
||
tableData: {
|
||
list,
|
||
columns,
|
||
total
|
||
},
|
||
current: pageNum
|
||
});
|
||
});
|
||
};
|
||
|
||
socialSecurityBenefitsRecalculate = (params) => {
|
||
const { socialSecurityBenefitsRecalculate } = this.props.standingBookStore;
|
||
socialSecurityBenefitsRecalculate(params).then(() => {
|
||
message.success("重新核算成功");
|
||
this.init();
|
||
}).catch(err => {
|
||
message.error(err);
|
||
});
|
||
};
|
||
|
||
// 异常详情列表
|
||
inspectList = (payload) => {
|
||
const { inspectList } = this.props.standingBookStore;
|
||
this.payload = payload;
|
||
inspectList({ ...payload }).then(({ list, total }) => {
|
||
this.setState({
|
||
dbnormalTableData: {
|
||
list,
|
||
total
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
// 异常详情分页回调
|
||
handlePageChange(value) {
|
||
const { inspectList } = this.props.standingBookStore;
|
||
inspectList({ ...this.payload, current: value }).then(({ list, total }) => {
|
||
this.setState({
|
||
dbnormalTableData: {
|
||
list,
|
||
total
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
handleGoDetail = (billMonth, detail, paymentOrganization, creator) => {
|
||
if (detail) {
|
||
window.open(
|
||
`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/standingBookDetail?type=${detail}&billMonth=${billMonth}&paymentOrganization=${paymentOrganization}&creator=${creator}`
|
||
);
|
||
} else {
|
||
window.open(
|
||
`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/standingBookDetail?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}&creator=${creator}`
|
||
);
|
||
}
|
||
};
|
||
handleOperate = (payload) => {
|
||
const { siaccountFile, siaccountDelete, deleteLoading } =
|
||
this.props.standingBookStore;
|
||
const { key, billMonth, paymentOrganizationId, creator } = payload;
|
||
switch (key) {
|
||
case "archive":
|
||
Modal.confirm({
|
||
title: "确认信息",
|
||
content: "确认要归档吗？",
|
||
onOk: () => {
|
||
siaccountFile({ billMonth, paymentOrganization: paymentOrganizationId }).then((res) => {
|
||
const { current } = this.state;
|
||
this.getCommonList({ ...this.state.tableParams, current });
|
||
});
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
break;
|
||
case "detail":
|
||
this.inspectList({ billMonth });
|
||
this.setState({
|
||
drawerProps: {
|
||
...this.state.drawerProps,
|
||
title: "核算异常",
|
||
visible: true
|
||
}
|
||
});
|
||
break;
|
||
case "delete":
|
||
Modal.confirm({
|
||
title: "确认信息",
|
||
content: "确认删除本条数据吗？",
|
||
confirmLoading: deleteLoading,
|
||
onOk: () => {
|
||
siaccountDelete({ billMonth, paymentOrganization: paymentOrganizationId }).then(() => {
|
||
message.success("删除成功");
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
current: this.state.current
|
||
});
|
||
});
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
break;
|
||
case "view":
|
||
this.handleGoDetail(billMonth, "detail", paymentOrganizationId, creator);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
handleOk = (formVal) => {
|
||
const { save } = this.props.standingBookStore;
|
||
const { billMonth, ...extra } = formVal;
|
||
const payload = {
|
||
billMonth: moment(billMonth).format("YYYY-MM"),
|
||
...extra
|
||
};
|
||
save(payload).then(({ data }) => {
|
||
this.setState({
|
||
progressVisible: true
|
||
}, () => {
|
||
this.timer = setInterval(() => {
|
||
if (this.state.progress !== 100) {
|
||
this.setState({
|
||
progress: this.state.progress + 10
|
||
});
|
||
} else {
|
||
clearInterval(this.timer);
|
||
this.setState({
|
||
progressVisible: false,
|
||
progress: 0
|
||
}, () => {
|
||
message.success("核算成功");
|
||
this.handleClose();
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
current: this.state.current
|
||
});
|
||
this.handleGoDetail(moment(billMonth).format("YYYY-MM"), "", extra.paymentOrganization ? extra.paymentOrganization : "", data);
|
||
});
|
||
}
|
||
}, 1000);
|
||
});
|
||
});
|
||
};
|
||
|
||
handleClose = () => {
|
||
this.setState({
|
||
dialogProps: {
|
||
...this.state.dialogProps,
|
||
title: "",
|
||
visible: false
|
||
}
|
||
});
|
||
};
|
||
|
||
handleChangeMonth = (type, val) => {
|
||
this.setState({
|
||
tableParams: {
|
||
...this.state.tableParams,
|
||
[type]: val && moment(val).format("YYYY-MM")
|
||
}
|
||
});
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
[type]: val && moment(val).format("YYYY-MM"),
|
||
current: this.state.current
|
||
});
|
||
};
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
...pageInfo
|
||
});
|
||
}
|
||
|
||
render() {
|
||
const { standingBookStore, taxAgentStore: { showOperateBtn } } = this.props;
|
||
const {
|
||
inspectLoading,
|
||
loading,
|
||
hasRight,
|
||
tableStore
|
||
} = standingBookStore;
|
||
const { list, columns, total } = this.state.tableData;
|
||
const { startTime, endTime } = this.state.tableParams;
|
||
const { dialogProps, drawerProps } = this.state;
|
||
const abnormalColumns = _.map(
|
||
_.filter(tableStore.columns, (it) => it.hide && it.hide === "false"),
|
||
(item) => ({ ...item, width: item.oldWidth })
|
||
);
|
||
if (!hasRight && !loading) {
|
||
// 无权限处理
|
||
return renderNoright();
|
||
}
|
||
|
||
const rightBtns = [
|
||
// 右键菜单
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
this.setState({
|
||
dialogProps: {
|
||
...this.state.dialogProps,
|
||
title: "核算",
|
||
visible: true
|
||
}
|
||
});
|
||
}}>
|
||
核算
|
||
</Button>
|
||
];
|
||
const rightMenu = [
|
||
// 右键菜单
|
||
// {
|
||
// key: "BTN_COLUMN",
|
||
// icon: <i className="icon-coms-Custom" />,
|
||
// content: "显示列定制",
|
||
// onClick: this.showColumn,
|
||
// },
|
||
];
|
||
const collectParams = {
|
||
// 收藏功能配置
|
||
favname: "社保福利台账",
|
||
favouritetype: 1,
|
||
objid: 0,
|
||
link: "wui/index.html#/ns_demo03/index",
|
||
importantlevel: 1
|
||
};
|
||
|
||
return (
|
||
<div className="standingbookWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<WeaTop
|
||
title="社保福利台账" // 文字
|
||
icon={<i className="icon-coms-fa"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
buttons={showOperateBtn ? rightBtns : []}
|
||
>
|
||
<div className="billDateWrapper">
|
||
<div>账单月份：</div>
|
||
<MonthPicker
|
||
value={startTime}
|
||
format="YYYY-MM"
|
||
disabledDate={(current) => {
|
||
return current && endTime && current.getTime() > new Date(endTime).getTime();
|
||
}}
|
||
onChange={(val) => this.handleChangeMonth("startTime", val)}
|
||
/>
|
||
<span className="to">至</span>
|
||
<MonthPicker
|
||
value={endTime}
|
||
format="YYYY-MM"
|
||
disabledDate={(current) => {
|
||
return current && startTime && current.getTime() < new Date(startTime).getTime();
|
||
}}
|
||
onChange={(val) => this.handleChangeMonth("endTime", val)}
|
||
/>
|
||
</div>
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
columns={_.filter(columns, (it) => it.dataIndex !== "id").map(item => {
|
||
item.width = "150px";
|
||
if (item.dataIndex === "billMonth") item.fixed = "left";
|
||
if (item.dataIndex === "action") return { ...item };
|
||
return {
|
||
...item,
|
||
render: (text) => {
|
||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||
}
|
||
};
|
||
})}
|
||
dataSource={list}
|
||
total={total}
|
||
current={this.state.current}
|
||
pageSize={this.pageInfo.pageSize}
|
||
onPageChange={(value) => {
|
||
this.handlePageChange(value);
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = { current, pageSize };
|
||
this.handleShowSizeChange(this.pageInfo);
|
||
}}
|
||
scroll={{ x: 2300 }}
|
||
/>
|
||
|
||
{dialogProps.visible && (
|
||
<Accountdialog
|
||
{...dialogProps}
|
||
onCancel={() => this.handleClose()}
|
||
onOk={this.handleOk}
|
||
loading={loading}
|
||
/>
|
||
)}
|
||
{/*核算进度条*/}
|
||
{
|
||
this.state.progressVisible &&
|
||
<ProgressModal
|
||
visible={this.state.progressVisible}
|
||
onCancel={() => {
|
||
this.setState({ progressVisible: false, progress: 0 });
|
||
}}
|
||
progress={this.state.progress}
|
||
/>
|
||
}
|
||
{drawerProps.visible && (
|
||
<AbnormalDrawer
|
||
{...drawerProps}
|
||
onClose={() => {
|
||
this.setState({
|
||
drawerProps: {
|
||
...this.state.drawerProps,
|
||
title: "",
|
||
visible: false
|
||
}
|
||
});
|
||
}}
|
||
columns={abnormalColumns}
|
||
dataSource={this.state.dbnormalTableData.list}
|
||
total={this.state.dbnormalTableData.total}
|
||
onPageChange={(value) => {
|
||
this.handlePageChange(value);
|
||
}}
|
||
// onOk={this.handleOk}
|
||
loading={inspectLoading}
|
||
/>
|
||
)}
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
</div>
|
||
);
|
||
}
|
||
}
|