461 lines
15 KiB
JavaScript
461 lines
15 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
|
||
import { WeaInputSearch, WeaSlideModal, WeaTop } from "ecCom";
|
||
import { renderLoading } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../components/customTab";
|
||
import SystemSalaryItemModal from "./systemSalaryItemModal";
|
||
import { columns } from "./columns";
|
||
import SlideModalTitle from "../../components/slideModalTitle";
|
||
import CustomSalaryItemSlide from "./customSalaryItemSlide";
|
||
import DeleteSalaryItemModal from "./deleteSalaryItemModal";
|
||
import CustomPaginationTable from "../../components/customPaginationTable";
|
||
import "../socialSecurityBenefits/programme/index.less";
|
||
|
||
@inject("salaryItemStore", "taxAgentStore", "salaryFileStore")
|
||
@observer
|
||
export default class SalaryItem extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
editable: false,
|
||
isAdd: false,
|
||
searchValue: "",
|
||
formalModalVisible: false,
|
||
searchParams: { current: 1, pageSize: 10, total: 0 },
|
||
selectedRowKeys: []
|
||
};
|
||
columns.map(item => {
|
||
if (item.dataIndex == "refere") {
|
||
item.render = () => {
|
||
return (
|
||
<Switch/>
|
||
);
|
||
};
|
||
} else if (item.dataIndex == "cz") {
|
||
item.render = () => {
|
||
return (<div>
|
||
<a style={{ marginRight: "10px" }}>编辑</a>
|
||
<a style={{ marginRight: "10px" }}>删除</a>
|
||
{/* <a>操作日志</a> */}
|
||
</div>);
|
||
};
|
||
|
||
}
|
||
});
|
||
this.record = {};
|
||
}
|
||
|
||
|
||
componentWillMount() { // 初始化渲染页面
|
||
const { salaryItemStore: { getTableDatas }, salaryFileStore, taxAgentStore } = this.props;
|
||
const { commonEnumList } = salaryFileStore;
|
||
const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
|
||
getTaxAgentSelectListAsAdmin();
|
||
commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
|
||
getTableDatas({}).then(res => {
|
||
this.setState({
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
current: res.pageNum,
|
||
total: res.total
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
onEditItem(record, isedit) {
|
||
this.record = record;
|
||
const { salaryItemStore: { getItemForm, setEditSlideVisible } } = this.props;
|
||
this.setState({ editable: isedit, isAdd: false });
|
||
getItemForm(record.id);
|
||
setEditSlideVisible(true);
|
||
}
|
||
|
||
// 删除列表项
|
||
handleDeleteItem(record) {
|
||
const { salaryItemStore: { deleteItemRequest, getTableDatas } } = this.props;
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: "确认删除该条数据吗？",
|
||
onOk: () => {
|
||
deleteItemRequest([record.id]).then(() => {
|
||
getTableDatas({ ...this.state.searchParams }).then(res => {
|
||
this.setState({
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
total: res.total
|
||
}
|
||
});
|
||
});
|
||
});
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = () => {
|
||
const { salaryItemStore, taxAgentStore: { showOperateBtn, showSalaryItemBtn } } = this.props;
|
||
const { tableColumns } = salaryItemStore;
|
||
let columns = tableColumns.map(column => {
|
||
let newColumn = column;
|
||
newColumn.render = (text, record, index) => { //前端元素转义
|
||
let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
|
||
switch (newColumn.dataIndex) {
|
||
case "name":
|
||
return <a onClick={() => {
|
||
this.onEditItem(record, false);
|
||
}}>{text}</a>;
|
||
case "useInEmployeeSalary":
|
||
return <Switch checked={text == 1} disabled/>;
|
||
case "useDefault":
|
||
return <Switch checked={text == 1} disabled/>;
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
|
||
}
|
||
};
|
||
return newColumn;
|
||
});
|
||
columns.push({
|
||
key: "operate",
|
||
title: "操作",
|
||
render: (text, record) => {
|
||
return (
|
||
<a onClick={() => {
|
||
this.onEditItem(record, true);
|
||
}}>{(showOperateBtn || showSalaryItemBtn) ? "编辑" : "查看"}</a>
|
||
);
|
||
}
|
||
});
|
||
{
|
||
showOperateBtn &&
|
||
columns.push({
|
||
title: "",
|
||
key: "moreOperate",
|
||
dataIndex: "moreOperate",
|
||
render: (text, record) => {
|
||
if (record.canDelete) {
|
||
return (
|
||
<Dropdown overlay={<Menu>
|
||
<Menu.Item>
|
||
<a onClick={() => {
|
||
this.handleDeleteItem(record);
|
||
}}>删除</a>
|
||
</Menu.Item>
|
||
</Menu>}>
|
||
<a href="javascript:void(0)" style={{ textDecoration: "none" }}><i className="icon-coms-more"
|
||
style={{ fontSize: 18 }}></i></a>
|
||
</Dropdown>
|
||
);
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
});
|
||
}
|
||
return [{
|
||
title: "序号",
|
||
dataIndex: "index",
|
||
align: "left",
|
||
width: 60,
|
||
render: (text, record, index) => {
|
||
const { current, pageSize } = this.state.searchParams;
|
||
return (current - 1) * pageSize + index + 1;
|
||
}
|
||
}, ...columns];
|
||
};
|
||
|
||
handleSearch(value) {
|
||
const { salaryItemStore: { getTableDatas } } = this.props;
|
||
getTableDatas({ ...this.state.searchParams,current: 1, name: value }).then(res => {
|
||
this.setState({
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
current: 1,
|
||
total: res.total
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
handlePageChange(value) {
|
||
const { salaryItemStore: { getTableDatas } } = this.props;
|
||
getTableDatas({ ...this.state.searchParams, current: value }).then(res => {
|
||
this.setState({
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
current: value,
|
||
total: res.total
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
handleShowSizeChange(searchParams) {
|
||
const { salaryItemStore: { getTableDatas } } = this.props;
|
||
getTableDatas({ ...searchParams });
|
||
}
|
||
|
||
render() {
|
||
const { salaryItemStore, salaryFileStore, taxAgentStore: { showOperateBtn, showSalaryItemBtn, taxAgentAdminOption } } = this.props;
|
||
const { userStatusList } = salaryFileStore;
|
||
const { selectedRowKeys } = this.state;
|
||
const {
|
||
loading,
|
||
form,
|
||
doSearch,
|
||
setShowSearchAd,
|
||
deleteItemRequest, getTableDatas
|
||
} = salaryItemStore;
|
||
const {
|
||
tableDataSource,
|
||
tableColumns,
|
||
systemItemVisible,
|
||
setSystemItemVisible,
|
||
deleteItemVisible,
|
||
setDeleteItemVisible,
|
||
editSlideVisible,
|
||
setEditSlideVisible,
|
||
request
|
||
} = salaryItemStore;
|
||
if (this.getColumns().length === 2) { // 无权限处理
|
||
return renderLoading();
|
||
}
|
||
const batchDelete = () => {
|
||
setDeleteItemVisible(true);
|
||
};
|
||
|
||
const rightMenu = [// 右键菜单
|
||
// {
|
||
// key: "BTN_COLUMN",
|
||
// icon: <i className="icon-coms-Custom"/>,
|
||
// content: "显示列定制",
|
||
// onClick: this.showColumn
|
||
// },
|
||
// {
|
||
// key: "BTN_DEL",
|
||
// icon: <i className="icon-coms-delete"/>,
|
||
// content: "批量删除",
|
||
// onClick: batchDelete
|
||
// }
|
||
];
|
||
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 handleMenuClick = (e) => {
|
||
const { salaryItemStore: { getSysItemList, setEditSlideVisible, initRequest } } = this.props;
|
||
if (e.key == "1") {
|
||
getSysItemList({});
|
||
setSystemItemVisible(true);
|
||
} else if (e.key == "2") {
|
||
this.setState({ editable: true, isAdd: true });
|
||
initRequest();
|
||
setEditSlideVisible(true);
|
||
}
|
||
};
|
||
|
||
const menu = (
|
||
<Menu onClick={handleMenuClick}>
|
||
<Menu.Item key="1">系统薪资项</Menu.Item>
|
||
<Menu.Item key="2">自定义薪资项</Menu.Item>
|
||
</Menu>
|
||
|
||
);
|
||
|
||
const renderRightOperation = () => {
|
||
const { taxAgentStore: { showOperateBtn } } = this.props;
|
||
return (<div style={{ display: "inline-block" }}>
|
||
{
|
||
(showOperateBtn || showSalaryItemBtn) &&
|
||
<Dropdown.Button overlay={menu} type="primary" style={{ marginRight: "10px" }}>新增</Dropdown.Button>
|
||
}
|
||
{
|
||
showOperateBtn &&
|
||
<Button
|
||
type="primary"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => {
|
||
if (!selectedRowKeys.length) {
|
||
message.info("未选中任何数据!");
|
||
return;
|
||
}
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: `确定要将所选的薪资项（共${selectedRowKeys.length}条数据）删除吗？`,
|
||
onOk: () => {
|
||
deleteItemRequest(selectedRowKeys).then(() => {
|
||
getTableDatas({ ...this.state.searchParams }).then(res => {
|
||
this.setState({
|
||
selectedRowKeys: [],
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
total: res.total
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}}>批量删除薪资项</Button>
|
||
}
|
||
<WeaInputSearch value={this.state.searchValue} placeholder={"请输入名称"} onChange={(value) => {
|
||
this.setState({ searchValue: value });
|
||
}} onSearch={(value) => {
|
||
this.handleSearch(value);
|
||
}}/>
|
||
</div>);
|
||
|
||
};
|
||
|
||
// 新建和修改保存的回调
|
||
const handleSlideSave = (continueFlag) => {
|
||
const { salaryItemStore: { saveItem, request, getTableDatas } } = this.props;
|
||
saveItem(request, continueFlag).then(() => {
|
||
getTableDatas({ ...this.state.searchParams }).then(res => {
|
||
this.setState({
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
total: res.total
|
||
}
|
||
});
|
||
});
|
||
});
|
||
};
|
||
|
||
const renderCustomOperate = () => {
|
||
let arrList = [];
|
||
if (this.state.isAdd) {
|
||
arrList = [
|
||
<Button type="primary" onClick={() => {
|
||
handleSlideSave(false);
|
||
}}>保存</Button>,
|
||
<Button type="default" onClick={() => {
|
||
handleSlideSave(true);
|
||
}}>保存并继续创建</Button>
|
||
];
|
||
} else if (this.state.editable) {
|
||
arrList = [
|
||
<Button type="primary" onClick={() => {
|
||
handleSlideSave(false);
|
||
}}>保存</Button>
|
||
];
|
||
}
|
||
return arrList;
|
||
};
|
||
|
||
const handleSaveSlideChange = (value) => {
|
||
const { salaryItemStore: { setRequest } } = this.props;
|
||
setRequest(value);
|
||
};
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: (selectedRowKeys) => this.setState({ selectedRowKeys }),
|
||
getCheckboxProps: record => ({
|
||
disabled: !record.canDelete // Column configuration not to be checked
|
||
})
|
||
};
|
||
return (
|
||
<div className="mySalaryBenefitsWrapper">
|
||
<WeaTop
|
||
title="薪资项目管理" // 文字
|
||
icon={<i className="icon-coms-fa"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={false} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<CustomTab
|
||
searchOperationItem={
|
||
renderRightOperation()
|
||
}
|
||
/>
|
||
<CustomPaginationTable
|
||
rowKey={record => record.id}
|
||
loading={loading}
|
||
rowSelection={rowSelection}
|
||
dataSource={tableDataSource}
|
||
columns={this.getColumns(tableColumns)}
|
||
total={this.state.searchParams.total}
|
||
current={this.state.searchParams.current}
|
||
pageSize={this.state.searchParams.pageSize}
|
||
onPageChange={(value) => {
|
||
this.handlePageChange(value);
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.setState({
|
||
searchParams: {
|
||
...this.state.searchParams,
|
||
current,
|
||
pageSize
|
||
}
|
||
}, () => {
|
||
this.handleShowSizeChange(this.state.searchParams);
|
||
});
|
||
}}
|
||
/>
|
||
|
||
</WeaTop>
|
||
|
||
{
|
||
systemItemVisible && <SystemSalaryItemModal visible={systemItemVisible} onCancel={() => {
|
||
setSystemItemVisible(false);
|
||
}}/>
|
||
}
|
||
|
||
{
|
||
deleteItemVisible && <DeleteSalaryItemModal visible={deleteItemVisible} onCancel={() => {
|
||
setDeleteItemVisible(false);
|
||
}}/>
|
||
}
|
||
|
||
{
|
||
editSlideVisible &&
|
||
<WeaSlideModal
|
||
className="slideOuterWrapper"
|
||
visible={editSlideVisible}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={"right"}
|
||
measure={"%"}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={(this.state.isAdd ? "新建" : "修改") + "自定义薪资项目"}
|
||
editable={false}
|
||
showOperateBtn={showOperateBtn || showSalaryItemBtn}
|
||
customOperate={(showOperateBtn || showSalaryItemBtn) ? renderCustomOperate() : []}
|
||
/>
|
||
}
|
||
content={
|
||
<CustomSalaryItemSlide
|
||
record={this.record} editable={this.state.editable}
|
||
isAdd={this.state.isAdd} request={request}
|
||
userStatusList={userStatusList}
|
||
taxAgentAdminOption={taxAgentAdminOption}
|
||
onChange={(value) => {
|
||
handleSaveSlideChange(value);
|
||
}}/>
|
||
}
|
||
onClose={() => setEditSlideVisible(false)}
|
||
showMask={true}
|
||
closeMaskOnClick={() => setEditSlideVisible(false)}/>
|
||
}
|
||
</div>
|
||
);
|
||
}
|
||
}
|