工资单详情
This commit is contained in:
MustangDeng
parent
619bbe96c1
commit
02f041bd9f
|
|
@ -107,6 +107,91 @@ export const payrollColumns = [
|
|||
}
|
||||
]
|
||||
|
||||
export const payrollGrantColumns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "个税扣缴义务人",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "发放状态",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
}
|
||||
]
|
||||
|
||||
export const payrollGrantDetailColumns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "个税扣缴义务人",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "人员类型",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "薪资项目1",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "薪资项目2",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "薪资项目3",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "薪资项目4",
|
||||
dataIndex: "title",
|
||||
key: "title"
|
||||
},
|
||||
]
|
||||
|
||||
export const dataSource = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,18 +4,38 @@ import { dataSource, payrollColumns } from '../columns';
|
|||
import { Menu, Button, Dropdown, Table } from 'antd'
|
||||
import CustomTab from '../../../components/customTab'
|
||||
import "./index.less"
|
||||
import PayrollGrantModal from './payrollGrantModal'
|
||||
|
||||
export default class PayrollGrant extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
payrollGrantVisible: false,
|
||||
payrollWithdrawVisible: false
|
||||
}
|
||||
}
|
||||
render() {
|
||||
|
||||
const handleMenuClick = (e) => {
|
||||
switch(e.key) {
|
||||
case "1":
|
||||
this.setState({payrollGrantVisible: true})
|
||||
break;
|
||||
case "2":
|
||||
this.setState({payrollWithdrawVisible: true})
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1" onClick={() => {}}>批量发放</Menu.Item>
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">批量发放</Menu.Item>
|
||||
<Menu.Item key="2">批量撤回</Menu.Item>
|
||||
<Menu.Item key="3">全部导出</Menu.Item>
|
||||
<Menu.Item key="3">导出选中</Menu.Item>
|
||||
<Menu.Item key="3">自定义列</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
);
|
||||
const renderRightOperation = () => {
|
||||
return (
|
||||
<div style={{display: "inline-block"}}>
|
||||
|
|
@ -64,6 +84,18 @@ export default class PayrollGrant extends React.Component {
|
|||
<div className="tableWrapper">
|
||||
<Table dataSource={dataSource} columns={payrollColumns}/>
|
||||
</div>
|
||||
{
|
||||
this.state.payrollGrantVisible && <PayrollGrantModal
|
||||
visible={this.state.payrollGrantVisible}
|
||||
onCancel={() => {this.setState({payrollGrantVisible: false})}}/>
|
||||
}
|
||||
|
||||
{
|
||||
this.state.payrollWithdrawVisible && <PayrollWithDrawModal
|
||||
visible={this.state.payrollWithdrawVisible}
|
||||
onCancel={() => {this.setState({payrollWithdrawVisible: false})}}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import React from 'react'
|
||||
import { payrollGrantDetailColumns, dataSource} from '../columns'
|
||||
|
||||
export default class PayrollGrantDeatail extends React.Component {
|
||||
|
||||
|
||||
render() {
|
||||
const handleMenuClick = () => {
|
||||
|
||||
}
|
||||
const menu = (
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">导出选中</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
const renderRightOperation = () => {
|
||||
return (
|
||||
<div style={{display: "inline-block"}}>
|
||||
<Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
|
||||
<WeaInputSearch />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<CustomTab
|
||||
searchOperationItem={
|
||||
renderRightOperation()
|
||||
}
|
||||
/>
|
||||
<div className="titleBar">
|
||||
<div className="titleBarLeft">
|
||||
<span>薪资所属月：2021-11</span>
|
||||
<WeaHelpfulTip
|
||||
style={{marginLeft: '10px', marginRight: "10px"}}
|
||||
width={200}
|
||||
title="薪资周期\n
|
||||
2021-11-01至2021-11-30\n
|
||||
税款所属期\n
|
||||
2021-12\n
|
||||
考勤取值周期\n
|
||||
2021-11-01至2021-11-30\n
|
||||
福利台账月份\n
|
||||
引用2021-11的福利台账数据"
|
||||
placement="topLeft"
|
||||
/>
|
||||
<span>工资单模板：上海泛微工资单1</span>
|
||||
</div>
|
||||
|
||||
<div className="titleBarRight">
|
||||
<span>已发放：111/<span style={{color: "red"}}>1111</span></span>
|
||||
<span style={{marginLeft: "10px"}}>未确认：111</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Table dataSource={dataSource} columns={payrollGrantDetailColumns} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import { WeaInputSearch, WeaHelpfulTip } from "ecCom"
|
||||
import { payrollGrantColumns, dataSource } from "../columns"
|
||||
import { Menu, Button,Table, Modal, Dropdown } from "antd"
|
||||
|
||||
export default class payrollGrantModal extends React.Component {
|
||||
|
||||
render() {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">发放所选</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Modal width={800} visible={this.props.visible} 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}>全部发放</Dropdown.Button>
|
||||
<WeaInputSearch />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{height: "40px", lineHeight: "40px"}}>
|
||||
<div className="titleBarLeft">
|
||||
<span>薪资所属月：2021-11</span>
|
||||
<WeaHelpfulTip
|
||||
style={{marginLeft: '10px', marginRight: "10px"}}
|
||||
width={200}
|
||||
title="薪资周期\n
|
||||
2021-11-01至2021-11-30\n
|
||||
税款所属期\n
|
||||
2021-12\n
|
||||
考勤取值周期\n
|
||||
2021-11-01至2021-11-30\n
|
||||
福利台账月份\n
|
||||
引用2021-11的福利台账数据"
|
||||
placement="topLeft"
|
||||
/>
|
||||
<span>工资单模板：上海泛微工资单1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{marginTop: "10px"}}>
|
||||
<Table dataSource={dataSource} columns={payrollGrantColumns}/>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import { WeaInputSearch, WeaHelpfulTip } from "ecCom"
|
||||
import { payrollGrantColumns, dataSource } from "../columns"
|
||||
import { Menu, Button,Table, Modal, Dropdown } from "antd"
|
||||
|
||||
export default class PayrollWithDrawModal extends React.Component {
|
||||
|
||||
render() {
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">撤回所选</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Modal width={800} visible={this.props.visible} 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}>全部撤回</Dropdown.Button>
|
||||
<WeaInputSearch />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{height: "40px", lineHeight: "40px"}}>
|
||||
<div className="titleBarLeft">
|
||||
<span>薪资所属月：2021-11</span>
|
||||
<WeaHelpfulTip
|
||||
style={{marginLeft: '10px', marginRight: "10px"}}
|
||||
width={200}
|
||||
title="薪资周期\n
|
||||
2021-11-01至2021-11-30\n
|
||||
税款所属期\n
|
||||
2021-12\n
|
||||
考勤取值周期\n
|
||||
2021-11-01至2021-11-30\n
|
||||
福利台账月份\n
|
||||
引用2021-11的福利台账数据"
|
||||
placement="topLeft"
|
||||
/>
|
||||
<span>工资单模板：上海泛微工资单1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{marginTop: "10px"}}>
|
||||
<Table dataSource={dataSource} columns={payrollGrantColumns}/>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue