Skip to content

X
xiaomai-cloud-class-web
Commit 557c810e by guomingpang
Options

Merge branch 'hotfix/pangguoming/20210802/fix_live_search_time' into dev

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