469 lines
15 KiB
JavaScript
469 lines
15 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
|
||
import { Button, Table, DatePicker, Row, Col, Switch, Modal, Dropdown, Menu } from 'antd';
|
||
|
||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal, WeaSelect, WeaTable } from 'ecCom';
|
||
|
||
import { WeaTableNew } from "comsMobx"
|
||
import CustomTable from '../../../components/customTable'
|
||
import "./index.less";
|
||
const WeaMobxTable = WeaTableNew.WeaTable;
|
||
|
||
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from '../../../components/customTab';
|
||
import ContentWrapper from '../../../components/contentWrapper';
|
||
import SlideModalTitle from '../../../components/slideModalTitle';
|
||
import TipLabel from '../../../components/TipLabel'
|
||
import DefaultSlideForm from './defaultSlideForm'
|
||
import CustomNewModal from './customNewModal'
|
||
import { welfareTypeEnum, paymentScopeEnum } from './enum';
|
||
import CustomPaginationTable from '../../../components/customPaginationTable'
|
||
|
||
|
||
import {
|
||
socialSecurityColumns,
|
||
accumulationFundColumns,
|
||
otherBenefitsColumns,
|
||
CustomBenefitsColumns, dataSource
|
||
} from './columns';
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
import TwoColContent from '../../../components/twoColContent';
|
||
import CopySchemaModal from './copySchemaModal';
|
||
|
||
@inject('programmeStore')
|
||
@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 } = this.props;
|
||
const {doInit} = programmeStore;
|
||
doInit();
|
||
}
|
||
|
||
// 增加编辑功能，重写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(
|
||
{
|
||
title : '',
|
||
key: "moreOperate",
|
||
dataIndex: "moreOperate",
|
||
render: (text, record) => {
|
||
return (
|
||
<Dropdown overlay={<Menu>
|
||
<Menu.Item>
|
||
<a onClick={() => {
|
||
this.onCopy(record);
|
||
}}>复制</a>
|
||
</Menu.Item>
|
||
</Menu>}>
|
||
<i className="icon-coms-more"></i>
|
||
</Dropdown>
|
||
|
||
);
|
||
}
|
||
})
|
||
return newColumns;
|
||
}
|
||
|
||
handleCategoryStatusChange(record, value) {
|
||
const {programmeStore: { updateCustomCategoryStatus }} = this.props;
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: `确认要${value ? '启用' : '停用'}吗`,
|
||
onOk:() => {
|
||
updateCustomCategoryStatus(record.id, value)
|
||
},
|
||
onCancel: () => {
|
||
|
||
},
|
||
});
|
||
}
|
||
|
||
getCustomColumns = (columns) => {
|
||
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 onClick={() => {this.onCustomEdit(record)}}>编辑</a>
|
||
case "is_use":
|
||
return <Switch 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, currentOperate: "update"})
|
||
}
|
||
|
||
onCopy(record) {
|
||
this.setState({
|
||
copyId: record.id,
|
||
copyModalVisible: true
|
||
})
|
||
}
|
||
|
||
onCustomOperatesClick(record, index, operate, flag) {
|
||
switch(operate.text.toString()){
|
||
case '编辑': // 编辑
|
||
this.onCustomEdit(record);
|
||
break;
|
||
}
|
||
}
|
||
|
||
onCustomEdit(record) {
|
||
const { programmeStore: {getCustomForm, setCustomNewVisible, setCustomRequest}} = this.props;
|
||
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]),
|
||
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 } = 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 = [// 右键菜单
|
||
{
|
||
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 = [
|
||
{
|
||
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, getCumCustomForm, 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 } = requestParams
|
||
let request = {
|
||
insuranceScheme: {
|
||
paymentType,
|
||
welfareType: selectedKey,
|
||
schemeName,
|
||
remarks,
|
||
paymentArea
|
||
},
|
||
insuranceSchemeDetailList: [...defaultPersonDataSource, ...defaultCompanyDataSource]
|
||
}
|
||
|
||
if(currentOperate == "add") {
|
||
createScheme(request)
|
||
} else if(currentOperate == "update"){
|
||
request.insuranceScheme.id = requestParams.id
|
||
updateScheme(request)
|
||
}
|
||
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;
|
||
copyScheme({id:copyId, schemeName: copyModalValue})
|
||
this.setState({copyModalVisible : false})
|
||
}
|
||
|
||
const handleSlideClose = () => {
|
||
this.setState({ slideVisiable: false })
|
||
const { programmeStore: {initSlideParms} } = this.props;
|
||
initSlideParms()
|
||
}
|
||
|
||
return (
|
||
<div className="mySalaryBenefitsWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<WeaTop
|
||
title="社保福利方案" // 文字
|
||
icon={<i className='icon-coms-meeting' />} // 左侧图标
|
||
iconBgcolor='#F14A2D' // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
>
|
||
<CustomTab topTab={topTab}
|
||
searchOperationItem={
|
||
<div>
|
||
<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)
|
||
console.log("v:", v)
|
||
}}
|
||
/>
|
||
}
|
||
</div>
|
||
}
|
||
onChange={(v) => {
|
||
setSelectedKey(v)
|
||
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={tablePageInfo.total}
|
||
current={tablePageInfo.pageNum}
|
||
onPageChange={(value) => {
|
||
this.handlePageChange(value)
|
||
}}
|
||
onShowSizeChange={(current,pageSize) => {
|
||
this.pageInfo = {current, pageSize}
|
||
const { programmeStore: {form, getTableDatas, selectedKey} } = this.props;
|
||
getTableDatas(selectedKey, this.pageInfo)
|
||
}}
|
||
/>
|
||
|
||
}
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
{
|
||
this.state.slideVisiable && <WeaSlideModal visible={this.state.slideVisiable}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={'right'}
|
||
measure={'%'}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={this.state.customEdit ? "修改社保方案": "新增社保方案"}
|
||
subTabs={[{title: "基础设置"}]}
|
||
onSave={() => {
|
||
handleOnSave();
|
||
}}
|
||
/>
|
||
}
|
||
content={(<DefaultSlideForm requestParams={requestParams} onChange={(requestParams) => {
|
||
console.log("requestParams:", requestParams);
|
||
setRequestParams(requestParams)
|
||
}}/>)}
|
||
onClose={() => {handleSlideClose()}}
|
||
showMask={true}
|
||
closeMaskOnClick={() => {handleSlideClose()}}
|
||
onAnimationEnd={() => console.log('onAnimationEnd')} />
|
||
}
|
||
|
||
{
|
||
this.state.copyModalVisible && <CopySchemaModal
|
||
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>
|
||
)
|
||
}
|
||
}
|