406 lines
13 KiB
JavaScript
406 lines
13 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
|
||
import { Button, Table, DatePicker, Switch, Modal } from 'antd';
|
||
|
||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal } from 'ecCom';
|
||
import { WeaTableNew } from "comsMobx"
|
||
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from '../../components/customTab';
|
||
import ContentWrapper from '../../components/contentWrapper';
|
||
import StepSlide from '../../components/stepSlide'
|
||
import SlideBaseForm from './slideBaseForm'
|
||
import SlideRefereUser from './slideRefereUser'
|
||
|
||
import { columns, dataSource } from './columns';
|
||
import SalaryItemForm from './salaryItemForm';
|
||
import CalRulesForm from './calcRulesForm';
|
||
import ValidRulesForm from './validRulesForm';
|
||
import SlideModalTitle from '../../components/slideModalTitle'
|
||
import CopyFormModal from './copyFormModal'
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
const WeaTable = WeaTableNew.WeaTable;
|
||
|
||
@inject('ledgerStore')
|
||
@observer
|
||
export default class Ledger extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
stepSlideVisible: false,
|
||
editSlideVisible: false,
|
||
copyFormVisible: false,
|
||
currentStep: 0,
|
||
selectedTab: 0,
|
||
currentReocrd: {},
|
||
searchValue: "",
|
||
step1Request: {}
|
||
}
|
||
}
|
||
|
||
handleSearch(value) {
|
||
const{ ledgerStore: {getTableDatas}} = this.props;
|
||
getTableDatas({name: value})
|
||
}
|
||
|
||
refereUser() {
|
||
this.setState({
|
||
editSlideVisible: true,
|
||
selectedTab: 1
|
||
})
|
||
}
|
||
|
||
onEdit() {
|
||
this.setState({
|
||
editSlideVisible: true
|
||
})
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { ledgerStore : {doInit}} = this.props;
|
||
doInit()
|
||
}
|
||
|
||
|
||
handleItemStatusChange(value, record) {
|
||
const { ledgerStore: { changeLedgerStatus }} = this.props;
|
||
changeLedgerStatus(record.id, value ? 0 : 1);
|
||
}
|
||
|
||
|
||
handleItemClick(record, selectedTab = 0) {
|
||
const { ledgerStore: {setSalarySobId} } = this.props;
|
||
setSalarySobId(record.id)
|
||
this.setState({
|
||
selectedTab,
|
||
editSlideVisible: true,
|
||
request: record
|
||
})
|
||
}
|
||
|
||
// 编辑Slide保存按钮
|
||
handleEditSlideSave() {
|
||
const { selectedTab, step1Request } = this.state;
|
||
const { ledgerStore: {saveLedgerItem, saveAdjustmentRule, saveLedgerBasic, baseInfoRequest}} = this.props;
|
||
if(selectedTab == 0) {
|
||
saveLedgerBasic(baseInfoRequest)
|
||
} else if(selectedTab == 2) {
|
||
saveLedgerItem()
|
||
} else if(selectedTab == 3) {
|
||
saveAdjustmentRule()
|
||
}
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = (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 'name':
|
||
return <a onClick={() => {this.handleItemClick(record)}}>{text}</a>
|
||
case "disable":
|
||
return <Switch checked={text == 0} onChange={(value) => {this.handleItemStatusChange(value, record)}}/>
|
||
case "operate":
|
||
return <a onClick={() => {this.handleItemClick(record, 1)}}>关联人员</a>
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
|
||
}
|
||
}
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
}
|
||
|
||
|
||
onOperatesClick = (record, index, operate, flag) => {
|
||
const { ledgerStore: { deleteLedger }} = this.props;
|
||
switch(operate.index.toString()){
|
||
case "0": // 编辑
|
||
this.handleItemClick(record)
|
||
break;
|
||
case '1': // 复制
|
||
this.setState({
|
||
copyFormVisible: true,
|
||
currentReocrd: record
|
||
})
|
||
break;
|
||
case "3": // 关联人员
|
||
this.handleItemClick(record, 1)
|
||
break;
|
||
case "4": // 删除
|
||
Modal.confirm({
|
||
title: '信息确认',
|
||
content: '确认删除',
|
||
onOk:() => {
|
||
deleteLedger([record.id])
|
||
},
|
||
onCancel: () => {
|
||
|
||
},
|
||
});
|
||
|
||
break;
|
||
}
|
||
};
|
||
|
||
handleCopySave = (value) => {
|
||
const { ledgerStore: { doCopy}} = this.props
|
||
doCopy(this.state.currentReocrd.id, value).then(() => {
|
||
this.setState({copyFormVisible: false})
|
||
})
|
||
}
|
||
|
||
handleNew = () => {
|
||
const { ledgerStore: { initSlideData }} = this.props;
|
||
initSlideData();
|
||
this.setState({stepSlideVisible: true, currentStep: 0})
|
||
}
|
||
|
||
render() {
|
||
const { ledgerStore } = this.props;
|
||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = ledgerStore;
|
||
const { currentStep, selectedTab } = this.state;
|
||
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 = [
|
||
];
|
||
|
||
const renderRightOperation = () => {
|
||
return (
|
||
<div style={{display: "inline-block"}}>
|
||
<Button type="primary" style={{marginRight: "10px"}} onClick={() => this.handleNew()}>新建</Button>
|
||
<WeaInputSearch value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const nextStep = () => {
|
||
const { currentStep } = this.state;
|
||
this.setState({currentStep: currentStep + 1})
|
||
}
|
||
|
||
const prevStep = () => {
|
||
const { currentStep } = this.state;
|
||
this.setState({currentStep: currentStep - 1});
|
||
}
|
||
const steps = [
|
||
"基础设置",
|
||
"关联人员",
|
||
"薪资项目",
|
||
"调薪记薪规则",
|
||
// "校验规则",
|
||
]
|
||
|
||
const handleStep1Save = () => {
|
||
const { step1Request } = this.state;
|
||
const { ledgerStore: {saveLedgerBasic, baseInfoRequest} } = this.props;
|
||
saveLedgerBasic(baseInfoRequest).then(() => {
|
||
nextStep();
|
||
})
|
||
}
|
||
|
||
|
||
const handleStep3Save = () => {
|
||
const { ledgerStore: {saveAdjustmentRule} } = this.props;
|
||
saveAdjustmentRule().then(() => {
|
||
nextStep()
|
||
})
|
||
}
|
||
|
||
const handleStepSave = () => {
|
||
const { currentStep } = this.state;
|
||
const { ledgerStore: { saveLedgerBasic, saveLedgerItem, saveAdjustmentRule, baseInfoRequest }} = this.props;
|
||
if(currentStep == 0) {
|
||
saveLedgerBasic(baseInfoRequest).then(() => {
|
||
nextStep();
|
||
})
|
||
} else if(currentStep == 1) {
|
||
nextStep()
|
||
}else if(currentStep == 2) {
|
||
saveLedgerItem().then(() => {
|
||
nextStep()
|
||
})
|
||
} else if(currentStep == 3) {
|
||
saveAdjustmentRule().then(() => {
|
||
this.setState({stepSlideVisible: false})
|
||
})
|
||
}
|
||
}
|
||
|
||
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()
|
||
}
|
||
onChange={(v) => {
|
||
|
||
}}
|
||
/>
|
||
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
|
||
comsWeaTableStore={tableStore} // table store
|
||
hasOrder={true} // 是否启用排序
|
||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||
|
||
getColumns={this.getColumns}
|
||
onOperatesClick={this.onOperatesClick.bind(this)}
|
||
/>
|
||
{
|
||
this.state.stepSlideVisible && <StepSlide
|
||
visible={this.state.stepSlideVisible}
|
||
steps={steps}
|
||
currentStep={currentStep}
|
||
onCancel={() => {this.setState({stepSlideVisible: false})}}
|
||
customOperate = {
|
||
<div style={{display: "inline-block"}}>
|
||
{
|
||
currentStep == 0 && <Button type="primary" onClick={() => {handleStep1Save()}}>保存并进入下一步</Button>
|
||
}
|
||
{
|
||
currentStep == 1 && <div style={{display: "inline-block"}}>
|
||
<Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
|
||
<Button type="primary" style={{marginLeft: "10px"}} onClick={() => {handleStepSave()}}>下一步</Button>
|
||
</div>
|
||
}
|
||
{
|
||
currentStep == 2 && <div>
|
||
<Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
|
||
<Button type="default" style={{marginLeft: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
|
||
<Button type="primary" style={{marginLeft: '10px'}} onClick={() => {handleStepSave()}}>保存并进入下一步</Button>
|
||
</div>
|
||
}
|
||
{
|
||
currentStep == 3 &&
|
||
<div>
|
||
<Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
|
||
<Button type="primary" onClick={() => {handleStepSave()}}>完成</Button>
|
||
</div>
|
||
|
||
}
|
||
</div>
|
||
}
|
||
title="新建账套"
|
||
content={
|
||
<div>
|
||
{
|
||
currentStep == 0 && <SlideBaseForm />
|
||
}
|
||
{
|
||
currentStep == 1 && <SlideRefereUser />
|
||
}
|
||
{
|
||
currentStep == 2 && <SalaryItemForm />
|
||
}
|
||
{
|
||
currentStep == 3 && <CalRulesForm />
|
||
}
|
||
{/* {
|
||
currentStep == 4 && <ValidRulesForm />
|
||
} */}
|
||
|
||
</div>
|
||
|
||
}
|
||
/>
|
||
}
|
||
|
||
{
|
||
this.state.editSlideVisible &&
|
||
<WeaSlideModal visible={this.state.editSlideVisible}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={'right'}
|
||
measure={'%'}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={"编辑账套"}
|
||
tabs={[{title: '基础设置', key: 0}, {title: "关联人员", key: 1}, {title: "薪资项目", key: 2}, {title: '调薪计薪规则', key: 3}]}
|
||
editable={true}
|
||
selectedTab={selectedTab}
|
||
onSave={() => this.handleEditSlideSave()}
|
||
subItemChange={
|
||
(item) => {this.setState({selectedTab: item.key})}
|
||
}
|
||
/>
|
||
}
|
||
content={<div>
|
||
{
|
||
selectedTab == 0 && <SlideBaseForm edit={true} />
|
||
}
|
||
{
|
||
selectedTab == 1 && <SlideRefereUser edit={true} />
|
||
}
|
||
{
|
||
selectedTab == 2 && <SalaryItemForm edit={true}/>
|
||
}
|
||
{
|
||
selectedTab == 3 && <CalRulesForm edit={true}/>
|
||
}
|
||
{/* {
|
||
selectedTab == 4 && <ValidRulesForm edit={true}/>
|
||
} */}
|
||
</div>}
|
||
onClose={() => this.setState({editSlideVisible: false})}
|
||
showMask={true}
|
||
closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
|
||
}
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
|
||
{
|
||
this.state.copyFormVisible &&
|
||
<CopyFormModal
|
||
visible={this.state.copyFormVisible}
|
||
onSave={(value) => this.handleCopySave(value)}
|
||
onCancel={() => {this.setState({copyFormVisible: false})}}
|
||
/>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
}
|