472 lines
14 KiB
JavaScript
472 lines
14 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
|
||
import { Button, Table, Dropdown, Menu, Modal, message, Spin } from "antd";
|
||
|
||
import { WeaTop, WeaTab, WeaRightMenu, WeaDatePicker, WeaTable } from "ecCom";
|
||
|
||
import { renderNoright, getSearchs } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../../components/customTab";
|
||
import ContentWrapper from "../../../components/contentWrapper";
|
||
import Accountdialog from "./components/accountDialog";
|
||
import AbnormalDrawer from "./components/abnormalDrawer";
|
||
import CustomPaginationTable from '../../../components/customPaginationTable'
|
||
import moment from "moment";
|
||
import _ from "lodash";
|
||
|
||
// import { columns, dataSource } from './columns';
|
||
import "./index.less";
|
||
|
||
@inject("standingBookStore")
|
||
@observer
|
||
export default class StandingBook extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
tableParams: {
|
||
startTime: moment(new Date()).subtract(3,'months').startOf('month').format('YYYY-MM'),
|
||
endTime: moment(new Date()).subtract(-3,'months').startOf('month').format('YYYY-MM')
|
||
},
|
||
current: 1,
|
||
dialogProps: {
|
||
title: "",
|
||
visible: false,
|
||
},
|
||
drawerProps: {
|
||
title: "",
|
||
visible: false,
|
||
},
|
||
tableData: {
|
||
list: [],
|
||
columns: [],
|
||
total: 0,
|
||
},
|
||
dbnormalTableData: {
|
||
list: [],
|
||
total: 0,
|
||
},
|
||
};
|
||
this.payload = {}
|
||
this.pageInfo = {current: 1, pageSize: 10}
|
||
}
|
||
|
||
componentDidMount() {
|
||
const { current } = this.state;
|
||
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 } = r;
|
||
return (
|
||
<a
|
||
href="javascript:;"
|
||
className="linkTo"
|
||
onClick={() => this.handleGoDetail(billMonth)}>
|
||
{text}
|
||
</a>
|
||
);
|
||
},
|
||
};
|
||
}
|
||
return { ...it };
|
||
});
|
||
this.setState({
|
||
tableData: {
|
||
list,
|
||
columns: [
|
||
...columns,
|
||
{
|
||
title: "操作",
|
||
dataIndex: "action",
|
||
key: "action",
|
||
render: (text, r) => {
|
||
const { billStatus, billMonth } = r;
|
||
return (
|
||
<React.Fragment>
|
||
{billStatus === "未归档" && (
|
||
<a
|
||
href="javascript:;"
|
||
className="linkTo"
|
||
onClick={() => this.handleGoDetail(billMonth)}>
|
||
{" "}
|
||
核算{" "}
|
||
</a>
|
||
)}
|
||
{billStatus === "未归档" && (
|
||
<Dropdown
|
||
overlay={
|
||
<Menu
|
||
onClick={({ key }) =>
|
||
this.handleOperate({ key, billMonth })
|
||
}>
|
||
<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 })
|
||
}>
|
||
<Menu.Item key="view">查看</Menu.Item>
|
||
{/* <Menu.Item key="operate">操作日志</Menu.Item> */}
|
||
</Menu>
|
||
}>
|
||
<i className="icon-coms-more more" />
|
||
</Dropdown>
|
||
)}
|
||
</React.Fragment>
|
||
);
|
||
},
|
||
},
|
||
],
|
||
total,
|
||
},
|
||
current: pageNum,
|
||
});
|
||
});
|
||
};
|
||
|
||
// 异常详情列表
|
||
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) => {
|
||
if(detail) {
|
||
window.open(
|
||
`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/standingBookDetail?type=${detail}&billMonth=${billMonth}`
|
||
);
|
||
} else {
|
||
window.open(
|
||
`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/standingBookDetail?billMonth=${billMonth}`
|
||
);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
current: this.state.current,
|
||
});
|
||
}, 3000)
|
||
};
|
||
handleOperate = (payload) => {
|
||
const { siaccountFile, siaccountDelete, deleteLoading } =
|
||
this.props.standingBookStore;
|
||
const { key, billMonth } = payload;
|
||
switch (key) {
|
||
case "archive":
|
||
Modal.confirm({
|
||
title: "确认信息",
|
||
content: "确认要归档吗？",
|
||
onOk: () => {
|
||
siaccountFile({ billMonth }).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 }).then(() => {
|
||
message.success("删除成功");
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
current: this.state.current,
|
||
});
|
||
});
|
||
},
|
||
onCancel: () => {},
|
||
});
|
||
break;
|
||
case "view":
|
||
this.handleGoDetail(billMonth, "detail");
|
||
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(() => {
|
||
message.success("核算成功");
|
||
this.handleClose();
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
current: this.state.current,
|
||
});
|
||
this.handleGoDetail(moment(billMonth).format("YYYY-MM"));
|
||
});
|
||
};
|
||
|
||
handleClose = () => {
|
||
this.setState({
|
||
dialogProps: {
|
||
...this.state.dialogProps,
|
||
title: "",
|
||
visible: false,
|
||
},
|
||
});
|
||
};
|
||
|
||
handleChangeMonth = (type, val) => {
|
||
this.setState({
|
||
tableParams: {
|
||
...this.state.tableParams,
|
||
[type]: val,
|
||
},
|
||
});
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
[type]: val,
|
||
current: this.state.current,
|
||
});
|
||
};
|
||
|
||
handlePageChange(value) {
|
||
this.setState({current: value})
|
||
this.pageInfo.current = value;
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
...this.pageInfo,
|
||
});
|
||
}
|
||
|
||
handleShowSizeChange(pageInfo) {
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
...pageInfo,
|
||
});
|
||
}
|
||
|
||
render() {
|
||
const { standingBookStore } = this.props;
|
||
const {
|
||
inspectLoading,
|
||
loading,
|
||
hasRight,
|
||
form,
|
||
condition,
|
||
tableStore,
|
||
showSearchAd,
|
||
getTableDatas,
|
||
doSearch,
|
||
setShowSearchAd,
|
||
} = 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,
|
||
};
|
||
const adBtn = [
|
||
// 高级搜索内部按钮
|
||
<Button type="primary" onClick={doSearch}>
|
||
搜索
|
||
</Button>,
|
||
<Button type="ghost" onClick={() => form.resetForm()}>
|
||
重置
|
||
</Button>,
|
||
<Button type="ghost" onClick={() => setShowSearchAd(false)}>
|
||
取消
|
||
</Button>,
|
||
];
|
||
|
||
const topTab = [];
|
||
|
||
const renderSearchOperationItem = () => {
|
||
return <div></div>;
|
||
};
|
||
|
||
const pagination = {
|
||
total,
|
||
current: this.state.current,
|
||
showTotal: (total) => `共 ${total} 条`,
|
||
onChange: (current) => {
|
||
this.setState({ current });
|
||
this.getCommonList({
|
||
...this.state.tableParams,
|
||
current,
|
||
});
|
||
},
|
||
};
|
||
|
||
return (
|
||
<div className="standingbookWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<WeaTop
|
||
title="社保福利台账" // 文字
|
||
icon={<i className="icon-coms-meeting" />} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
buttons={rightBtns}
|
||
// showDropIcon={true} // 是否显示下拉按钮
|
||
// dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
// dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<div className="billDateWrapper">
|
||
<div>账单月份：</div>
|
||
<WeaDatePicker
|
||
value={startTime}
|
||
format="YYYY-MM"
|
||
onChange={(val) => this.handleChangeMonth("startTime", val)}
|
||
/>
|
||
<span className="to">至</span>
|
||
<WeaDatePicker
|
||
value={endTime}
|
||
format="YYYY-MM"
|
||
onChange={(val) => this.handleChangeMonth("endTime", val)}
|
||
/>
|
||
</div>
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
columns={_.filter(columns, (it) => it.dataIndex !== "id")}
|
||
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)
|
||
}}
|
||
/>
|
||
|
||
{dialogProps.visible && (
|
||
<Accountdialog
|
||
{...dialogProps}
|
||
onCancel={() => this.handleClose()}
|
||
onOk={this.handleOk}
|
||
loading={loading}
|
||
/>
|
||
)}
|
||
{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>
|
||
);
|
||
}
|
||
}
|