考情数据查看页面

This commit is contained in:
MustangDeng 2022-03-15 11:06:56 +08:00
parent 3e0975af12
commit 0a35202baa
6 changed files with 404 additions and 39 deletions

View File

@ -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>

View File

@ -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: "测试"
}
];

View File

@ -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>
)
}
}

View File

@ -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;
}
}
}

View File

@ -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>

View File

@ -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