368 lines
12 KiB
JavaScript
368 lines
12 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
|
||
import { Button, Table, DatePicker, Switch, Menu, Dropdown, Modal } from 'antd';
|
||
// import { WeaTableNew } from "comsMobx"
|
||
|
||
import { WeaTable, WeaSlideModal, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch } from 'ecCom';
|
||
|
||
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from '../../components/customTab';
|
||
import ContentWrapper from '../../components/contentWrapper';
|
||
import SystemSalaryItemModal from './systemSalaryItemModal'
|
||
import { columns, dataSource } from './columns';
|
||
import SlideModalTitle from "../../components/slideModalTitle"
|
||
import CustomSalaryItemSlide from './customSalaryItemSlide'
|
||
import DeleteSalaryItemModal from './deleteSalaryItemModal';
|
||
import FormalFormModal from './formalFormModal';
|
||
import CustomPaginationTable from '../../components/customPaginationTable';
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
|
||
@inject('salaryItemStore')
|
||
@observer
|
||
export default class SalaryItem extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
editable: false,
|
||
isAdd: false,
|
||
searchValue: "",
|
||
formalModalVisible: false
|
||
}
|
||
this.searchParams = {current: 1, pageSize: 10}
|
||
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: { doInit }} = this.props;
|
||
doInit();
|
||
}
|
||
|
||
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}} = this.props;
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: '确认删除',
|
||
onOk:() => {
|
||
deleteItemRequest([record.id])
|
||
},
|
||
onCancel: () => {
|
||
},
|
||
});
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = () => {
|
||
const { salaryItemStore } = 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)}}>编辑</a>
|
||
)
|
||
}
|
||
})
|
||
|
||
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>}>
|
||
<i className="icon-coms-more"></i>
|
||
</Dropdown>
|
||
);
|
||
} else {
|
||
return ""
|
||
}
|
||
}
|
||
})
|
||
|
||
return columns
|
||
}
|
||
|
||
|
||
// onOperatesClick = (record, index, operate, flag) => {
|
||
|
||
// switch(operate.index.toString()){
|
||
// case '0': // 编辑
|
||
// this.onEditItem(record, true);
|
||
// break;
|
||
// case "1": // 删除
|
||
|
||
// break;
|
||
// }
|
||
// };
|
||
|
||
|
||
|
||
|
||
handleSearch(value) {
|
||
const { salaryItemStore: {getTableDatas}} = this.props;
|
||
this.searchParams = {name: value, current: 1}
|
||
getTableDatas(this.searchParams)
|
||
}
|
||
|
||
|
||
handlePageChnage(value) {
|
||
this.searchParams.current = value;
|
||
const { salaryItemStore: {getTableDatas}} = this.props;
|
||
getTableDatas(this.searchParams)
|
||
}
|
||
|
||
handleShowSizeChange(searchParams) {
|
||
const { salaryItemStore: {getTableDatas}} = this.props;
|
||
getTableDatas(searchParams)
|
||
}
|
||
|
||
render() {
|
||
const { salaryItemStore } = this.props;
|
||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = salaryItemStore;
|
||
const { tableDataSource, tableColumns, systemItemVisible, setSystemItemVisible, deleteItemVisible, setDeleteItemVisible, deleteItemList, editSlideVisible, setEditSlideVisible, request, pageInfo } = salaryItemStore
|
||
const { formalModalVisible} = this.state;
|
||
if (!hasRight && !loading) { // 无权限处理
|
||
return renderNoright();
|
||
}
|
||
|
||
const batchDelete = () => {
|
||
// deleteItemList({})
|
||
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 topTab = [
|
||
];
|
||
|
||
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 = () => {
|
||
return (<div style={{display: "inline-block"}}>
|
||
<Dropdown.Button overlay={menu} type="primary" style={{marginRight: "10px"}}>新增</Dropdown.Button>
|
||
<WeaInputSearch value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
|
||
</div>)
|
||
|
||
}
|
||
|
||
// 新建和修改保存的回调
|
||
const handleSlideSave = (continueFlag) => {
|
||
const { salaryItemStore: {saveItem, request}} = this.props;
|
||
if(this.state.editable) { // 修改
|
||
saveItem(request, continueFlag, this.searchParams);
|
||
} else { // 新建
|
||
saveItem(request, continueFlag)
|
||
}
|
||
}
|
||
|
||
const renderCustomOperate = () => {
|
||
return (
|
||
|
||
<div>
|
||
{
|
||
this.state.isAdd ? <div>
|
||
<Button type="primary" style={{marginRight: "10px"}} onClick={() => {handleSlideSave(false)}}>保存</Button>
|
||
<Button type="default" onClick={() => {handleSlideSave(true)}}>保存并继续创建</Button>
|
||
</div> :
|
||
this.state.editable ? <div>
|
||
<Button type="primary" style={{marginRight: "10px"}} onClick={() => {handleSlideSave(false)}}>保存</Button>
|
||
</div> :
|
||
""
|
||
}
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const handleSaveSlideChange = (value) => {
|
||
const { salaryItemStore:{setRequest}} = this.props;
|
||
setRequest(value)
|
||
}
|
||
|
||
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
|
||
searchOperationItem={
|
||
renderRightOperation()
|
||
}
|
||
/>
|
||
|
||
{/* <WeaTable // table内部做了loading加载处理，页面就不需要再加了
|
||
comsWeaTableStore={tableStore} // table store
|
||
hasOrder={true} // 是否启用排序
|
||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||
getColumns={this.getColumns}
|
||
onOperatesClick={this.onOperatesClick.bind(this)}
|
||
/> */}
|
||
|
||
<CustomPaginationTable
|
||
loading={loading}
|
||
dataSource={tableDataSource}
|
||
columns={this.getColumns(tableColumns)}
|
||
total={pageInfo.total}
|
||
current={pageInfo.pageNum}
|
||
pageSize={this.searchParams.pageSize}
|
||
onPageChange={(value) => {
|
||
this.handlePageChnage(value)
|
||
}}
|
||
onShowSizeChange={(current, pageSize) => {
|
||
this.searchParams.current = current;
|
||
this.searchParams.pageSize = pageSize;
|
||
this.handleShowSizeChange(this.searchParams)
|
||
}}
|
||
/>
|
||
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
{
|
||
systemItemVisible && <SystemSalaryItemModal visible={systemItemVisible} onCancel={() => {setSystemItemVisible(false)}}/>
|
||
}
|
||
|
||
{
|
||
deleteItemVisible && <DeleteSalaryItemModal visible={deleteItemVisible} onCancel={() => {setDeleteItemVisible(false)}}/>
|
||
}
|
||
|
||
{
|
||
editSlideVisible &&
|
||
<WeaSlideModal visible={editSlideVisible}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={'right'}
|
||
measure={'%'}
|
||
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={(this.state.isAdd ? "新建" : "修改") + "自定义薪资项目"}
|
||
editable={false}
|
||
customOperate={renderCustomOperate()}
|
||
subItemChange={
|
||
(item) => {this.setState({selectedTab: item.key})}
|
||
}
|
||
/>
|
||
}
|
||
content={<CustomSalaryItemSlide record={this.record} editable={this.state.editable} isAdd={this.state.isAdd} request={request} onChange={(value) => {handleSaveSlideChange(value)}}/>}
|
||
onClose={() => setEditSlideVisible(false)}
|
||
showMask={true}
|
||
closeMaskOnClick={() => setEditSlideVisible(false)} />
|
||
|
||
}
|
||
|
||
</div>
|
||
)
|
||
}
|
||
}
|