考勤管理：用ant design Calendar日历动态渲染
import React, { Component } from 'react';
// import { Card, Typography, Alert, Icon } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {Card, Checkbox, Input, Tabs, Button, Col, Row, Table, Calendar, Tag, Modal,Steps,Alert } from 'antd';
import styles from './';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { Step } = Steps;
const { TabPane } = Tabs;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = [];// 默认选中值
class text extends Component {
state = {
checkedList: defaultCheckedList,
indeterminate: false,
checkAll: false,
attendanceDate:[
{
date:'2020-04-1',
state:0,//正常 green
},
{
date:'2020-04-2',
state:1,//迟到 yellow
},
],
isAttendance:false,
day:'',
};
componentDidMount() {
var day=moment().format("YYYY-MM-DD HH:mm:ss");
console.log(day);
this.setState({
day
},
)
}
handleTableChange = (pagination, filters, sorter) => {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
fetch = (params = {}) => {
console.log('params:', params);
this.setState({ loading: true });
reqwest({
url: '/api',
method: 'get',
data: {
results: 10,
...params,
},
type: 'json',
}).then(data => {
const pagination = { ...this.state.pagination };
// Read total count from server
// = ;
pagination.total = 200;
this.setState({
loading: false,
data: data.results,
pagination,
});
});
};
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
};
// const {attendanceDate}=;
onPanelChange=(value, mode) =>{
console.log(moment(value).format('YYYY-MM-DD HH:mm:ss')+"&&&"+mode)
};
getListData=(value)=> {
//对数据进行动态处理
let listData=[];
var selectDay=moment(this.state.day).format('YYYY-MM')
if (moment(value).format('YYYY-MM')===selectDay) {
for (let i = 0; i < this.state.attendanceDate.length; i++) {
let date = this.state.attendanceDate[i].date.split("-");
if (value.date().toString()===date[2]) {
switch (this.state.attendanceDate[i].state) {
case 0:
listData = [
{color: 'green', content: '正常'}
];
break;
case 1:
listData = [
{color: 'yellow', content: '迟到'}
];
break;
case 2:
listData = [
{color: 'red', content: '旷工'}
];
break;
case 3:
listData = [
{color: 'blue', content: '休假'}
];
break;
default:
}
}
}
}
return listData || [];
}
dateCellRender=(value)=> {
const listData = this.getListData(value);
return (
<ul className="events">
{listData.map(item => (
<li key={item.content}>
<Tag color={item.color} >{item.content}</Tag>
</li>
))}
</ul>
);
};
Calendar1_DayRender=(e)=>{
if (e.Day.IsOtherMonth)
e.Cell.Enabled = false;
};
attendanceBtn=()=>{
this.setState({isAttendance:true})
};attendanceCancel=()=>{
this.setState({isAttendance:false})
};
attendanceOk=()=>{
};
monthCellRender=(value)=> {
const num = getMonthData(value);
return num ? (
<div className="notes-month">
<section>{num}</section>
<span>Backlog number</span>
</div>
) : null;
}
render() {
return (
<div className={styles}>
<PageHeaderWrapper >
<Card bordered={false} >
<Row>
<Col span={2}>
<Button type="primary" onClick={this.attendanceBtn}>考勤打卡</Button>
<Modal
title="考勤打卡"
// onOk={}
visible={this.state.isAttendance}
// onCancel={}>
footer={
[
// 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
<Button key="back" type="primary" onClick={this.attendanceCancel}>关闭</Button>,
]
}>
<Alert message="Informational Notes"
type="info"
style={{marginTop:10,marginBottom:20}}
showIcon/>
<Steps current={0} style={{marginTop:10,marginBottom:20}}>
<Step title="Waiting" description="上班时间09:00" />
<Step title="Waiting" description="下班时间17:30" />
</Steps>
<Button
type="primary"
onClick={this.attendanceOk}
style={{marginTop:10,marginBottom:20,height:40,fontWeight:"bolder"}}
block>
打卡 {moment().format('HH:mm:ss')}</Button>
</Modal>
</Col>
<Col span={2}>
<Button type="primary">请假申请</Button>
</Col>
</Row>
<Tabs defaultActiveKey="1" >
<TabPane tab="考勤打卡" key="1">
<Calendar className="attendanceCal"
onPanelChange={this.onPanelChange}
dateCellRender={this.dateCellRender}
monthCellRender={this.monthCellRender} />
</TabPane>
<TabPane tab="请假信息" key="2">
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
</div>
</TabPane>
<TabPane tab="加班信息" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
</Card>
</PageHeaderWrapper>
</div>
)
}
}
export default text;