608 lines
18 KiB
JavaScript
608 lines
18 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
|
||
import { WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
|
||
import { WeaTableNew } from "comsMobx";
|
||
import { renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../../components/customTab";
|
||
import SlideModalTitle from "../../../components/slideModalTitle";
|
||
import TipLabel from "../../../components/TipLabel";
|
||
import DefaultSlideForm from "./defaultSlideForm";
|
||
import CustomNewModal from "./customNewModal";
|
||
import { paymentScopeEnum, welfareTypeEnum } from "./enum";
|
||
import CustomPaginationTable from "../../../components/customPaginationTable";
|
||
import TwoColContent from "../../../components/twoColContent";
|
||
import CopySchemaModal from "./copySchemaModal";
|
||
import "./index.less";
|
||
|
||
const WeaMobxTable = WeaTableNew.WeaTable;
|
||
|
||
@inject("programmeStore", "taxAgentStore", "salaryFileStore")
|
||
@observer
|
||
export default class Programme extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
searchValue: "",
|
||
slideVisiable: false,
|
||
currentOperate: "add",
|
||
copyModalValue: "",
|
||
copyId: "",
|
||
customNewVisible: false,
|
||
customEdit: false
|
||
};
|
||
|
||
this.pageInfo = { current: 1, pageSize: 10 };
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { programmeStore, salaryFileStore } = this.props;
|
||
const { doInit } = programmeStore;
|
||
doInit();
|
||
const { commonEnumList } = salaryFileStore;
|
||
commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = columns => {
|
||
let newColumns = columns.filter(
|
||
item => item.dataIndex !== "id" && item.dataIndex !== "paymentArea"
|
||
);
|
||
|
||
newColumns = newColumns.map(column => {
|
||
let newColumn = column;
|
||
newColumn.render = (text, record, index) => {
|
||
//前端元素转义
|
||
let valueSpan =
|
||
record[newColumn.dataIndex + "span"] !== undefined
|
||
? record[newColumn.dataIndex + "span"]
|
||
: record[newColumn.dataIndex];
|
||
if (newColumn.dataIndex == "id") {
|
||
newColumn.display = false;
|
||
}
|
||
switch (newColumn.dataIndex) {
|
||
case "operate":
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.onEdit(record);
|
||
}}>
|
||
编辑
|
||
</a>
|
||
);
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
|
||
}
|
||
};
|
||
return newColumn;
|
||
});
|
||
|
||
newColumns.push({
|
||
title: "操作",
|
||
dataIndex: "operate",
|
||
render: (text, record) => {
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.onEdit(record);
|
||
}}>
|
||
编辑
|
||
</a>
|
||
);
|
||
}
|
||
});
|
||
newColumns.push({
|
||
key: "moreOperate",
|
||
dataIndex: "moreOperate",
|
||
render: (text, record) => {
|
||
return (
|
||
<Dropdown
|
||
overlay={
|
||
<Menu>
|
||
<Menu.Item>
|
||
<a
|
||
onClick={() => {
|
||
this.onCopy(record);
|
||
}}>
|
||
复制
|
||
</a>
|
||
</Menu.Item>
|
||
{/*暂时隐藏*/}
|
||
<Menu.Item>
|
||
<a
|
||
onClick={() => {
|
||
this.onDelete(record);
|
||
}}>
|
||
删除
|
||
</a>
|
||
</Menu.Item>
|
||
</Menu>
|
||
}>
|
||
<a href="javascript:void(0)" style={{ textDecoration: "none" }}>
|
||
<i
|
||
className="icon-coms-more"
|
||
style={{ fontSize: 18 }}>
|
||
</i>
|
||
</a>
|
||
</Dropdown>
|
||
);
|
||
}
|
||
});
|
||
return newColumns;
|
||
};
|
||
|
||
handleCategoryStatusChange(record, value) {
|
||
const { programmeStore: { updateCustomCategoryStatus } } = this.props;
|
||
Modal.confirm({
|
||
title: "信息确认",
|
||
content: `确认要${value ? "启用" : "停用"}吗`,
|
||
onOk: () => {
|
||
updateCustomCategoryStatus(record.id, value);
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
}
|
||
|
||
getCustomColumns = columns => {
|
||
const { taxAgentStore: { showOperateBtn } } = this.props;
|
||
let newColumns = [];
|
||
newColumns = columns.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 "operate":
|
||
return (
|
||
<a
|
||
href="javascript:void(0);"
|
||
onClick={() => {
|
||
this.onCustomEdit(record);
|
||
}}>
|
||
编辑
|
||
</a>
|
||
);
|
||
case "is_use":
|
||
return (
|
||
<Switch
|
||
disabled={!showOperateBtn}
|
||
checked={text == 1}
|
||
onChange={value => {
|
||
this.handleCategoryStatusChange(record, value);
|
||
}}
|
||
/>
|
||
);
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
|
||
}
|
||
};
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
};
|
||
|
||
onEdit(record) {
|
||
let id = record.id;
|
||
const { programmeStore } = this.props;
|
||
const { getForm, selectedKey } = programmeStore;
|
||
getForm({
|
||
welfareTypeEnum: selectedKey,
|
||
id
|
||
});
|
||
this.setState({ slideVisiable: true, customEdit: true, currentOperate: "update" });
|
||
}
|
||
|
||
onCopy(record) {
|
||
this.setState({
|
||
copyId: record.id,
|
||
copyModalValue: record.schemeName,
|
||
copyModalVisible: true
|
||
});
|
||
}
|
||
|
||
onDelete = (record) => {
|
||
const { programmeStore: { deleteScheme, deleteLoading, selectedKey } } = this.props;
|
||
Modal.confirm({
|
||
title: "确认信息",
|
||
content: "确认删除本条数据吗？",
|
||
confirmLoading: deleteLoading,
|
||
onOk: () => {
|
||
deleteScheme({ ids: [record.id], welfareTypeEnum: selectedKey });
|
||
},
|
||
onCancel: () => {
|
||
}
|
||
});
|
||
};
|
||
|
||
onCustomOperatesClick(record, index, operate, flag) {
|
||
switch (operate.text.toString()) {
|
||
case "编辑": // 编辑
|
||
this.onCustomEdit(record);
|
||
break;
|
||
}
|
||
}
|
||
|
||
onCustomEdit = (record) => {
|
||
const {
|
||
programmeStore: { getCustomForm, setCustomNewVisible, setCustomRequest },
|
||
taxAgentStore: { showOperateBtn }
|
||
} = this.props;
|
||
if (!showOperateBtn) {
|
||
message.warning("请设置编辑权限！");
|
||
return;
|
||
}
|
||
getCustomForm();
|
||
setCustomNewVisible(true);
|
||
this.setState({
|
||
customEdit: true
|
||
});
|
||
setCustomRequest({
|
||
insuranceName: record["insurance_name"],
|
||
id: record.id,
|
||
isUse: record.is_use,
|
||
paymentScope: record["payment_scope"].split(",").map(item => paymentScopeEnum[item]).join(","),
|
||
welfareType: welfareTypeEnum[record.welfare_type]
|
||
});
|
||
};
|
||
|
||
// 页面跳转
|
||
handlePageChange(value) {
|
||
const { programmeStore: { form, getTableDatas, selectedKey } } = this.props;
|
||
this.pageInfo.current = value;
|
||
getTableDatas(selectedKey, this.pageInfo);
|
||
}
|
||
|
||
render() {
|
||
const { programmeStore, taxAgentStore: { showOperateBtn } } = this.props;
|
||
const {
|
||
loading,
|
||
hasRight,
|
||
form,
|
||
condition,
|
||
tableStore,
|
||
showSearchAd,
|
||
getTableDatas,
|
||
doSearch,
|
||
setShowSearchAd
|
||
} = programmeStore;
|
||
const {
|
||
selectedKey,
|
||
setSelectedKey,
|
||
getCustomCategoryList,
|
||
customTableStore,
|
||
customSelectkey,
|
||
setCustomSelectkey,
|
||
requestParams,
|
||
setRequestParams,
|
||
formCondition,
|
||
setCustomNewVisible,
|
||
customNewVisible,
|
||
tableDataSource,
|
||
tableColumns,
|
||
tablePageInfo
|
||
} = programmeStore;
|
||
if (!hasRight && !loading) {
|
||
// 无权限处理
|
||
return renderNoright();
|
||
}
|
||
|
||
const rightMenu = [
|
||
// 右键菜单
|
||
];
|
||
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 = [
|
||
{
|
||
title: "社保",
|
||
viewcondition: "SOCIAL_SECURITY"
|
||
},
|
||
{
|
||
title: "公积金",
|
||
viewcondition: "ACCUMULATION_FUND"
|
||
},
|
||
{
|
||
title: "企业年金及其他福利",
|
||
viewcondition: "OTHER"
|
||
},
|
||
{
|
||
title: "自定义福利",
|
||
viewcondition: "custom"
|
||
}
|
||
];
|
||
|
||
const options = [
|
||
{
|
||
showname: "全部",
|
||
key: ""
|
||
},
|
||
{
|
||
showname: "社保",
|
||
key: "SOCIAL_SECURITY"
|
||
},
|
||
{
|
||
showname: "公积金",
|
||
key: "ACCUMULATION_FUND"
|
||
},
|
||
{
|
||
showname: "企业年金及其他福利",
|
||
key: "OTHER"
|
||
}
|
||
];
|
||
|
||
const handleNewClick = () => {
|
||
const {
|
||
programmeStore: { initSlideParms, getForm, selectedKey }
|
||
} = this.props;
|
||
initSlideParms();
|
||
this.setState({ slideVisiable: true, currentOperate: "add" });
|
||
getForm({ welfareTypeEnum: selectedKey });
|
||
};
|
||
|
||
const handleCustomNewClick = () => {
|
||
const {
|
||
programmeStore: {
|
||
getCustomForm,
|
||
setCustomNewVisible,
|
||
setCustomRequest
|
||
}
|
||
} = this.props;
|
||
getCustomForm();
|
||
setCustomRequest({});
|
||
setCustomNewVisible(true);
|
||
this.setState({ customEdit: false });
|
||
};
|
||
|
||
// const renderSearchOperationItem = () => {
|
||
// const { programmeStore: {setCustomSelectkey, getCustomCategoryList}} = this.props;
|
||
// return
|
||
// }
|
||
|
||
const handleOnSave = () => {
|
||
const { programmeStore } = this.props;
|
||
const { currentOperate } = this.state;
|
||
const {
|
||
selectedKey,
|
||
defaultPersonDataSource,
|
||
defaultCompanyDataSource,
|
||
createScheme,
|
||
requestParams,
|
||
updateScheme
|
||
} = programmeStore;
|
||
let { schemeName, remarks, paymentArea, paymentType, sharedType, taxAgentIds } = requestParams;
|
||
let request = {
|
||
insuranceScheme: {
|
||
paymentType,
|
||
welfareType: selectedKey,
|
||
schemeName,
|
||
remarks,
|
||
paymentArea,
|
||
sharedType,
|
||
taxAgentIds
|
||
},
|
||
insuranceSchemeDetailList: [
|
||
...defaultPersonDataSource,
|
||
...defaultCompanyDataSource
|
||
]
|
||
};
|
||
if (currentOperate == "add") {
|
||
createScheme(request).then(res => {
|
||
if (res.status) this.setState({ slideVisiable: false });
|
||
});
|
||
} else if (currentOperate == "update") {
|
||
request.insuranceScheme.id = requestParams.id;
|
||
updateScheme(request).then(res => {
|
||
if (res.status) this.setState({ slideVisiable: false });
|
||
});
|
||
}
|
||
};
|
||
|
||
const renderCustomRightContent = () => {
|
||
let tipList = [
|
||
"1、可以为社保、公积金、企业年金及其他福利新增自定义的福利项，如：残疾保险等",
|
||
"2、新增自定义福利默认启用，社保福利方案中的自定义福利项均未开启缴纳，当前页面的自定义福利项才可以停用；停用后再新增方案时没有该福利项",
|
||
"3、自定义福利若要缴纳，需要在方案里填写缴纳相关数据"
|
||
];
|
||
return <TipLabel tipList={tipList}/>;
|
||
};
|
||
|
||
const handleCopyModalSave = () => {
|
||
const { programmeStore: { copyScheme } } = this.props;
|
||
const { copyId, copyModalValue } = this.state;
|
||
if (_.isEmpty(this.refs.copyRef.state.value)) {
|
||
this.refs.copyRef.refs.weaError.showError();
|
||
} else {
|
||
copyScheme({ id: copyId, schemeName: copyModalValue }).then(() => {
|
||
this.setState({ copyModalVisible: false });
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleSlideClose = () => {
|
||
this.setState({ slideVisiable: false, customEdit: false });
|
||
const { programmeStore: { initSlideParms } } = this.props;
|
||
initSlideParms();
|
||
};
|
||
|
||
return (
|
||
<div className="mySalaryBenefitsWrapper">
|
||
<WeaTop
|
||
title="社保福利方案" // 文字
|
||
icon={<i className="icon-coms-fa"/>} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={false} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }}>
|
||
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
|
||
<CustomTab
|
||
topTab={topTab}
|
||
searchOperationItem={
|
||
<div>
|
||
{/* 操作按钮权限 */}
|
||
{showOperateBtn &&
|
||
<Button
|
||
type="primary"
|
||
style={{ marginRight: "10px" }}
|
||
onClick={() => {
|
||
if (selectedKey == "custom") {
|
||
handleCustomNewClick();
|
||
} else {
|
||
handleNewClick();
|
||
}
|
||
}}>
|
||
新建
|
||
</Button>}
|
||
|
||
{selectedKey == "custom" &&
|
||
<WeaSelect
|
||
options={options}
|
||
value={customSelectkey}
|
||
style={{ width: "150px" }}
|
||
onChange={v => {
|
||
setCustomSelectkey(v);
|
||
getCustomCategoryList(v);
|
||
}}
|
||
/>}
|
||
</div>
|
||
}
|
||
onChange={v => {
|
||
setSelectedKey(v);
|
||
handleSlideClose();
|
||
if (v == "custom") {
|
||
// 自定义福利
|
||
getCustomCategoryList();
|
||
} else {
|
||
getTableDatas(v);
|
||
}
|
||
}}
|
||
/>
|
||
{selectedKey == "custom"
|
||
? <TwoColContent
|
||
leftContent={
|
||
<WeaMobxTable // table内部做了loading加载处理，页面就不需要再加了
|
||
comsWeaTableStore={tableStore} // table store
|
||
hasOrder={true} // 是否启用排序
|
||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||
getColumns={this.getCustomColumns}
|
||
onOperatesClick={this.onCustomOperatesClick.bind(this)}
|
||
/>
|
||
}
|
||
rightContent={renderCustomRightContent()}
|
||
/>
|
||
: <CustomPaginationTable
|
||
loading={loading}
|
||
columns={this.getColumns(tableColumns)}
|
||
dataSource={tableDataSource}
|
||
total={toJS(tablePageInfo).total}
|
||
current={toJS(tablePageInfo).pageNum}
|
||
pageSize={this.pageInfo.pageSize}
|
||
onPageChange={value => {
|
||
this.handlePageChange(value);
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.pageInfo = { current, pageSize };
|
||
const {
|
||
programmeStore: { form, getTableDatas, selectedKey }
|
||
} = this.props;
|
||
getTableDatas(selectedKey, this.pageInfo);
|
||
}}
|
||
/>}
|
||
</WeaTop>
|
||
<WeaSlideModal
|
||
className="slideOuterWrapper"
|
||
visible={this.state.slideVisiable}
|
||
top={0}
|
||
width={60}
|
||
height={100}
|
||
direction={"right"}
|
||
measure={"%"}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={this.state.customEdit ? "修改" : "新增"}
|
||
subTabs={[{ title: "基础设置" }]}
|
||
editable={true}
|
||
showOperateBtn={showOperateBtn}
|
||
onSave={() => {
|
||
handleOnSave();
|
||
}}
|
||
/>
|
||
}
|
||
content={
|
||
this.state.slideVisiable ?
|
||
<DefaultSlideForm
|
||
customEditVisible={this.state.customEdit}
|
||
requestParams={requestParams}
|
||
onChange={requestParams => {
|
||
setRequestParams(requestParams);
|
||
}}
|
||
/> : null
|
||
}
|
||
onClose={() => {
|
||
handleSlideClose();
|
||
}}
|
||
showMask={true}
|
||
closeMaskOnClick={() => {
|
||
handleSlideClose();
|
||
}}
|
||
/>
|
||
|
||
{this.state.copyModalVisible &&
|
||
<CopySchemaModal
|
||
ref="copyRef"
|
||
title={_.filter(topTab, it => it.viewcondition === selectedKey)[0].title}
|
||
visible={this.state.copyModalVisible}
|
||
value={this.state.copyModalValue}
|
||
onChange={value => this.setState({ copyModalValue: value })}
|
||
onCancel={() => {
|
||
this.setState({ copyModalVisible: false });
|
||
}}
|
||
footer={
|
||
[<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
handleCopyModalSave();
|
||
}}>
|
||
保存
|
||
</Button>]
|
||
}
|
||
/>}
|
||
|
||
{customNewVisible &&
|
||
<CustomNewModal
|
||
visible={customNewVisible}
|
||
condition={formCondition}
|
||
form={form}
|
||
edit={this.state.customEdit}
|
||
onCancel={() => {
|
||
setCustomNewVisible(false);
|
||
}}
|
||
/>}
|
||
</div>
|
||
);
|
||
}
|
||
}
|