Skip to content

X
xiaomai-cloud-class-web
Commit a8783b47 by guomingpang
Options

Merge branch 'hotfix/pangguoming/20210802/fix_live_search_time'

parents afa6f0ad e49ecd05
Showing with 128 additions and 135 deletions
src/components/MultipleDatePicker.jsx
......@@ -5,32 +5,40 @@
* Date: 2016/12/30
* Time: 下午2:32
*/
import React from 'react'
import { message } from "antd";
import React from 'react';
import { message } from 'antd';
import moment from 'moment';
require("./MultipleDatePicker.less");
require('./MultipleDatePicker.less');
class MultipleDatePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
calendar: "",
calendarDate: props.type ? moment(props.startTime):moment(),
calendar: '',
calendarDate: props.type ? moment(props.startTime) : moment(),
detailList: [],
waitNoticeNumber: 0,
totalCount: 0,
selectDateList: props.selectDateList || [],
endTime: props.endTime || null,
startTime: props.startTime || null,
homeworkProcessEnum: props.homeworkProcessEnum || ''
homeworkProcessEnum: props.homeworkProcessEnum || '',
};
}
componentWillReceiveProps(nextProps) {
this.setState({endTime : nextProps.endTime, startTime: nextProps.startTime, selectDateList: nextProps.selectDateList, homeworkProcessEnum:nextProps.homeworkProcessEnum},() => {
this.handleQuery();
});
this.setState(
{
endTime: nextProps.endTime,
startTime: nextProps.startTime,
selectDateList: nextProps.selectDateList,
homeworkProcessEnum: nextProps.homeworkProcessEnum,
},
() => {
this.handleQuery();
}
);
}
componentDidMount() {
this.handleQuery();
}
......@@ -43,25 +51,22 @@ class MultipleDatePicker extends React.Component {
}
renderCalendar() {
var start = moment(this.state.calendarDate).startOf("month"),
startDay = start.dates(),
var start = moment(this.state.calendarDate).startOf('month'),
startDay = start.date(),
// 每月的第一天是星期几 [0-6] 6:日
startWeekOf = start.weekday();
var end = moment(this.state.calendarDate).endOf("month"),
endDay = end.dates(),
var end = moment(this.state.calendarDate).endOf('month'),
endDay = end.date(),
endWeekOf = end.weekday();
var dateElms = [];
// 上月余留的天
var prevMonthDays = moment(start).subtract("month", 1).endOf("month"),
prevMonthDaysNumber = prevMonthDays.dates();
for (
var j = prevMonthDaysNumber - startWeekOf + 1, i = 0;
i < startWeekOf;
i++, j++
) {
var time = moment(prevMonthDays).subtract("days", startWeekOf - 1 - i);
var prevMonthDays = moment(start).subtract(1, 'months').endOf('month'),
prevMonthDaysNumber = prevMonthDays.date();
for (var j = prevMonthDaysNumber - startWeekOf, i = 0; i < startWeekOf + 1; i++, j++) {
var time = moment(prevMonthDays).subtract(startWeekOf - 1 - i, 'days');
dateElms.push(
<li className={"disabled"} key={"before" + i}>
<li className={'disabled'} key={'before' + i}>
<span>{j}</span>
</li>
);
......@@ -69,44 +74,40 @@ class MultipleDatePicker extends React.Component {
// 本月
for (var i = startDay; i <= endDay; i++) {
var time = moment(start).add("days", i - 1);
var className = "";
if(!this.props.canSelectTodayBefore && time.valueOf() < moment().valueOf() && time.format("YYYY-MM-DD") != moment().format("YYYY-MM-DD")) {
className = 'before-disabled'
var time = moment(start).add(i - 1, 'days');
var className = '';
if (!this.props.canSelectTodayBefore && time.valueOf() < moment().valueOf() && time.format('YYYY-MM-DD') != moment().format('YYYY-MM-DD')) {
className = 'before-disabled';
}
// 今日待跟进
if (time.format("YYYY-MM-DD") == moment().format("YYYY-MM-DD")) {
className += " today";
if (time.format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
className += ' today';
}
if (this.state.selectDateList.indexOf(time.valueOf()) > -1) {
className += " active";
className += ' active';
const today = moment().startOf('day').valueOf();
if(this.props.type && this.props.type == 'CALENDAR_CLOCK' && (time.valueOf() < today) && this.state.homeworkProcessEnum == 'ONGOING') {
className += " past";
if (this.props.type && this.props.type == 'CALENDAR_CLOCK' && time.valueOf() < today && this.state.homeworkProcessEnum == 'ONGOING') {
className += ' past';
}
}
if(this.state.startTime && this.state.endTime && (time.valueOf() > this.state.endTime.valueOf() || time.valueOf() < this.state.startTime.valueOf())) {
className += " disabled"
if (this.state.startTime && this.state.endTime && (time.valueOf() > this.state.endTime.valueOf() || time.valueOf() < this.state.startTime.valueOf())) {
className += ' disabled';
}
dateElms.push(
<li
className={className}
key={"curr" + i}
onClick={this.handleShowDetail.bind(this, time, className)}
>
<li className={className} key={'curr' + i} onClick={this.handleShowDetail.bind(this, time, className)}>
<span>{i}</span>
</li>
);
}
// 下月预来的天
for (var j = 1, i = endWeekOf; i < 6; i++, j++) {
var time = moment(end).add("days", i);
var time = moment(end).add(i, 'days');
dateElms.push(
<li className={"disabled"} key={"after" + i}>
<li className={'disabled'} key={'after' + i}>
<span>{j}</span>
</li>
);
......@@ -115,18 +116,24 @@ class MultipleDatePicker extends React.Component {
}
handleShowDetail(time, className) {
if((!this.props.canSelectTodayBefore && className === 'before-disabled') || this.props.disabled) {
return
if ((!this.props.canSelectTodayBefore && className === 'before-disabled') || this.props.disabled) {
return;
}
let date = time.valueOf();
const today = moment().startOf('day').valueOf();
if(this.props.type && this.props.type == 'CALENDAR_CLOCK' && (date < today)) {
if (this.props.type && this.props.type === 'CALENDAR_CLOCK' && date < today) {
return;
}
if(this.state.homeworkProcessEnum == 'ONGOING' && date == today) {
if (this.state.homeworkProcessEnum === 'ONGOING' && date == today) {
return;
}
if(this.props.type && this.props.type == 'CALENDAR_CLOCK' && this.state.startTime && this.state.endTime && (date > this.state.endTime.valueOf() || date < this.state.startTime.valueOf())) {
if (
this.props.type &&
this.props.type == 'CALENDAR_CLOCK' &&
this.state.startTime &&
this.state.endTime &&
(date > this.state.endTime.valueOf() || date < this.state.startTime.valueOf())
) {
return;
}
let tempArr = this.state.selectDateList;
......@@ -135,8 +142,8 @@ class MultipleDatePicker extends React.Component {
let index = tempArr.indexOf(date);
tempArr.splice(index, 1);
} else {
if (tempArr.length > 29 && !this.props.type) {
message.warning("最多选择30天");
if (tempArr.length > 29 && !this.props.type) {
message.warning('最多选择30天');
return;
} else {
tempArr.push(date);
......@@ -155,95 +162,82 @@ class MultipleDatePicker extends React.Component {
render() {
const self = this;
const {calendarDate, endTime,startTime } = this.state;
const { type} = this.props;
const prevMonth = startTime && calendarDate.subtract("month", 1).endOf('month').valueOf() < startTime.valueOf();
const nextMonth = !(endTime && calendarDate.add("month", 1).valueOf() < endTime.valueOf());
const { calendarDate, endTime, startTime } = this.state;
const { type } = this.props;
const prevMonth = startTime && calendarDate.subtract(1, 'months').endOf('month').valueOf() < startTime.valueOf();
const nextMonth = !(endTime && calendarDate.add(1, 'months').valueOf() < endTime.valueOf());
return (
<div
className={`multiple-calendar ${
type == "CALENDAR_CLOCK" ? "punch-calender" : ""
}`}
>
{type == "CALENDAR_CLOCK" ? (
<div className="punch-control">
<div className="punch-main">
<div className={`multiple-calendar ${type === 'CALENDAR_CLOCK' ? 'punch-calender' : ''}`}>
<Choose>
<When condition={type == 'CALENDAR_CLOCK'}>
<div className='punch-control'>
<div className='punch-main'>
<div
onClick={function () {
if (prevMonth) {
return;
}
this.state.calendarDate = this.state.calendarDate.subtract(1, 'months');
self.handleQuery();
}.bind(this)}
className={`prev-icon ${prevMonth ? 'disbled-icon' : ''}`}>
<span className='icon iconfont'>&#xe65f;</span>
</div>
<span className='month'>{this.state.calendarDate.format('YYYY年MM月')}</span>
<div
className={`next-icon ${nextMonth ? 'disbled-icon' : ''}`}
onClick={function () {
if (nextMonth) {
return;
}
this.state.calendarDate = this.state.calendarDate.add(1, 'months');
self.handleQuery();
}.bind(this)}>
<span className='icon iconfont'>&#xe65e;</span>
</div>
</div>
<div
className='self'
onClick={function () {
if(prevMonth){return}
this.state.calendarDate = this.state.calendarDate.subtract(
"month",
1
);
this.state.calendarDate = moment(startTime);
self.handleQuery();
}.bind(this)}
className={`prev-icon ${prevMonth?'disbled-icon':''}`}
>
<span className="icon iconfont">&#xe65f;</span>
}.bind(this)}>
回到起始月
</div>
<span className="month">{this.state.calendarDate.format("YYYY年MM月")}</span>
</div>
</When>
<Otherwise>
<div className='t-control'>
<div
className={`next-icon ${nextMonth?'disbled-icon':''}`}
className='prev'
onClick={function () {
if(nextMonth){return}
this.state.calendarDate = this.state.calendarDate.add(
"month",
1
);
this.state.calendarDate = this.state.calendarDate.subtract(1, 'months');
self.handleQuery();
}.bind(this)}
>
<span className="icon iconfont">&#xe65e;</span>
}.bind(this)}>
上月
</div>
<div className='loc'>{this.state.calendarDate.format('YYYY年MM月')}</div>
<div
className='self'
onClick={function () {
this.state.calendarDate = moment();
self.handleQuery();
}.bind(this)}>
本月
</div>
<div
className='next'
onClick={function () {
this.state.calendarDate = this.state.calendarDate.add(1, 'months');
self.handleQuery();
}.bind(this)}>
下月
</div>
</div>
<div
className="self"
onClick={function () {
this.state.calendarDate = moment(startTime);
self.handleQuery();
}.bind(this)}
>
回到起始月
</div>
</div>
) : (
<div className="t-control">
<div
className="prev"
onClick={function () {
this.state.calendarDate = this.state.calendarDate.subtract(
"month",
1
);
self.handleQuery();
}.bind(this)}
>
上月
</div>
<div className="loc">
{this.state.calendarDate.format("YYYY年MM月")}
</div>
<div
className="self"
onClick={function () {
this.state.calendarDate = moment();
self.handleQuery();
}.bind(this)}
>
本月
</div>
<div
className="next"
onClick={function () {
this.state.calendarDate = this.state.calendarDate.add('month', 1);
self.handleQuery()
}.bind(this)}
>
下月
</div>
</div>
)}
<ul className="week">
</Otherwise>
</Choose>
<ul className='week'>
<li>日</li>
<li>一</li>
<li>二</li>
......@@ -251,9 +245,8 @@ class MultipleDatePicker extends React.Component {
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul className="calendar" id="multiCalendar">
<ul className='calendar' id='multiCalendar'>
{this.state.calendar}
</ul>
</div>
......@@ -264,9 +257,9 @@ class MultipleDatePicker extends React.Component {
MultipleDatePicker.propTypes = {};
MultipleDatePicker.defaultProps = {
reEditUrl: "",
reEditUrl: '',
close: function () {},
canSelectTodayBefore: true // 支持选择今天之前的日期
canSelectTodayBefore: true, // 支持选择今天之前的日期
};
export default MultipleDatePicker;
src/modules/course-manage/components/LiveCourseFilter.jsx
......@@ -104,7 +104,7 @@ class LiveCourseFilter extends React.Component {
delete query.endTime
} else {
query.startTime = dates[0]?.startOf('day').valueOf()
query.endTime = dates[0]?.endOf('day').valueOf()
query.endTime = dates[1]?.endOf('day').valueOf()
}
this.setState(
{
......
src/modules/course-manage/graphics-course/components/GraphicsCourseFilter.jsx
......@@ -98,7 +98,7 @@ class GraphicsCourseFilter extends React.Component {
delete query.endTime
} else {
query.beginTime = dates[0]?.startOf('day').valueOf()
query.endTime = dates[0]?.endOf('day').valueOf()
query.endTime = dates[1]?.endOf('day').valueOf()
}
this.setState(
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment