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

统一所有页面你的弹框以及抽屉头部组件

This commit is contained in:
18652063575 2022-09-13 16:39:15 +08:00
parent a55847e656
commit 0cec0873fe
70 changed files with 2596 additions and 2096 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
pc4mobx/hrmSalary/components/importModal/index.js
View File

@ -1,15 +1,14 @@
import React from "react";
import { WeaSteps } from "ecCom";
import { message, Modal, Upload } from "antd";
import { WeaDialog, WeaSteps } from "ecCom";
import { Button, message } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";
import ModalStep1 from "./modalStep1";
import ModalStep2 from "./modalStep2";
import ModalStep3 from "./modalStep3";
const Dragger = Upload.Dragger;
const Step = WeaSteps.Step;
@inject("taxAgentStore")
@ -40,15 +39,17 @@ export default class ImportModal extends React.Component {
}
validateDate() {
// const { params } = this.props;
const { params } = this.props;
let flag = true;
try {
// params && Object.keys(params).forEach((key) => {
// if (!params[key] || params[key] == "") {
// message.warning("请完善导入选项");
// throw new Error("请完善导入选项");
// }
// });
if(this.props.renderFormComponent){
params && Object.keys(params).forEach((key) => {
if (!params[key] || params[key] == "") {
message.warning("请完善导入选项");
throw new Error("请完善导入选项");
}
});
}
} catch (e) {
flag = false;
}
@ -70,12 +71,12 @@ export default class ImportModal extends React.Component {
handlePreviewDate() {
const { fileId } = this.state;
const { params, isStandingBook } = this.props;
if(!isStandingBook){
if (!isStandingBook) {
this.props.previewImport({
...params,
imageId: fileId
});
}else{
} else {
this.props.previewImport({
imageId: fileId
});
@ -85,12 +86,12 @@ export default class ImportModal extends React.Component {
hanleImportData() {
const { fileId } = this.state;
const { params, isStandingBook } = this.props;
if(!isStandingBook){
if (!isStandingBook) {
this.props.importFile({
...params,
imageId: fileId
});
}else{
} else {
this.props.importFile({
imageId: String(fileId)
});
@ -100,10 +101,25 @@ export default class ImportModal extends React.Component {
render() {
const { step, slideDataSource, isInit, isStandingBook } = this.props;
return (
<Modal title="数据导入" visible={this.props.visiable}
onCancel={this.props.onCancel}
width={850} className="cumDeductModal"
footer={null}
<WeaDialog
title="数据导入" visible={this.props.visiable}
onCancel={this.props.onCancel}
style={{ width: 850 }}
className="importModalWrapper"
initLoadCss
buttons={
this.props.step === 0 ? [
<Button type="primary" onClick={() => this.handleStep1Next()}>下一步</Button>
] : this.props.step === 1 ? [
<Button type="primary" onClick={() => this.preStep()}>上一步</Button>,
<Button type="primary" onClick={() => {
this.nextStep();
this.hanleImportData();
}}>下一步</Button>
] : [
<Button type="primary" onClick={() => this.props.onFinish()}>完成</Button>
]
}
>
<div className="stepWrapper">
<WeaSteps current={step}>
@ -122,32 +138,23 @@ export default class ImportModal extends React.Component {
onFileIdChange={(fileId) => {
this.setState({ fileId });
}}
onStep1Next={() => {
this.handleStep1Next();
}}/>)
/>)
}
{
this.props.step == 1 && (<ModalStep2
onPreviewDate={() => this.handlePreviewDate()}
dataSource={slideDataSource}
columns={this.props.columns}
onStep2Next={() => {
this.nextStep();
this.hanleImportData();
}} onStep2Pre={() => {
this.preStep();
}}/>)
/>)
}
{
this.props.step == 2 && (<ModalStep3
// onImportData={() => this.hanleImportData()}
importResult={toJS(this.props.importResult)}
onFinish={() => {
this.props.onFinish();
}}/>)
/>)
}
</Modal>
</WeaDialog>
);
}
}

7
pc4mobx/hrmSalary/components/importModal/index.less Normal file
View File

@ -0,0 +1,7 @@
.importModalWrapper{
.wea-dialog-body{
height: 80vh;
overflow: hidden auto;
padding: 16px;
}
}

7
pc4mobx/hrmSalary/components/importModal/modalStep1.js
View File

@ -70,8 +70,8 @@ export default class ModalStep1 extends React.Component {
}
};
return (
<div style={{ height: "550px", display: "flex", flexFlow: "column" }}>
<div style={{ flex: "1", overflow: "scroll" }}>
<div style={{ display: "flex", flexFlow: "column" }}>
<div>
{
this.props.formComponent && <div className="stepInformItem">
<div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
@ -152,9 +152,6 @@ export default class ModalStep1 extends React.Component {
</div>
</div>
<div className="footerBtnWrapper" style={{ overflow: "hidden", height: "30px" }}>
<Button type="primary" style={{ float: "right" }} onClick={this.props.onStep1Next}>下一步</Button>
</div>
</div>
);
}

10
pc4mobx/hrmSalary/components/importModal/modalStep2.js
View File

@ -1,5 +1,4 @@
import React from "react";
import { Button } from "antd";
import { WeaTable } from "ecCom";
export default class ModalStep2 extends React.Component {
@ -11,15 +10,10 @@ export default class ModalStep2 extends React.Component {
render() {
const { dataSource, columns } = this.props;
return (
<div style={{ height: "550px", display: "flex", flexFlow: "column" }}>
<div style={{ flex: "1", maxHeight: "500px", overflowY: "scroll" }}>
<div style={{ display: "flex", flexFlow: "column" }}>
<div>
<WeaTable dataSource={dataSource} columns={columns} scroll={{ x: columns.length * 150 }}/>
</div>
<div className="footerBtnWrapper" style={{ marginTop: "10px", overflow: "hidden", height: "30px" }}>
<Button type="primary" style={{ float: "right", marginLeft: "10px" }}
onClick={this.props.onStep2Next}>下一步</Button>
<Button type="default" style={{ float: "right" }} onClick={this.props.onStep2Pre}>上一步</Button>
</div>
</div>
);
}

19
pc4mobx/hrmSalary/components/importModal/modalStep3.js
View File

@ -1,6 +1,6 @@
import React from "react";
import successImg from "./success.svg";
import { Button, Spin } from "antd";
import { Spin } from "antd";
import { WeaTable } from "ecCom";
export default class ModalStep3 extends React.Component {
@ -33,7 +33,7 @@ export default class ModalStep3 extends React.Component {
正在导入请稍后...
</div>
: <div style={{ marginTop: "20px" }}>
<img src={successImg} style={{ marginBottom: "10px" }} alt=''/>
<img src={successImg} style={{ marginBottom: "10px" }} alt=""/>
<div style={{ fontSize: "20px", marginBottom: "10px" }}>
数据导入完成
</div>
@ -47,12 +47,7 @@ export default class ModalStep3 extends React.Component {
</span>条数据
</div>
</div>}
<div
style={{
marginTop: "20px",
maxHeight: "300px",
overflowY: "scroll"
}}>
<div>
{
<WeaTable
columns={this.columns}
@ -62,14 +57,6 @@ export default class ModalStep3 extends React.Component {
}
</div>
</div>
<div className="footerBtnWrapper" style={{ height: "30px" }}>
<Button
type="primary"
style={{ float: "right" }}
onClick={this.props.onFinish}>
完成
</Button>
</div>
</div>
);
}

158
pc4mobx/hrmSalary/components/selectItemsModal/index.js
View File

@ -1,91 +1,93 @@
/*
* Author: 黎永顺
* Description:
* Description:
* Date: 2022-05-19 15:18:09
* LastEditTime: 2022-06-29 10:06:13
*/
import React from 'react';
import { WeaInputSearch, WeaCheckbox } from 'ecCom'
import { Row , Col, Modal, Dropdown, Menu, Button } from "antd"
import React from "react";
import { WeaCheckbox, WeaInputSearch, WeaDialog } from "ecCom";
import { Button, Dropdown, Menu, Modal } from "antd";
import "../../pages/dataAcquisition/attendance/index.less"
import SelectItemsWrapper from './selectItemsWrapper'
export const items = [
{
key: "1",
title: "测试",
checked: false
},
{
key: "2",
title: "测试2",
checked: true
}
]
{
key: "1",
title: "测试",
checked: false
},
{
key: "2",
title: "测试2",
checked: true
}
];
export default class SelectItemModal extends React.Component {
constructor(props) {
super(props)
this.state = {
searchValue: ""
}
}
constructor(props) {
super(props);
this.state = {
searchValue: ""
};
}
handleShowChecked(value) {
value = value == 1 ? true : false
this.props.onShowChecked(value)
}
handleMenuClick(e) {
if(e.key == "1") { //恢复默认设置
this.props.onRestoreDefault()
} else if(e.key == "2") {
this.props.onSetDefault()
} else if(e.key == "3") {
}
}
handleShowChecked(value) {
value = value == 1 ? true : false;
this.props.onShowChecked(value);
}
handleMenuClick(e) {
if (e.key == "1") { //恢复默认设置
this.props.onRestoreDefault();
} else if (e.key == "2") {
this.props.onSetDefault();
} else if (e.key == "3") {
render(){
const menu = (
<Menu onClick={(e) => this.handleMenuClick(e)}>
<Menu.Item key="1">恢复默认设置</Menu.Item>
<Menu.Item key="2">设置默认设置</Menu.Item>
{/* <Menu.Item key="3">操作日志</Menu.Item> */}
</Menu>
);
return (
<Modal visible={this.props.visible} width={800} footer={false} onCancel={this.props.onCancel}>
<div style={{marginBottom: "20px", height: "47px", overflow: "hidden"}}>
<span style={{fontSize: "16px", fontWeight: "400"}}>导入字段设置</span>
<WeaInputSearch
style={{float: "right", marginRight: "30px"}}
placeholder={"请输入关键字"}
value={this.state.searchValue}
onChange={(value) => {
this.setState({searchValue: value})
}}
onSearch={(value) => {
this.props.onSearch(value)
}}
/>
</div>
{this.props.children}
<div style={{marginTop: "40px", overflow:"hidden", height: "50px", lineHeight: "50px"}}>
<div style={{float: "left"}}>
<WeaCheckbox content="只显示已选中字段" onChange={(value) => {
this.handleShowChecked(value)
}}/>
</div>
<div style={{float: "right"}}>
<Button type="primary" style={{marginRight: "10px"}} onClick={() => {
this.props.onSave()
}}>保存</Button>
<Dropdown.Button overlay={menu}>更多</Dropdown.Button>
</div>
</div>
</Modal>
)
}
}
}
render() {
const menu = (
<Menu onClick={(e) => this.handleMenuClick(e)}>
<Menu.Item key="1">恢复默认设置</Menu.Item>
<Menu.Item key="2">设置默认设置</Menu.Item>
{/* <Menu.Item key="3">操作日志</Menu.Item> */}
</Menu>
);
return (
<WeaDialog
visible={this.props.visible}
style={{width:800}}
onCancel={this.props.onCancel}
initLoadCss
className="fieldSetWrapper"
title="导入字段设置"
buttons={[
<Button type="primary" style={{ marginRight: "10px" }} onClick={() => {
this.props.onSave();
}}>保存</Button>,
<Dropdown.Button overlay={menu}>更多</Dropdown.Button>
]}
>
<div className="searchWrapper">
<WeaInputSearch
placeholder={"请输入关键字"}
value={this.state.searchValue}
onChange={(value) => {
this.setState({ searchValue: value });
}}
onSearch={(value) => {
this.props.onSearch(value);
}}
/>
</div>
{this.props.children}
<div className="allInWrapper">
<WeaCheckbox content="只显示已选中字段" onChange={(value) => {
this.handleShowChecked(value);
}}/>
</div>
</WeaDialog>
);
}
}

138
pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js
View File

@ -1,76 +1,78 @@
import React from 'react'
import { WeaCheckbox } from 'ecCom';
import { Row, Col, Icon } from 'antd';
import React from "react";
import { WeaCheckbox } from "ecCom";
import { Col, Icon, Row } from "antd";
export default class SelectItemsWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
showContent: true,
checkStatus: false
}
}
constructor(props) {
super(props);
this.state = {
showContent: true,
checkStatus: false
};
}
handleAllChecked(value) {
value = value == 1 ? true : false
let items = [...this.props.items]
items.map(item => {
item.checked = value
})
this.setState({
checkStatus: value
})
this.props.onChange(items)
}
handleAllChecked(value) {
value = value == 1 ? true : false;
let items = [...this.props.items];
items.map(item => {
item.checked = value;
});
this.setState({
checkStatus: value
});
this.props.onChange(items);
}
handleItemChange(value, record) {
value = value == 1 ? true : false
let items = [...this.props.items]
items.map(item => {
if(item.id == record.id) {
item.checked = value
}
})
this.props.onChange(items)
}
handleItemChange(value, record) {
value = value == 1 ? true : false;
let items = [...this.props.items];
items.map(item => {
if (item.id == record.id) {
item.checked = value;
}
});
this.props.onChange(items);
}
render() {
return (
<div style={{ margin: "10px 20px" }}>
<div style={{marginBottom: "10px", cursor: "pointer"}} >
<div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} onChange={(value) => {
this.handleAllChecked(value)
}} value={this.state.checkStatus}/></div>
<div style={{float: 'right', fontWeight: "600"}} onClick={() => this.setState({
showContent: !this.state.showContent
})}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 0}个字段
<span style={{marginLeft: "10px", fontWeight: "400"}}>
render() {
return (
<div>
<div style={{ margin: "10px 0", cursor: "pointer" }}>
<div style={{ display: "inline-block" }}><WeaCheckbox
content={<span style={{ fontWeight: "600" }}>{this.props.title}</span>} onChange={(value) => {
this.handleAllChecked(value);
}} value={this.state.checkStatus}/></div>
<div style={{ float: "right", fontWeight: "600" }} onClick={() => this.setState({
showContent: !this.state.showContent
})}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 0}个字段
<span style={{ marginLeft: "10px", fontWeight: "400" }}>
{
this.state.showContent ? <Icon type="down" /> : <Icon type="left" />
this.state.showContent ? <Icon type="down"/> : <Icon type="left"/>
}
</span>
</div>
</div>
{
this.state.showContent && <div style={{height: "160px",
border: "1px solid #eee",
padding: "10px",
overflowY: "scroll",
borderRadius: "5px"
}}>
<Row>
{
this.props.items && this.props.items.map(item => (
<Col span={6}><WeaCheckbox content={item.name} value={item.checked} onChange={(value) => {
this.handleItemChange(value, item)
}}/></Col>
))
}
</Row>
</div>
}
</div>
)
}
}
</div>
</div>
{
this.state.showContent && <div style={{
height: "160px",
border: "1px solid #eee",
padding: "10px",
overflowY: "scroll",
borderRadius: "5px"
}}>
<Row>
{
this.props.items && this.props.items.map(item => (
<Col span={6}><WeaCheckbox content={item.name} value={item.checked} onChange={(value) => {
this.handleItemChange(value, item);
}}/></Col>
))
}
</Row>
</div>
}
</div>
);
}
}

96
pc4mobx/hrmSalary/components/slideModalTitle/index.js
View File

@ -1,48 +1,72 @@
import React from 'react'
import { Button } from 'antd';
import "./index.less"
import React from "react";
import { Button } from "antd";
import { WeaReqTop } from "ecCom";
import "./index.less";
export default class SlideModalTitle extends React.Component {
componentWillMount() { // 初始化渲染页面
this.state = {
editable: this.props.editable
}
};
}
componentWillReceiveProps(nextProps){
componentWillReceiveProps(nextProps) {
this.setState({
editable: nextProps.editable
})
});
}
render() {
return <div className="slideTitleWrapper">
<div className="iconWrapper">
<i className="icon-coms-fa" />
</div>
<div className="slideTitle">
{
this.props.subtitle && <div className="subtitle">
{
this.props.tabs ?
<div>
<div className="mainTitle">{this.props.subtitle}</div>
<div className="subTab">
{this.props.tabs.map(item => (
<span className={item.key == this.props.selectedTab ? "subItem subItemSelected" : "subItem"} onClick={() => this.props.subItemChange(item)}>{item.title}</span>
))}
</div>
</div> : <div>{this.props.subtitle}</div>
}
</div>
}
</div>
<div className="btnWrapper">
{this.props.btns}
{
this.props.showOperateBtn && this.state.editable && this.props.selectedTab != 1 && <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
}
{this.props.customOperate}
</div>
</div>
render() {
const { selectedTab, tabs, subtitle, customOperate, subItemChange } = this.props;
return <div className="reqTopWrapper">
<WeaReqTop
title={subtitle}
buttonSpace={10}
icon={<i className="icon-coms-fa"/>}
iconBgcolor="#F14A2D"
buttons={(this.props.showOperateBtn && this.state.editable && this.props.selectedTab != 1) ? [
<Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
] : !_.isEmpty(customOperate) ? customOperate: []}
showDropIcon={false}
dropMenuDatas={[]}
tabDatas={tabs || []}
selectedKey={String(selectedTab) || ""}
onChange={ key => subItemChange(key) }
/>
</div>;
// return <div className="slideTitleWrapper">
// <div className="iconWrapper">
// <i className="icon-coms-fa"/>
// </div>
// <div className="slideTitle">
// {
// this.props.subtitle && <div className="subtitle">
// {
// this.props.tabs ?
// <div>
// <div className="mainTitle">{this.props.subtitle}</div>
// <div className="subTab">
// {this.props.tabs.map(item => (
// <span className={item.key == this.props.selectedTab ? "subItem subItemSelected" : "subItem"}
// onClick={() => this.props.subItemChange(item)}>{item.title}</span>
// ))}
// </div>
// </div> : <div>{this.props.subtitle}</div>
// }
// </div>
// }
// </div>
// <div className="btnWrapper">
// {this.props.btns}
// {
// this.props.showOperateBtn && this.state.editable && this.props.selectedTab != 1 &&
// <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
// }
// {this.props.customOperate}
{/* </div>*/
}
{/*</div>;*/
}
}
}

9
pc4mobx/hrmSalary/components/slideModalTitle/index.less
View File

@ -52,4 +52,11 @@
right: 50px;
top: 0px;
}
}
}
.reqTopWrapper{
.wea-new-top-req-wapper .wea-new-top-req-title>div:last-child{
right: 16px!important;
}
}

65
pc4mobx/hrmSalary/components/stepSlide/index.js
View File

@ -1,34 +1,35 @@
import React from 'react';
import StepSlideHeader from './stepSlideHeader'
import { WeaSlideModal } from 'ecCom'
import { Button } from "antd"
import SlideModalTitle from '../../components/slideModalTitle'
import React from "react";
import StepSlideHeader from "./stepSlideHeader";
import { WeaSlideModal } from "ecCom";
import SlideModalTitle from "../../components/slideModalTitle";
export default class StepSlide extends React.Component {
render() {
const { currentStep } = this.props;
return (
<WeaSlideModal visible={this.props.visible}
top={0}
width={40}
height={100}
direction={'right'}
measure={'%'}
title={
<SlideModalTitle
subtitle={this.props.title}
editable={false}
customOperate={
this.props.customOperate
}
/>
}
content={(<StepSlideHeader current={currentStep} steps={this.props.steps}>
{this.props.content}
</StepSlideHeader>)}
onClose={() => this.props.onCancel()}
showMask={true}
closeMaskOnClick={() => this.props.onCancel()} />
)
}
}
render() {
const { currentStep } = this.props;
return (
<WeaSlideModal
className='slideOuterWrapper'
visible={this.props.visible}
top={0}
width={40}
height={100}
direction={"right"}
measure={"%"}
title={
<SlideModalTitle
subtitle={this.props.title}
editable={false}
customOperate={
this.props.customOperate
}
/>
}
content={(<StepSlideHeader current={currentStep} steps={this.props.steps}>
{this.props.content}
</StepSlideHeader>)}
onClose={() => this.props.onCancel()}
showMask={true}
closeMaskOnClick={() => this.props.onCancel()}/>
);
}
}

6
pc4mobx/hrmSalary/index.js
View File

@ -24,9 +24,9 @@ import CalculateDetail from "./pages/calculateDetail";
import PlaceOnFileDetail from "./pages/calculateDetail/placeOnFileDetail";
import CompareDetail from "./pages/calculateDetail/compareDetail";
import GenerateDeclarationDetail from "./pages/declare/generateDeclarationDetail";
import BaseForm from "./components";
import TemplatePreview from "./pages/payroll/templatePreview";
import MobilePayroll from './pages/mobilePayroll'
import MobilePayroll from './pages/mobilePayroll';
import SysConfig from './pages/sysConfig';
import stores from "./stores";
import "./style/index";
@ -67,6 +67,7 @@ const DataAcquisition = (props) => props.children;
// taxRate 个税税率表
// taxAgent 个税扣缴义务人
// mobilepayroll 移动端工资单
// sysconfig 系統配置
const Routes = (
<Route
@ -131,6 +132,7 @@ const Routes = (
<Route key="taxRate" path="taxRate" component={TaxRate} />
<Route key="taxAgent" path="taxAgent" component={TaxAgent} />
<Route key="mobilepayroll" path="mobilepayroll" component={MobilePayroll} />
<Route key="sysconfig" path="sysconfig" component={SysConfig} />
</Route>
);

88
pc4mobx/hrmSalary/pages/calculate/baseFormModal.js
View File

@ -1,14 +1,11 @@
import React from "react";
import { Button, Col, message, Modal, Row, Select } from "antd";
import RequiredLabelTip from "../../components/requiredLabelTip";
import { Button, Col, message, Row } from "antd";
import { inject, observer } from "mobx-react";
import { WeaDatePicker, WeaInput } from "ecCom";
import { WeaDatePicker, WeaDialog, WeaError, WeaInput, WeaSelect } from "ecCom";
import { notNull } from "../../util/validate";
import "./index.less";
const { Option } = Select;
@inject("calculateStore")
@observer
export default class baseFormModal extends React.Component {
@ -29,7 +26,10 @@ export default class baseFormModal extends React.Component {
salaryacctGetForm().then(data => {
this.setState({
inited: true,
selectOptions: data.salarySobs
selectOptions: _.isEmpty(data.salarySobs) ? [{ key: "", showname: "" }] : [{
key: "",
showname: ""
}, ..._.map(data.salarySobs, it => ({ key: String(it.id), showname: it.name }))]
});
});
}
@ -61,58 +61,80 @@ export default class baseFormModal extends React.Component {
}
validate() {
if (!notNull(this.state.salaryMonthStr) && !notNull(this.state.salarySob)) {
this.refs.weaError.showError();
this.refs.weaError1.showError();
return false;
}
if (!notNull(this.state.salaryMonthStr)) {
message.warning("薪酬所属月不能为空");
this.refs.weaError.showError();
return false;
} else if (!notNull(this.state.salarySob)) {
message.warning("核算账套不能为空");
this.refs.weaError1.showError();
return false;
}
return true;
}
render() {
const { salaryMonthStr, salarySobId, description } = this.state;
const { description } = this.state;
return (
<Modal
<WeaDialog
title="核算"
wrapClassName="dataList-wrapper"
initLoadCss
className="dataList-wrapper"
visible={this.props.visible}
width={600}
style={{ width: 600 }}
onCancel={() => {
this.props.onCancel();
}}
footer={<Button type="primary" onClick={() => {
buttons={[<Button type="primary" onClick={() => {
this.handleSave();
}}>保存</Button>}
}}>保存</Button>]}
>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>薪酬所属月<RequiredLabelTip/></Col>
<Col span={8}>薪酬所属月</Col>
<Col span={16}>
<WeaDatePicker
<WeaError
style={{ width: "100%" }}
format="yyyy-MM"
value={this.state.salaryMonthStr}
onChange={value => {
this.setState({
salaryMonthStr: value
});
}}
/>
tipPosition="bottom"
ref="weaError"
error="请选择薪酬所属月">
<WeaDatePicker
style={{ width: "100%" }}
format="yyyy-MM"
viewAttr={3}
value={this.state.salaryMonthStr}
onChange={value => {
if(value === '') this.refs.weaError.showError();
this.setState({
salaryMonthStr: value
});
}}
/>
</WeaError>
</Col>
</Row>
<Row style={{ lineHeight: "40px" }} className="formItem">
<Col span={8}>核算账套<RequiredLabelTip/></Col>
<Col span={8}>核算账套</Col>
<Col span={16}>
{
this.state.inited && <Select
defaultValue={this.state.salarySob} value={this.state.salarySob} style={{ width: "100%" }}
onChange={(value) => this.handleSelectChange(value)}>
{this.state.selectOptions.map(item => (
<Option value={item.id} key={item.id}>{item.name}</Option>
))}
</Select>
this.state.inited &&
<WeaError
style={{ width: "100%" }}
tipPosition="bottom"
ref="weaError1"
error="请选择账套">
<WeaSelect
viewAttr={3}
options={this.state.selectOptions}
onChange={(value) => {
if(value === '') this.refs.weaError1.showError();
this.handleSelectChange(value)
}}
value={this.state.salarySob} style={{ width: "100%" }}/>
</WeaError>
}
</Col>
</Row>
@ -123,7 +145,7 @@ export default class baseFormModal extends React.Component {
<WeaInput value={description} onChange={(value) => this.setState({ description: value })}/>
</Col>
</Row>
</Modal>
</WeaDialog>
);
}
}

2
pc4mobx/hrmSalary/pages/calculate/index.js
View File

@ -353,7 +353,7 @@ export default class Calculate extends React.Component {
title="薪资核算" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }}>
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}

7
pc4mobx/hrmSalary/pages/calculate/index.less
View File

