qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

薪资账套周期联动

This commit is contained in:
liyongshun 2022-07-04 19:03:14 +08:00
parent c2757fd1f4
commit f762fd5a9a
9 changed files with 571 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
pc4mobx/hrmSalary/pages/calculateDetail/index.js
View File

@ -1,11 +1,11 @@
import React from "react";
import UserSure from "./userSure";
import { inject, observer } from "mobx-react";
import {inject, observer} from "mobx-react";
import CustomTab from "../../components/customTab";
import SalaryDetail from "./salaryDetail";
import { Button, Menu, Dropdown, Modal, message } from "antd";
import { WeaInputSearch } from "ecCom";
import { getQueryString } from "../../util/url";
import {Button, Dropdown, Menu, message, Modal} from "antd";
import {WeaInputSearch} from "ecCom";
import {getQueryString} from "../../util/url";
import AcctResultImportModal from "./acctResult/importModal/acctResultImportModal";
import ProgressModal from "../../components/progressModal";
@ -28,15 +28,15 @@ export default class CalculateDetail extends React.Component {
componentWillMount() {
let id = getQueryString("id");
this.id = id;
const { calculateStore: { checkTaxAgent } } = this.props;
const {calculateStore: {checkTaxAgent}} = this.props;
checkTaxAgent(this.id);
let modalParam = { ...this.state.modalParam, salaryAcctRecordId: id };
this.setState({ modalParam });
let modalParam = {...this.state.modalParam, salaryAcctRecordId: id};
this.setState({modalParam});
}
// 核算点击事件
handleAccount() {
const { calculateStore } = this.props;
const {calculateStore} = this.props;
const {
acctresultAccounting,
acctResultList,
@ -46,7 +46,7 @@ export default class CalculateDetail extends React.Component {
title: "信息确认",
content: "点击核算，公式项将按照公式逻辑核算，核算结果将覆盖原数据",
onOk: () => {
this.setState({ progress: 0 });
this.setState({progress: 0});
acctresultAccounting(this.id).then(() => {
this.setState({
progressVisible: true
@ -73,12 +73,13 @@ export default class CalculateDetail extends React.Component {
});
message.error(data.message);
}
this.setState({ progress: Number(progress) * 100 });
this.setState({progress: Number(progress) * 100});
});
}, 1000);
});
},
onCancel() {}
onCancel() {
}
});
}
@ -92,10 +93,10 @@ export default class CalculateDetail extends React.Component {
} else if (e.key == "2") {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/compareDetail?id=" +
this.id
this.id
);
} else if (e.key == "3") {
const { calculateStore: { exportAll } } = this.props;
const {calculateStore: {exportAll}} = this.props;
exportAll(this.id);
}
};
@ -109,7 +110,7 @@ export default class CalculateDetail extends React.Component {
// 核算结果搜索
handleSearch(value) {
const { calculateStore: { acctResultList } } = this.props;
const {calculateStore: {acctResultList}} = this.props;
acctResultList(this.id, value);
}
@ -121,9 +122,9 @@ export default class CalculateDetail extends React.Component {
}
render() {
const { selectedKey, modalParam, acctResultImportVisiable } = this.state;
const { calculateStore } = this.props;
const { calculateProgress } = calculateStore;
const {selectedKey, modalParam, acctResultImportVisiable} = this.state;
const {calculateStore} = this.props;
const {calculateProgress} = calculateStore;
const menu = (
<Menu onClick={this.handleMenuClick.bind(this)}>
@ -136,21 +137,26 @@ export default class CalculateDetail extends React.Component {
const renderRightOperation = () => {
if (selectedKey == "1") {
return (
<div style={{ display: "inline-block" }}>
<div style={{display: "inline-block"}}>
<Button
type="primary"
style={{ marginRight: "10px" }}
style={{marginRight: "10px"}}
onClick={() => this.handleAccount()}>
核算
</Button>
<Button
style={{marginRight: "10px"}}
onClick={() => console.log(111)}>
校验
</Button>
{/* <Button type="default" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>校验</Button> */}
<Dropdown.Button style={{ marginRight: "10px" }} overlay={menu}>
<Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>
更多
</Dropdown.Button>
<WeaInputSearch
value={this.state.searchValue}
onChange={value => {
this.setState({ searchValue: value });
this.setState({searchValue: value});
}}
onSearch={value => {
this.handleSearch(value);
@ -173,17 +179,17 @@ export default class CalculateDetail extends React.Component {
];
return (
<div style={{ overflowY: "scroll", height: "100%" }}>
<div style={{overflowY: "scroll", height: "100%"}}>
<CustomTab
topTab={topTab}
searchOperationItem={renderRightOperation()}
onChange={v => {
this.setState({ selectedKey: v });
this.setState({selectedKey: v});
}}
/>
{selectedKey == 0 && <UserSure />}
{selectedKey == 0 && <UserSure/>}
{selectedKey == 1 &&
<SalaryDetail employeeName={this.state.searchValue} />}
<SalaryDetail employeeName={this.state.searchValue}/>}
{acctResultImportVisiable &&
<AcctResultImportModal
visiable={acctResultImportVisiable}
@ -202,7 +208,7 @@ export default class CalculateDetail extends React.Component {
<ProgressModal
visible={this.state.progressVisible}
onCancel={() => {
this.setState({ progressVisible: false, progress: 0 });
this.setState({progressVisible: false, progress: 0});
}}
progress={this.state.progress}
/>}

12
pc4mobx/hrmSalary/pages/calculateDetail/salaryDetail.js
View File

@ -4,7 +4,7 @@ import { WeaHelpfulTip, WeaSlideModal, WeaTable } from 'ecCom'
import { Table } from 'antd'
import WarningModal from './warningModal'
import "./index.less"
import EditSalaryDetail from './editSalaryDetail'
import EditSalaryDetail from './editSalaryDetail'
import SlideModalTitle from "../../components/slideModalTitle"
import ImportModal from '../../components/importModal'
import { columns } from '../salaryItem/columns'
@ -61,7 +61,7 @@ export default class SalaryDetail extends React.Component {
// 获取列表的列
getColumns() {
const { calculateStore: {acctResultListColumns }} = this.props;
let columns = acctResultListColumns ? [...acctResultListColumns] : []
let columns = acctResultListColumns ? [...acctResultListColumns] : []
columns = columns.filter(item => item.hide == "FALSE").map(item => {
let result = {...item}
result.title = item.text;
@ -147,10 +147,10 @@ export default class SalaryDetail extends React.Component {
引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
/>
{/* <span className="warningspan" onClick={() => {this.setState({visible: true})}}>校验异常：0</span> */}
<span className="warningspan" onClick={() => {this.setState({visible: true})}}>校验异常：0</span>
</div>
<div className="tableWrapper">
<CustomPaginationTable
<CustomPaginationTable
loading={loading}
dataSource={acctResultListDateSource}
columns={this.getColumns()}
@ -167,7 +167,7 @@ export default class SalaryDetail extends React.Component {
this.pageInfo = {current, pageSize}
this.handleShowSizeChange(this.pageInfo)
}}
/>
/>
</div>
<WarningModal visible={this.state.visible} onCancel={() => {this.setState({visible: false})}}/>
{
@ -178,7 +178,7 @@ export default class SalaryDetail extends React.Component {
direction={'right'}
measure={'%'}
title={
<SlideModalTitle
<SlideModalTitle
subtitle={"编辑薪资"}
editable={true}
showOperateBtn={showOperateBtn}

52
pc4mobx/hrmSalary/pages/calculateDetail/warningModal.js
View File

@ -1,32 +1,32 @@
import React from 'react'
import { Modal } from 'antd'
import { Button, Menu, Dropdown, Table } from "antd"
import { warningModalColumns, dataSource } from './columns'
import React from "react";
import {Button, Dropdown, Menu, Modal, Table} from "antd";
import {dataSource, warningModalColumns} from "./columns";
export default class WarningModal extends React.Component {
render() {
const menu = (
<Menu>
<Menu.Item key="1">导出所选</Menu.Item>
</Menu>
);
return (
<Modal width={800} footer={null} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
<div style={{borderBottom: "1px solid #eee", height: "47px", lineHeight: "47px"}}>
<span style={{fontSize: "14px", color: "#666"}}>验证结果</span>
<div style={{display: "inline-block", float: "right", marginRight: "40px"}}>
<Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
<Button type='default' style={{marginLeft: "10px"}}>忽略所有</Button>
</div>
</div>
<div style={{minHeight: "400px", marginTop: "10px"}}>
<Table dataSource={dataSource} columns={warningModalColumns} />
</div>
</Modal>
)
}
render() {
const menu = (
<Menu>
<Menu.Item key="1">导出所选</Menu.Item>
</Menu>
);
return (
<Modal width={800} footer={null} visible={this.props.visible} onCancel={() => {
this.props.onCancel();
}}>
<div style={{borderBottom: "1px solid #eee", height: "47px", lineHeight: "47px"}}>
<span style={{fontSize: "14px", color: "#666"}}>验证结果</span>
<div style={{display: "inline-block", float: "right", marginRight: "40px"}}>
<Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
<Button type="default" style={{marginLeft: "10px"}}>忽略所有</Button>
</div>
</div>
<div style={{minHeight: "400px", marginTop: "10px"}}>
<Table dataSource={dataSource} columns={warningModalColumns}/>
</div>
</Modal>
);
}
}

93
pc4mobx/hrmSalary/pages/ledger/addValidRuleModal.js Normal file
View File

@ -0,0 +1,93 @@
/*
* Author: 黎永顺
* name: 新增校验规则
* Description:
* Date: 2022-07-04 11:53:34
*/
import React, {Component} from "react";
import {Button, Col, message, Row} from "antd";
import {WeaDialog, WeaFormItem, WeaInput, WeaTextarea} from "ecCom";
import "./index.less";
class AddValidRuleModal extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
name: ""
};
}
handleChange = (value) => {
this.setState({
value
});
};
handleSubmit = () => {
if (!this.validateForm()) return;
console.log(111);
};
validateForm = () => {
const {name, value} = this.state;
if (_.isEmpty(name)) {
message.error("请填写公式名称");
return false;
}
if (_.isEmpty(value)) {
message.error("请填写公式内容");
return false;
}
return true;
};
render() {
const {value, name} = this.state;
return (
<WeaDialog
className="addRule-wrapper"
initLoadCss
resize
destroyBodyOnClose
onCancel={() => this.props.onCancel()}
title={"函数公式"}
visible={this.props.visible}
style={{width: 800, maxHeight: "70vh", overflow: "auto"}}
hasScroll
buttons={[
<Button type="primary" onClick={this.handleSubmit}>保存</Button>,
<Button type="ghost" onClick={() => this.props.onCancel()}>取消</Button>
]}
>
<Row className="addRule-top-row">
<Col span={8}>
<WeaFormItem labelCol={{span: 8}} wrapperCol={{span: 16}} className="iteamClass" label={"公式名称"}>
<WeaInput hasBorder={true} value={name} onChange={(name) => this.setState({name})}
placeholder={"请输入公式名称"}/>
</WeaFormItem>
</Col>
</Row>
<Row>
<Col span={24}>
<WeaTextarea
ref={(input) => this.contentProps = input}
minRows={8}
maxRows={8}
value={value}
onChange={(value) => this.handleChange(value)}
noResize={true}
style={{fontSize: "14px", lineHeight: 1.2}}
/>
</Col>
</Row>
<Row>
<Col span={12}>
</Col>
<Col span={12}>
</Col>
</Row>
</WeaDialog>
);
}
}
export default AddValidRuleModal;

179
pc4mobx/hrmSalary/pages/ledger/index.js
View File

@ -1,26 +1,14 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import {inject, observer} from "mobx-react";
import { Button, Table, DatePicker, Switch, Modal, Dropdown, Menu } from "antd";
import {Button, DatePicker, Dropdown, Menu, Modal, Switch} from "antd";
import {
WeaTop,
WeaTab,
WeaRightMenu,
WeaRangePicker,
WeaInputSearch,
WeaSlideModal,
WeaTable
} from "ecCom";
import { renderNoright, getSearchs } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import {WeaInputSearch, WeaRightMenu, WeaSlideModal, WeaTable, WeaTop} from "ecCom";
import {renderNoright} 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 } from "./columns";
import SalaryItemForm from "./salaryItemForm";
import CalRulesForm from "./calcRulesForm";
import ValidRulesForm from "./validRulesForm";
@ -28,7 +16,7 @@ import SlideModalTitle from "../../components/slideModalTitle";
import CopyFormModal from "./copyFormModal";
import "./index.less";
const { MonthPicker } = DatePicker;
const {MonthPicker} = DatePicker;
@inject("ledgerStore", "taxAgentStore")
@observer
@ -50,8 +38,8 @@ export default class Ledger extends React.Component {
}
handleSearch(value) {
const { ledgerStore: { getTableDatas } } = this.props;
getTableDatas({ name: value });
const {ledgerStore: {getTableDatas}} = this.props;
getTableDatas({name: value});
}
refereUser() {
@ -69,20 +57,20 @@ export default class Ledger extends React.Component {
componentWillMount() {
const {
ledgerStore: { doInit },
taxAgentStore: { fetchTaxAgentOption }
ledgerStore: {doInit},
taxAgentStore: {fetchTaxAgentOption}
} = this.props;
doInit();
fetchTaxAgentOption();
}
handleItemStatusChange(value, record) {
const { ledgerStore: { changeLedgerStatus } } = this.props;
const {ledgerStore: {changeLedgerStatus}} = this.props;
changeLedgerStatus(record.id, value ? 0 : 1);
}
handleItemClick(record, selectedTab = 0) {
const { ledgerStore: { setSalarySobId } } = this.props;
const {ledgerStore: {setSalarySobId}} = this.props;
setSalarySobId(record.id);
this.setState({
selectedTab,
@ -93,7 +81,7 @@ export default class Ledger extends React.Component {
// 编辑Slide保存按钮
handleEditSlideSave() {
const { selectedTab, step1Request } = this.state;
const {selectedTab, step1Request} = this.state;
const {
ledgerStore: {
saveLedgerItem,
@ -151,7 +139,7 @@ export default class Ledger extends React.Component {
</a>
);
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />;
return <div dangerouslySetInnerHTML={{__html: valueSpan}}/>;
}
};
return newColumn;
@ -160,7 +148,7 @@ export default class Ledger extends React.Component {
};
onOperatesClick = (record, type) => {
const { ledgerStore: { deleteLedger } } = this.props;
const {ledgerStore: {deleteLedger}} = this.props;
switch (type.toString()) {
case "0": // 编辑
this.handleItemClick(record);
@ -181,7 +169,8 @@ export default class Ledger extends React.Component {
onOk: () => {
deleteLedger([record.id]);
},
onCancel: () => {}
onCancel: () => {
}
});
break;
@ -189,20 +178,20 @@ export default class Ledger extends React.Component {
};
handleCopySave = value => {
const { ledgerStore: { doCopy } } = this.props;
doCopy({ id: this.state.currentReocrd.id, ...value }).then(() => {
this.setState({ copyFormVisible: false });
const {ledgerStore: {doCopy}} = this.props;
doCopy({id: this.state.currentReocrd.id, ...value}).then(() => {
this.setState({copyFormVisible: false});
});
};
handleNew = () => {
const { ledgerStore: { initSlideData } } = this.props;
const {ledgerStore: {initSlideData}} = this.props;
initSlideData();
this.setState({ stepSlideVisible: true, currentStep: 0 });
this.setState({stepSlideVisible: true, currentStep: 0});
};
render() {
const { ledgerStore, taxAgentStore } = this.props;
const {ledgerStore, taxAgentStore} = this.props;
const {
loading,
dataSource,
@ -219,9 +208,9 @@ export default class Ledger extends React.Component {
setShowSearchAd,
baseInfoRequest
} = ledgerStore;
const { showOperateBtn } = taxAgentStore;
const { canEdit } = baseInfoRequest;
const { currentStep, selectedTab } = this.state;
const {showOperateBtn} = taxAgentStore;
const {canEdit} = baseInfoRequest;
const {currentStep, selectedTab} = this.state;
if (!hasRight && !loading) {
// 无权限处理
return renderNoright();
@ -231,7 +220,7 @@ export default class Ledger extends React.Component {
// 右键菜单
{
key: "BTN_COLUMN",
icon: <i className="icon-coms-Custom" />,
icon: <i className="icon-coms-Custom"/>,
content: "显示列定制",
onClick: this.showColumn
}
@ -261,18 +250,18 @@ export default class Ledger extends React.Component {
const renderRightOperation = () => {
return (
<div style={{ display: "inline-block" }}>
<div style={{display: "inline-block"}}>
{showOperateBtn &&
<Button
type="primary"
style={{ marginRight: "10px" }}
style={{marginRight: "10px"}}
onClick={() => this.handleNew()}>
新建
</Button>}
<WeaInputSearch
value={this.state.searchValue}
onChange={value => {
this.setState({ searchValue: value });
this.setState({searchValue: value});
}}
onSearch={value => {
this.handleSearch(value);
@ -283,39 +272,39 @@ export default class Ledger extends React.Component {
};
const nextStep = () => {
const { currentStep } = this.state;
this.setState({ currentStep: currentStep + 1 });
const {currentStep} = this.state;
this.setState({currentStep: currentStep + 1});
};
const prevStep = () => {
const { currentStep } = this.state;
this.setState({ currentStep: currentStep - 1 });
const {currentStep} = this.state;
this.setState({currentStep: currentStep - 1});
};
const steps = [
"基础设置",
"关联人员",
"薪资项目",
"调薪计薪规则"
// "校验规则",
"调薪计薪规则",
"校验规则"
];
const handleStep1Save = () => {
const { step1Request } = this.state;
const { ledgerStore: { saveLedgerBasic, baseInfoRequest } } = this.props;
const {step1Request} = this.state;
const {ledgerStore: {saveLedgerBasic, baseInfoRequest}} = this.props;
saveLedgerBasic(baseInfoRequest).then(() => {
nextStep();
});
};
const handleStep3Save = () => {
const { ledgerStore: { saveAdjustmentRule } } = this.props;
const {ledgerStore: {saveAdjustmentRule}} = this.props;
saveAdjustmentRule().then(() => {
nextStep();
});
};
const handleStepSave = () => {
const { currentStep } = this.state;
const {currentStep} = this.state;
const {
ledgerStore: {
saveLedgerBasic,
@ -328,15 +317,15 @@ export default class Ledger extends React.Component {
saveLedgerBasic(baseInfoRequest).then(() => {
nextStep();
});
} else if (currentStep == 1) {
} else if (currentStep == 1 || currentStep == 3) {
nextStep();
} else if (currentStep == 2) {
saveLedgerItem().then(() => {
nextStep();
});
} else if (currentStep == 3) {
} else if (currentStep == 4) {
saveAdjustmentRule().then(() => {
this.setState({ stepSlideVisible: false });
this.setState({stepSlideVisible: false});
});
}
};
@ -347,11 +336,11 @@ export default class Ledger extends React.Component {
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"],
onShowSizeChange: (current, pageSize) => {
setPageObj({ ...pageObj, current, pageSize });
getTableDatas({ current, pageSize, name: this.state.searchValue });
setPageObj({...pageObj, current, pageSize});
getTableDatas({current, pageSize, name: this.state.searchValue});
},
onChange: current => {
setPageObj({ ...pageObj, current, pageSize: pageObj.pageSize });
setPageObj({...pageObj, current, pageSize: pageObj.pageSize});
getTableDatas({
current,
pageSize: pageObj.pageSize,
@ -403,18 +392,18 @@ export default class Ledger extends React.Component {
onClick={item => this.onOperatesClick(record, item.key)}>
<Menu.Item key="0">编辑</Menu.Item>
<Menu.Item key="1">复制</Menu.Item>
<Menu.Item key="3">关联人员</Menu.Item>
{/*<Menu.Item key="3">关联人员</Menu.Item>*/}
<Menu.Item key="4">删除</Menu.Item>
</Menu>
}>
<a className="ant-dropdown-link" href="javaScript:void(0);">
<i className="icon-coms-more" style={{ marginLeft: 18 }} />
<i className="icon-coms-more" style={{marginLeft: 18}}/>
</a>
</Dropdown>
</div>
};
} else {
return { ...item };
return {...item};
}
});
@ -425,14 +414,15 @@ export default class Ledger extends React.Component {
collectParams={collectParams}>
<WeaTop
title="薪资账套" // 文字
icon={<i className="icon-coms-meeting" />} // 左侧图标
icon={<i className="icon-coms-meeting"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }}>
dropMenuProps={{collectParams}}>
<CustomTab
searchOperationItem={renderRightOperation()}
onChange={v => {}}
onChange={v => {
}}
/>
<WeaTable
rowKey="id"
@ -444,7 +434,7 @@ export default class Ledger extends React.Component {
dataSource={dataSource}
pagination={pagination}
loading={loading}
scroll={{ x: 1300 }}
scroll={{x: 1300}}
/>
{this.state.stepSlideVisible &&
<StepSlide
@ -452,10 +442,10 @@ export default class Ledger extends React.Component {
steps={steps}
currentStep={currentStep}
onCancel={() => {
this.setState({ stepSlideVisible: false });
this.setState({stepSlideVisible: false});
}}
customOperate={
<div style={{ display: "inline-block" }}>
<div style={{display: "inline-block"}}>
{currentStep == 0 &&
<Button
type="primary"
@ -465,35 +455,35 @@ export default class Ledger extends React.Component {
保存并进入下一步
</Button>}
{currentStep == 1 &&
<div style={{ display: "inline-block" }}>
<div style={{display: "inline-block"}}>
<Button
type="default"
onClick={() => {
this.setState({ stepSlideVisible: false });
this.setState({stepSlideVisible: false});
}}>
完成，跳过所有步骤
</Button>
<Button
type="primary"
style={{ marginLeft: "10px" }}
style={{marginLeft: "10px"}}
onClick={() => {
handleStepSave();
}}>
下一步
</Button>
</div>}
{currentStep == 2 &&
{(currentStep == 2 || currentStep == 3) &&
<div>
<Button
type="default"
onClick={() => {
this.setState({ stepSlideVisible: false });
this.setState({stepSlideVisible: false});
}}>
完成，跳过所有步骤
</Button>
<Button
type="default"
style={{ marginLeft: "10px" }}
style={{marginLeft: "10px"}}
onClick={() => {
prevStep();
}}>
@ -501,18 +491,18 @@ export default class Ledger extends React.Component {
</Button>
<Button
type="primary"
style={{ marginLeft: "10px" }}
style={{marginLeft: "10px"}}
onClick={() => {
handleStepSave();
}}>
保存并进入下一步
</Button>
</div>}
{currentStep == 3 &&
{currentStep == 4 &&
<div>
<Button
type="default"
style={{ marginRight: "10px" }}
style={{marginRight: "10px"}}
onClick={() => {
prevStep();
}}>
@ -531,13 +521,11 @@ export default class Ledger extends React.Component {
title="新建账套"
content={
<div>
{currentStep == 0 && <SlideBaseForm />}
{currentStep == 1 && <SlideRefereUser />}
{currentStep == 2 && <SalaryItemForm />}
{currentStep == 3 && <CalRulesForm />}
{/* {
currentStep == 4 && <ValidRulesForm />
} */}
{currentStep == 0 && <SlideBaseForm/>}
{currentStep == 1 && <SlideRefereUser/>}
{currentStep == 2 && <SalaryItemForm/>}
{currentStep == 3 && <CalRulesForm/>}
{currentStep == 4 && <ValidRulesForm/>}
</div>
}
/>}
@ -553,35 +541,34 @@ export default class Ledger extends React.Component {
<SlideModalTitle
subtitle={`编辑账套`}
tabs={[
{ title: "基础设置", key: 0 },
{ title: "关联人员", key: 1 },
{ title: "薪资项目", key: 2 },
{ title: "调薪计薪规则", key: 3 }
{title: "基础设置", key: 0},
{title: "关联人员", key: 1},
{title: "薪资项目", key: 2},
{title: "调薪计薪规则", key: 3},
{title: "校验规则", key: 4}
]}
showOperateBtn={showOperateBtn}
editable={canEdit === "true"}
selectedTab={selectedTab}
onSave={() => this.handleEditSlideSave()}
subItemChange={item => {
this.setState({ selectedTab: item.key });
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}/>
} */}
{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 })}
onClose={() => this.setState({editSlideVisible: false})}
showMask={true}
closeMaskOnClick={() =>
this.setState({ editSlideVisible: false })}
this.setState({editSlideVisible: false})}
/>}
</WeaTop>
</WeaRightMenu>
@ -592,7 +579,7 @@ export default class Ledger extends React.Component {
visible={this.state.copyFormVisible}
onSave={value => this.handleCopySave(value)}
onCancel={() => {
this.setState({ copyFormVisible: false });
this.setState({copyFormVisible: false});
}}
/>}
</div>

12
pc4mobx/hrmSalary/pages/ledger/index.less
View File

@ -184,4 +184,14 @@
text-decoration: none;
}
}
}
}
.addRule-wrapper {
.ant-modal-body {
padding: 16px !important;
.addRule-top-row {
margin-bottom: 10px;
}
}
}

160
pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js
View File

@ -1,18 +1,13 @@
import React from "react";
import { Row, Col } from "antd";
import { toJS } from "mobx";
import { WeaSelect, WeaTextarea, WeaInput, WeaCheckbox } from "ecCom";
import {Col, Row} from "antd";
import {WeaCheckbox, WeaInput, WeaSelect, WeaTextarea} from "ecCom";
import "./index.less";
import TipLabel from "../../components/TipLabel";
import { daysOptions, cycleTypeOption } from "./options";
import { inject, observer } from "mobx-react";
import {cycleTypeOption, daysOptions} from "./options";
import {inject, observer} from "mobx-react";
import RequiredLabelTip from "../../components/requiredLabelTip";
import {
getCurrentYearMonth,
getCurrentMonth,
getSubtractMonthYearMonth,
getAddMonthYearMonth
} from "../../util/date";
import {getAddMonthYearMonth, getCurrentMonth, getCurrentYearMonth, getSubtractMonthYearMonth} from "../../util/date";
import moment from "moment";
@inject("ledgerStore", "taxAgentStore")
@observer
@ -24,11 +19,12 @@ export default class SlideBaseForm extends React.Component {
taxableItems: 1
};
}
componentWillMount() {
const { edit } = this.props;
const { ledgerStore: { initBaseInfoRequest } } = this.props;
const {edit} = this.props;
const {ledgerStore: {initBaseInfoRequest}} = this.props;
if (edit) {
const { ledgerStore: { getLedgerBasicForm } } = this.props;
const {ledgerStore: {getLedgerBasicForm}} = this.props;
getLedgerBasicForm();
} else {
initBaseInfoRequest();
@ -36,8 +32,8 @@ export default class SlideBaseForm extends React.Component {
}
handleChange(params) {
const { ledgerStore: { baseInfoRequest, setBaseInfoRequest } } = this.props;
let request = { ...baseInfoRequest };
const {ledgerStore: {baseInfoRequest, setBaseInfoRequest}} = this.props;
let request = {...baseInfoRequest};
Object.keys(params).map(key => {
request[key] = params[key];
});
@ -64,10 +60,70 @@ export default class SlideBaseForm extends React.Component {
}
}
initPeriodStr = (periodStrType, type, fromDay) => {
let str = "", tmpDate = null;
switch (type) {
case "1":
tmpDate = moment().subtract(2, "month");
const is_31H = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().subtract(2, "month").endOf("month");
str = `至上上月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31H ? 30 : 29, "days");
str = `至上月${moment(tmpDate).date()}号`;
}
break;
case "2":
tmpDate = moment().subtract(1, "month");
const is_31 = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().subtract(1, "month").endOf("month");
str = `至上月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31 ? 30 : 29, "days");
str = `至本月${moment(tmpDate).date()}号`;
}
break;
case "3":
tmpDate = moment().add(0, "month");
const is_31K = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().endOf("month");
str = `至本月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31K ? 30 : 29, "days");
str = `至下月${moment(tmpDate).date()}号`;
}
break;
case "4":
tmpDate = moment().add(1, "month");
const is_31L = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
if (fromDay == 1) {
tmpDate = moment().add(1, "month").endOf("month");
str = `至下月最后一天`;
} else {
tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
.add(is_31L ? 30 : 29, "days");
str = `至下下月${moment(tmpDate).date()}号`;
}
break;
default:
break;
}
return {
[periodStrType]: str,
date: moment(tmpDate).format("YYYY-MM-DD")
};
};
render() {
const { request, ledgerStore, taxAgentStore, edit } = this.props;
const { baseInfoRequest } = ledgerStore;
const { taxAgentOption } = taxAgentStore;
const {request, ledgerStore, taxAgentStore, edit} = this.props;
const {baseInfoRequest} = ledgerStore;
const {taxAgentOption} = taxAgentStore;
const {
canEdit = "true",
name,
@ -81,6 +137,8 @@ export default class SlideBaseForm extends React.Component {
socialSecurityCycleType,
description
} = baseInfoRequest;
const salaryCycleStrObj = this.initPeriodStr("salaryCycleStr", salaryCycleType, salaryCycleFromDay);
const attendCycleStrObj = this.initPeriodStr("attendCycleStr", attendCycleType, attendCycleFromDay);
return (
<div className="slideBaseForm">
<Row>
@ -89,15 +147,15 @@ export default class SlideBaseForm extends React.Component {
<Row className="formItem">
<Col span={6}>
账套名称
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaInput
disabled={canEdit !== "true"}
style={{ width: "190px" }}
style={{width: "190px"}}
value={name}
onChange={value => {
this.handleChange({ name: value });
this.handleChange({name: value});
}}
/>
</Col>
@ -105,17 +163,17 @@ export default class SlideBaseForm extends React.Component {
<Row className="formItem">
<Col span={6}>
个税扣缴义务人
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaSelect
disabled={taxAgentId ? edit : false}
showSearch // 设置select可搜索
style={{ width: 190 }}
style={{width: 190}}
options={taxAgentOption}
value={taxAgentId}
onChange={v => {
this.handleChange({ taxAgentId: v });
this.handleChange({taxAgentId: v});
}}
/>
</Col>
@ -123,7 +181,7 @@ export default class SlideBaseForm extends React.Component {
<Row className="formItem">
<Col span={6}>
薪资类型
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaSelect
@ -135,10 +193,10 @@ export default class SlideBaseForm extends React.Component {
showname: "正常工资薪金所得"
}
]}
style={{ width: "190px" }}
style={{width: "190px"}}
value={taxableItems}
onChange={value => {
this.handleChange({ taxableItems: value });
this.handleChange({taxableItems: value});
}}
/>
</Col>
@ -146,43 +204,43 @@ export default class SlideBaseForm extends React.Component {
<Row className="formItem">
<Col span={6}>
薪资周期
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaSelect
disabled={canEdit !== "true"}
options={cycleTypeOption}
style={{ width: "90px" }}
style={{width: "90px"}}
value={salaryCycleType}
onChange={value => {
this.handleChange({ salaryCycleType: value });
this.handleChange({salaryCycleType: value});
}}
/>
<WeaSelect
disabled={canEdit !== "true"}
options={daysOptions}
style={{ width: "90px", marginLeft: "10px" }}
style={{width: "90px", marginLeft: "10px"}}
value={salaryCycleFromDay}
onChange={value => {
this.handleChange({ salaryCycleFromDay: value });
this.handleChange({salaryCycleFromDay: value});
}}
/>
<span style={{ marginLeft: "10px" }}>至本月最后一天</span>
<span style={{marginLeft: "10px"}}>{salaryCycleStrObj.salaryCycleStr}</span>
</Col>
</Row>
<Row className="formItem">
<Col span={6}>
税款所属期
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaSelect
disabled={canEdit !== "true"}
options={cycleTypeOption}
style={{ width: "90px" }}
style={{width: "90px"}}
value={taxCycleType}
onChange={value => {
this.handleChange({ taxCycleType: value });
this.handleChange({taxCycleType: value});
}}
/>
</Col>
@ -190,43 +248,43 @@ export default class SlideBaseForm extends React.Component {
<Row className="formItem">
<Col span={6}>
考勤周期
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaSelect
disabled={canEdit !== "true"}
options={cycleTypeOption}
style={{ width: "90px" }}
style={{width: "90px"}}
value={attendCycleType}
onChange={value => {
this.handleChange({ attendCycleType: value });
this.handleChange({attendCycleType: value});
}}
/>
<WeaSelect
disabled={canEdit !== "true"}
options={daysOptions}
style={{ width: "90px", marginLeft: "10px" }}
style={{width: "90px", marginLeft: "10px"}}
value={attendCycleFromDay}
onChange={value => {
this.handleChange({ attendCycleFromDay: value });
this.handleChange({attendCycleFromDay: value});
}}
/>
<span style={{ marginLeft: "10px" }}>至本月最后一天</span>
<span style={{marginLeft: "10px"}}>{attendCycleStrObj.attendCycleStr}</span>
</Col>
</Row>
<Row className="formItem">
<Col span={6}>
福利台账月份
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaSelect
disabled={canEdit !== "true"}
options={cycleTypeOption}
style={{ width: "90px" }}
style={{width: "90px"}}
value={socialSecurityCycleType}
onChange={value => {
this.handleChange({ socialSecurityCycleType: value });
this.handleChange({socialSecurityCycleType: value});
}}
/>
</Col>
@ -235,7 +293,7 @@ export default class SlideBaseForm extends React.Component {
<Row className="formItem">
<Col span={6}>
核算人员范围
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={18}>
<WeaCheckbox
@ -250,10 +308,10 @@ export default class SlideBaseForm extends React.Component {
<Col span={18}>
<WeaTextarea
disabled={canEdit !== "true"}
style={{ width: "190px" }}
style={{width: "190px"}}
value={description}
onChange={value => {
this.handleChange({ description: value });
this.handleChange({description: value});
}}
/>
</Col>
@ -278,7 +336,7 @@ export default class SlideBaseForm extends React.Component {
</span>
至
<span className="higelinered">
{this.getMonth(salaryCycleType)}-30
{salaryCycleStrObj.date}
</span>
</p>
<div className="tipLabel">税款所属期</div>
@ -292,7 +350,7 @@ export default class SlideBaseForm extends React.Component {
</span>
至
<span className="higelinered">
{this.getMonth(attendCycleType)}-30
{attendCycleStrObj.date}
</span>
</p>
<div className="tipLabel">福利台账月份</div>

162
pc4mobx/hrmSalary/pages/ledger/step5/ValidRuleEditModal.js
View File

@ -1,84 +1,96 @@
import React from 'react'
import { Modal, Row, Col, Button, message } from 'antd'
import { WeaInput } from 'ecCom'
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from '../../../components/requiredLabelTip';
import { notNull } from '../../../util/validate';
import React from "react";
import {Button, Col, message, Modal, Row} from "antd";
import {WeaInput} from "ecCom";
import {inject, observer} from "mobx-react";
import RequiredLabelTip from "../../../components/requiredLabelTip";
import {notNull} from "../../../util/validate";
@inject('ledgerStore')
@inject("ledgerStore")
@observer
export default class ValidRuleEditModal extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
formulaId: "",
description: ""
}
}
validateForm() {
const { name, formulaId} = this.state;
if(!notNull(name)) {
message.warning("规则名称不能为空")
return false;
}
constructor(props) {
super(props);
this.state = {
name: "",
formulaId: "",
description: ""
};
}
// if(!notNull(formulaId)) {
// message.warning("校验规则不能为空")
// return false;
// }
return true;
validateForm() {
const {name, formulaId} = this.state;
if (!notNull(name)) {
message.warning("规则名称不能为空");
return false;
}
// if(!notNull(formulaId)) {
// message.warning("校验规则不能为空")
// return false;
// }
handleSave() {
if(!this.validateForm()) {
return;
}
const { ledgerStore: {saveLedgerRule}} = this.props;
saveLedgerRule({
name: this.state.name,
formulaId: this.state.formulaId,
description: this.state.description
})
return true;
}
handleSave() {
if (!this.validateForm()) {
return;
}
const {ledgerStore: {saveLedgerRule}} = this.props;
saveLedgerRule({
name: this.state.name,
formulaId: this.state.formulaId,
description: this.state.description
});
this.props.onCancel();
}
render() {
return (
<Modal visible={this.props.visible} onCancel={() => {
this.props.onCancel();
}
render() {
return (
<Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}}
width={800} title="添加校验规则"
footer={
<div style={{width: "100%", overflow: "hidden"}}>
<span style={{float: "left"}}>
薪资核算时，不符合校验规则将反馈为异常
</span>
<Button type="primary" style={{float: "right"}} onClick={() => {this.handleSave()}}>保存</Button>
</div>
}
>
<div style={{padding: "20px"}}>
<Row style={{lineHeight: "40px"}}>
<Col span={8}>规则名称<RequiredLabelTip /></Col>
<Col span={16}>
<WeaInput value={this.state.name} onChange={(value) => {this.setState({name: value})}}/>
</Col>
</Row>
<Row style={{lineHeight: "40px"}}>
<Col span={8}>校验规则<RequiredLabelTip /></Col>
<Col span={16}>
<WeaInput value={this.state.formulaId} onChange={(value)=> {this.setState({formulaId: value})}}/>
</Col>
</Row>
<Row style={{lineHeight: "40px"}}>
<Col span={8}>备注</Col>
<Col span={16}>
<WeaInput value={this.state.description} onChange={(value) => {this.setState({description: value})}}/>
</Col>
</Row>
</div>
</Modal>
)
}
}}
width={800} title="添加校验规则"
footer={
<div style={{width: "100%", overflow: "hidden"}}>
<span style={{float: "left"}}>
薪资核算时，不符合校验规则将反馈为异常
</span>
<Button type="primary" style={{float: "right"}} onClick={() => {
this.handleSave();
}}>保存</Button>
</div>
}
>
<div style={{padding: "20px"}}>
<Row style={{lineHeight: "40px"}}>
<Col span={8}>规则名称<RequiredLabelTip/></Col>
<Col span={16}>
<WeaInput value={this.state.name} onChange={(value) => {
this.setState({name: value});
}}/>
</Col>
</Row>
<Row style={{lineHeight: "40px"}}>
<Col span={8}>校验规则<RequiredLabelTip/></Col>
<Col span={16}>
<WeaInput value={this.state.formulaId} onFocus={() => {
// this.setState({formulaId: value});
this.props.onAddValidRule && this.props.onAddValidRule(true);
}}/>
</Col>
</Row>
<Row style={{lineHeight: "40px"}}>
<Col span={8}>备注</Col>
<Col span={16}>
<WeaInput value={this.state.description} onChange={(value) => {
this.setState({description: value});
}}/>
</Col>
</Row>
</div>
</Modal>
);
}
}

228
pc4mobx/hrmSalary/pages/ledger/validRulesForm.js
View File

@ -1,118 +1,138 @@
import React from 'react'
import { WeaInputSearch } from 'ecCom'
import { Table, Icon, message, Modal } from 'antd'
import { dataSource, slideStep5Columns} from './columns'
import ValidRuleEditModal from './step5/ValidRuleEditModal'
import { inject, observer } from 'mobx-react';
import React from "react";
import {WeaInputSearch} from "ecCom";
import {Icon, message, Modal, Table} from "antd";
import ValidRuleEditModal from "./step5/ValidRuleEditModal";
import AddValidRuleModal from "./addValidRuleModal";
import {inject, observer} from "mobx-react";
@inject('ledgerStore')
@inject("ledgerStore")
@observer
export default class ValidRulesForm extends React.Component {
constructor(props) {
super(props)
this.state = {
modalVisible: false,
selectedRowKeys: [],
searchValue: ""
}
}
componentWillMount() {
const { ledgerStore: {getLedgerRuleList} } = this.props;
getLedgerRuleList()
}
handleItemDelete(record) {
const { ledgerStore: {deleteLedgerRule}} = this.props;
deleteLedgerRule([record.id])
}
onSelectChange(selectedRowKeys) {
this.setState({ selectedRowKeys });
constructor(props) {
super(props);
this.state = {
modalVisible: false,
ruleVisible: false,
selectedRowKeys: [],
searchValue: ""
};
}
handleBatchDelete() {
const { ledgerStore: { deleteLedgerRule } } = this.props;
const { selectedRowKeys } = this.state;
if(selectedRowKeys.length == 0) {
message.warning("未选择条目")
return
}
Modal.confirm({
title: '信息确认',
content: '确认删除',
onOk:() => {
deleteLedgerRule(selectedRowKeys)
},
onCancel: () => {
componentWillMount() {
const {ledgerStore: {getLedgerRuleList}} = this.props;
getLedgerRuleList();
}
},
});
handleItemDelete(record) {
const {ledgerStore: {deleteLedgerRule}} = this.props;
deleteLedgerRule([record.id]);
}
onSelectChange(selectedRowKeys) {
this.setState({selectedRowKeys});
};
handleBatchDelete() {
const {ledgerStore: {deleteLedgerRule}} = this.props;
const {selectedRowKeys} = this.state;
if (selectedRowKeys.length == 0) {
message.warning("未选择条目");
return;
}
Modal.confirm({
title: "信息确认",
content: "确认删除",
onOk: () => {
deleteLedgerRule(selectedRowKeys);
},
onCancel: () => {
handeSearch() {
const { ledgerStore: { getLedgerRuleList } } = this.props;
const { searchValue } = this.state;
getLedgerRuleList(searchValue)
}
}
});
}
render() {
const { ledgerStore } = this.props;
const { ledgerRuleList } = ledgerStore
const { selectedRowKeys } = this.state;
let columns = ledgerRuleList.columns ? ledgerRuleList.columns.filter(item => item.dataIndex != "id") : []
handeSearch() {
const {ledgerStore: {getLedgerRuleList}} = this.props;
const {searchValue} = this.state;
getLedgerRuleList(searchValue);
}
if(columns.length > 0) {
columns.push({
title: "操作",
key: 'cz',
render: (text, record) => (
<a onClick={() => {this.handleItemDelete(record)}}>删除</a>
)
})
}
render() {
const {ledgerStore} = this.props;
const {ledgerRuleList} = ledgerStore;
const {selectedRowKeys} = this.state;
let columns = ledgerRuleList.columns ? ledgerRuleList.columns.filter(item => item.dataIndex != "id") : [];
let dataSource = ledgerRuleList.list ? ledgerRuleList.list : []
dataSource.map(item => item.key = item.id)
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this),
};
return (
<div className="validRulesForm">
<div className="headerBar">
<WeaInputSearch className="inputSearch" value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}}
onSearch={(value) => {this.handeSearch(value)}}/>
<span className="btnsWrapper">
{
dataSource.length > 0 && <Icon className="iconItem" type="minus-square" onClick={() => {this.handleBatchDelete()}}/>
}
<Icon className="iconItem" type="plus-square" onClick={() => {this.setState({
modalVisible: true
})}}/>
</span>
</div>
<div className="tableWrapper">
{
ledgerRuleList.list && <Table rowSelection={rowSelection} dataSource={ledgerRuleList.list} columns={columns} pagination={{
total: ledgerRuleList.total,
showTotal: (total) => `共 ${total} 条`,
current: ledgerRuleList.pageNum
}}/>
}
</div>
{
this.state.modalVisible &&
<ValidRuleEditModal
visible={this.state.modalVisible}
onCancel={() => {this.setState({modalVisible: false})}}
/>
}
</div>
if (columns.length > 0) {
columns.push({
title: "操作",
key: "cz",
render: (text, record) => (
<a onClick={() => {
this.handleItemDelete(record);
}}>删除</a>
)
});
}
let dataSource = ledgerRuleList.list ? ledgerRuleList.list : [];
dataSource.map(item => item.key = item.id);
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this)
};
return (
<div className="validRulesForm">
<div className="headerBar">
<WeaInputSearch className="inputSearch" value={this.state.searchValue} onChange={(value) => {
this.setState({searchValue: value});
}}
onSearch={(value) => {
this.handeSearch(value);
}}
/>
<span className="btnsWrapper">
{
dataSource.length > 0 &&
<Icon className="iconItem" title="批量删除" type="minus-square" onClick={() => {
this.handleBatchDelete();
}}/>
}
<Icon className="iconItem" type="plus-square" title="新增" onClick={() => {
this.setState({
modalVisible: true
});
}}/>
</span>
</div>
<div className="tableWrapper">
{
ledgerRuleList.list &&
<Table rowSelection={rowSelection} dataSource={ledgerRuleList.list} columns={columns} pagination={{
total: ledgerRuleList.total,
showTotal: (total) => `共 ${total} 条`,
current: ledgerRuleList.pageNum
}}/>
}
</div>
<ValidRuleEditModal
visible={this.state.modalVisible}
onCancel={() => {
this.setState({modalVisible: false});
}}
onAddValidRule={() => this.setState({ruleVisible: true})}
/>
<AddValidRuleModal
visible={this.state.ruleVisible}
onCancel={() => {
this.setState({ruleVisible: false});
}}
/>
</div>
);
}
}