考情数据查看页面
This commit is contained in:
parent
3e0975af12
commit
0a35202baa
|
|
@ -17,10 +17,12 @@ export default class SlideModalTitle extends React.Component {
|
|||
<div className="subtitle">{this.props.subtitle}</div>
|
||||
</div>
|
||||
<div className="btnWrapper">
|
||||
|
||||
{this.props.btns}
|
||||
{
|
||||
this.state.editable && <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
|
||||
}
|
||||
{this.props.customOperate}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,158 @@
|
|||
export const columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: "个税扣缴义务人",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'ywr',
|
||||
key: 'ywr',
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: 'title',
|
||||
dataIndex: 'bm',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'sjh',
|
||||
key: 'sjh',
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'gh',
|
||||
key: 'gh',
|
||||
},
|
||||
{
|
||||
title: "证件号码",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'sfzh',
|
||||
key: 'sfzh',
|
||||
},
|
||||
{
|
||||
title: "入职日期",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'rzrq',
|
||||
key: 'rzrq',
|
||||
},
|
||||
{
|
||||
title: "累计子女教育",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'ljznjy',
|
||||
key: 'ljznjy',
|
||||
},
|
||||
{
|
||||
title: "累计继续教育",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'ljjxjy',
|
||||
key: 'ljjxjy',
|
||||
},
|
||||
{
|
||||
title: "累计住房贷款利息",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'ljzfdklx',
|
||||
key: 'ljfdklx',
|
||||
},
|
||||
{
|
||||
title: "累计住房租金",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'ljzfzj',
|
||||
key: 'ljzfzj',
|
||||
},
|
||||
{
|
||||
title: "累计赡养老人",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'ljsylr',
|
||||
key: 'ljsylr',
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
dataIndex: 'cz',
|
||||
key: 'cz',
|
||||
render: (text, record) => {
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
export const dataSource = [];
|
||||
export const slideColumns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "手机号",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "在职计薪天数",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "非在职计薪天数",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "应出勤天数(不含节假日)",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "实际出勤天数",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "工作日加班",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "双休日日加班",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "事假时长",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
},
|
||||
{
|
||||
title: "病假时长",
|
||||
dataIndex: 'username',
|
||||
key: 'username'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
export const slideDataSource = [{
|
||||
username: "测试"
|
||||
}]
|
||||
|
||||
export const dataSource = [
|
||||
{
|
||||
username: "测试",
|
||||
ywr: "测试",
|
||||
bm: "测试",
|
||||
sjh: "测试",
|
||||
gh: "测试",
|
||||
sfzh: "测试",
|
||||
rzrq: "测试",
|
||||
ljznjy: "测试",
|
||||
ljjxjy: "测试",
|
||||
ljzfdklx: "测试",
|
||||
ljzfzj: "测试",
|
||||
ljsylr: "测试"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
import React from 'react';
|
||||
import { Row, Col, Table, DatePicker } from "antd"
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import { WeaInput, WeaTextarea, WeaSearchGroup, WeaSelect, WeaCheckbox, WeaTable } from "ecCom";
|
||||
import { slideColumns, slideDataSource, columns } from './columns';
|
||||
import "./editSlideContent.less"
|
||||
|
||||
// import { WeaTableNew } from "comsMobx"
|
||||
// const WeaTable = WeaTableNew.WeaTable;
|
||||
import moment from 'moment'
|
||||
|
||||
const { MonthPicker } = DatePicker;
|
||||
|
||||
|
||||
let emptyItem = {
|
||||
incomeLowerLimit: "0.00",
|
||||
incomeUpperLimit: "0.00",
|
||||
dutyFreeValue: "0.00",
|
||||
dutyFreeRate: "0.00",
|
||||
taxableIncomeLl: "0.00",
|
||||
taxableIncomeUl: "0.00",
|
||||
taxRate: "0.00",
|
||||
taxDeduction: "0.00"
|
||||
}
|
||||
|
||||
@inject('otherDeductStore', "taxAgentStore")
|
||||
@observer
|
||||
export default class EditSlideContent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
taxAgentId: "",
|
||||
startDate: moment(new Date()).format("YYYY-MM"),
|
||||
endDate: moment(new Date()).format("YYYY-MM"),
|
||||
editable: this.props.editable === undefined ? "true": this.props.editable
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() { // 初始化渲染页面
|
||||
const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
|
||||
fetchTaxAgentOption();
|
||||
}
|
||||
|
||||
addItem() {
|
||||
const { taxRateStore: {setDataSource}} = this.props;
|
||||
let dataSource = [...this.props.taxRateStore.dataSource];
|
||||
let indexNum = 1;
|
||||
if(dataSource.length > 0) {
|
||||
indexNum = dataSource[dataSource.length - 1].indexNum + 1
|
||||
}
|
||||
let item = {...emptyItem}
|
||||
item.indexNum = indexNum
|
||||
dataSource.push(item);
|
||||
setDataSource(dataSource)
|
||||
}
|
||||
|
||||
fetchCumDeductDetailList(param) {
|
||||
const { otherDeductStore} = this.props;
|
||||
const { getOtherDeductDetailList, currentRecord } = otherDeductStore;
|
||||
getOtherDeductDetailList(currentRecord.id, param);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { taxAgentStore: {taxAgentOption}} = this.props;
|
||||
const { otherDeductStore } = this.props;
|
||||
const { slideTableStore, currentRecord } = otherDeductStore;
|
||||
const { startDate, endDate, taxAgentId } = this.state;
|
||||
return (
|
||||
<div className="attendSlide">
|
||||
<div className="titleWrapper">
|
||||
<div className="slideLeftTitle">考勤周期: 2021-01-01至2021-01-31</div>
|
||||
<WeaCheckbox className="rightTitle" content="仅查看异动人员"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Table
|
||||
dataSource={slideDataSource}
|
||||
columns={slideColumns}
|
||||
width={"100%"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.attendSlide {
|
||||
.titleWrapper {
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
.slideLeftTitle {
|
||||
float: left;
|
||||
}
|
||||
.rightTitle {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.weaRangePickerWrapper {
|
||||
display: inline-block;
|
||||
.monthPickerWrapper {
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
.betweenLable {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,9 +2,9 @@ import React from 'react';
|
|||
import { inject, observer } from 'mobx-react';
|
||||
import { toJS } from 'mobx';
|
||||
|
||||
import { Button, Table, DatePicker, Row, Col } from 'antd';
|
||||
import { Button, Table, DatePicker, Row, Col, Menu, Dropdown } from 'antd';
|
||||
|
||||
import { WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaSelect } from 'ecCom';
|
||||
import { WeaInputSearch, WeaSlideModal, WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaSelect } from 'ecCom';
|
||||
|
||||
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法:因为多个页面都会使用,所以抽的公共方法在util中
|
||||
import CustomTab from '../../../components/customTab';
|
||||
|
|
@ -17,7 +17,8 @@ import HeaderSet from "../../../components/importModal/headerSet"
|
|||
import SelectItemModal, {items} from '../../../components/selectItemsModal'
|
||||
import RefereAttendFormModal from './refereAttendFormModal'
|
||||
import SelectItemsWrapper from '../../../components/selectItemsModal/selectItemsWrapper'
|
||||
|
||||
import SlideModalTitle from '../../../components/slideModalTitle'
|
||||
import EditSlideContent from './editSlideContent';
|
||||
|
||||
const { MonthPicker } = DatePicker;
|
||||
|
||||
|
|
@ -34,13 +35,96 @@ export default class Attendance extends React.Component {
|
|||
modalParam: {},
|
||||
modalVisiable: false,
|
||||
selectItemVisible: false,
|
||||
refereAttendFormVisible: false
|
||||
refereAttendFormVisible: false,
|
||||
tabSelectedKey: "0",
|
||||
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>)
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
onShowSlide() {
|
||||
const {attendanceStore : {setSlideVisiable}} = this.props;
|
||||
setSlideVisiable(true)
|
||||
}
|
||||
|
||||
|
||||
onDelete() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const { attendanceStore } = this.props;
|
||||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = attendanceStore;
|
||||
const { step, setStep } = attendanceStore;
|
||||
const { step, setStep, setSlideVisiable, slideVisiable } = attendanceStore;
|
||||
if (!hasRight && !loading) { // 无权限处理
|
||||
return renderNoright();
|
||||
}
|
||||
|
|
@ -66,8 +150,14 @@ export default class Attendance extends React.Component {
|
|||
<Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
|
||||
];
|
||||
|
||||
const topTab = [
|
||||
];
|
||||
const topTab = [{
|
||||
title: "社保",
|
||||
viewcondition: "0"
|
||||
},
|
||||
{
|
||||
title: "公积金",
|
||||
viewcondition: "1"
|
||||
}];
|
||||
|
||||
const renderSearchOperationItem = () => {
|
||||
return <div>
|
||||
|
|
@ -117,9 +207,32 @@ export default class Attendance extends React.Component {
|
|||
2022-03-01 ~ 2022-03-31
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
|
||||
)}
|
||||
|
||||
|
||||
const renderCustomOperate = () => {
|
||||
return (
|
||||
<div style={{display: "inline-block"}}>
|
||||
<Dropdown.Button overlay={menu} type="primary">导出</Dropdown.Button>
|
||||
<Button type="default" style={{marginLeft: "10px", marginRight: "10px"}}>自定义列</Button>
|
||||
<WeaInputSearch
|
||||
placeholder="请输入姓名/部门/工号/手机号"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key="1">导出全部</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="mySalaryBenefitsWrapper">
|
||||
<WeaRightMenu
|
||||
|
|
@ -134,18 +247,43 @@ export default class Attendance extends React.Component {
|
|||
dropMenuDatas={rightMenu} // 下拉菜单(和页面的右键菜单相同)
|
||||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||||
>
|
||||
<CustomTab
|
||||
leftOperation={
|
||||
renderLeftOperation()
|
||||
}
|
||||
|
||||
<CustomTab topTab={topTab}
|
||||
searchOperationItem={
|
||||
renderSearchOperationItem()
|
||||
}
|
||||
onChange={(v) => {
|
||||
}}
|
||||
/>
|
||||
<CustomTab
|
||||
leftOperation={
|
||||
renderLeftOperation()
|
||||
}
|
||||
|
||||
onChange={(v) => {
|
||||
|
||||
}}
|
||||
/>
|
||||
<WeaTable columns={columns} dataSource={dataSource}/>
|
||||
|
||||
{
|
||||
this.state.tabSelectedKey == 0 ?
|
||||
<WeaTable columns={this.state.columns} dataSource={dataSource}/>
|
||||
:
|
||||
<TwoColContent
|
||||
leftContent={
|
||||
<WeaTable columns={this.state.columns} dataSource={dataSource}/>
|
||||
}
|
||||
rightContent={
|
||||
<TipLabel tipList={
|
||||
[
|
||||
"1、考勤字段包含自定义字段和考勤模块的统计字段,所有字段不可重名;",
|
||||
"2、停用自定义字段将影响其参与计算的账套核算;"
|
||||
]
|
||||
}/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
</WeaTop>
|
||||
</WeaRightMenu>
|
||||
|
||||
|
|
@ -174,6 +312,28 @@ export default class Attendance extends React.Component {
|
|||
</SelectItemModal>
|
||||
|
||||
<RefereAttendFormModal visible={this.state.refereAttendFormVisible} onCancel={() => this.setState({refereAttendFormVisible: false})}/>
|
||||
|
||||
{
|
||||
slideVisiable && <WeaSlideModal visible={slideVisiable}
|
||||
top={0}
|
||||
width={40}
|
||||
height={100}
|
||||
direction={'right'}
|
||||
measure={'%'}
|
||||
title={
|
||||
<SlideModalTitle
|
||||
subtitle={"考勤数据"}
|
||||
editable={false}
|
||||
customOperate={
|
||||
renderCustomOperate()
|
||||
}
|
||||
/>
|
||||
}
|
||||
content={(<EditSlideContent editable={this.state.editable}/>)}
|
||||
onClose={() => setSlideVisiable(false)}
|
||||
showMask={true}
|
||||
closeMaskOnClick={() => setSlideVisiable(false)} />
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ export class AttendanceStore {
|
|||
@observable loading = true; // 数据加载状态
|
||||
@observable step = 0 ;
|
||||
@observable modalVisiable = false;
|
||||
@observable slideVisiable = false;
|
||||
|
||||
@action
|
||||
setSlideVisiable = slideVisiable => this.slideVisiable = slideVisiable;
|
||||
|
||||
@action
|
||||
setStep = step => this.step = step
|
||||
|
|
|
|||
Loading…
Reference in New Issue