@ -1,6 +1,13 @@
.dataList-wrapper {
.ant-modal-body{
padding: 16px 120px
}
.formItem {
.wea-select, .ant-select {
width: 100%;
}
.ant-select-selection {
width: 100%;
height: 30px;
border-radius: 0;
}

225
pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/selectFieldModal.js
View File

@ -1,7 +1,7 @@
import React from "react";
import { Button, Col, Modal, Row } from "antd";
import { Button, Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import { WeaCheckbox } from "ecCom";
import { WeaCheckbox, WeaDialog } from "ecCom";
@inject("calculateStore", "standingBookStore")
@observer
@ -15,7 +15,7 @@ export default class SelectFieldModal extends React.Component {
componentWillMount() {
const { calculateStore: { getImportField }, standingBookStore: { getWelfareList }, isStandingBook } = this.props;
if(!isStandingBook){
if (!isStandingBook) {
getImportField(this.props.id).then(data => {
let fieldData = {};
let formulaItems = [];
@ -42,11 +42,11 @@ export default class SelectFieldModal extends React.Component {
});
this.fieldData = fieldData;
});
}else{
} else {
getWelfareList().then(result => {
let fieldData = {};
let formulaItems = [];
formulaItems = _.map(result, it => ({...it, salaryItemId: it.salaryItemName}));
formulaItems = _.map(result, it => ({ ...it, salaryItemId: it.salaryItemName }));
if (this.props.fieldData.formulaItems) {
formulaItems = this.props.fieldData.formulaItems;
}
@ -56,7 +56,7 @@ export default class SelectFieldModal extends React.Component {
fieldData
});
this.fieldData = fieldData;
})
});
}
}
@ -143,116 +143,119 @@ export default class SelectFieldModal extends React.Component {
render() {
const { fieldData } = this.state;
const { isStandingBook } = this.props;
return (
<Modal
<WeaDialog
title='添加表头字段'
visible={this.props.visible}
width={800} onCancel={() => {
this.props.onCancel();
}}
footer={null}
>
<div style={{ height: "50px", lineHeight: "50px" }}>
<span style={{ fontSize: "14px", fontWeight: "600" }}>添加表头字段</span>
<Button type="primary" style={{ float: "right", marginRight: "50px" }} onClick={() => {
style={{width:800}}
onCancel={() => {
this.props.onCancel();
}}
buttons={[
<Button type="primary" onClick={() => {
this.handleAddClick();
}}>添加</Button>
]}
>
<div style={{ minHeight: "20vh", maxHeight: "50vh", overflow: "hidden auto", padding: "16px 20px" }}>
{
!_.isEmpty(fieldData.formulaItems) &&
<div >
<div style={{ height: "40px", lineHeight: "40px" }}>
<WeaCheckbox content={!isStandingBook ? "公式项" : "全选"} onChange={(value) => {
this.handleTitleCheckboxChange(value, "formula");
}}/>
</div>
<div style={{
height: "100px",
border: "1px solid #f2f2f2",
margin: "10px",
padding: "10px",
overflowY: "scroll"
}}>
<Row>
{fieldData.formulaItems && fieldData.formulaItems.map(item => (
<Col span={6}>
<WeaCheckbox
value={item.checked ? 1 : 0}
content={item.salaryItemName}
onChange={(value) => {
this.handleFormalChange(item, value, "formula");
}}/></Col>
))}
</Row>
</div>
</div>
}
{
!_.isEmpty(fieldData.inputItems) &&
<div style={{ marginTop: "20px" }}>
<div style={{ height: "50px", lineHeight: "50px" }}>
<WeaCheckbox content="输入项" onChange={(value) => {
this.handleTitleCheckboxChange(value, "input");
}}/>
</div>
<div style={{
height: "100px",
border: "1px solid #f2f2f2",
margin: "10px",
padding: "10px",
overflowY: "scroll"
}}>
<Row>
{fieldData.inputItems && fieldData.inputItems.map(item => (
<Col span={6}>
<WeaCheckbox
value={item.checked ? 1 : 0}
content={item.salaryItemName}
onChange={(value) => {
this.handleFormalChange(item, value, "input");
}}/></Col>
))}
</Row>
</div>
</div>
}
{
!_.isEmpty(fieldData.sqlItems) &&
<div style={{ marginTop: "20px" }}>
<div style={{ height: "50px", lineHeight: "50px" }}>
<WeaCheckbox content="SQL项" onChange={(value) => {
this.handleTitleCheckboxChange(value, "sql");
}}/>
</div>
<div style={{
height: "100px",
border: "1px solid #f2f2f2",
margin: "10px",
padding: "10px",
overflowY: "scroll"
}}>
<Row>
{fieldData.sqlItems && fieldData.sqlItems.map(item => (
<Col span={6}>
<WeaCheckbox
value={item.checked ? 1 : 0}
content={item.salaryItemName}
onChange={(value) => {
this.handleFormalChange(item, value, "sql");
}}/></Col>
))}
</Row>
</div>
</div>
}
<div style={{ marginTop: "20px" }}>
<WeaCheckbox content="只显示已选中" onChange={(value) => {
this.showSelectedChange(value);
}}/>
</div>
</div>
{
!_.isEmpty(fieldData.formulaItems) &&
<div style={{ marginTop: "20px" }}>
<div style={{ height: "40px", lineHeight: "40px" }}>
<WeaCheckbox content="公式项" onChange={(value) => {
this.handleTitleCheckboxChange(value, "formula");
}}/>
</div>
<div style={{
height: "100px",
border: "1px solid #f2f2f2",
margin: "10px",
padding: "10px",
overflowY: "scroll"
}}>
<Row>
{fieldData.formulaItems && fieldData.formulaItems.map(item => (
<Col span={6}>
<WeaCheckbox
value={item.checked ? 1 : 0}
content={item.salaryItemName}
onChange={(value) => {
this.handleFormalChange(item, value, "formula");
}}/></Col>
))}
</Row>
</div>
</div>
}
{
!_.isEmpty(fieldData.inputItems) &&
<div style={{ marginTop: "20px" }}>
<div style={{ height: "50px", lineHeight: "50px" }}>
<WeaCheckbox content="输入项" onChange={(value) => {
this.handleTitleCheckboxChange(value, "input");
}}/>
</div>
<div style={{
height: "100px",
border: "1px solid #f2f2f2",
margin: "10px",
padding: "10px",
overflowY: "scroll"
}}>
<Row>
{fieldData.inputItems && fieldData.inputItems.map(item => (
<Col span={6}>
<WeaCheckbox
value={item.checked ? 1 : 0}
content={item.salaryItemName}
onChange={(value) => {
this.handleFormalChange(item, value, "input");
}}/></Col>
))}
</Row>
</div>
</div>
}
{
!_.isEmpty(fieldData.sqlItems) &&
<div style={{ marginTop: "20px" }}>
<div style={{ height: "50px", lineHeight: "50px" }}>
<WeaCheckbox content="SQL项" onChange={(value) => {
this.handleTitleCheckboxChange(value, "sql");
}}/>
</div>
<div style={{
height: "100px",
border: "1px solid #f2f2f2",
margin: "10px",
padding: "10px",
overflowY: "scroll"
}}>
<Row>
{fieldData.sqlItems && fieldData.sqlItems.map(item => (
<Col span={6}>
<WeaCheckbox
value={item.checked ? 1 : 0}
content={item.salaryItemName}
onChange={(value) => {
this.handleFormalChange(item, value, "sql");
}}/></Col>
))}
</Row>
</div>
</div>
}
<div style={{ marginTop: "20px" }}>
<WeaCheckbox content="只显示已选中" onChange={(value) => {
this.showSelectedChange(value);
}}/>
</div>
</Modal>
</WeaDialog>
);
}
}

4
pc4mobx/hrmSalary/pages/calculateDetail/userSure.js
View File

@ -16,7 +16,7 @@ export default class UserSure extends React.Component {
employeeName: "",
departmentIds: "",
positionIds: "",
status: 0
status: ""
},
selectedKey: "0",
selectedRowKeys: [], // table 选中项
@ -98,7 +98,7 @@ export default class UserSure extends React.Component {
<WeaSelect
value={String(status)}
options={userStatusList}
onChange={(val) => this.setState({ searchItemsValue: { ...this.state.searchItemsValue, [key]: Number(val) } })}/>
onChange={(val) => this.setState({ searchItemsValue: { ...this.state.searchItemsValue, [key]: val } })}/>
</WeaFormItem>
);
};

11
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
View File

@ -298,13 +298,7 @@ export default class Attendance extends React.Component {
const {
loading,
hasRight,
form,
condition,
tableStore,
showSearchAd,
getTableDatas,
doSearch,
setShowSearchAd
} = attendanceStore;
const {
step,
@ -312,7 +306,6 @@ export default class Attendance extends React.Component {
setSlideVisiable,
slideVisiable,
doBatchDelete,
attendTableStore,
fieldSettingAttendList,
fieldSettingCustomList,
setFieldSettingAttendList,
@ -728,9 +721,9 @@ export default class Attendance extends React.Component {
collectParams={collectParams}>
<WeaTop
title="考勤引用" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }}>
{this.state.tabSelectedKey == 0

36
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.less Normal file
View File

@ -0,0 +1,36 @@
.attendenceImportWrapper{
.wea-dialog-body{
padding: 16px 120px;
.wea-select, .ant-select, .ant-select-selection{
width: 100%;
}
.ant-select-selection{
border-radius: 0;
height: 30px;
}
}
}
//导入字段设置
.fieldSetWrapper{
.wea-dialog-body{
padding: 16px 20px;
}
.ant-modal-footer button{
margin-right: 0!important;
}
.ant-btn-group{
margin-left: 10px!important;
}
.searchWrapper{
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 10px;
}
.allInWrapper{
display: flex;
justify-content: flex-start;
margin-top: 10px;
}
}

365
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/refereAttendFormModal.js
View File

@ -1,182 +1,195 @@
import React from 'react'
import { Modal, Row, Col, Button, Select, message } from 'antd'
import moment from 'moment'
import { WeaSelect, WeaInput, WeaBrowser, WeaDatePicker } from "ecCom"
import SelectItemModal, {items} from '../../../components/selectItemsModal'
import SelectItemsWrapper from '../../../components/selectItemsModal/selectItemsWrapper'
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from '../../../components/requiredLabelTip'
import { notNull } from '../../../util/validate'
const { Option } = Select
import React from "react";
import { Button, Col, message, Row, Select } from "antd";
import moment from "moment";
import { WeaDatePicker, WeaDialog, WeaError, WeaInput, WeaSelect } from "ecCom";
import SelectItemModal from "../../../components/selectItemsModal";
import SelectItemsWrapper from "../../../components/selectItemsModal/selectItemsWrapper";
import { inject, observer } from "mobx-react";
import { notNull } from "../../../util/validate";
@inject('attendanceStore')
const { Option } = Select;
@inject("attendanceStore")
@observer
export default class RefereAttendFormModal extends React.Component {
constructor(props) {
super(props)
this.state = {
headerSetVisible: false,
inited: false,
request: {
salarySobId: "",
salaryYearMonth: moment(new Date()).format("YYYY-MM"),
employeeIds: [],
description: ""
constructor(props) {
super(props);
this.state = {
headerSetVisible: false,
inited: false,
request: {
salarySobId: "",
salaryYearMonth: moment(new Date()).format("YYYY-MM"),
employeeIds: [],
description: ""
}
};
}
handleHeaderSet() {
this.setState({ headerSetVisible: true });
this.props.onHeaderSet();
}
componentWillMount() {
const { attendanceStore: { getLedgerList } } = this.props;
getLedgerList().then(() => {
this.setState({
inited: true
});
});
}
// 请求参数改变事件
handleRequestChange(params) {
const { request } = this.state;
let result = { ...request, ...params };
this.setState({ request: result });
}
// 同步点击回调
handleSync() {
const { attendanceStore: { syncAttendanceRefer, checkOperation } } = this.props;
if (!this.validate()) {
return;
}
const { salarySobId, salaryYearMonth: salaryYearMonthStr } = this.state.request;
const payload = {
salaryYearMonthStr,
salarySobId
};
checkOperation(payload).then(({ status, data, errorMsg }) => {
if (status && data) {
syncAttendanceRefer(this.state.request).then(() => {
this.props.onCancel();
});
} else {
message.warning("已经核算过不可操作");
}
});
}
// 校验数据
validate() {
const { request } = this.state;
if (!notNull(request.salarySobId) && !notNull(request.salaryYearMonth)) {
this.refs.weaError.showError();
this.refs.weaError1.showError();
return false;
}
if (!notNull(request.salarySobId)) {
this.refs.weaError1.showError();
return false;
}
if (!notNull(request.salaryYearMonth)) {
this.refs.weaError.showError();
return false;
}
return true;
}
render() {
const { attendanceStore: { importLedgerList } } = this.props;
return (
<WeaDialog
initLoadCss
className="attendenceImportWrapper"
style={{ width: 600 }}
title="引用考勤数据"
buttons={[
<Button type="primary" onClick={() => {
this.handleSync();
}}>同步</Button>,
<Button type="default" onClick={() => {
this.handleHeaderSet();
}}>表头设置</Button>
]}
visible={this.props.visible}
onCancel={this.props.onCancel}>
<Row style={{ marginBottom: "10px" }}>
<Col span={8}>薪资所属月：</Col>
<Col span={16}>
<WeaError
style={{ width: "100%" }}
tipPosition="bottom"
ref="weaError"
error="请选择薪资所属月">
<WeaDatePicker
viewAttr={3}
format="YYYY-MM"
style={{ width: "100%" }}
value={this.state.request.salaryYearMonth}
onChange={(value) => {
if (value === "") this.refs.weaError.showError();
this.handleRequestChange({ salaryYearMonth: value });
}}
/>
</WeaError>
</Col>
</Row>
<Row style={{ marginBottom: "10px" }}>
<Col span={8}>薪资账套：</Col>
<Col span={16}>
{
this.state.inited &&
<WeaError
style={{ width: "100%" }}
tipPosition="bottom"
ref="weaError1"
error="请选择薪资账套">
<WeaSelect
viewAttr={3}
value={this.state.request.salarySobId}
style={{ width: "100%" }}
options={
_.isEmpty(importLedgerList) ? [{ key: "", showname: "" }] :
[{ key: "", showname: "" }, ..._.map(importLedgerList, it => ({
key: it.id,
showname: it.content
}))]
}
onChange={(value) => {
if (value === "") this.refs.weaError1.showError();
this.handleRequestChange({ salarySobId: value });
}}/>
</WeaError>
}
}
}
handleHeaderSet() {
this.setState({headerSetVisible: true})
this.props.onHeaderSet();
}
componentWillMount() {
const { attendanceStore: { getLedgerList }} = this.props;
getLedgerList().then(() => {
this.setState({
inited: true
})
})
}
// 请求参数改变事件
handleRequestChange(params) {
const { request } = this.state;
let result = { ...request, ...params }
this.setState({request: result})
}
</Col>
</Row>
<Row style={{ marginBottom: "10px" }}>
<Col span={8}>备注</Col>
<Col span={16}>
<WeaInput style={{ width: "100%" }} value={this.state.request.description} onChange={(value) => {
this.handleRequestChange({ description: value });
}}/>
</Col>
</Row>
// 同步点击回调
handleSync() {
const { attendanceStore: {syncAttendanceRefer, checkOperation}} = this.props
if(!this.validate()) {
return
}
const { salarySobId, salaryYearMonth:salaryYearMonthStr }=this.state.request
const payload={
salaryYearMonthStr,
salarySobId
}
checkOperation(payload).then(({status, data, errorMsg})=>{
if(status && data){
syncAttendanceRefer(this.state.request).then(() => {
this.props.onCancel()
})
}else{
message.warning('已经核算过不可操作');
}
})
}
// 校验数据
validate() {
const { request } = this.state;
if(!notNull(request.salarySobId)) {
message.warning("薪资账套不能为空");
return false;
}
if(!notNull(request.salaryYearMonth)) {
message.warning("薪资所属月不能为空")
return false;
}
return true;
}
render() {
const { attendanceStore: { importLedgerList }} = this.props;
return (
<Modal width={600} title="引用考勤数据" footer={
<div style={{display: "inline-block"}}>
<Button type="primary" onClick={() => {
this.handleSync()
}}>同步</Button>
<Button type="default" onClick={() => {
this.handleHeaderSet()
}}>表头设置</Button>
</div>
} visible={this.props.visible} onCancel={this.props.onCancel}>
<Row style={{marginBottom: "10px"}}>
<Col span={8}>薪资所属月: <RequiredLabelTip /></Col>
<Col span={16}>
<WeaDatePicker
format="yyyy-MM"
style={{width: 200}}
value={this.state.request.salaryYearMonth}
onChange={(value) => {
this.handleRequestChange({salaryYearMonth: value})
}}
/>
</Col>
</Row>
<Row style={{marginBottom: "10px"}}>
<Col span={8}>薪资账套：<RequiredLabelTip /></Col>
<Col span={16}>
{
this.state.inited && <Select
defaultValue={this.state.request.salarySobId} value={this.state.request.salarySobId} style={{ width: "200px" }}
className="wea-select"
notFoundContent="暂无数据"
onChange={(value) => {
this.handleRequestChange({salarySobId: value})
}}>
{importLedgerList.map(item => (
<Option value={item.id} key={item.id}>{item.content}</Option>
))}
</Select>
}
</Col>
</Row>
{/* <Row style={{marginBottom: "10px"}}>
<Col span={8}>添加账套外人员</Col>
<Col span={16}>
<WeaBrowser
type={17}
textDecoration={true}
inputStyle={{ width: 200 }}
onChange={(ids, names, datas) =>
this.handleRequestChange({employeeIds: ids.split(",")})
}
isSingle={false}
/>
</Col>
</Row> */}
<Row style={{marginBottom: "10px"}}>
<Col span={8}>备注</Col>
<Col span={16}>
<WeaInput style={{width: 200}} value={this.state.request.description} onChange={(value) => {
this.handleRequestChange({description: value})
}}/>
</Col>
</Row>
<SelectItemModal
onShowChecked={(value) => {
this.props.onShowChecked(value)
}}
onRestoreDefault={() => {
this.props.onRestoreDefault()
}}
onSetDefault={() => {
this.props.onSetDefault()
}}
onSearch={(value) => {
this.props.onSearch(value)
}}
onSave={(value) => {
this.props.onSave(value)
}}
visible={this.state.headerSetVisible} onCancel={() => this.setState({headerSetVisible: false})}>
<SelectItemsWrapper items={this.props.items} title={"考勤模块"} onChange={(value) => {
this.props.onChange(value)
}}/>
</SelectItemModal>
</Modal>
)
}
}
<SelectItemModal
onShowChecked={(value) => {
this.props.onShowChecked(value);
}}
onRestoreDefault={() => {
this.props.onRestoreDefault();
}}
onSetDefault={() => {
this.props.onSetDefault();
}}
onSearch={(value) => {
this.props.onSearch(value);
}}
onSave={(value) => {
this.props.onSave(value);
}}
visible={this.state.headerSetVisible} onCancel={() => this.setState({ headerSetVisible: false })}>
<SelectItemsWrapper items={this.props.items} title={"考勤模块"} onChange={(value) => {
this.props.onChange(value);
}}/>
</SelectItemModal>
</WeaDialog>
);
}
}

14
pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js
View File

@ -415,7 +415,7 @@ export default class CumDeduct extends React.Component {
};
const renderBtns = () => {
return (
return [
<Dropdown.Button
onClick={handleExportAllDetailClick}
overlay={
@ -423,10 +423,10 @@ export default class CumDeduct extends React.Component {
<Menu.Item key="1">导出选中</Menu.Item>
</Menu>
}
type="ghost">
type="primary">
导出全部
</Dropdown.Button>
);
];
};
const pagination = {
@ -504,7 +504,7 @@ export default class CumDeduct extends React.Component {
title="累计专项附加扣除" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
buttons={showOperateBtn ? btns : []}>
<div className="weaTabWrapper">
@ -549,7 +549,7 @@ export default class CumDeduct extends React.Component {
onFinish={() => {
setModalVisiable(false);
setStep(0);
doSearch({ declareMonth: [this.state.monthValue], taxAgentId: taxAgentId === "All" ? "" : taxAgentId });
doSearch({ declareMonth: this.state.monthValue ? [this.state.monthValue] : "", taxAgentId: taxAgentId === "All" ? "" : taxAgentId });
}}
previewImport={(params) => {
previewImport(params);
@ -568,6 +568,7 @@ export default class CumDeduct extends React.Component {
{slideVisiable && (
<WeaSlideModal
className="slideOuterWrapper"
visible={slideVisiable}
top={0}
width={60}
@ -577,13 +578,12 @@ export default class CumDeduct extends React.Component {
title={
<SlideModalTitle
subtitle={"累计专项附加扣除记录"}
subTabs={[{ title: "基础设置" }]}
onSave={() => {
this.state.currentOperate == "add" ? doSave() : doUpdate();
}}
editable={false}
showOperateBtn={showOperateBtn}
btns={showOperateBtn ? renderBtns() : null}
customOperate={showOperateBtn ? renderBtns() : []}
/>
}
content={

28
pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.less
View File

@ -55,3 +55,31 @@
}
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
z-index: 99;
top: 10px!important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
}
}
}

12
pc4mobx/hrmSalary/pages/dataAcquisition/cumSituation/index.js
View File

@ -399,7 +399,7 @@ export default class CumSituation extends React.Component {
};
const renderBtns = () => {
return (
return [
<Dropdown.Button
onClick={handleExportAllDetailClick}
overlay={
@ -407,10 +407,10 @@ export default class CumSituation extends React.Component {
<Menu.Item key="1">导出选中</Menu.Item>
</Menu>
}
type="ghost">
type="primary">
导出全部
</Dropdown.Button>
);
];
};
const pagination = {
@ -484,7 +484,7 @@ export default class CumSituation extends React.Component {
title="往期累计情况（工资、薪金）" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
buttons={showOperateBtn ? btns : []}>
@ -544,6 +544,7 @@ export default class CumSituation extends React.Component {
/>}
{slideVisiable &&
<WeaSlideModal
className="slideOuterWrapper"
visible={slideVisiable}
top={0}
width={60}
@ -553,13 +554,12 @@ export default class CumSituation extends React.Component {
title={
<SlideModalTitle
subtitle={"往期累计情况（工资、薪金）记录"}
subTabs={[{ title: "基础设置" }]}
onSave={() => {
this.state.currentOperate == "add" ? doSave() : doUpdate();
}}
editable={false}
showOperateBtn={showOperateBtn}
btns={showOperateBtn ? renderBtns() : null}
customOperate={showOperateBtn ? renderBtns() : []}
/>
}
content={

27
pc4mobx/hrmSalary/pages/dataAcquisition/cumSituation/index.less
View File

@ -0,0 +1,27 @@
.slideOuterWrapper{
.wea-slide-modal-title{
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
z-index: 99;
top: 10px!important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
}
}
}

50
pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.js
View File

@ -1,43 +1,19 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import {
Button,
Table,
DatePicker,
Dropdown,
Menu,
Modal,
message,
Row,
Col
} from "antd";
import {
WeaTop,
WeaTab,
WeaRightMenu,
WeaRangePicker,
WeaDatePicker,
WeaSelect,
WeaHelpfulTip,
WeaSlideModal,
WeaTable
} from "ecCom";
import { Button, Col, Dropdown, Menu, message, Row } from "antd";
import { WeaDatePicker, WeaHelpfulTip, WeaRightMenu, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop } from "ecCom";
import moment from "moment";
import { renderNoright, getSearchs } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../../components/customTab";
import ContentWrapper from "../../../components/contentWrapper";
import { getSearchs, renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import ImportModal from "../../../components/importModal";
import { modalColumns } from "./columns";
const { MonthPicker } = DatePicker;
import "./index.less";
import SlideModalTitle from "../../../components/slideModalTitle";
import EditSlideContent from "./editSlideContent";
import { optionAddAll } from "../../../util/options";
@inject("otherDeductStore", "taxAgentStore")
@observer
export default class OtherDeduct extends React.Component {
@ -147,7 +123,7 @@ export default class OtherDeduct extends React.Component {
} = this.props;
setSlideVisiable(true);
setCurrentRecord(record);
getOtherDeductDetailList(record.id,{taxAgentId:record.taxAgentId});
getOtherDeductDetailList(record.id, { taxAgentId: record.taxAgentId });
};
// 增加编辑功能，重写columns绑定事件
@ -181,7 +157,7 @@ export default class OtherDeduct extends React.Component {
</a>
);
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />;
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
}
};
return newColumn;
@ -411,7 +387,7 @@ export default class OtherDeduct extends React.Component {
};
const renderBtns = () => {
return (
return [
<Dropdown.Button
onClick={handleExportAllDetailClick}
overlay={
@ -419,10 +395,10 @@ export default class OtherDeduct extends React.Component {
<Menu.Item key="1">导出选中</Menu.Item>
</Menu>
}
type="ghost">
type="primary">
导出全部
</Dropdown.Button>
);
];
};
const rowSelection = {
@ -495,9 +471,9 @@ export default class OtherDeduct extends React.Component {
<WeaRightMenu datas={rightMenu}>
<WeaTop
title="其他免税扣除" // 文字
icon={<i className="icon-coms-meeting" />} // 左侧图标
icon={<i className="icon-coms-meeting"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
buttons={showOperateBtn ? btns : []}>
@ -557,6 +533,7 @@ export default class OtherDeduct extends React.Component {
/>}
{slideVisiable &&
<WeaSlideModal
className="slideOuterWrapper"
visible={slideVisiable}
top={0}
width={60}
@ -566,13 +543,12 @@ export default class OtherDeduct extends React.Component {
title={
<SlideModalTitle
subtitle={"其他免税扣除记录"}
subTabs={[{ title: "基础设置" }]}
onSave={() => {
this.state.currentOperate == "add" ? doSave() : doUpdate();
}}
editable={false}
showOperateBtn={showOperateBtn}
btns={showOperateBtn ? renderBtns() : null}
customOperate={showOperateBtn ? renderBtns() : []}
/>
}
content={

29
pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/index.less
View File

@ -8,4 +8,31 @@
text-decoration: none;
}
}
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
z-index: 99;
top: 10px!important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
}
}
}

101
pc4mobx/hrmSalary/pages/declare/generateModal.js
View File

@ -1,5 +1,5 @@
import React from "react";
import { WeaDatePicker, WeaDialog, WeaFormItem, WeaHelpfulTip, WeaSelect } from "ecCom";
import { WeaDatePicker, WeaDialog, WeaError, WeaFormItem, WeaHelpfulTip, WeaSelect } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import "./index.less";
@ -21,6 +21,21 @@ export default class GenerateModal extends React.Component {
declareStore: { saveDeclare }
} = this.props;
const { date, taxAgentId } = this.state;
if (_.isEmpty(date) && _.isEmpty(taxAgentId)) {
this.refs.weaError.showError();
this.refs.weaError1.showError();
return;
}
if (_.isEmpty(date)) {
this.refs.weaError.showError();
return;
}
if (_.isEmpty(taxAgentId)) {
this.refs.weaError1.showError();
return;
}
saveDeclare({ salaryMonthStr: date, taxAgentId }).then(() => {
this.props.onGenerate();
});
@ -35,8 +50,18 @@ export default class GenerateModal extends React.Component {
visible={this.props.visible}
onCancel={() => this.props.onCancel()}
initLoadCss
maxHeight={250}
className={"generateWapper"}
className="generateWapper"
title={
<span>
<span>申报</span>
<WeaHelpfulTip
style={{ marginLeft: 8, position: "relative", top: "-1px" }}
width={200}
title="提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报"
placement="topLeft"
/>
</span>
}
buttons={
[<Button
type="primary"
@ -46,52 +71,56 @@ export default class GenerateModal extends React.Component {
生成申报表
</Button>]
}>
<div
style={{
height: "47px",
lineHeight: "47px",
borderBottom: "1px solid #eee"
}}>
<span style={{ fontSize: "14px", marginLeft: "20px" }}>申报</span>
<WeaHelpfulTip
style={{ float: "right", marginRight: "40px" }}
width={200}
title="提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报"
placement="topLeft"
/>
</div>
<div style={{ marginTop: "10px", padding: "20px 20%" }}>
<WeaFormItem
label="薪资所属月"
style={{ marginBottom: 10 }}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}>
<WeaDatePicker
<WeaError
style={{ width: "100%" }}
format="yyyy-MM"
value={this.state.date}
onChange={(value) => this.setState({ date: value })}
/>
tipPosition="bottom"
ref="weaError"
error="请选择薪资所属月">
<WeaDatePicker
style={{ width: "100%" }}
viewAttr={3}
format="YYYY-MM"
value={this.state.date}
onChange={(value) => {
if (_.isEmpty(value)) this.refs.weaError.showError();
this.setState({ date: value });
}}
/>
</WeaError>
</WeaFormItem>
<WeaFormItem
label="个税扣缴义务人"
style={{ marginBottom: 10 }}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}>
<WeaSelect
showSearch // 设置select可搜索
options={taxAgentAdminOption}
value={this.state.taxAgentId}
onChange={(taxAgentId) => {
this.setState({ taxAgentId });
}}
/>
<WeaHelpfulTip
style={{ position: "absolute", bottom: "8px", right: 0 }}
width={200}
title="提示：可选择单个个税扣缴义务人进行申报，若不选择，则批量对管理下的所有个税扣缴义务人进行申报；"
placement="topLeft"
/>
<WeaError
style={{ width: "100%" }}
tipPosition="bottom"
ref="weaError1"
error="请选择个税扣缴义务人">
<WeaSelect
showSearch // 设置select可搜索
viewAttr={3}
options={[{ key: "", showname: "" }, ...taxAgentAdminOption]}
value={this.state.taxAgentId}
onChange={(taxAgentId) => {
if (_.isEmpty(taxAgentId)) this.refs.weaError1.showError();
this.setState({ taxAgentId });
}}
/>
<WeaHelpfulTip
style={{ position: "absolute", bottom: "8px", right: 0 }}
width={200}
title="提示：可选择单个个税扣缴义务人进行申报，若不选择，则批量对管理下的所有个税扣缴义务人进行申报；"
placement="topLeft"
/>
</WeaError>
</WeaFormItem>
</div>
</WeaDialog>

8
pc4mobx/hrmSalary/pages/declare/index.js
View File

@ -1,14 +1,10 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaRightMenu, WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import CustomTable from "../../components/customTable";
import { columns } from "./columns";
import GenerateModal from "./generateModal";
import moment from "moment";
@ -229,9 +225,9 @@ export default class Declare extends React.Component {
>
<WeaTop
title="个税申报表" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>

20
pc4mobx/hrmSalary/pages/declare/index.less
View File

@ -1,20 +1,26 @@
.generateDeclarationDetail {
padding: 20px;
.tabWrapper{
padding-left: 10px
}
.tableWrapper {
height: calc(100vh - 88px);
height: calc(100vh - 48px);
overflow: auto;
}
}
.generateWapper {
.wea-dialog-body {
height: auto !important;
}
.wea-select {
.ant-select {
width: 90% !important;
.ant-select-selection{
border-radius: 0!important;
height: 30px!important;
.ant-select-selection {
border-radius: 0 !important;
height: 30px !important;
}
}
}
}
}

70
pc4mobx/hrmSalary/pages/ledger/addUserModal.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { Modal, Button, Row, Col, Radio } from "antd";
import { WeaSelect, WeaBrowser } from "ecCom";
import { Button, Col, Radio, Row } from "antd";
import { WeaBrowser, WeaDialog, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import RequiredLabelTip from "../../components/requiredLabelTip";
@ -8,23 +8,23 @@ const objectOptions = [
{
key: "EMPLOYEE",
showname: "人员",
selected: false,
selected: false
},
{
key: "SUBCOMPANY",
showname: "分部",
selected: false,
selected: false
},
{
key: "DEPT",
showname: "部门",
selected: false,
selected: false
},
{
key: "POSITION",
showname: "岗位",
selected: false,
},
selected: false
}
];
@inject("ledgerStore")
@ -35,7 +35,7 @@ export default class AddUserModal extends React.Component {
this.state = {
selectedKey: "EMPLOYEE",
radioValue: "ALL",
ids: "",
ids: ""
};
}
@ -46,7 +46,7 @@ export default class AddUserModal extends React.Component {
// 保存
handleSave() {
const {
ledgerStore: { saveLedgerPersonRange, salarySobId, includeType },
ledgerStore: { saveLedgerPersonRange, salarySobId, includeType }
} = this.props;
saveLedgerPersonRange({
salarySobId: salarySobId,
@ -54,7 +54,7 @@ export default class AddUserModal extends React.Component {
employeeStatus: this.state.radioValue,
targetParams: this.state.ids
.split(",")
.map((id) => ({ targetType: this.state.selectedKey, targetId: id })),
.map((id) => ({ targetType: this.state.selectedKey, targetId: id }))
});
}
@ -63,42 +63,40 @@ export default class AddUserModal extends React.Component {
this.setState({
selectedKey: "EMPLOYEE",
radioValue: "ALL",
ids: "",
ids: ""
});
}
render() {
return (
<Modal
<WeaDialog
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}}
width={600}
style={{ width: 600 }}
title="关联人员"
footer={
<div style={{ display: "inlne-block" }}>
<Button
type="primary"
onClick={() => {
this.handleSave();
}}>
保存
</Button>
<Button
type="default"
onClick={() => {
this.handleReset();
}}>
重置
</Button>
</div>
}>
buttons={[
<Button
type="primary"
onClick={() => {
this.handleSave();
}}>
保存
</Button>,
<Button
type="default"
onClick={() => {
this.handleReset();
}}>
重置
</Button>
]}>
<div style={{ padding: "20px" }}>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>
对象类型
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={16}>
<div style={{ display: "inline-block", verticalAlign: "top" }}>
@ -118,6 +116,7 @@ export default class AddUserModal extends React.Component {
title={"人员选择"}
isSingle={false}
inputStyle={{ width: 200 }}
value={this.state.ids}
onChange={(ids, names, datas) => {
this.setState({ ids });
}}
@ -128,6 +127,7 @@ export default class AddUserModal extends React.Component {
type={57}
title={"部门选择"}
isSingle={false}
value={this.state.ids}
inputStyle={{ width: 200 }}
onChange={(ids, names, datas) => {
this.setState({ ids });
@ -139,6 +139,7 @@ export default class AddUserModal extends React.Component {
type={164}
title={"分部选择"}
isSingle={false}
value={this.state.ids}
inputStyle={{ width: 200 }}
onChange={(ids, names, datas) => {
this.setState({ ids });
@ -150,6 +151,7 @@ export default class AddUserModal extends React.Component {
type={278}
title={"岗位选择"}
isSingle={false}
value={this.state.ids}
inputStyle={{ width: 200 }}
onChange={(ids, names, datas) => {
this.setState({ ids });
@ -162,7 +164,7 @@ export default class AddUserModal extends React.Component {
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>
选择员工状态
<RequiredLabelTip />
<RequiredLabelTip/>
</Col>
<Col span={16}>
<Radio.Group
@ -175,7 +177,7 @@ export default class AddUserModal extends React.Component {
</Col>
</Row>
</div>
</Modal>
</WeaDialog>
);
}
}

13
pc4mobx/hrmSalary/pages/ledger/calcRulesForm.js
View File

@ -1,5 +1,5 @@
import React from "react";
import { Icon } from "antd";
import { Button } from 'antd';
import { WeaTable } from "ecCom";
import { slideStep4Columns } from "./columns";
import "./index.less";
@ -87,9 +87,14 @@ export default class CalRulesForm extends React.Component {
<div className="headerIcon">
{
canEdit === "true" &&
<Icon className="iconItem" type="plus-square" onClick={() => {
this.setState({ modalVisible: true });
}}/>
<Button
type="primary"
size="small"
style={{ marginRight: 10 }}
onClick={() => {
this.setState({ modalVisible: true });
}}
><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
}
</div>
<div className="tableWrapper">

13
pc4mobx/hrmSalary/pages/ledger/copyFormModal.js
View File

@ -6,7 +6,7 @@
*/
import React from "react";
import { Button, Col, Modal, Row } from "antd";
import { WeaError, WeaInput, WeaSelect } from "ecCom";
import { WeaError, WeaInput, WeaSelect, WeaDialog } from "ecCom";
import "./index.less";
export default class CopyFormModal extends React.Component {
@ -22,13 +22,14 @@ export default class CopyFormModal extends React.Component {
const { taxAgentStore } = this.props;
const { taxAgentAdminOption } = taxAgentStore;
return (
<Modal
width={600}
<WeaDialog
style={{width: 600}}
visible={this.props.visible}
title="复制账套"
initLoadCss
onCancel={() => this.props.onCancel()}
className="copyModalWrapper"
footer={
buttons={[
<Button
type="primary"
onClick={() => {
@ -47,7 +48,7 @@ export default class CopyFormModal extends React.Component {
}}>
保存
</Button>
}>
]}>
<Row style={{ display: "flex", alignItems: "center" }}>
<Col span={6}>账套名称</Col>
<Col span={18}>
@ -84,7 +85,7 @@ export default class CopyFormModal extends React.Component {
</WeaError>
</Col>
</Row>
</Modal>
</WeaDialog>
);
}
}

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

@ -16,7 +16,6 @@ import SlideModalTitle from "../../components/slideModalTitle";
import CopyFormModal from "./copyFormModal";
import "./index.less";
const { MonthPicker } = DatePicker;
@inject("ledgerStore", "taxAgentStore")
@observer
@ -406,7 +405,7 @@ export default class Ledger extends React.Component {
title="薪资账套" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }}>
<CustomTab
@ -435,80 +434,71 @@ export default class Ledger extends React.Component {
this.setState({ stepSlideVisible: false });
}}
customOperate={
<div style={{ display: "inline-block" }}>
{currentStep == 0 &&
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 || currentStep == 3) &&*/}
{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 == 4 &&*/}
{currentStep == 3 &&
<div>
<Button
type="default"
style={{ marginRight: "10px" }}
onClick={() => {
prevStep();
}}>
上一步
</Button>
<Button
type="primary"
onClick={() => {
handleStepSave();
}}>
完成
</Button>
</div>}
</div>
</Button>
]: currentStep == 1 ? [
<Button
type="default"
onClick={() => {
this.setState({ stepSlideVisible: false });
}}>
完成，跳过所有步骤
</Button>,
<Button
type="primary"
style={{ marginLeft: "10px" }}
onClick={() => {
handleStepSave();
}}>
下一步
</Button>
]:currentStep == 2 ? [
<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>
] : currentStep == 3 ? [
<Button
type="default"
style={{ marginRight: "10px" }}
onClick={() => {
prevStep();
}}>
上一步
</Button>,
<Button
type="primary"
onClick={() => {
handleStepSave();
}}>
完成
</Button>
] : []
}
title="新建账套"
content={
@ -523,6 +513,7 @@ export default class Ledger extends React.Component {
/>}
{this.state.editSlideVisible &&
<WeaSlideModal
className='slideOuterWrapper'
visible={this.state.editSlideVisible}
top={0}
width={45}
@ -543,8 +534,8 @@ export default class Ledger extends React.Component {
editable={canEdit === "true"}
selectedTab={selectedTab}
onSave={() => this.handleEditSlideSave()}
subItemChange={item => {
this.setState({ selectedTab: item.key });
subItemChange={selectedTab => {
this.setState({ selectedTab });
}}
/>
}
@ -557,10 +548,14 @@ export default class Ledger extends React.Component {
{selectedTab == 4 && <ValidRulesForm edit={true}/>}
</div>
}
onClose={() => this.setState({ editSlideVisible: false })}
onClose={() => this.setState({ editSlideVisible: false },()=>{
this.setState({ selectedTab:0 });
})}
showMask={true}
closeMaskOnClick={() =>
this.setState({ editSlideVisible: false })}
this.setState({ editSlideVisible: false },()=>{
this.setState({ selectedTab:0 });
})}
/>}
</WeaTop>
</WeaRightMenu>

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

@ -61,18 +61,30 @@
}
.headerIcon {
color: #4ba9f2;
display: inline-block;
.ant-btn {
margin-left: 10px;
border-radius: 0;
padding: 0;
background: transparent;
border: none;
font-size: 20px;
line-height: 20px;
}
.iconItem {
cursor: pointer;
margin-right: 10px;
.ant-btn.ant-btn-primary[disabled] {
color: #d8d8d8;
}
.ant-btn.ant-btn-primary {
color: #55a1f8;
}
}
}
.salaryItemForm {
padding: 10px 20px;
padding-bottom: 30px;
.btnBar {
height: 47px;
@ -114,10 +126,22 @@
.rightBtnsWrapper {
float: right;
.iconItem {
margin-right: 10px;
color: #2db7f5;
cursor: pointer;
.ant-btn {
margin-left: 10px;
border-radius: 0;
padding: 0;
background: transparent;
border: none;
font-size: 20px;
line-height: 20px;
}
.ant-btn.ant-btn-primary[disabled] {
color: #d8d8d8;
}
.ant-btn.ant-btn-primary {
color: #55a1f8;
}
}
@ -135,10 +159,22 @@
.headerIcon {
float: right;
cursor: pointer;
.ant-btn {
margin-left: 10px;
border-radius: 0;
padding: 0;
background: transparent;
border: none;
font-size: 20px;
line-height: 20px;
}
.iconItem {
margin-right: 10px;
color: #2db7f5;
.ant-btn.ant-btn-primary[disabled] {
color: #d8d8d8;
}
.ant-btn.ant-btn-primary {
color: #55a1f8;
}
}
@ -200,6 +236,8 @@
.copyModalWrapper {
.ant-modal-body {
padding-left: 150px;
padding-top: 20px;
padding-bottom: 20px;
}
.wea-select {
@ -232,3 +270,33 @@
background-color: #f7fbfe;
}
}
.slideOuterWrapper {
.wea-slide-modal-title {
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close {
z-index: 99;
top: 10px !important;
}
}
@media (min-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: 100% !important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper {
.reqTopWrapper .wea-new-top-req-title > div:first-child > div {
max-width: calc(100% - 96px) !important;
}
}
}

9
pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js
View File

@ -126,7 +126,7 @@ export default class SalaryItemForm extends React.Component {
<div className="btnBar">
<div className="btns">
<Button
type="default"
type="primary"
onClick={() => {
setAddCategoryVisible(true);
}}
@ -134,7 +134,7 @@ export default class SalaryItemForm extends React.Component {
新增分类
</Button>
<Button
type="default"
type="primary"
style={{ marginLeft: "10px" }}
onClick={() => {
this.handlePreview();
@ -157,7 +157,10 @@ export default class SalaryItemForm extends React.Component {
/>
</span>
<div className="rightBtnsWrapper">
<Icon type="down"/>
<i
className="icon-coms-down2"
style={{ cursor: "pointer",fontSize: 18 }}
/>
</div>
</div>
<UserInfoSelected/>

37
pc4mobx/hrmSalary/pages/ledger/slideRefereUser.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Icon, message, Modal, Table } from "antd";
import { message, Modal, Table, Button } from "antd";
import { WeaInputSearch } from "ecCom";
import AddUserModal from "./addUserModal";
import "./index.less";
@ -154,23 +154,24 @@ export default class SlideRefereUser extends React.Component {
this.handleSearch(value);
}}
/>
{canEdit === "true" &&
<div className="headerIcon">
<Icon
className="iconItem"
type="minus-square"
onClick={() => {
this.handleTabDelete();
}}
/>
<Icon
className="iconItem"
type="plus-square"
onClick={() => {
setAddUserModalVisible(true);
}}
/>
</div>}
{
canEdit === "true" &&
<div className='headerIcon'>
<Button type="primary"
size="small"
onClick={() => {
this.handleTabDelete();
}}
><span className="icon-coms-form-delete-hot" title="删除"></span></Button>
<Button type="primary"
size="small"
style={{ marginRight: 10 }}
onClick={() => {
setAddUserModalVisible(true);
}}
><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
</div>
}
</div>
<div className="slideRefereUserTableWrapper">
<Table

86
pc4mobx/hrmSalary/pages/ledger/step3/AddCategoryModal.js
View File

@ -1,36 +1,56 @@
import React from 'react'
import { Row, Col, Modal, Button } from 'antd'
import { WeaInput } from 'ecCom'
import RequiredLabelTip from '../../../components/requiredLabelTip'
import React from "react";
import { Button, Col, Row } from "antd";
import { WeaDialog, WeaError, WeaInput } from "ecCom";
export default class AddCategoryModal extends React.Component {
constructor(props) {
super(props)
this.state = {
name: this.props.title ? this.props.title : ""
}
}
render() {
return (
<Modal title={this.props.title && this.props.title !== '' ? "修改分类" : "新增分类"} footer={<Button type="primary" onClick={() => {
this.props.onSave(this.state.name)
}}>保存</Button>} width={600}
visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}}
>
<div style={{padding: "20px"}}>
<Row style={{display:"flex", alignItems:"center"}}>
<Col span={6}>分类名称<RequiredLabelTip /></Col>
<Col span={18}>
<WeaInput value={this.state.name} onChange={(value) => {
this.setState({name: value})
}}/>
</Col>
</Row>
</div>
</Modal>
)
}
constructor(props) {
super(props);
this.state = {
name: this.props.title ? this.props.title : ""
};
}
render() {
return (
<WeaDialog
title={this.props.title && this.props.title !== "" ? "修改分类" : "新增分类"}
buttons={[<Button type="primary" onClick={() => {
if (!this.state.name) {
this.refs.weaError.showError();
return;
}
this.props.onSave(this.state.name);
}}>保存</Button>]} style={{ width: 600 }}
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}}
>
<div style={{ padding: "20px" }}>
<Row style={{ display: "flex", alignItems: "center" }}>
<Col span={6}>分类名称</Col>
<Col span={18}>
<WeaError
tipPosition="bottom"
ref="weaError"
error="请填写分类名称"
style={{ width: "100%" }}>
<WeaInput
style={{ width: "100%" }}
viewAttr={3}
value={this.state.name}
onChange={(value) => {
if (value === "") {
this.refs.weaError.showError();
return;
}
this.setState({ name: value });
}}/>
</WeaError>
</Col>
</Row>
</div>
</WeaDialog>
);
}
}

254
pc4mobx/hrmSalary/pages/ledger/step3/AddSalaryItemModal.js
View File

@ -1,148 +1,140 @@
import React from 'react'
import { inject, observer } from 'mobx-react';
import { Modal, Button, message, Switch } from 'antd'
import { WeaInputSearch, WeaTable } from 'ecCom'
import { WeaTableNew } from "comsMobx"
import { toJS } from 'mobx'
import CustomTable from '../../../components/customTable'
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, message, Switch } from "antd";
import { WeaDialog, WeaInputSearch } from "ecCom";
import CustomTable from "../../../components/customTable";
@inject('ledgerStore')
@inject("ledgerStore")
@observer
export default class AddSalaryItemModal extends React.Component {
constructor(props) {
super(props)
this.state = {
searchValue: "",
selectedRowKeys:[]
constructor(props) {
super(props);
this.state = {
searchValue: "",
selectedRowKeys: []
};
}
componentWillMount() {
const { ledgerStore: { listSalaryItem } } = this.props;
listSalaryItem();
}
// 增加编辑功能，重写columns绑定事件
getColumns(columns) {
if (!columns) {
return [];
}
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 "useDefault":
case "useInEmployeeSalary":
return <Switch checked={text == 1}/>;
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
}
}
};
return newColumn;
});
return newColumns;
}
componentWillMount() {
const { ledgerStore: {listSalaryItem}} = this.props;
listSalaryItem()
handleAdd() {
const { ledgerStore } = this.props;
const { addSalaryItemDataSource, addItemsToGroup, addExcludeIds } = ledgerStore;
const { selectedRowKeys } = this.state;
if (selectedRowKeys.length == 0) {
message.warning("未选择条目");
return;
}
let selectItems = [];
// 增加编辑功能，重写columns绑定事件
getColumns(columns) {
if(!columns) {
return []
addSalaryItemDataSource.map(item => {
item = { ...item };
selectedRowKeys.map(key => {
if (item.id == key) {
item.salaryItemId = item.id;
item.key = item.id;
selectItems.push(item);
}
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 "useDefault":
case "useInEmployeeSalary":
return <Switch checked={text == 1}/>
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
}
}
return newColumn;
});
return newColumns;
}
});
});
handleAdd() {
const { ledgerStore } = this.props;
const { addSalaryItemDataSource, addItemsToGroup, addExcludeIds } = ledgerStore
const { selectedRowKeys } = this.state;
if(selectedRowKeys.length == 0) {
message.warning("未选择条目")
}
let selectItems = []
addSalaryItemDataSource.map(item => {
item = {...item}
selectedRowKeys.map(key => {
if(item.id == key) {
item.salaryItemId = item.id
item.key = item.id
selectItems.push(item)
}
})
})
addItemsToGroup(this.props.title, selectItems)
this.props.onCancel();
}
addItemsToGroup(this.props.title, selectItems);
this.props.onCancel();
}
handleSearch = (value) => {
const { ledgerStore: {listSalaryItem}} = this.props
listSalaryItem(value)
}
handleSearch = (value) => {
const { ledgerStore: { listSalaryItem } } = this.props;
listSalaryItem(value);
};
onSelectChange = selectedRowKeys => {
this.setState({ selectedRowKeys });
}
onSelectChange = selectedRowKeys => {
this.setState({ selectedRowKeys });
};
// 分页
handleDataPageChange(value) {
const { ledgerStore: {listSalaryItem}} = this.props;
listSalaryItem(this.state.searchValue, value)
}
// 分页
handleDataPageChange(value) {
const { ledgerStore: { listSalaryItem } } = this.props;
listSalaryItem(this.state.searchValue, value);
}
render() {
const { ledgerStore } = this.props;
const { addSalaryItemDataSource, addSalaryItemColumns, addSalaryItemPageInfo,loading } = ledgerStore
const { searchValue, selectedRowKeys } = this.state;
render() {
const { ledgerStore } = this.props;
const { addSalaryItemDataSource, addSalaryItemColumns, addSalaryItemPageInfo, loading } = ledgerStore;
const { searchValue, selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange
};
return (
<Modal
visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}} width={900} height={600}
style={{top: 20}}
footer={null}
>
<div style={{height: "47px", lineHeight: '47px'}}>
<span style={{marginLeft: "10px", fontSize: '14px'}}>添加薪资项目</span>
<div style={{float: "right", marginRight: "40px"}}>
<Button type="primary" style={{marginRight: '10px'}} onClick={() => {
this.handleAdd()
}}>添加</Button>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.setState({searchValue: value})
}} onSearch={(value) => {
this.handleSearch(value)
}}/>
</div>
</div>
return (
<WeaDialog
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}}
title="添加薪资项目"
style={{ width: "80vw", height: 600 }}
buttons={[
<Button
type="primary"
onClick={() => {
this.handleAdd();
}}>添加</Button>
]}
>
<div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", padding: 20 }}>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.setState({ searchValue: value });
}} onSearch={(value) => {
this.handleSearch(value);
}}/>
</div>
<div style={{margin: "10px", height: "400px", overflowY: "scroll"}}>
{/* <WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={salaryItemTableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/> */}
<CustomTable
loading={loading}
dataSource={addSalaryItemDataSource}
columns={this.getColumns(addSalaryItemColumns)}
rowSelection={rowSelection}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value)
},
total: addSalaryItemPageInfo.total,
showTotal: (total) => `共 ${total} 条`,
current: addSalaryItemPageInfo.pageNum
}}
/>
</div>
</Modal>
)
}
}
<div style={{ height: "100%", overflowY: "scroll" }}>
<CustomTable
loading={loading}
dataSource={addSalaryItemDataSource}
columns={this.getColumns(addSalaryItemColumns)}
rowSelection={rowSelection}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value);
},
total: addSalaryItemPageInfo.total,
showTotal: (total) => `共 ${total} 条`,
current: addSalaryItemPageInfo.pageNum
}}
/>
</div>
</WeaDialog>
);
}
}

160
pc4mobx/hrmSalary/pages/ledger/step3/UserInfoSelect.js
View File

@ -1,86 +1,88 @@
import React from 'react'
import { Icon, message } from "antd"
import { WeaSelect } from 'ecCom'
import { inject, observer } from 'mobx-react';
import CanDeleteItem from '../../../components/canDeleteItem'
import React from "react";
import { Icon, message } from "antd";
import { WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import CanDeleteItem from "../../../components/canDeleteItem";
@inject('ledgerStore')
@inject("ledgerStore")
@observer
export default class UserInfoSelected extends React.Component {
constructor(props) {
super(props)
this.state = {
list: [],
showSelect: false
}
constructor(props) {
super(props);
this.state = {
list: [],
showSelect: false
};
}
handleSelectChange(value) {
const { ledgerStore: { empBrowserList, userSelectedList } } = this.props;
let list = [...userSelectedList];
let selectedItem = {};
empBrowserList.map(item => {
if (item.key == value) {
selectedItem = item;
}
});
let flag = false;
list.map(item => {
if (item.key == value) {
flag = true;
}
});
if (!flag) {
list.push(selectedItem);
}
if (flag) {
message.warning("该信息已存在");
this.setState({ showSelect: false });
return;
}
const { ledgerStore: { empFields, addEmpFields, setUserSelectedList } } = this.props;
addEmpFields(value);
this.setState({ showSelect: false });
}
handleItemDelete(item) {
const { ledgerStore: { userSelectedList, setUserSelectedList, empFields, setEmpFields } } = this.props;
let list = [...userSelectedList];
let fields = [...empFields];
if (item.canDelete === false) {
message.warning("该项不可删除");
return;
}
handleSelectChange(value) {
const { ledgerStore: {empBrowserList, userSelectedList}} = this.props;
let list = [...userSelectedList]
let selectedItem = {}
empBrowserList.map(item => {
if(item.key == value) {
selectedItem = item
}
})
let flag = false;
list.map(item => {
if(item.key == value) {
flag = true
}
})
if(!flag) {
list.push(selectedItem)
}
if(flag) {
message.warning("该信息已存在")
this.setState({showSelect: false})
return
}
const { ledgerStore: {empFields, addEmpFields, setUserSelectedList}} = this.props;
addEmpFields(value)
this.setState({showSelect: false})
}
fields = fields.filter(i => item.fieldId != i.fieldId);
fields.map((item, index) => {
item.sortedIndex = index;
});
setEmpFields(fields);
setUserSelectedList(list.filter(i => item.fieldId != i.fieldId));
}
handleItemDelete(item) {
const { ledgerStore: {userSelectedList, setUserSelectedList, empFields, setEmpFields}} = this.props;
let list = [...userSelectedList]
let fields = [...empFields]
if(item.canDelete === false) {
message.warning("该项不可删除");
return
render() {
const { ledgerStore: { empBrowserList, userSelectedList } } = this.props;
return (
<div className="userInfoSelected">
{
userSelectedList.map(item => (
<CanDeleteItem title={item.showname} item={item} onDelete={(item) => {
this.handleItemDelete(item);
}}/>
))
}
fields = fields.filter(i => item.fieldId != i.fieldId)
fields.map((item, index) => {
item.sortedIndex = index
})
setEmpFields(fields)
setUserSelectedList(list.filter(i => item.fieldId != i.fieldId))
}
render() {
const { ledgerStore: {empBrowserList, userSelectedList} } = this.props;
return (
<div className="userInfoSelected">
{
userSelectedList.map(item => (
<CanDeleteItem title={item.showname} item={item} onDelete={(item) => {
this.handleItemDelete(item)
}}/>
))
}
<Icon type="plus" style={{marginLeft: "10px", marginRight: "10px", cursor: "pointer"}} onClick={() => {
this.setState({showSelect: true})
}}/>
{
this.state.showSelect && empBrowserList.length > 0 && <WeaSelect showSearch options={empBrowserList} onChange={(value) => {
this.handleSelectChange(value)
}}/>
}
</div>
)
}
}
<Icon type="plus" style={{ marginLeft: "10px", marginRight: "10px", cursor: "pointer" }} onClick={() => {
this.setState({ showSelect: true });
}}/>
{
this.state.showSelect && empBrowserList.length > 0 &&
<WeaSelect showSearch options={empBrowserList}
style={{ width: 200 }} onChange={(value) => {
this.handleSelectChange(value);
}}/>
}
</div>
);
}
}

87
pc4mobx/hrmSalary/pages/ledger/step3/canMoveItem.js
View File

@ -1,6 +1,6 @@
import React, { Fragment } from "react";
import { Icon, message, Modal } from "antd";
import { WeaHelpfulTip, WeaTable, WeaCheckbox } from "ecCom";
import { Icon, message, Modal, Button} from "antd";
import { WeaCheckbox, WeaHelpfulTip, WeaTable } from "ecCom";
import { slideStep3Columns } from "../columns";
import AddSalaryItemModal from "./AddSalaryItemModal";
import { inject, observer } from "mobx-react";
@ -69,22 +69,22 @@ export default class CanMoveItem extends React.Component {
this.title = "";
}
handleChangeItem= (value,id)=>{
handleChangeItem = (value, id) => {
const { dataSource } = this.props;
let result = [...dataSource];
this.props.onChange(
_.map(result, item => {
if(id === item.id){
if (id === item.id) {
return {
...item,
itemHide: String(value)
}
};
}
return {...item}
return { ...item };
})
);
}
handleChangeAllItem= (value)=>{
};
handleChangeAllItem = (value) => {
const { dataSource } = this.props;
let result = [...dataSource];
this.props.onChange(
@ -92,10 +92,10 @@ export default class CanMoveItem extends React.Component {
return {
...item,
itemHide: String(value)
}
};
})
);
}
};
// 编辑公式
handleFormulaClick(formulaId, record) {
@ -183,8 +183,7 @@ export default class CanMoveItem extends React.Component {
sortedIndex,
ledgerStore: { setAddItemVisible, addItemVisible, itemGroups = [] }
} = this.props;
console.log(this.props.dataSource)
const checkValue= _.every(this.props.dataSource, it => it.itemHide && it.itemHide === '1' ) ? "1" : "0";
const checkValue = _.every(this.props.dataSource, it => it.itemHide && it.itemHide === "1") ? "1" : "0";
const {
selectedRowKeys,
formalModalVisible,
@ -198,27 +197,26 @@ export default class CanMoveItem extends React.Component {
disabled: !record.canDelete
})
};
console.log(checkValue)
const newColumns= [...columns,{
const newColumns = [...columns, {
title: <span>
<WeaCheckbox
value={checkValue}
onChange={value => {
this.handleChangeAllItem(value)
this.handleChangeAllItem(value);
}}
/>
<span style={{ marginLeft: 8 }}>隐藏</span>
</span>,
dataIndex: 'itemHide',
key: 'itemHide',
render: (text,record) => <WeaCheckbox
dataIndex: "itemHide",
key: "itemHide",
render: (text, record) => <WeaCheckbox
value={text ? String(text) : !text ? "0" : "1"}
onChange={value => {
this.handleChangeItem(value, record.id)
this.handleChangeItem(value, record.id);
}}
/>,
}]
/>
}];
return (
<div className="tableItemWrapper">
@ -236,6 +234,7 @@ export default class CanMoveItem extends React.Component {
marginRight: "10px",
cursor: "pointer"
}}
title="编辑"
onClick={() => {
this.handleEditGroupIconClick(this.props.title);
}}
@ -243,6 +242,7 @@ export default class CanMoveItem extends React.Component {
<i
className="icon-coms-Delete"
style={{ cursor: "pointer" }}
title="删除"
onClick={() => {
this.handleDeleteGroupIconClick();
}}
@ -257,6 +257,7 @@ export default class CanMoveItem extends React.Component {
sortedIndex !== 0 &&
<i className="icon-coms-Reverse"
onClick={() => this.props.onUpgo(sortedIndex)}
title="向上移动"
style={{
marginRight: 10,
cursor: "pointer"
@ -266,7 +267,8 @@ export default class CanMoveItem extends React.Component {
{
sortedIndex !== toJS(itemGroups).length - 1 &&
<i className="icon-coms-positive-sequence"
onClick={()=> this.props.onDowngo(sortedIndex)}
onClick={() => this.props.onDowngo(sortedIndex)}
title="向下移动"
style={{
cursor: "pointer"
}}
@ -275,26 +277,27 @@ export default class CanMoveItem extends React.Component {
</span>
</span>
<span className="rightBtnsWrapper">
{!disabled &&
<Fragment>
<Icon
className="iconItem"
type="minus-square"
onClick={() => {
this.handleDelete();
}}
/>
<Icon
className="iconItem"
type="plus-square"
onClick={() => {
this.setState({ addItemVisible: true });
}}
/>
</Fragment>}
<Icon
type={this.state.showContent ? "down" : "left"}
style={{ cursor: "pointer" }}
{
!disabled &&
<React.Fragment>
<Button type="primary"
size="small"
onClick={() => {
this.handleDelete();
}}
><span className="icon-coms-form-delete-hot" title="删除"></span></Button>
<Button type="primary"
size="small"
style={{ marginRight: 10 }}
onClick={() => {
this.setState({ addItemVisible: true });
}}
><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
</React.Fragment>
}
<i
className={this.state.showContent ? "icon-coms-down2" : "icon-coms-up2"}
style={{ cursor: "pointer",fontSize: 18 }}
onClick={() => {
this.handleTiggleContent();
}}

127
pc4mobx/hrmSalary/pages/ledger/step3/previewSalaryModal.js
View File

@ -1,70 +1,71 @@
import React from 'react'
import { Modal, Table } from 'antd'
import { inject, observer } from 'mobx-react';
import { WeaTable } from "ecCom"
import React from "react";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaTable } from "ecCom";
@inject('ledgerStore')
@inject("ledgerStore")
@observer
export default class PreviewSalaryModal extends React.Component {
getColumns() {
const { ledgerStore: { empFields, itemGroups }} = this.props;
let columns = []
let length = 0
getColumns() {
const { ledgerStore: { empFields, itemGroups } } = this.props;
let columns = [];
let length = 0;
empFields.map(item => {
columns.push({
title: item.fieldName,
key: item.fieldId,
width: 150
})
length ++
})
empFields.map(item => {
columns.push({
title: item.fieldName,
key: item.fieldId,
width: 150
});
length++;
});
itemGroups.map(item => {
if(item.id != "default") {
let columnItem = {
title: item.name,
children: item.items.map(i => {
return {
title: i.name,
key: i.id,
width: 150
}
length ++
})
}
columns.push(columnItem )
}
})
itemGroups.map(item => {
if (item.id != "default") {
let columnItem = {
title: item.name,
children: item.items.map(i => {
return {
title: i.name,
key: i.id,
width: 150
};
length++;
})
};
columns.push(columnItem);
}
});
itemGroups.map(item => {
if(item.id == "default") {
item.items.map(i => {
columns.push({
title: i.name,
key: i.id,
width: 150
})
length ++
})
}
})
itemGroups.map(item => {
if (item.id == "default") {
item.items.map(i => {
columns.push({
title: i.name,
key: i.id,
width: 150
});
length++;
});
}
});
return {columns, length};
}
render() {
return (
<Modal
visible={this.props.visible}
title="预览"
width={800}
onCancel={() => {
this.props.onCancel()
}}
footer={null}
>
<WeaTable columns={this.getColumns().columns} dataSource={[]} scroll={{x: this.getColumns().length * 150}}/>
</Modal>
)
}
}
return { columns, length };
}
render() {
return (
<WeaDialog
visible={this.props.visible}
title="预览"
style={{ width: "80vw" }}
onCancel={() => {
this.props.onCancel();
}}
>
<div style={{ padding: 16 }}>
<WeaTable columns={this.getColumns().columns} dataSource={[]} scroll={{ x: this.getColumns().length * 150 }}/>
</div>
</WeaDialog>
);
}
}

6
pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js
View File

@ -109,12 +109,13 @@ export default class RuleEditModal extends React.Component {
>
<div style={{ padding: "20px" }}>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>薪资项目<RequiredLabelTip/></Col>
<Col span={8}>薪资项目</Col>
<Col span={16}>
{
initedSelect &&
<WeaSelect
style={{ width: "200px" }}
viewAttr={3}
options={ruleOptionList}
value={this.state.itemValue}
onChange={(value) => {
@ -124,7 +125,7 @@ export default class RuleEditModal extends React.Component {
</Col>
</Row>
<Row style={{ lineHeight: "40px" }}>
<Col span={8}>计薪规则<RequiredLabelTip/></Col>
<Col span={8}>计薪规则</Col>
<Col span={16}>
<div className="item">
<WeaHelpfulTip
@ -137,6 +138,7 @@ export default class RuleEditModal extends React.Component {
<WeaSelect
style={{ width: "100px" }}
options={daysOptions}
viewAttr={3}
value={this.state.effectiveDate}
onChange={(value) => {
this.setState({ effectiveDate: value });

2
pc4mobx/hrmSalary/pages/mySalary/index.js
View File

@ -197,7 +197,7 @@ export default class MySalary extends React.Component {
title="我的薪资福利" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>

106
pc4mobx/hrmSalary/pages/payroll/copyModal.js
View File

@ -1,44 +1,66 @@
import React from 'react'
import { notNull } from '../../util/validate'
import { Modal, Button, Row, Col, message } from 'antd';
import { WeaInput } from "ecCom"
import RequiredLabelTip from '../../components/requiredLabelTip';
import React from "react";
import { notNull } from "../../util/validate";
import { Button, Col, Row } from "antd";
import { WeaDialog, WeaError, WeaInput } from "ecCom";
export default class CopyModal extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
constructor(props) {
super(props);
this.state = {
name: ""
};
}
handleChange(value) {
this.setState({ name: value });
}
handleSave() {
if (!notNull(this.state.name)) {
this.refs.weaError.showError();
return;
}
handleChange(value) {
this.setState({name: value})
}
handleSave() {
if(!notNull(this.state.name)) {
message.warning("工资单名称不能为空")
}
this.props.onSave && this.props.onSave(this.state.name)
}
render(){
const { name } = this.state;
return (
<Modal width={600} title="复制工资单" visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}} footer={
<Button type="primary" onClick={() => {
this.handleSave()
}}>保存</Button>
}>
<Row>
<Col span={6}>工资单名称<RequiredLabelTip /></Col>
<Col span={18}>
<WeaInput value={name}
onChange={(value) => {
this.handleChange(value)
}}/>
</Col>
</Row>
</Modal>
)
}
}
this.props.onSave && this.props.onSave(this.state.name);
}
render() {
const { name } = this.state;
return (
<WeaDialog
style={{ width: 600 }}
title="复制工资单"
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}}
buttons={[
<Button type="primary" onClick={() => {
this.handleSave();
}}>保存</Button>
]}>
<Row style={{display:"flex",alignItems: "center", padding: "16px 20px"}}>
<Col span={6}>工资单名称</Col>
<Col span={18}>
<WeaError
style={{ width: "100%" }}
tipPosition="bottom"
ref="weaError"
error="请填写工资单名称">
<WeaInput
style={{ width: "100%" }}
value={name}
viewAttr={3}
onChange={(value) => {
if (value === "") {
this.refs.weaError.showError();
return;
}
this.handleChange(value);
}}/>
</WeaError>
</Col>
</Row>
</WeaDialog>
);
}
}

165
pc4mobx/hrmSalary/pages/payroll/index.js
View File

@ -1,9 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker, message, Modal } from "antd";
import moment from "moment";
import { WeaHelpfulTip, WeaInputSearch, WeaRightMenu, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
@ -17,6 +15,7 @@ import TemplateSettingList from "./templateSettingList";
import { notNull } from "../../util/validate";
import CopyModal from "./copyModal";
import SalarySendList from "./SalarySendList";
import "../dataAcquisition/cumDeduct/index.less";
const { MonthPicker } = DatePicker;
@ -297,7 +296,7 @@ export default class Payroll extends React.Component {
disabledDate={(current) => {
return current && startDate && current.getTime() < new Date(startDate).getTime();
}}
getCalendarContainer={trigger=> trigger.parentNode}
getCalendarContainer={trigger => trigger.parentNode}
format="YYYY-MM"
onChange={(val) => this.handleRangePickerChange("endDate", val)}
/>
@ -366,16 +365,16 @@ export default class Payroll extends React.Component {
};
return (
<div className="mySalaryBenefitsWrapper">
<div>
<WeaRightMenu
datas={rightMenu} // 右键菜单
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
<WeaTop
title="工资单发放" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
@ -408,14 +407,15 @@ export default class Payroll extends React.Component {
{
this.state.selectedKey == 1 &&
<TemplateSettingList onEdit={(record) => {
this.handleTemplateListEdit(record);
}}
onCopy={(record) => {
this.handleTemplateListCopy(record);
}}
showOperateBtn={showOperateBtn}
onDelete={(record) => this.handleTemplateListDelete(record)}
<TemplateSettingList
onEdit={(record) => {
this.handleTemplateListEdit(record);
}}
onCopy={(record) => {
this.handleTemplateListCopy(record);
}}
showOperateBtn={showOperateBtn}
onDelete={(record) => this.handleTemplateListDelete(record)}
/>
}
</WeaTop>
@ -430,26 +430,21 @@ export default class Payroll extends React.Component {
this.setState({ stepSlideVisible: false });
}}
customOperate={
<div style={{ display: "inline-block" }}>
{
currentStep == 0 && <Button type="primary" onClick={() => {
nextStep();
}}>下一步</Button>
}
{
currentStep == 1 && <div style={{ display: "inline-block" }}>
<Button type="default" style={{ marginRight: "10px" }} onClick={() => {
prevStep();
}}>上一步</Button>
<Button type="primary" onClick={() => {
this.handleSave();
}}>保存</Button>
<Button type="default" style={{ marginLeft: "10px" }} onClick={() => {
this.handlePreview();
}}>预览</Button>
</div>
}
</div>
currentStep == 0 ? [
<Button type="primary" onClick={() => {
nextStep();
}}>下一步</Button>
] : currentStep == 1 ? [
<Button type="default" style={{ marginRight: "10px" }} onClick={() => {
prevStep();
}}>上一步</Button>,
<Button type="primary" onClick={() => {
this.handleSave();
}}>保存</Button>,
<Button type="default" style={{ marginLeft: "10px" }} onClick={() => {
this.handlePreview();
}}>预览</Button>
] : []
}
title="新建工资单模板"
content={
@ -470,65 +465,65 @@ export default class Payroll extends React.Component {
{
this.state.editSlideVisible &&
<WeaSlideModal visible={this.state.editSlideVisible}
top={0}
width={50}
height={100}
direction={"right"}
measure={"%"}
title={
<SlideModalTitle
subtitle={"编辑工资单模板"}
tabs={[{ title: "基础设置", key: 0 }, { title: "显示设置", key: 1 }]}
editable={false}
selectedTab={selectedTab}
showOperateBtn={showOperateBtn}
customOperate={<span>
{
selectedTab == 0 && <Button type="primary" onClick={() => {
this.handleUpdateSave();
}}>保存</Button>
}
{
selectedTab == 1 &&
<span>
<WeaSlideModal
className="slideOuterWrapper"
visible={this.state.editSlideVisible}
top={0}
width={50}
height={100}
direction={"right"}
measure={"%"}
title={
<SlideModalTitle
subtitle="编辑工资单模板"
tabs={[{ title: "基础设置", key: 0 }, { title: "显示设置", key: 1 }]}
editable={false}
selectedTab={selectedTab}
showOperateBtn={showOperateBtn}
customOperate={
selectedTab == 0 ? [
<Button type="primary" onClick={() => {
this.handleUpdateSave();
}} style={{ marginRight: "10px" }}>保存</Button>
}}>保存</Button>
] : selectedTab == 1 ? [
<Button type="primary" onClick={() => {
this.handleUpdateSave();
}} style={{ marginRight: "10px" }}>保存</Button>,
<Button type="default" onClick={() => {
this.handlePreview();
}}>预览</Button>
</span>
}
</span>}
subItemChange={
(item) => {
this.setState({ selectedTab: item.key });
}
}
/>
}
content={<div>
{
selectedTab == 0 &&
<BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {
this.handleBaseInfoChange(request);
}}/>
}
{
selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
}
</div>}
onClose={() => this.setState({ editSlideVisible: false })}
showMask={true}
closeMaskOnClick={() => this.setState({ editSlideVisible: false })}/>
] : []
}
subItemChange={
(selectedTab) => {
this.setState({ selectedTab });
}
}
/>
}
content={<div>
{
selectedTab == 0 &&
<BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {
this.handleBaseInfoChange(request);
}}/>
}
{
selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
}
</div>}
onClose={() => this.setState({ editSlideVisible: false }, () => this.setState({ selectedTab: 0 }))}
showMask={true}
closeMaskOnClick={() => this.setState({ editSlideVisible: false }, () => this.setState({ selectedTab: 0 }))}/>
}
{
this.state.copyModalVisible &&
<CopyModal onSave={(value) => this.handleCopyModalSave(value)} visible={this.state.copyModalVisible}
onCancel={() => {
this.setState({ copyModalVisible: false });
}}/>
<CopyModal
onSave={(value) => this.handleCopyModalSave(value)}
visible={this.state.copyModalVisible}
onCancel={() => {
this.setState({ copyModalVisible: false });
}}/>
}
</div>
);

392
pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.js
View File

@ -1,178 +1,187 @@
import React from 'react'
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTab, WeaTop } from 'ecCom'
import { dataSource, payrollColumns } from '../columns';
import { Menu, Button, Dropdown, Table } from 'antd'
import CustomTab from '../../../components/customTab'
import "./index.less"
import { getQueryString } from '../../../util/url'
import { renderNoright, getSearchs } from '../../../util';
import CustomPaginationTable from '../../../components/customPaginationTable';
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
import { Button, Menu } from "antd";
import "./index.less";
import { getQueryString } from "../../../util/url";
import { getSearchs } from "../../../util";
import CustomPaginationTable from "../../../components/customPaginationTable";
@inject('payrollStore')
@inject("payrollStore")
@observer
export default class PayrollDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
currentId: "",
current: 1
}
this.pageInfo = {current: 1, pageSize: 10}
constructor(props) {
super(props);
this.state = {
currentId: "",
current: 1
};
this.pageInfo = { current: 1, pageSize: 10 };
}
componentWillMount() {
let id = getQueryString("id");
this.setState({ currentId: id });
const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
getPayrollInfo(id);
getPayrollDetailList({ salarySendId: id });
getPayrollDetailSa();
}
// 撤回
handleWithdraw(record) {
const { payrollStore } = this.props;
const { withdrawPayroll, getInfoList } = payrollStore;
withdrawPayroll({
ids: [record.id],
salarySendId: this.state.currentId
}).then(() => {
getInfoList({
salarySendId: this.state.currentId
});
});
}
// 发送
handleGrant(record) {
const { payrollStore } = this.props;
const { grantPayroll, getInfoList } = payrollStore;
grantPayroll({
ids: [record.id],
salarySendId: this.state.currentId
}).then(() => {
getInfoList({
salarySendId: this.state.currentId
});
});
}
getColumns() {
const { payrollStore } = this.props;
const { salarySendDetailTableStore } = payrollStore;
const { columns } = salarySendDetailTableStore;
if (!columns) {
return [];
}
let result = columns.filter(item => item.hide == "false").map(item => {
item = { ...item };
if (item.dataIndex == "operation") {
item.render = (text, record) => {
if (text == "ALREADYSEND") {
return (
<a onClick={() => {
this.handleWithdraw(record);
}}>撤回</a>
);
} else {
return (
<a onClick={() => {
this.handleGrant(record);
}}>发送</a>
);
}
};
}
return item;
});
return result;
}
componentWillMount() {
let id = getQueryString("id")
this.setState({currentId: id})
const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
getPayrollInfo(id)
getPayrollDetailList({salarySendId: id})
getPayrollDetailSa()
}
// 导出所选
handleExportSelected() {
// 撤回
handleWithdraw(record) {
const { payrollStore } = this.props;
const { withdrawPayroll, getInfoList } = payrollStore;
withdrawPayroll({
ids: [record.id],
salarySendId: this.state.currentId
}).then(() => {
getInfoList({
salarySendId:this.state.currentId
})
})
}
}
// 发送
handleGrant(record) {
const { payrollStore } = this.props;
const { grantPayroll, getInfoList } = payrollStore;
grantPayroll({
ids: [record.id],
salarySendId: this.state.currentId
}).then(() => {
getInfoList({
salarySendId:this.state.currentId
})
})
}
// 导出全部
handleExportAll = () => {
// const { payrollStore } = this.props;
// const { exportDetailList } = payrollStore
// exportDetailList({salarySendId: this.state.currentId})
const url = `${window.location.origin}/api/bs/hrmsalary/salaryBill/send/exportDetailList?salarySendId=${this.state.currentId}`;
window.open(url, "_self");
};
getColumns() {
const { payrollStore } = this.props;
const { salarySendDetailTableStore } = payrollStore
const { columns } = salarySendDetailTableStore;
if(!columns) {
return []
}
let result = columns.filter(item => item.hide == "false").map(item => {
item = {...item}
if(item.dataIndex == "operation") {
item.render = (text,record) => {
if(text == 'ALREADYSEND') {
return (
<a onClick={() => {
this.handleWithdraw(record)
}}>撤回</a>
)
} else {
return (
<a onClick={() => {
this.handleGrant(record)
}}>发送</a>
)
}
}
}
return item;
})
return result;
}
// 导出所选
handleExportSelected() {
}
// 导出全部
handleExportAll=()=> {
// const { payrollStore } = this.props;
// const { exportDetailList } = payrollStore
// exportDetailList({salarySendId: this.state.currentId})
const url= `${window.location.origin}/api/bs/hrmsalary/salaryBill/send/exportDetailList?salarySendId=${this.state.currentId}`
window.open(url, '_self');
}
getSearchsAdQuick() {
const handleMenuClick = (e) => {
switch(e.key) {
case "1":
this.handleExportSelected()
break;
}
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">导出所选</Menu.Item>
</Menu>
);
return (
// <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
<Button type="primary" onClick={this.handleExportAll}>导出全部</Button>
)
// return (<div></div>)
}
getSearchsAdQuick() {
const handleMenuClick = (e) => {
switch (e.key) {
case "1":
this.handleExportSelected();
break;
}
};
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">导出所选</Menu.Item>
</Menu>
);
return (
// <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
<Button type="primary" onClick={this.handleExportAll}>导出全部</Button>
);
// return (<div></div>)
}
// 分页
handleDataPageChange(value) {
const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
getPayrollDetailList({salarySendId: this.state.currentId, ...this.pageInfo})
}
// 分页
handleDataPageChange(value) {
const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
getPayrollDetailList({ salarySendId: this.state.currentId, ...this.pageInfo });
}
handleShowSizeChange(pageInfo) {
const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
getPayrollDetailList({salarySendId: this.state.currentId, ...pageInfo})
}
handleShowSizeChange(pageInfo) {
const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
getPayrollDetailList({ salarySendId: this.state.currentId, ...pageInfo });
}
handleSearch() {
const { payrollStore: {getPayrollDetailList}} = this.props;
getPayrollDetailList({salarySendId: this.state.currentId, ...this.pageInfo})
}
render() {
const {payrollStore} = this.props;
const { setDetailListShowSearchAd, detailListShowSearchAd, getPayrollDetailList, detailListCondition, detailListConditionForm, salarySendDetailBaseInfo, salarySendDetailTableStore, salarySendDetailDataSource, salarySendDetailPageInfo } = payrollStore;
return (
<div className="payrollGrant">
<WeaTop
title="工资单发放" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
iconBgcolor='#F14A2D' // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
buttons={[this.getSearchsAdQuick()]}
></WeaTop>
<WeaTab
searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
// buttonsAd={adBtn} // 高级搜索内部按钮
onSearch={() => {
this.handleSearch()
}} // 点搜索按钮时的回调
// searchsAdQuick={this.getSearchsAdQuick()}
onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
/>
<div className="titleBar">
<div className="titleBarLeft">
<span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
<WeaHelpfulTip
style={{marginLeft: '10px', marginRight: "10px"}}
width={200}
title={`薪资周期\n
handleSearch() {
const { payrollStore: { getPayrollDetailList } } = this.props;
getPayrollDetailList({ salarySendId: this.state.currentId, ...this.pageInfo });
}
render() {
const { payrollStore } = this.props;
const {
setDetailListShowSearchAd,
detailListShowSearchAd,
getPayrollDetailList,
detailListCondition,
detailListConditionForm,
salarySendDetailBaseInfo,
salarySendDetailTableStore,
salarySendDetailDataSource,
salarySendDetailPageInfo
} = payrollStore;
return (
<div className="payrollGrant">
<WeaTop
title="工资单发放" // 文字
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
buttons={[this.getSearchsAdQuick()]}
></WeaTop>
<WeaTab
searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
// buttonsAd={adBtn} // 高级搜索内部按钮
onSearch={() => {
this.handleSearch();
}} // 点搜索按钮时的回调
// searchsAdQuick={this.getSearchsAdQuick()}
onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
/>
<div className="titleBar">
<div className="titleBarLeft">
<span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
width={200}
title={`薪资周期\n
${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
税款所属期\n
${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
@ -180,36 +189,37 @@ this.handleSearch()
${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
福利台账月份\n
引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
/>
<span>工资单模板：{salarySendDetailBaseInfo.template}</span>
</div>
placement="topLeft"
/>
<span>工资单模板：{salarySendDetailBaseInfo.template}</span>
</div>
<div className="titleBarRight">
<span>已发放：{salarySendDetailBaseInfo.sendNum}/<span style={{color: "red"}}>{salarySendDetailBaseInfo.sendTotal}</span></span>
</div>
</div>
<div className="titleBarRight">
<span>已发放：{salarySendDetailBaseInfo.sendNum}/<span
style={{ color: "red" }}>{salarySendDetailBaseInfo.sendTotal}</span></span>
</div>
</div>
<div className="tableWrapper">
<div className="tableWrapper">
<CustomPaginationTable
dataSource={salarySendDetailDataSource}
columns={this.getColumns()}
scroll={{x: this.getColumns().length * 150}}
total={salarySendDetailPageInfo.total}
current={salarySendDetailPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value
this.handleDataPageChange(value)
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = {current, pageSize}
this.handleShowSizeChange(this.pageInfo)
}}
/>
</div>
</div>
)
}
<CustomPaginationTable
dataSource={salarySendDetailDataSource}
columns={this.getColumns()}
scroll={{ x: this.getColumns().length * 150 }}
total={salarySendDetailPageInfo.total}
current={salarySendDetailPageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value;
this.handleDataPageChange(value);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.handleShowSizeChange(this.pageInfo);
}}
/>
</div>
</div>
);
}
}

24
pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.less
View File

@ -1,13 +1,15 @@
.payrollGrant {
padding: 20px;
.titleBar {
height: 47px;
line-height: 47px;
.titleBarLeft {
float: left;
}
.titleBarRight {
float: right;
}
.titleBar {
height: 47px;
line-height: 47px;
padding: 0 10px;
.titleBarLeft {
float: left;
}
}
.titleBarRight {
float: right;
}
}
}

56
pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
View File

@ -1,15 +1,13 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTop, WeaTab } from "ecCom";
import { dataSource, payrollColumns } from "../columns";
import { Menu, Button, Dropdown, message } from "antd";
import CustomTab from "../../../components/customTab";
import { WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
import { Button, Dropdown, Menu, message } from "antd";
import "./index.less";
import PayrollGrantModal from "./payrollGrantModal";
import PayrollWithdrawModal from "./payrollWithdrawModal";
import { getQueryString } from "../../../util/url";
import { renderNoright, getSearchs } from "../../../util";
import { getSearchs } from "../../../util";
import CustomPaginationTable from "../../../components/customPaginationTable";
@inject("payrollStore")
@ -255,10 +253,10 @@ export default class PayrollGrant extends React.Component {
onChange: this.onSelectChange
};
return (
<div className="payrollGrant">
<div className="payrollGrant_new">
<WeaTop
title="工资单发放" // 文字
icon={<i className="icon-coms-meeting" />} // 左侧图标
icon={<i className="icon-coms-meeting"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
buttons={[this.getSearchsAdQuick()]}
@ -284,39 +282,39 @@ export default class PayrollGrant extends React.Component {
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "1rem", marginRight: "1rem" }}
width={200}
title={`薪资周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
税款所属期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.taxCycle}\n
salarySendDetailBaseInfo.salarySobCycle
.taxCycle}\n
考勤取值周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
salarySendDetailBaseInfo.salarySobCycle
.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
福利台账月份\n
引用${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.socialSecurityCycle}的福利台账数据`}
salarySendDetailBaseInfo.salarySobCycle
.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
/>
<span>
@ -327,7 +325,7 @@ export default class PayrollGrant extends React.Component {
<div className="titleBarRight">
<span>
已发放：{salarySendDetailBaseInfo.sendNum}/<span
style={{ color: "red" }}>
style={{ color: "red" }}>
{salarySendDetailBaseInfo.sendTotal}
</span>
</span>

20
pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.less
View File

@ -1,8 +1,8 @@
.payrollGrant {
padding: 20px;
.payrollGrant_new {
.titleBar {
height: 47px;
line-height: 47px;
padding: 0 10px;
.titleBarLeft {
float: left;
}
@ -15,3 +15,19 @@
overflow: auto;
}
}
.batchReleaseWrapper{
.ant-modal-footer button{
margin-right: 0 !important;
}
.searchWrapper{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.tableWrpper{
max-height: 500px;
overflow-y: auto;
}
}

157
pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantModal.js
View File

@ -1,8 +1,8 @@
import React from "react";
import { WeaInputSearch, WeaHelpfulTip, WeaTable } from "ecCom";
import { payrollGrantColumns, dataSource } from "../columns";
import { Menu, Button, Table, Modal, Dropdown, message } from "antd";
import { WeaDialog, WeaHelpfulTip, WeaInputSearch, WeaTable } from "ecCom";
import { Dropdown, Menu, message } from "antd";
import { inject, observer } from "mobx-react";
import "./index.less";
@inject("payrollStore")
@observer
@ -15,6 +15,7 @@ export default class payrollGrantModal extends React.Component {
searchValue: ""
};
}
// 撤回
handleWithdraw(record) {
const { payrollStore } = this.props;
@ -150,26 +151,69 @@ export default class payrollGrantModal extends React.Component {
};
return (
<Modal
width={800}
<WeaDialog
style={{ width: 800 }}
initLoadCss
className="batchReleaseWrapper"
title="批量发放"
visible={this.props.visible}
footer={[]}
buttons={[
<Dropdown.Button
type="primary"
overlay={menu}
onClick={() => {
this.handleGrantAll();
}}>
全部发放
</Dropdown.Button>
]}
onCancel={() => {
this.props.onCancel();
}}>
<div
style={{ padding: "0px 10px", height: "47px", lineHeight: "47px" }}>
<span style={{ fontSize: "14px", color: "#666" }}>批量发放</span>
<div style={{ float: "right", marginRight: "40px" }}>
<Dropdown.Button
type="primary"
style={{ marginRight: "10px" }}
overlay={menu}
onClick={() => {
this.handleGrantAll();
}}>
全部发放
</Dropdown.Button>
<div style={{ padding: "16px 20px" }}>
<div className="searchWrapper">
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
width={200}
title={`薪资周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
税款所属期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.taxCycle}\n
考勤取值周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
福利台账月份\n
引用${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
/>
<span>
工资单模板：{salarySendDetailBaseInfo.template}
</span>
</div>
<WeaInputSearch
value={this.state.searchValue}
onChange={value => {
@ -180,69 +224,24 @@ export default class payrollGrantModal extends React.Component {
}}
/>
</div>
</div>
<div style={{ height: "40px", lineHeight: "40px" }}>
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
width={200}
title={`薪资周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
税款所属期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.taxCycle}\n
考勤取值周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
福利台账月份\n
引用${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
<div className="tableWrpper">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
dataSource={canGrantDataSource}
columns={this.getColumns()}
pagination={{
onChange: value => {
this.handleDataPageChange(value);
},
total: canGrantPageInfo.total,
current: canGrantPageInfo.pageNum,
showTotal: total => `共 ${total} 条`
}}
/>
<span>
工资单模板：{salarySendDetailBaseInfo.template}
</span>
</div>
</div>
<div
style={{ marginTop: "10px", height: "500px", overflowY: "scroll" }}>
<WeaTable
rowKey="id"
rowSelection={rowSelection}
dataSource={canGrantDataSource}
columns={this.getColumns()}
pagination={{
onChange: value => {
this.handleDataPageChange(value);
},
total: canGrantPageInfo.total,
current: canGrantPageInfo.pageNum,
showTotal: total => `共 ${total} 条`
}}
/>
</div>
</Modal>
</WeaDialog>
);
}
}

153
pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js
View File

@ -1,7 +1,6 @@
import React from "react";
import { WeaInputSearch, WeaHelpfulTip, WeaTable } from "ecCom";
import { payrollGrantColumns, dataSource } from "../columns";
import { Menu, Button, Table, Modal, Dropdown } from "antd";
import { WeaDialog, WeaHelpfulTip, WeaInputSearch, WeaTable } from "ecCom";
import { Dropdown, Menu } from "antd";
import { inject, observer } from "mobx-react";
@inject("payrollStore")
@ -151,25 +150,69 @@ export default class PayrollWithdrawModal extends React.Component {
};
return (
<Modal
width={800}
<WeaDialog
style={{ width: 800 }}
initLoadCss
title="批量撤回"
className="batchReleaseWrapper"
visible={this.props.visible}
footer={[]}
buttons={[
<Dropdown.Button
type="primary"
overlay={menu}
onClick={() => {
this.handleWithdrawAll();
}}>
全部撤回
</Dropdown.Button>
]}
onCancel={() => {
this.props.onCancel();
}}>
<div
style={{ padding: "0px 10px", height: "47px", lineHeight: "47px" }}>
<span style={{ fontSize: "14px", color: "#666" }}>批量撤回</span>
<div style={{ float: "right", marginRight: "40px" }}>
<Dropdown.Button
style={{ marginRight: "10px" }}
overlay={menu}
onClick={() => {
this.handleWithdrawAll();
}}>
全部撤回
</Dropdown.Button>
<div style={{ padding: "16px 20px" }}>
<div className="searchWrapper">
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
width={200}
title={`薪资周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
税款所属期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.taxCycle}\n
考勤取值周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
福利台账月份\n
引用${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
/>
<span>
工资单模板：{salarySendDetailBaseInfo.template}
</span>
</div>
<WeaInputSearch
value={this.state.searchValue}
onChange={value => {
@ -181,67 +224,23 @@ export default class PayrollWithdrawModal extends React.Component {
/>
</div>
</div>
<div style={{ height: "40px", lineHeight: "40px" }}>
<div className="titleBarLeft">
<span>
薪资所属月：{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth
.year}-{salarySendDetailBaseInfo.salaryMonth &&
salarySendDetailBaseInfo.salaryMonth.monthValue}
</span>
<WeaHelpfulTip
style={{ marginLeft: "10px", marginRight: "10px" }}
width={200}
title={`薪资周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle
.salaryCycle
.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
税款所属期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.taxCycle}\n
考勤取值周期\n
${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle
.attendCycle
.fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
福利台账月份\n
引用${salarySendDetailBaseInfo.salarySobCycle &&
salarySendDetailBaseInfo.salarySobCycle
.socialSecurityCycle}的福利台账数据`}
placement="topLeft"
<div className="tableWrpper">
<WeaTable
rowKey="id"
rowSelection={rowSelection}
dataSource={canWithdrawDataSource}
columns={this.getColumns()}
pagination={{
onChange: value => {
this.handleDataPageChange(value);
},
total: canWithdrawPageInfo.total,
current: canWithdrawPageInfo.pageNum,
showTotal: total => `共 ${total} 条`
}}
/>
<span>
工资单模板：{salarySendDetailBaseInfo.template}
</span>
</div>
</div>
<div style={{ marginTop: "10px", height: "500px", scrollY: "scroll" }}>
<WeaTable
rowKey="id"
rowSelection={rowSelection}
dataSource={canWithdrawDataSource}
columns={this.getColumns()}
pagination={{
onChange: value => {
this.handleDataPageChange(value);
},
total: canWithdrawPageInfo.total,
current: canWithdrawPageInfo.pageNum,
showTotal: total => `共 ${total} 条`
}}
/>
</div>
</Modal>
</WeaDialog>
);
}
}

79
pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
View File

@ -1,10 +1,10 @@
import React from "react";
import { Row, Col, Switch, Select } from "antd";
import { Col, Row } from "antd";
import { WeaInput, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import RequiredLabelTip from "../../../components/requiredLabelTip";
import { toJS } from 'mobx';
import "./index.less";
const { Option } = Select;
@inject("payrollStore")
@observer
@ -17,13 +17,17 @@ export default class BaseInformForm extends React.Component {
request: {}
};
}
componentWillMount() {
const { payrollStore } = this.props;
const { getPayrollBaseForm } = payrollStore;
getPayrollBaseForm(this.props.id).then(data => {
this.setState(
{
options: data.salarySobOptions,
options: _.isEmpty(toJS(data.salarySobOptions)) ? [{ key: "", showname: "" }] : [{
key: "",
showname: ""
}, ...toJS(data.salarySobOptions)],
request: data.templateBaseData
},
() => {
@ -44,17 +48,8 @@ export default class BaseInformForm extends React.Component {
}
render() {
const { request } = this.state;
const {
salarySob,
salarySobOption,
name,
description,
emailStatus,
sendEmail,
sendEmailOptions,
msgStatus
} = request;
const { request, options } = this.state;
const { salarySob, name, description } = request;
return (
<div className="baseInformForm">
<div className="formItemWrapper">
@ -62,32 +57,26 @@ export default class BaseInformForm extends React.Component {
<div className="formWrapper">
<Row className="formItem">
<Col span={8}>
薪资账套<RequiredLabelTip />
薪资账套
</Col>
<Col span={16}>
{this.state.inited &&
<Select
defaultValue={salarySob ? salarySob : ""}
<WeaSelect
viewAttr={3}
options={options}
value={salarySob ? salarySob : ""}
style={{ width: "200px" }}
className="wea-select"
notFoundContent="暂无数据"
onChange={value => this.hanldeChange({ salarySob: value })}>
{this.state.options.map(item =>
<Option value={item.key} key={item.key}>
{item.showname}
</Option>
)}
</Select>}
onChange={value => this.hanldeChange({ salarySob: value })}/>}
</Col>
</Row>
<Row className="formItem">
<Col span={8}>
工资单模板名称<RequiredLabelTip />
工资单模板名称
</Col>
<Col span={16}>
<WeaInput
value={name}
viewAttr={3}
onChange={value => this.hanldeChange({ name: value })}
/>
</Col>
@ -103,40 +92,6 @@ export default class BaseInformForm extends React.Component {
</Row>
</div>
</div>
{/* 发送位置先隐藏 */}
{/* <div className="formItemWrapper">
<span className="itemTitle">发送位置</span>
<div className="formWrapper">
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>邮件</Col>
<Col span={16}>
<Switch value={emailStatus} onChange={(value) => {this.hanldeChange({emailStatus: value})}}/>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={8}>发送地址</Col>
<Col span={16}>
<WeaSelect style={{width: '200px'}} value={sendEmail} onChange={(value) => {this.hanldeChange({sendEmail: value})}}/>
</Col>
</Row>
</Col>
</Row>
<Row className="formItem">
<Col span={12}>
<Row>
<Col span={8}>消息中心</Col>
<Col span={16}>
<Switch checked={msgStatus} onChange={(value)=>{this.hanldeChange({msgStatus: value})}}/>
</Col>
</Row>
</Col>
</Row>
</div>
</div> */}
</div>
);
}

51
pc4mobx/hrmSalary/pages/salaryFile/index.js
View File

@ -6,6 +6,7 @@ import {
WeaBrowser,
WeaCheckbox,
WeaDatePicker,
WeaError,
WeaFormItem,
WeaHelpfulTip,
WeaInput,
@ -246,46 +247,43 @@ export default class SalaryFile extends React.Component {
>
<WeaDatePicker
value={this.state.noPayDate}
viewAttr={2}
style={{width: "100%"}}
viewAttr={3}
style={{ width: "100%" }}
onChange={noPayDate => this.setState({ noPayDate })}
/>
</WeaFormItem>,
width: 516,
onOk: () => {
stopSalary(this.state.noPayDate).then(()=>{
if (_.isEmpty(this.state.noPayDate)) {
message.warning("请选择最后发薪日期")
return false;
}
stopSalary(this.state.noPayDate).then(() => {
getTableDatas({ ...this.state.searchItemsValue });
})
});
},
onCancel: () => {
}
});
})
};
// 查看 Slide 头部操作按钮
renderEditSlideOperate = () => {
const { taxAgentStore: { showOperateBtn }, salaryFileStore: { salaryIncreaseUrl, currentId } } = this.props;
const { isShow, url } = salaryIncreaseUrl;
return (
<div style={{ display: "inline-block" }}>
{
showOperateBtn && isShow === "true" &&
<Button type="primary" style={{ marginRight: 10 }} onClick={() => {
window.open(`${url}&salaryArchiveId=${currentId}`);
}}>发起调薪</Button>
}
{
showOperateBtn &&
<Button type="primary" style={{ marginRight: 10 }} onClick={() => {
this.setState({ changeSalaryVisible: true });
}}>调薪</Button>
}
{
showOperateBtn &&
<Button type="primary" onClick={this.handleNoPay}>停薪</Button>
}
</div>
);
let arrList = [];
if (showOperateBtn && isShow === "true") {
arrList.push(<Button type="primary" onClick={() => {
window.open(`${url}&salaryArchiveId=${currentId}`);
}}>发起调薪</Button>);
}
if (showOperateBtn) {
arrList.push(<Button type="primary" onClick={() => {
this.setState({ changeSalaryVisible: true });
}}>调薪</Button>);
arrList.push(<Button type="primary" onClick={this.handleNoPay}>停薪</Button>);
}
return arrList;
};
// table选中条目
@ -568,7 +566,7 @@ export default class SalaryFile extends React.Component {
>
<WeaTop
title="薪资档案" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
@ -717,6 +715,7 @@ export default class SalaryFile extends React.Component {
{this.state.editSlideVisible && (
<WeaSlideModal
className="slideOuterWrapper"
visible={this.state.editSlideVisible}
top={0}
width={40}

195
pc4mobx/hrmSalary/pages/salaryItem/deleteSalaryItemModal.js
View File

@ -1,107 +1,112 @@
import React from 'react'
import { systemItemColumns, dataSource } from './columns'
import { WeaInputSearch, WeaTable } from 'ecCom'
import { Modal, Button, Table } from 'antd'
import { inject, observer } from 'mobx-react';
import CustomTable from '../../components/customTable'
import React from "react";
import { WeaDialog, WeaInputSearch } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import CustomTable from "../../components/customTable";
@inject('salaryItemStore')
@inject("salaryItemStore")
@observer
export default class DeleteSalaryItemModal extends React.Component {
constructor(props) {
super(props);
this.state ={
selectedRowKeys: [],
searchValue: ""
}
this.page = 1
}
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],
searchValue: ""
};
this.page = 1;
}
componentWillMount() {
const { salaryItemStore: {listCanDelete}} = this.props;
listCanDelete()
}
componentWillMount() {
const { salaryItemStore: { listCanDelete } } = this.props;
listCanDelete();
}
getColumns() {
const { salaryItemStore } = this.props;
const { canDeleteList } = salaryItemStore
let columns = canDeleteList.columns ? canDeleteList.columns : []
columns = [...columns]
return columns
}
getColumns() {
const { salaryItemStore } = this.props;
const { canDeleteList } = salaryItemStore;
let columns = canDeleteList.columns ? canDeleteList.columns : [];
columns = [...columns];
return columns;
}
// 分页
handleDataPageChange(value) {
const { salaryItemStore: {listCanDelete}} = this.props;
this.page = value;
listCanDelete({name: this.state.searchValue, current: value})
}
// 分页
handleDataPageChange(value) {
const { salaryItemStore: { listCanDelete } } = this.props;
this.page = value;
listCanDelete({ name: this.state.searchValue, current: value });
}
// 选择框选中事件
onSelectChange(selectedRowKeys) {
this.setState({ selectedRowKeys });
}
// 选择框选中事件
onSelectChange(selectedRowKeys) {
this.setState({ selectedRowKeys });
}
handleSearchChange(value) {
this.setState({searchValue: value})
}
handleSearchChange(value) {
this.setState({ searchValue: value });
}
// 搜索
handleSearch(value) {
const { salaryItemStore: {listCanDelete}} = this.props;
listCanDelete({name: value, current: this.page})
}
// 搜索
handleSearch(value) {
const { salaryItemStore: { listCanDelete } } = this.props;
listCanDelete({ name: value, current: this.page });
}
render() {
const { selectedRowKeys, searchValue } = this.state;
const { salaryItemStore } = this.props;
const { canDeleteList, modalLoading } = salaryItemStore
render() {
const { selectedRowKeys, searchValue } = this.state;
const { salaryItemStore } = this.props;
const { canDeleteList, modalLoading } = salaryItemStore;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this),
};
const handleDelete = () => {
const { salaryItemStore: { deleteItem } } = this.props;
deleteItem(this.state.selectedRowKeys);
}
return (
<Modal visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}} footer={null} width={800}>
<div style={{height: "47px", lineHeight: '47px'}}>
<span style={{marginLeft: "10px", fontSize: '14px'}}>批量删除</span>
<div style={{float: "right", marginRight: "40px"}}>
<Button type="primary" style={{marginRight: '10px'}} onClick={() => {
handleDelete()
}}>批量删除</Button>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.handleSearchChange(value)
}} onSearch={(value) => {
this.handleSearch(value)
}}/>
</div>
</div>
<div style={{margin: "10px", height: "500px", overflowY: "scroll"}}>
<CustomTable loadding={modalLoading}
rowSelection={rowSelection}
columns={this.getColumns()}
dataSource={canDeleteList.list ? canDeleteList.list : []}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value)
},
total: canDeleteList.total,
showTotal: (total) => `共 ${total} 条`,
current: canDeleteList.pageNum
}}
/>
</div>
</Modal>
)
}
}
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this)
};
const handleDelete = () => {
const { salaryItemStore: { deleteItem } } = this.props;
deleteItem(this.state.selectedRowKeys);
};
return (
<WeaDialog
title="批量删除"
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}}
buttons={[
<Button
type="primary"
onClick={() => {
handleDelete();
}}>批量删除</Button>
]}
style={{ width: "80vw" }}
>
<div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", margin: 10 }}>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.handleSearchChange(value);
}} onSearch={(value) => {
this.handleSearch(value);
}}/>
</div>
<div style={{ maxHeight: "500px", overflowY: "scroll" }}>
<CustomTable
loadding={modalLoading}
rowSelection={rowSelection}
columns={this.getColumns()}
dataSource={canDeleteList.list ? canDeleteList.list : []}
pagination={{
onChange: (value) => {
this.handleDataPageChange(value);
},
total: canDeleteList.total,
showTotal: (total) => `共 ${total} 条`,
current: canDeleteList.pageNum
}}
/>
</div>
</WeaDialog>
);
}
}

52
pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { Button, Col, Icon, Modal, Row } from "antd";
import { WeaFormItem, WeaInput, WeaSelect, WeaTextarea, WeaHelpfulTip } from "ecCom";
import { Button, Col, Icon, Row } from "antd";
import { WeaDialog, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
import { inject, observer } from "mobx-react";
import "./index.less";
@ -11,10 +11,10 @@ export default class FormalFormModal extends React.Component {
super(props);
this.state = {
value: "",
extendParam:{
sqlReturnKey: '',
datasource:{
datasourceId: "",
extendParam: {
sqlReturnKey: "",
datasource: {
datasourceId: ""
}
},
returnValue: "",
@ -48,8 +48,8 @@ export default class FormalFormModal extends React.Component {
this.setState({
extendParam: {
sqlReturnKey: extendParam.sqlReturnKey,
datasource:{
datasourceId: extendParam.datasource ? extendParam.datasource.datasourceId : '',
datasource: {
datasourceId: extendParam.datasource ? extendParam.datasource.datasourceId : ""
}
}
});
@ -216,18 +216,20 @@ export default class FormalFormModal extends React.Component {
const { searchGroup, searchFields } = salaryItemStore;
const { value, formulaDatasourceList, extendParam } = this.state;
return (
<Modal title="函数公式" visible={this.props.visible}
maskClosable={false}
width={800}
footer={
<Button type="primary" onClick={() => {
this.handleSave();
}}>保存</Button>
}
wrapClassName="formula-wrapper"
onCancel={() => {
this.props.onCancel();
}}>
<WeaDialog
title="函数公式"
visible={this.props.visible}
style={{ width: 800 }}
buttons={[
<Button type="primary" onClick={() => {
this.handleSave();
}}>保存</Button>
]}
className="formula-wrapper"
initLoadCss
onCancel={() => {
this.props.onCancel();
}}>
{
(this.props.valueType == "3" || this.referenceType == "sql") &&
<Row gutter={20} style={{ marginBottom: 10 }}>
@ -238,11 +240,11 @@ export default class FormalFormModal extends React.Component {
wrapperCol={{ span: 18 }}
>
<WeaInput style={{ width: "100%" }} value={extendParam.sqlReturnKey} onChange={(sqlReturnKey) => {
this.setState({ extendParam: {...extendParam, sqlReturnKey} });
this.setState({ extendParam: { ...extendParam, sqlReturnKey } });
}}/>
</WeaFormItem>
</Col>
<Col span={12} className='dataList-wrapper'>
<Col span={12} className="dataList-wrapper">
<WeaFormItem
label="外部数据源"
labelCol={{ span: 6 }}
@ -252,11 +254,11 @@ export default class FormalFormModal extends React.Component {
options={formulaDatasourceList}
value={extendParam.datasource.datasourceId}
onChange={(datasourceId) => {
this.setState({ extendParam: {...extendParam, datasource:{datasourceId}} });
this.setState({ extendParam: { ...extendParam, datasource: { datasourceId } } });
}}
/>
<WeaHelpfulTip
width = {196}
width={196}
title="不设置，默认使用系统数据源"
isCenter={true}
/>
@ -323,7 +325,7 @@ export default class FormalFormModal extends React.Component {
</div>
</div>
</Modal>
</WeaDialog>
);
}
}

53
pc4mobx/hrmSalary/pages/salaryItem/index.js
View File

@ -10,6 +10,7 @@ import SlideModalTitle from "../../components/slideModalTitle";
import CustomSalaryItemSlide from "./customSalaryItemSlide";
import DeleteSalaryItemModal from "./deleteSalaryItemModal";
import CustomPaginationTable from "../../components/customPaginationTable";
import "../socialSecurityBenefits/programme/index.less";
@inject("salaryItemStore", "taxAgentStore")
@observer
@ -206,8 +207,6 @@ export default class SalaryItem extends React.Component {
<Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>
];
const topTab = [];
const handleMenuClick = (e) => {
const { salaryItemStore: { getSysItemList, setEditSlideVisible, initRequest } } = this.props;
if (e.key == "1") {
@ -255,28 +254,24 @@ export default class SalaryItem extends React.Component {
};
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>
);
let arrList=[];
if(this.state.isAdd){
arrList=[
<Button type="primary" onClick={() => {
handleSlideSave(false);
}}>保存</Button>,
<Button type="default" onClick={() => {
handleSlideSave(true);
}}>保存并继续创建</Button>
]
}else if(this.state.editable){
arrList=[
<Button type="primary" onClick={() => {
handleSlideSave(false);
}}>保存</Button>
]
}
return arrList;
};
const handleSaveSlideChange = (value) => {
@ -292,7 +287,7 @@ export default class SalaryItem extends React.Component {
>
<WeaTop
title="薪资项目管理" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
@ -338,6 +333,7 @@ export default class SalaryItem extends React.Component {
{
editSlideVisible &&
<WeaSlideModal
className="slideOuterWrapper"
visible={editSlideVisible}
top={0}
width={40}
@ -349,12 +345,7 @@ export default class SalaryItem extends React.Component {
subtitle={(this.state.isAdd ? "新建" : "修改") + "自定义薪资项目"}
editable={false}
showOperateBtn={showOperateBtn || showSalaryItemBtn}
customOperate={(showOperateBtn || showSalaryItemBtn) ? renderCustomOperate() : null}
subItemChange={
(item) => {
this.setState({ selectedTab: item.key });
}
}
customOperate={(showOperateBtn || showSalaryItemBtn) ? renderCustomOperate() : []}
/>
}
content={

6
pc4mobx/hrmSalary/pages/salaryItem/index.less
View File

@ -11,6 +11,12 @@
min-height: 200px;
max-height: 85vh;
overflow: auto;
padding: 16px 20px !important;
}
.headerSearchWrapper{
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
}
}

56
pc4mobx/hrmSalary/pages/salaryItem/systemSalaryItemModal.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { WeaInputSearch } from "ecCom";
import { Button, Modal } from "antd";
import { WeaDialog, WeaInputSearch } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import { WeaTableNew } from "comsMobx";
import "./index.less";
@ -40,35 +40,41 @@ export default class SystemSalaryItemModal extends React.Component {
};
return (
<Modal
footer={null}
wrapClassName="formula-wrapper"
<WeaDialog
title="添加系统薪资项目"
initLoadCss
className="formula-wrapper"
visible={this.props.visible}
onCancel={() => {
this.props.onCancel();
}} width={900}
}}
style={{ width: 900 }}
buttons={[
<Button type="primary" onClick={() => {
handleAdd();
}}>添加</Button>
]}
>
<div style={{ height: "47px", lineHeight: "47px" }}>
<span style={{ marginLeft: "10px", fontSize: "14px" }}>添加系统薪资项目</span>
<div style={{ float: "right", marginRight: "40px" }}>
<Button type="primary" style={{ marginRight: "10px" }} onClick={() => {
handleAdd();
}}>添加</Button>
<WeaInputSearch value={searchValue} onChange={(value) => {
this.handleSearchChange(value);
}} onSearch={(value) => {
this.handleSearch(value);
}}/>
<div style={{padding: "16px 20px"}}>
<div className="headerSearchWrapper">
<WeaInputSearch
value={searchValue}
onChange={(value) => {
this.handleSearchChange(value);
}}
onSearch={(value) => {
this.handleSearch(value);
}}/>
</div>
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={sysListTableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
// getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/>
</div>
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={sysListTableStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
// getColumns={this.getColumns}
// onOperatesClick={this.onOperatesClick.bind(this)}
/>
</Modal>
</WeaDialog>
);
}
}

40
pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.js
View File

@ -11,6 +11,7 @@ import AccumulationFundForm from "./accumulationFundForm";
import OtherForm from "./otherForm";
import CustomPaginationTable from "../../../components/customPaginationTable";
import ImportModal from "../../../components/importModal";
import "./index.less";
@inject("archivesStore", "taxAgentStore")
@observer
@ -217,7 +218,6 @@ export default class Archives extends React.Component {
selectedRowKeys,
onChange: this.onSelectChange
};
return (
<div className="mySalaryBenefitsWrapper">
<WeaRightMenu
@ -226,9 +226,9 @@ export default class Archives extends React.Component {
>
<WeaTop
title="社保福利档案" // 文字
icon={<i className="icon-coms-fa" />} // 左侧图标
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
buttons={showOperateBtn ? btns : []}
@ -270,34 +270,30 @@ export default class Archives extends React.Component {
{
this.state.editSlideVisible &&
<WeaSlideModal
className="slideOuterWrapper"
visible={this.state.editSlideVisible}
top={0}
width={40}
width={48}
height={100}
direction={"right"}
measure={"%"}
title={
<SlideModalTitle
subtitle={"员工福利档案"}
tabs={[{ title: "基础设置", key: 0 }, { title: "社保", key: 1 }, {
title: "公积金",
key: 2
}, { title: "企业年金及其他福利", key: 3 }]}
tabs={[
{ title: "基础设置", key: 0 }, { title: "社保", key: 1 },
{ title: "公积金", key: 2 }, { title: "企业年金及其他福利", key: 3 }]
}
editable={false}
selectedTab={selectedTab}
showOperateBtn={showOperateBtn}
customOperate={
<div>
{
showOperateBtn && selectedTab != 0 && <Button type="primary" onClick={() => {
this.handleEditSlideSave();
}}>保存</Button>
}
</div>
(showOperateBtn && selectedTab != 0) ?
[<Button type="primary" onClick={() => this.handleEditSlideSave()}>保存</Button>] : []
}
subItemChange={
(item) => {
this.setState({ selectedTab: item.key });
(selectedTab) => {
this.setState({ selectedTab });
}
}
/>
@ -317,11 +313,14 @@ export default class Archives extends React.Component {
{
selectedTab == 3 && <OtherForm employeeId={this.state.employeeId} record={this.record}/>
}
</div>}
onClose={() => this.setState({ editSlideVisible: false })}
onClose={() => this.setState({ editSlideVisible: false },()=>{
this.setState({ selectedTab: '0' });
})}
showMask={true}
closeMaskOnClick={() => this.setState({ editSlideVisible: false })}/>
closeMaskOnClick={() => this.setState({ editSlideVisible: false },()=>{
this.setState({ selectedTab: '0' });
})}/>
}
{
this.state.importVisible && <ImportModal
@ -350,7 +349,6 @@ export default class Archives extends React.Component {
visiable={this.state.importVisible}
onCancel={() => {
this.handleImportCancel();
}}
/>
}

28
pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.less
View File

@ -23,3 +23,31 @@
border-bottom: none;
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
z-index: 99;
top: 10px!important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
}
}
}

78
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customNewModal.js
View File

@ -1,43 +1,47 @@
import React from 'react'
import { getCustomSearchs, getSearchs } from '../../../util';
import { Modal } from 'antd'
import { observable, action, toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import CustomForm from '../../../components/customForm'
import React from "react";
import { WeaDialog } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import CustomForm from "../../../components/customForm";
@inject('programmeStore')
@inject("programmeStore")
@observer
export default class CustomNewModal extends React.Component {
constructor(props) {
super(props)
}
constructor(props) {
super(props);
}
handleOK() {
const { programmeStore: {createSICategory, setCustomRequest, customRequest, updateCustomCategory}} = this.props;
if(!this.props.edit) { // 新增
createSICategory(customRequest).then(() => {
this.props.onCancel()
})
} else {
updateCustomCategory(customRequest).then(() => {
this.props.onCancel()
})
}
handleOK() {
const { programmeStore: { createSICategory, customRequest, updateCustomCategory } } = this.props;
if (!this.props.edit) { // 新增
createSICategory(customRequest).then(() => {
this.props.onCancel();
});
} else {
updateCustomCategory(customRequest).then(() => {
this.props.onCancel();
});
}
}
render() {
const { programmeStore: {customRequest, setCustomRequest}} = this.props;
return (
<Modal visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}} title="新建自定义福利" onOk={() => {
this.handleOK()
}}>
{/* {getCustomSearchs(this.props.form, toJS(this.props.condition), 1)} */}
<CustomForm condition={this.props.condition} disable={this.props.edit ? ['paymentScope', 'welfareType'] : null} request={customRequest} onChange={(value) => {
setCustomRequest(value)
}}/>
</Modal>
)
}
}
render() {
const { programmeStore: { customRequest, setCustomRequest } } = this.props;
return (
<WeaDialog
visible={this.props.visible}
onCancel={() => this.props.onCancel()}
title="新建自定义福利"
style={{ height: "auto!important" }}
buttons={[
<Button type="ghost" onClick={() => this.props.onCancel()}>取消</Button>,
<Button type="primary" onClick={() => this.handleOK()}>确定</Button>
]}
>
<CustomForm condition={this.props.condition} disable={this.props.edit ? ["paymentScope", "welfareType"] : null}
request={customRequest} onChange={(value) => {
setCustomRequest(value);
}}/>
</WeaDialog>
);
}
}

9
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
View File

@ -364,7 +364,6 @@ export default class Programme extends React.Component {
const {
programmeStore: {
getCustomForm,
getCumCustomForm,
setCustomNewVisible,
setCustomRequest
}
@ -435,8 +434,9 @@ export default class Programme extends React.Component {
if(_.isEmpty(this.refs.copyRef.state.value)){
this.refs.copyRef.refs.weaError.showError();
}else{
copyScheme({ id: copyId, schemeName: copyModalValue });
this.setState({ copyModalVisible: false });
copyScheme({ id: copyId, schemeName: copyModalValue }).then(() => {
this.setState({ copyModalVisible: false });
})
}
};
@ -456,7 +456,7 @@ export default class Programme extends React.Component {
title="社保福利方案" // 文字
icon={<i className="icon-coms-fa"/>} // 左侧图标
iconBgcolor="#F14A2D" // 左侧图标背景色
showDropIcon={true} // 是否显示下拉按钮
showDropIcon={false} // 是否显示下拉按钮
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }}>
{/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
@ -536,6 +536,7 @@ export default class Programme extends React.Component {
</WeaTop>
</WeaRightMenu>
<WeaSlideModal
className="slideOuterWrapper"
visible={this.state.slideVisiable}
top={0}
width={50}

30
pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.less
View File

@ -6,4 +6,32 @@
.tableWrapper {
margin-top: 10px;
}
}
}
.slideOuterWrapper{
.wea-slide-modal-title{
height: initial;
line-height: initial;
text-align: left;
}
.rodal-close{
z-index: 99;
top: 10px!important;
}
}
@media (min-width: 1260px){
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: 100%!important;
}
}
}
@media screen and (min-width: 1060px) and (max-width: 1260px) {
.slideOuterWrapper{
.reqTopWrapper .wea-new-top-req-title>div:first-child>div{
max-width: calc(100% - 96px)!important;
}
}
}

2
pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/abnormalList.js
View File

@ -97,7 +97,7 @@ export default class AbnormalListIndex extends Component {
/>
</div>
{/* table */}
<div style={{ padding: "0 16px" }}>
<div>
<Spin spinning={loading}>
<WeaTable
rowKey="id"

16
pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/normal.js
View File

@ -12,7 +12,7 @@ import { WeaDialog, WeaInputSearch, WeaTable } from "ecCom";
import { getSearchs } from "../../../../util";
import { getQueryString } from "../../../../util/url";
import ProgressModal from "../../../../components/progressModal";
import AcctResultImportModal from '../../../calculateDetail/acctResult/importModal/acctResultImportModal';
import AcctResultImportModal from "../../../calculateDetail/acctResult/importModal/acctResultImportModal";
import _ from "lodash";
import "./index.less";
@ -38,8 +38,8 @@ export default class NormalIndex extends Component {
searchValue: "",
progressVisible: false,
progress: 0,
fieldData:{}, //选中的表单头信息
importParams:{ //导入信息的弹框表示
fieldData: {}, //选中的表单头信息
importParams: { //导入信息的弹框表示
visible: false
}
};
@ -485,7 +485,7 @@ export default class NormalIndex extends Component {
/>
<Tooltip title="导入数据">
<i className="icon-coms02-Template-import1" style={{ color: "#2db7f5", fontSize: 18, marginRight: 10 }}
onClick={()=> this.setState({importParams: {...importParams, visible: true}})}/>
onClick={() => this.setState({ importParams: { ...importParams, visible: true } })}/>
</Tooltip>
{/*导入弹框*/}
<AcctResultImportModal
@ -496,14 +496,14 @@ export default class NormalIndex extends Component {
fieldData
});
}}
onCancel={() =>{
this.setState({importParams: {...importParams, visible: false}},()=>{
onCancel={() => {
this.setState({ importParams: { ...importParams, visible: false } }, () => {
const { billMonth, selectedKey, paymentOrganization } = this.props;
const { current } = this.state;
selectedKey === "1"
? this.getNormalList({ billMonth, current, paymentOrganization })
: this.getSupplementaryList({ billMonth, current, paymentOrganization });
})
});
}}
isStandingBook
/>
@ -524,7 +524,7 @@ export default class NormalIndex extends Component {
/>
</div>
{/* table */}
<div style={{ padding: "0 16px" }}>
<div>
<Spin spinning={loading}>
<WeaTable
rowKey="id"

2
pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/overView.js
View File

@ -116,7 +116,7 @@ export default class OverViewIndex extends Component {
<Button type="primary" onClick={this.handleExport}>导出全部</Button>
</div>
{/* table */}
<div style={{ padding: "0 16px" }}>
<div>
<Spin spinning={loading}>
<WeaTable
rowKey="id"

136
pc4mobx/hrmSalary/pages/sysConfig/index.js Normal file
View File

@ -0,0 +1,136 @@
import React from "react";
import { WeaReqTop,WeaDialog } from "ecCom";
import { Button } from "antd";
export default class SysConfig extends React.Component {
constructor(props) {
super(props);
this.state = {
visible:false,
title: "WeaReqTop",
icon: <i className="icon-portal-workflow"/>,
iconBgcolor: "lightblue",
loading: false,
selectedKey: "main",
selectArray: [
{ key: 200, selected: true, showname: "200" },
{ key: 100, selected: false, showname: "100" }
],
childComCont: "子组件内容"
};
}
render() {
const {
title,
icon,
iconBgcolor,
loading,
selectedKey,
selectArray,
childComCont,
visible
} = this.state;
const btns = [
<Button type="primary" disabled={true} onClick={() => this.dosubmit()}>
提交（禁用）
</Button>,
<Button type="glost" disabled={false} onClick={() => this.dosubmit()}>
提交
</Button>
];
const dropMenuDatas = [
{
key: 1,
disabled: loading,
icon: <i className="icon-search"/>,
content: "搜索"
}
];
const tabs = [
{
key: "main",
title: "主页"
},
{
key: "detail",
title: "详情"
},
{
key: "detail1",
title: "详情1"
},
{
key: "detail2",
title: "详情2"
},
{
key: "detail3",
title: "详情3"
},
{
key: "detail4",
title: "详情4"
},
{
key: "detail5",
title: "详情5"
},
{
key: "detail6",
title: "详情6"
},
{
key: "detail7",
title: "详情7"
},
{
key: "detail8",
title: "详情8"
}
];
return (
<div className="wea-top-demo">
<Button type="glost" onClick={() => this.setState({ visible: true })}>
点击
</Button>
<WeaDialog
onCancel={() => this.setState({ visible: false })}
visible={visible}
style={{ width: 800, height: 600 }}
hasScroll
>
<WeaReqTop
title={title}
icon={icon}
iconBgcolor={iconBgcolor}
loading={loading}
buttons={btns}
buttonSpace={10}
showDropIcon={true}
dropMenuDatas={dropMenuDatas}
onDropMenuClick={this.onDropMenuClick}
tabDatas={tabs}
selectedKey={selectedKey}
onChange={key => {
this.setState({
selectedKey: key,
childComCont: "你选择了 " + key + " tab页"
});
}}
>
<div style={{ height: 2000, background: "#fff" }}>{childComCont}</div>
</WeaReqTop>
</WeaDialog>
</div>
);
}
onDropMenuClick(key) {
console.log(`点击了下拉菜单的第${key}项`);
}
dosubmit() {
console.log("点击了提交");
}
}

40
pc4mobx/hrmSalary/pages/taxAgent/slideTaxagentUser.js
View File

@ -1,5 +1,5 @@
import React from "react";
import { Icon, Table, message, Button } from "antd";
import { Button, message, Table } from "antd";
import { WeaInputSearch } from "ecCom";
import AddTaxAgentModal from "./addTaxAgentModal";
@ -86,20 +86,20 @@ export default class SlideTaxagentUser extends React.Component {
showSizeChanger: true,
onShowSizeChange: (current, pageSize) => {
setPageObj &&
setPageObj({
current,
pageSize,
tab: includeType,
targetName: searchValue
});
setPageObj({
current,
pageSize,
tab: includeType,
targetName: searchValue
});
},
onChange: current => {
setPageObj &&
setPageObj({
current,
tab: includeType,
targetName: searchValue
});
setPageObj({
current,
tab: includeType,
targetName: searchValue
});
}
};
@ -129,13 +129,13 @@ export default class SlideTaxagentUser extends React.Component {
}}>
人员范围
</span>|<span
style={{
cursor: "pointer",
color: includeType == 0 ? "#4ba9f2" : "#000"
}}
onClick={() => {
this.handleTabClick(0);
}}>
style={{
cursor: "pointer",
color: includeType == 0 ? "#4ba9f2" : "#000"
}}
onClick={() => {
this.handleTabClick(0);
}}>
从范围中排除
</span>
</div>
@ -156,7 +156,7 @@ export default class SlideTaxagentUser extends React.Component {
><span className="icon-coms-form-delete-hot" title="删除"></span></Button>
<Button type="primary"
size="small"
style={{marginRight: 10}}
style={{ marginRight: 10 }}
onClick={() => this.setState({ addTaxagentModalVisible: true })}
><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
</React.Fragment>

5
pc4mobx/hrmSalary/stores/ledger.js
View File

@ -421,6 +421,11 @@ export class LedgerStore {
message.warning("选择员工状态不能为空");
return false;
}
if (_.every(params.targetParams, it => !notNull(it.targetId))) {
message.warning("对象类型不能为空");
return false;
}
return true;
}

28
pc4mobx/hrmSalary/stores/programme.js
View File

@ -219,13 +219,20 @@ export class ProgrammeStore {
@action("复制福利方案")
copyScheme = (params) => {
API.copyScheme(params).then(res => {
if(res.status) {
message.success("复制成功")
this.getTableDatas(this.selectedKey);
} else {
message.error(res.errormsg || "复制失败")
}
return new Promise((resolve,reject)=>{
API.copyScheme(params).then(res => {
if(res.status) {
resolve("复制成功");
message.success("复制成功");
this.getTableDatas(this.selectedKey);
} else {
reject(res.errormsg || "复制失败");
message.error(res.errormsg || "复制失败");
}
}).catch(err => {
reject("方案名称重复");
message.error(`${err}方案名称重复`);
})
})
}
@action("删除社保数据")
@ -276,10 +283,11 @@ export class ProgrammeStore {
// 新增自定义福利
@action createSICategory = (params) => {
if(!this.validateCustomRequest()) {
return
}
return new Promise((resolve, reject) => {
if(!this.validateCustomRequest()) {
reject();
return
}
API.createSICategory(params).then(res => {
if(res.status) {
message.success("新增成功")

1
pc4mobx/hrmSalary/stores/salaryItem.js
View File

@ -340,7 +340,6 @@ export class SalaryItemStore {
return item
})
}
console.log("this.canDeleteList:", this.canDeleteList)
this.canDeleteList = data
} else {
message.error(res.errormsg || "获取失败")