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

人员确认页面

This commit is contained in:
MustangDeng 2022-03-16 16:21:28 +08:00
parent ec3dc66655
commit 9153ce934b
7 changed files with 362 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pc4mobx/hrmSalary/index.js
View File

@ -17,6 +17,7 @@ import Payroll from './pages/payroll';
import Declare from './pages/declare';
import TaxRate from './pages/taxRate';
import TaxAgent from './pages/taxAgent';
import CalculateDetail from './pages/calculateDetail'
import BaseForm from './components';
@ -74,6 +75,7 @@ const Routes = (
</Route>
<Route key='ledger' path='ledger' component={Ledger} />
<Route key='calculate' path='calculate' component={Calculate} />
<Route key='calculateDetail' path='calculateDetail' component={CalculateDetail} />
<Route key='payroll' path='payroll' component={Payroll} />
<Route key='declare' path='declare' component={Declare} />
<Route key='taxRate' path='taxRate' component={TaxRate} />

27
pc4mobx/hrmSalary/pages/calculate/columns.js
View File

@ -1,42 +1,51 @@
export const columns = [
{
title: "姓名",
title: "薪资所属月",
dataIndex: 'title',
key: 'title',
},
{
title: "个税扣缴义务人",
title: "薪资账套",
dataIndex: 'title',
key: 'title',
},
{
title: "部门",
title: "状态",
dataIndex: 'title',
key: 'title',
},
{
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: 'title',
key: 'title',
},
{
title: "操作",
dataIndex: 'title',
key: 'title',
dataIndex: 'cz',
key: 'cz',
}
]
export const dataSource = [];

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

@ -4,13 +4,14 @@ import { toJS } from 'mobx';
import { Button, Table, DatePicker } from 'antd';
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker, WeaInputSearch } from 'ecCom';
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../components/customTab';
import ContentWrapper from '../../components/contentWrapper';
import { columns, dataSource } from './columns';
import moment from 'moment';
const { MonthPicker } = DatePicker;
@ -21,13 +22,28 @@ export default class Calculate extends React.Component {
super(props);
this.state = {
value: "",
selectedKey: "0"
selectedKey: "0",
modalParam:{
startDate: moment(new Date()).format("YYYY-MM"),
endDate: moment(new Date()).format("YYYY-MM")
},
columns: columns.map(item => {
if(item.dataIndex == 'cz') {
item.render = () => (
<div>
<a style={{marginRight:"10px"}}>核算</a>
<a style={{marginRight:"10px"}}>归档</a>
<a>删除</a>
</div>
)
}
})
}
}
render() {
const { baseTableStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
const { modalParam } = this.state
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
@ -61,6 +77,31 @@ export default class Calculate extends React.Component {
}
const renderRightOperation = () => {
return (
<div style={{display: "inline-block"}}>
<Button type="primary" style={{marginRight: "10px"}} onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail")}>核算</Button>
<div style={{display: "inline-block"}}>
<WeaDatePicker
format="yyyy-MM"
value={modalParam.startDate}
onChange={value => this.setState({ modalParam: {...modalParam, declareMonth: value} })}
/>
{' '}
至
{' '}
<WeaDatePicker
style={{marginLeft:"10px"}}
format="yyyy-MM"
value={modalParam.endDate}
onChange={value => this.setState({ modalParam: {...modalParam, declareMonth: value} })}
/>
</div>
<WeaInputSearch style={{marginLeft: "10px"}}/>
</div>
)
}
return (
<div className="mySalaryBenefitsWrapper">
<WeaRightMenu
@ -75,6 +116,14 @@ export default class Calculate extends React.Component {
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
>
<CustomTab
searchOperationItem={
renderRightOperation()
}
onChange={(v) => {
}}
/>
<WeaTable columns={columns} dataSource={dataSource}/>
</WeaTop>
</WeaRightMenu>

114
pc4mobx/hrmSalary/pages/calculateDetail/columns.js Normal file
View File

@ -0,0 +1,114 @@
export const userSureColumns = [
{
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: "员工状态",
dataIndex: 'title',
key: 'title',
},
{
title: "入职日期",
dataIndex: 'title',
key: 'title',
},
{
title: "离职日期",
dataIndex: 'title',
key: 'title',
},
{
title: "操作",
dataIndex: 'cz',
key: 'cz',
}
]
export const monthOnMonthColumns = [
{
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: "员工状态",
dataIndex: 'title',
key: 'title',
},
{
title: "入职日期",
dataIndex: 'title',
key: 'title',
},
{
title: "离职日期",
dataIndex: 'title',
key: 'title',
},
{
title: "操作",
dataIndex: 'cz',
key: 'cz'
},
]
export const dataSource = [];

41
pc4mobx/hrmSalary/pages/calculateDetail/index.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import UserSure from './userSure'
import { inject, observer } from 'mobx-react';
import CustomTab from '../../components/customTab'
@inject('baseTableStore')
@observer
export default class CalculateDetail extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedKey: "0"
}
}
render() {
const { selectedKey } = this.state;
const topTab = [{
title: "人员确认",
viewcondition: "0"
},
{
title: "薪资核算",
viewcondition: "1"
}];
return (
<div>
<CustomTab
topTab={topTab}
onChange={(v) => {
}}
/>
{
selectedKey == 0 && <UserSure />
}
</div>
)
}
}

41
pc4mobx/hrmSalary/pages/calculateDetail/index.less Normal file
View File

@ -0,0 +1,41 @@
.userSure {
padding: 20px;
.baseInfo {
height: 47px;
line-height: 47px;
}
.formWrapper {
line-height: 40px;
border-bottom: 1px solid #eee;
}
.operateBarWrapper {
border-bottom: 1px solid #eee;
line-height: 47px;
height: 47px;
.crumbsWrapper {
display: inline-block;
.crumbItem {
margin-right: 10px;
cursor: pointer;
}
.crumbItemSelected {
color: #2db7f5;
}
}
.crumbsOperateWrapper {
float: right;
display: inline-block;
.headerIcon {
display: inline-block;
.iconItem {
margin-right: 15px;
color: #2db7f5;
cursor: pointer;
}
}
}
}
}

94
pc4mobx/hrmSalary/pages/calculateDetail/userSure.js Normal file
View File

@ -0,0 +1,94 @@
import React from 'react'
import { Row, Col, Icon, Table } from 'antd'
import { WeaHelpfulTip, WeaInputSearch } from 'ecCom'
import { dataSource , monthOnMonthColumns, userSureColumns} from './columns'
import "./index.less"
export default class UserSure extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedKey: "0"
}
}
render() {
return (
<div className="userSure">
<div className="baseInfo">基本信息</div>
<div className="formWrapper">
<Row>
<Col span={12}>
<Row>
<Col span={6}>薪资所属月：<WeaHelpfulTip
width={100}
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"
/>
</Col>
<Col span={18}>2021-11</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={6}>核算账套：
</Col>
<Col span={18}>薪资账套A</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={6}>备注：</Col>
<Col span={18}>这是个备注</Col>
</Row>
</div>
<div className="operateBarWrapper">
<div>
<div className="crumbsWrapper">
<span className={this.state.selectedKey == "0" ? "crumbItem crumbItemSelected": "crumbItem"} onClick={() => {this.setState({selectedKey: "0"})}}>核算人员范围</span>
<WeaHelpfulTip
width={200}
title="核算完若薪资档案中个税扣缴义务人发生调整，需先刷新【核算人员范围】再到【薪资核算】中重新核算"
placement="topLeft"
/>
{' '}|{' '}
<span className={this.state.selectedKey == "1" ? "crumbItem crumbItemSelected": "crumbItem"} onClick={() => {this.setState({selectedKey: "1"})}}>环比上月减少人员</span>
<WeaHelpfulTip
width={200}
title="提示：环比上期当前选择的账套归档的各个税扣缴义务人下减少的人员"
placement="topLeft"
/>
</div>
<div className="crumbsOperateWrapper">
{
this.state.selectedKey == "0" && <div className="headerIcon">
<Icon className="iconItem" type="minus-square"/>
<Icon className="iconItem" type="plus-square" />
</div>
}
<WeaInputSearch className="searchInput"/>
</div>
</div>
</div>
<div className="tableWrapper">
{
this.state.selectedKey == 0 && <Table dataSource={dataSource} columns={userSureColumns} />
}
{
this.state.selectedKey == 1 && <Table dataSource={dataSource} columns={monthOnMonthColumns} />
}
</div>
</div>
)
}
}