薪资账套slideStep1
This commit is contained in:
MustangDeng
parent
87dadb967f
commit
d7b1269f3a
|
|
@ -6,10 +6,11 @@ export default class TipLabel extends React.Component {
|
|||
return (
|
||||
<div className="tipLabelWrapper">
|
||||
<div className="titleWrapper">
|
||||
<span className="title">小提示</span>
|
||||
<span className="title">{this.props.title ? this.props.title : "小提示"}</span>
|
||||
</div>
|
||||
<div className="tipContentWrapper">
|
||||
{this.props.tipList.map(item => <div className="tipContentItem">{item}</div>)}
|
||||
{this.props.tipList && this.props.tipList.map(item => <div className="tipContentItem">{item}</div>)}
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
}
|
||||
.tipContentWrapper {
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.tipContentItem {
|
||||
line-height: 20px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
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() {
|
||||
return (
|
||||
<WeaSlideModal visible={this.props.visible}
|
||||
top={0}
|
||||
width={40}
|
||||
height={100}
|
||||
direction={'right'}
|
||||
measure={'%'}
|
||||
title={
|
||||
<SlideModalTitle
|
||||
subtitle={this.props.title}
|
||||
editable={false}
|
||||
/>
|
||||
}
|
||||
content={(<StepSlideHeader>
|
||||
{this.props.content}
|
||||
</StepSlideHeader>)}
|
||||
onClose={() => setSlideVisiable(false)}
|
||||
showMask={true}
|
||||
closeMaskOnClick={() => setSlideVisiable(false)} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.stepSlideHeader {
|
||||
.headerWrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import { WeaSteps } from 'ecCom'
|
||||
const Step = WeaSteps.Step;
|
||||
import "./index.less"
|
||||
|
||||
export default class StepSlideHeader extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="stepSlideHeader">
|
||||
<div className="headerWrapper">
|
||||
<WeaSteps current={1}>
|
||||
<Step description="基础设置" />
|
||||
<Step description="关联人员" />
|
||||
<Step description="薪资项目" />
|
||||
<Step description="调薪记薪规则" />
|
||||
<Step description="校验规则" />
|
||||
</WeaSteps>
|
||||
</div>
|
||||
<div className="contentWrapper">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +1,42 @@
|
|||
import { Switch } from 'antd'
|
||||
export const columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
title: "账套名称",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: "个税扣缴义务人",
|
||||
title: "薪资周期",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
title: "关联人数",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
title: "启用",
|
||||
dataIndex: 'isSwitch',
|
||||
key: 'isSwitch',
|
||||
render: (text) => <Switch />
|
||||
},
|
||||
{
|
||||
title: "员工状态",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: "基本工资",
|
||||
title: "备注",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'cz',
|
||||
key: 'cz'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
export const dataSource = [];
|
||||
export const dataSource = [{
|
||||
title: "测试"
|
||||
}];
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@ import { toJS } from 'mobx';
|
|||
|
||||
import { Button, Table, DatePicker } from 'antd';
|
||||
|
||||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
|
||||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch } from 'ecCom';
|
||||
|
||||
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||||
import CustomTab from '../../components/customTab';
|
||||
import ContentWrapper from '../../components/contentWrapper';
|
||||
import StepSlide from '../../components/stepSlide'
|
||||
import SlideBaseForm from './slideBaseForm'
|
||||
|
||||
import { columns, dataSource } from './columns';
|
||||
|
||||
|
|
@ -21,9 +23,27 @@ export default class Ledger extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
value: "",
|
||||
selectedKey: "0"
|
||||
selectedKey: "0",
|
||||
stepSlideVisible: false,
|
||||
columns: columns.map(item => {
|
||||
if(item.dataIndex == "cz") {
|
||||
item.render = () => <div>
|
||||
<a style={{marginRight: "10px"}}>关联人员</a>
|
||||
<a style={{marginRight: "10px"}} >删除</a>
|
||||
<a style={{marginRight: "10px"}} onClick={() => this.onEdit()}>编辑</a>
|
||||
<a style={{marginRight: "10px"}} >复制</a>
|
||||
<a style={{marginRight: "10px"}}>操作日志</a>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onEdit() {
|
||||
this.setState({
|
||||
stepSlideVisible: true
|
||||
})
|
||||
}
|
||||
render() {
|
||||
const { baseTableStore } = this.props;
|
||||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
|
||||
|
|
@ -56,9 +76,13 @@ export default class Ledger extends React.Component {
|
|||
const topTab = [
|
||||
];
|
||||
|
||||
const renderSearchOperationItem = () => {
|
||||
return <div></div>
|
||||
|
||||
const renderRightOperation = () => {
|
||||
return (
|
||||
<div style={{display: "inline-block"}}>
|
||||
<Button type="primary" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>新建</Button>
|
||||
<WeaInputSearch />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -75,7 +99,25 @@ export default class Ledger extends React.Component {
|
|||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||||
>
|
||||
|
||||
<CustomTab
|
||||
searchOperationItem={
|
||||
renderRightOperation()
|
||||
}
|
||||
onChange={(v) => {
|
||||
|
||||
}}
|
||||
/>
|
||||
<WeaTable columns={columns} dataSource={dataSource}/>
|
||||
|
||||
{
|
||||
this.state.stepSlideVisible && <StepSlide
|
||||
visible={this.state.stepSlideVisible}
|
||||
onCancel={() => {this.setState({stepSlideVisible: false})}}
|
||||
title="新建账套"
|
||||
content={<SlideBaseForm />}
|
||||
/>
|
||||
}
|
||||
</WeaTop>
|
||||
</WeaRightMenu>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
.slideBaseForm {
|
||||
.leftContentWrapper {
|
||||
margin: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
.rightContentWrapper {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightContentWrapper {
|
||||
.greytip {
|
||||
color: #999;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tipLabel {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.higelinered {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
import React from 'react'
|
||||
import { Row, Col } from 'antd'
|
||||
import { WeaSelect, WeaTextarea, WeaInput } from "ecCom"
|
||||
import "./index.less"
|
||||
import TipLabel from '../../components/TipLabel'
|
||||
|
||||
|
||||
const options = [
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "111"
|
||||
},{
|
||||
key: "2",
|
||||
selected: false,
|
||||
showname: "222"
|
||||
},{
|
||||
key: "3",
|
||||
selected: false,
|
||||
showname: "333"
|
||||
}
|
||||
];
|
||||
|
||||
export default class SlideBaseForm extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="slideBaseForm">
|
||||
<Row>
|
||||
<Col span={18}>
|
||||
<div className="leftContentWrapper">
|
||||
<Row className="formItem">
|
||||
<Col span={6}>账套名称</Col>
|
||||
<Col span={18}>
|
||||
<WeaInput style={{width: "190px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>薪资类型</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "工资薪金"
|
||||
}]} style={{width: "190px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>薪资周期</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "本月"
|
||||
}]} style={{width: "90px"}}/>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "1号"
|
||||
}]} style={{width: "90px", marginLeft: '10px'}}/>
|
||||
<span style={{marginLeft: "10px"}}>至本月最后一天</span>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>税款所属期</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "下月"
|
||||
}]} style={{width: "90px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>考勤周期</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "本月"
|
||||
}]} style={{width: "90px"}}/>
|
||||
<WeaSelect options={[{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "1号"
|
||||
}]} style={{width: "90px", marginLeft: "10px"}}/>
|
||||
<span style={{marginLeft: "10px"}}>至本月最后一天</span>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>福利台账月份</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "本月"
|
||||
}]} style={{width: "90px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>福利台账月份</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "本月"
|
||||
}]} style={{width: "90px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>异动人员核算规则</Col>
|
||||
<Col span={18}>
|
||||
<WeaSelect options={[
|
||||
{
|
||||
key: "1",
|
||||
selected: true,
|
||||
showname: "核算方案"
|
||||
}]} style={{width: "190px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="formItem">
|
||||
<Col span={6}>备注</Col>
|
||||
<Col span={18}>
|
||||
<WeaTextarea style={{width: "190px"}}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<div className="rightContentWrapper">
|
||||
<TipLabel title="月份周期说明">
|
||||
<p className="greytip">例：薪资所属月是2021-11（即核算员工11月的工资）</p>
|
||||
<p className="greytip">根据您当前的选择，相应的周期为：</p>
|
||||
<div className="tipLabel">薪资周期</div>
|
||||
<p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
|
||||
<div className="tipLabel">税款所属期</div>
|
||||
<p className="greytip higelinered">2021-12</p>
|
||||
<div className="tipLabel">考勤取值周期</div>
|
||||
<p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
|
||||
<div className="tipLabel">福利台账月份</div>
|
||||
<p className="greytip">引用<span className="higelinered">2021-11</span>的福利台账数据</p>
|
||||
</TipLabel>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -11,3 +11,8 @@
|
|||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.formItem {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
Loading…
Reference in New Issue