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

ledger formSlide step

This commit is contained in:
MustangDeng 2022-03-16 10:41:38 +08:00
parent d7b1269f3a
commit 3b2b25cbde
10 changed files with 411 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,12 @@
import React from 'react';
import StepSlideHeader from './stepSlideHeader'
import { WeaSlideModal } from 'ecCom'
import { Button } from "antd"
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}
@ -16,9 +18,12 @@ export default class StepSlide extends React.Component {
<SlideModalTitle
subtitle={this.props.title}
editable={false}
customOperate={
this.props.customOperate
}
/>
}
content={(<StepSlideHeader>
content={(<StepSlideHeader current={currentStep}>
{this.props.content}
</StepSlideHeader>)}
onClose={() => setSlideVisiable(false)}

2
pc4mobx/hrmSalary/components/stepSlide/stepSlideHeader.js
View File

@ -8,7 +8,7 @@ export default class StepSlideHeader extends React.Component {
return (
<div className="stepSlideHeader">
<div className="headerWrapper">
<WeaSteps current={1}>
<WeaSteps current={this.props.current}>
<Step description="基础设置" />
<Step description="关联人员" />
<Step description="薪资项目" />

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

@ -41,77 +41,16 @@ export default class Attendance extends React.Component {
refereAttendFormVisible: false,
tabSelectedKey: "0",
itemMangeVisible: false,
columns: [
{
title: "姓名",
dataIndex: 'username',
key: 'username',
},
{
title: "个税扣缴义务人",
dataIndex: 'ywr',
key: 'ywr',
},
{
title: "部门",
dataIndex: 'bm',
key: 'title',
},
{
title: "手机号",
dataIndex: 'sjh',
key: 'sjh',
},
{
title: "工号",
dataIndex: 'gh',
key: 'gh',
},
{
title: "证件号码",
dataIndex: 'sfzh',
key: 'sfzh',
},
{
title: "入职日期",
dataIndex: 'rzrq',
key: 'rzrq',
},
{
title: "累计子女教育",
dataIndex: 'ljznjy',
key: 'ljznjy',
},
{
title: "累计继续教育",
dataIndex: 'ljjxjy',
key: 'ljjxjy',
},
{
title: "累计住房贷款利息",
dataIndex: 'ljzfdklx',
key: 'ljfdklx',
},
{
title: "累计住房租金",
dataIndex: 'ljzfzj',
key: 'ljzfzj',
},
{
title: "累计赡养老人",
dataIndex: 'ljsylr',
key: 'ljsylr',
},
{
title: "操作",
key: 'cz',
render: (text, record) => {
return (<div style={{display: "inline-block"}}>
<a type="link" onClick={() => this.onShowSlide()}>查看</a>
<a type="link" onClick={() => this.onDelete()} style={{marginLeft: "10px"}}>删除</a>
</div>)
}
}]
columns: columns.map(item => {
if(item.key == "cz") {
item.render = (text, record) => {
return (<div style={{display: "inline-block"}}>
<a type="link" onClick={() => this.onShowSlide()}>查看</a>
<a type="link" onClick={() => this.onDelete()} style={{marginLeft: "10px"}}>删除</a>
</div>)
}
}
})
}
}
@ -257,10 +196,6 @@ export default class Attendance extends React.Component {
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
{
this.state.tabSelectedKey == 0 ?
<div>

20
pc4mobx/hrmSalary/pages/ledger/calcRulesForm.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import { Table, Icon } from 'antd'
import { slideStep4Columns, dataSource} from './columns'
import "./index.less"
export default class CalRulesForm extends React.Component {
render() {
return (
<div className="calRulesForm">
<div className="headerIcon">
<Icon className="iconItem" type="minus-square"/>
<Icon className="iconItem" type="plus-square" />
</div>
<div className="tableWrapper">
<Table dataSource={dataSource} columns={slideStep4Columns}/>
</div>
</div>
)
}
}

86
pc4mobx/hrmSalary/pages/ledger/columns.js
View File

@ -33,6 +33,92 @@ export const columns = [
}
]
export const slideStep2Columns= [
{
title: "对象类型",
dataIndex: 'title',
key: 'title',
},
{
title: "对象",
dataIndex: 'title',
key: 'title',
},
{
title: "安全级别",
dataIndex: 'title',
key: 'title',
},
{
title: "员工状态",
dataIndex: 'title',
key: 'title'
},
]
export const slideStep3Columns = [
{
title: "薪资项目",
dataIndex: 'title',
key: 'title',
},
{
title: "规则",
dataIndex: 'title',
key: 'title',
},
{
title: "来源",
dataIndex: 'title',
key: 'title',
},
{
title: "类型",
dataIndex: 'title',
key: 'title',
}
]
export const slideStep4Columns = [
{
title: "薪资项目",
dataIndex: 'title',
key: 'title',
},
{
title: "计薪规则",
dataIndex: 'title',
key: 'title',
},
{
title: "操作",
dataIndex: 'cz',
key: 'cz',
},
]
export const slideStep5Columns = [
{
title: "规则名称",
dataIndex: 'title',
key: 'title',
},
{
title: "校验规则",
dataIndex: 'title',
key: 'title',
},
{
title: "备注",
dataIndex: 'title',
key: 'title',
},
{
title: "操作",
dataIndex: 'cz',
key: 'cz',
},
]
export const dataSource = [{
title: "测试"

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

@ -11,8 +11,12 @@ import CustomTab from '../../components/customTab';
import ContentWrapper from '../../components/contentWrapper';
import StepSlide from '../../components/stepSlide'
import SlideBaseForm from './slideBaseForm'
import SlideRefereUser from './slideRefereUser'
import { columns, dataSource } from './columns';
import SalaryItemForm from './salaryItemForm';
import CalRulesForm from './calcRulesForm';
import ValidRulesForm from './validRulesForm';
const { MonthPicker } = DatePicker;
@ -25,6 +29,7 @@ export default class Ledger extends React.Component {
value: "",
selectedKey: "0",
stepSlideVisible: false,
currentStep: 4,
columns: columns.map(item => {
if(item.dataIndex == "cz") {
item.render = () => <div>
@ -47,7 +52,7 @@ export default class Ledger extends React.Component {
render() {
const { baseTableStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
const { currentStep } = this.state;
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
@ -74,7 +79,7 @@ export default class Ledger extends React.Component {
];
const topTab = [
];
];
const renderRightOperation = () => {
return (
@ -85,7 +90,18 @@ export default class Ledger extends React.Component {
)
}
const nextStep = () => {
const { currentStep } = this.state;
this.setState({currentStep: currentStep + 1})
}
const prevStep = () => {
const { currentStep } = this.state;
this.setState({currentStep: currentStep - 1});
}
return (
<div className="mySalaryBenefitsWrapper">
<WeaRightMenu
datas={rightMenu} // 右键菜单
@ -113,9 +129,57 @@ export default class Ledger extends React.Component {
{
this.state.stepSlideVisible && <StepSlide
visible={this.state.stepSlideVisible}
currentStep={currentStep}
onCancel={() => {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" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
<Button type="primary" style={{marginLeft: "10px"}} onClick={() => {nextStep()}}>下一步</Button>
</div>
}
{
(currentStep == 2 || currentStep == 3) && <div>
<Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
<Button type="default" style={{marginLeft: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
<Button type="primary" onClick={() => {nextStep()}}>保存并进入下一步</Button>
</div>
}
{
currentStep == 4 &&
<div>
<Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
<Button type="primary" onClick={() => {this.setState({stepSlideVisible: false})}}>完成</Button>
</div>
}
</div>
}
title="新建账套"
content={<SlideBaseForm />}
content={
<div>
{
currentStep == 0 && <SlideBaseForm />
}
{
currentStep == 1 && <SlideRefereUser />
}
{
currentStep == 2 && <SalaryItemForm />
}
{
currentStep == 3 && <CalRulesForm />
}
{
currentStep == 4 && <ValidRulesForm />
}
</div>
}
/>
}
</WeaTop>

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

@ -24,4 +24,117 @@
.higelinered {
color: red;
}
}
.slideRefereUser {
.refereUserHeader {
height: 47px;
line-height: 47px;
padding-left: 10px;
padding-right: 10px;
}
.headerLeft {
display: inline-block;
color: #666;
.selectedCrumbs {
color: #4ba9f2;
}
}
.headerIcon {
float: right;
}
.searchInput {
margin-top: 10px;
float: right;
}
.headerIcon {
color: #4ba9f2;
display: inline-block;
.iconItem {
cursor: pointer;
margin-right: 10px;
}
}
}
.salaryItemForm {
padding: 10px 20px;
.btnBar {
height: 47px;
.btns {
display: inline-block;
}
.searchInputWrapper {
float: right;
display: inline-block;
}
}
.userInfoWrapper {
overflow: hidden;
.rightBtnsWrapper {
float: right;
display: inline-block;
.iconItem {
margin-right: 10px;
color: #2db7f5;
}
}
}
.userInfoSelected {
margin-top: 10px;
margin-bottom: 10px;
.selectedItem {
margin-right: 10px;
}
}
.tableItemWrapper {
margin-top: 10px;
.rightBtnsWrapper {
float: right;
.iconItem {
margin-right: 10px;
color: #2db7f5;
}
}
}
}
.calRulesForm {
padding: 10px 20px;
.headerIcon {
float: right;
.iconItem {
margin-right: 10px;
color: #2db7f5;
}
}
.tableWrapper {
margin-top: 20px;
}
}
.validRulesForm {
padding: 10px 20px;
.headerBar {
height: 47px;
line-height: 47px;
.inputSearch {
margin-top: 8px;
float: right;
}
.btnsWrapper {
float: right;
.iconItem {
margin-right: 10px;
cursor: pointer;
color: #2db7f5;
}
}
}
.tableWrapper {
margin-top: 20px;
}
}

60
pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react'
import { Button, Icon, Table } from 'antd'
import { WeaInputSearch, WeaHelpfulTip } from 'ecCom'
import { slideStep3Columns, dataSource} from './columns'
import "./index.less"
export default class SalaryItemForm extends React.Component {
render() {
return (
<div className="salaryItemForm">
<div className="btnBar">
<div className="btns">
<Button type="default">新增分类</Button>
<Button type="default" style={{marginLeft: "10px"}}>预览</Button>
</div>
<div className="searchInputWrapper">
<WeaInputSearch />
</div>
</div>
<div className="userInfoWrapper">
<div>
<span>
员工信息 <WeaHelpfulTip
style={{marginLeft: "10px"}}
width={100}
title="姓名、部门、个税扣缴义务人为必须项，不可删除"
placement="topLeft"
/>
</span>
<div className="rightBtnsWrapper">
<Icon type="down" />
</div>
</div>
<div className="userInfoSelected">
<span className="selectedItem">个税扣缴义务人</span>
<span className="selectedItem">姓名</span>
<span className="selectedItem">部门</span>
<Icon type="plus" />
</div>
</div>
<div className="tableItemWrapper">
<div>
<span className="itemTitle">未分类</span>
<span className="rightBtnsWrapper">
<Icon className="iconItem" type="minus-square"/>
<Icon className="iconItem" type="plus-square" />
<Icon type="down" />
</span>
</div>
<Table dataSource={dataSource} columns={slideStep3Columns}/>
</div>
</div>
)
}
}

24
pc4mobx/hrmSalary/pages/ledger/slideRefereUser.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { Icon, Table } from 'antd';
import { WeaInputSearch } from "ecCom"
import { slideStep2Columns, dataSource } from './columns'
export default class SlideRefereUser extends React.Component {
render() {
return (
<div className="slideRefereUser">
<div className="refereUserHeader">
<div className="headerLeft"><span className="selectedCrumbs">关联人员范围</span> {' '} | {' '} <span>从范围中排除</span></div>
<WeaInputSearch className="searchInput"/>
<div className="headerIcon">
<Icon className="iconItem" type="minus-square"/>
<Icon className="iconItem" type="plus-square" />
</div>
</div>
<div>
<Table dataSource={dataSource} columns={slideStep2Columns}/>
</div>
</div>
)
}
}

24
pc4mobx/hrmSalary/pages/ledger/validRulesForm.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react'
import { WeaInputSearch } from 'ecCom'
import { Table, Icon } from 'antd'
import { dataSource, slideStep5Columns} from './columns'
export default class ValidRulesForm extends React.Component {
render() {
return (
<div className="validRulesForm">
<div className="headerBar">
<WeaInputSearch className="inputSearch"/>
<span className="btnsWrapper">
<Icon className="iconItem" type="minus-square"/>
<Icon className="iconItem" type="plus-square" />
</span>
</div>
<div className="tableWrapper">
<Table dataSource={dataSource} columns={slideStep5Columns} />
</div>
</div>
)
}
}