浏览代码

优化时间选择,修复冲突时间问题

guohh 5 年之前
父节点
当前提交
cd06259ba1
共有 1 个文件被更改,包括 45 次插入24 次删除
  1. 45 24
      2020/x-3/biz/js/page/group-schedule-time-picker.js

+ 45 - 24
2020/x-3/biz/js/page/group-schedule-time-picker.js

@ -5,18 +5,18 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
5 5
    // # 加载每天日程数据
6 6
7 7
    // 把console修改成空方法,就不会打印日志了
8
    /* var console = {
9
       log: function () {
10
       }
11
     };*/
8
    var console = {
9
      log: function () {
10
      }
11
    };
12 12
    // 基本信息
13 13
    var WK_DAY_TEXTS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
14 14
    var MORE_DAY_NUM = 7;     // 可滚动的天数小于此数值时,补充新的MORE_DAY_NUM天数
15 15
    var INIT_DAY_NUM = 3 * MORE_DAY_NUM;  // 初始化时显示的天数
16 16
    var LIMIT_DAY_NUM = 5 * MORE_DAY_NUM;     // 限制最多的天数,超过则会移除前面或后面超出的天数
17 17
18
    var beginDateTime = "2020-12-11 11:00";  //
19
    var endDateTime = "2020-12-11 12:00";    //
18
    var beginDateTime = "";  // 可以有值,格式"2020-12-11 11:00
19
    var endDateTime = "";    // 可以有值,2020-12-11 12:00
20 20
    var beginDateStr = beginDateTime && beginDateTime.split(" ")[0];      // 选择的开始时间字符串,可以有值,有值时,默认选中天为开始时间,格式 2020-12-11
21 21
    var endDateStr = endDateTime && endDateTime.split(" ")[0];        // 选择的结束时间字符串,可以有值,格式 2020-12-12
22 22
    console.log(beginDateStr, endDateStr);
@ -205,8 +205,8 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
205 205
          $(">li:gt(" + (LIMIT_DAY_NUM - 1) + ")", calendarWrap).remove();  // 移除后面超出的日期
206 206
          calendarDays = calendarDays.slice(0, LIMIT_DAY_NUM - 1);          // 更新数组
207 207
        } else {
208
          console.log('after limit');
209
          var length = calendarDays.length;
208
          console.log('after limit');               //
209
          var length = calendarDays.length;         //
210 210
          var moveLen = $(">li:eq(" + (length - LIMIT_DAY_NUM) + ")", calendarWrap).position().left;
211 211
          $(">li:lt(" + (length - LIMIT_DAY_NUM) + ")", calendarWrap).remove();  // 移除超过的数据
212 212
          calendarDays = calendarDays.slice(length - LIMIT_DAY_NUM, length);  // 返回新数组
@ -245,10 +245,22 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
245 245
          // 判断是否冲突
246 246
          if (beginDateTime && endDateTime) { // 存在开始结束时间
247 247
            var sBegin = sltDay.dateStr + " " + obj.beginTime;
248
            if (obj.beginTime.match(/^\d:/)) {
249
              sBegin = sltDay.dateStr + " 0" + obj.beginTime;
250
            }
248 251
            var sEnd = sltDay.dateStr + " " + obj.endTime;
249
            console.log(sBegin, beginDateTime, sEnd, endDateTime);
250
            if (sBegin >= beginDateTime && sEnd <= endDateTime) {  // 日程在开始和结束时内,存为冲突
252
            if (obj.endTime.match(/^\d:/)) {  // 说明7:00这种格式,前面要补0
253
              sEnd = sltDay.dateStr + " 0" + obj.endTime;
254
            }
255
256
            console.log(sBegin, sEnd, beginDateTime, endDateTime);
257
            console.log(sEnd <= beginDateTime, sBegin >= endDateTime);
258
259
            if (sEnd <= beginDateTime || sBegin >= endDateTime) {
260
261
            } else {// 日程在开始和结束时内,存为冲突
251 262
              obj.className = "date-schedule-block-conflict";
263
              console.log("date-schedule-block-conflict");
252 264
            }
253 265
          }
254 266
        });
@ -277,9 +289,21 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
277 289
      }]
278 290
    ];
279 291
292
    // 更新日程冲突
293
    function updateScheduleConflict() {
294
      var toLi = $(".ipu-nav-content>ul>li:eq(" + scheduleIndex + ")");
295
      toLi.find(".date-schedule-block").remove();
296
297
      // 模拟接口请求过程,若没有接口请求,不需要处理
298
      computeSchedulePosition(mockScheduleList[scheduleIndex]);
299
      var scheduleHtmlStr = artTemplate("schedule-item-tpl", {list: mockScheduleList[scheduleIndex]});
300
      $(scheduleHtmlStr).appendTo($(".date-time-area", toLi));
301
      scrollToFirst();
302
    }
303
280 304
    // 显示选中天日程信息
281 305
    function showSchedule() {  // 日期相同时,不需要左右切换
282
      if (lastSltDay && lastSltDay.dateStr == sltDay.dateStr) {  // 天数未更新
306
      if (lastSltDay && lastSltDay.dateStr == sltDay.dateStr) {  // 选择日期未更新,只是更新了时间范围
283 307
284 308
      } else {
285 309
        // 如果天数相同,则不且切换...
@ -302,14 +326,7 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
302 326
        wrapper.removeClass("ipu-no-animation").toggleClass("ipu-nav-content-right");
303 327
      }
304 328
305
      var toLi = $(".ipu-nav-content>ul>li:eq(" + scheduleIndex + ")");
306
      toLi.find(".date-schedule-block").remove();
307
308
      // 模拟接口请求过程,若没有接口请求,不需要处理
309
      computeSchedulePosition(mockScheduleList[scheduleIndex]);
310
      var scheduleHtmlStr = artTemplate("schedule-item-tpl", {list: mockScheduleList[scheduleIndex]});
311
      $(scheduleHtmlStr).appendTo($(".date-time-area", toLi));
312
      scrollToFirst();
329
      updateScheduleConflict();
313 330
    }
314 331
315 332
    // 数据页更新后,自动滚动到第一个有冲突或第一个日程位置
@ -319,12 +336,14 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
319 336
      var firstEl = $(".date-time-area .date-schedule-block-conflict:first", liEl);
320 337
321 338
      if (firstEl.size() == 0) {
322
        firstEl = $(".date-time-area .date-schedule-block-conflict", liEl);
339
        firstEl = $(".date-time-area .date-schedule-block:first", liEl);  // 找第一个块即可
323 340
      }
324 341
325 342
      if (firstEl.size() == 0) { // 没有日程,进入日程默认起妈时间位置
326 343
        firstEl = $(".date-time-line-default", liEl);
327 344
      }
345
346
      console.log(scheduleIndex, firstEl, firstEl.position().top);
328 347
      $(liEl).scrollTop(firstEl.position().top - 2);  // -2是预留量
329 348
    }
330 349
@ -349,9 +368,9 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
349 368
        countSize();
350 369
      }
351 370
352
      setTimeout(function () {
371
      setTimeout(function () {   //
353 372
        var index = $("li[data-date='" + sltDay.dateStr + "']", calendarWrap).index();
354
        calendarScrollTo(index);  // 默认选中当前时间
373
        calendarScrollTo(index);          // 默认选中当前时间
355 374
      }, 100);
356 375
    }
357 376
@ -360,6 +379,7 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
360 379
      $(">li", calendarWrap).removeClass("picker picker-begin picker-end conflict");
361 380
      var firstDay = $("li[data-date='" + beginDateStr + "']", calendarWrap).addClass("picker-begin");
362 381
      var lastDay = $("li[data-date='" + endDateStr + "']", calendarWrap).addClass("picker-end");
382
363 383
      if (!firstDay.is(lastDay)) {
364 384
        firstDay.nextUntil("[data-date='" + endDateStr + "']").addClass("picker");
365 385
      }
@ -368,6 +388,8 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
368 388
      // 下面是演示用代码,给选中天加上日程冲突
369 389
      // 需要开发人员计算新的日程冲突
370 390
      addConflictFlag(beginDateStr);
391
392
      updateScheduleConflict();
371 393
    }
372 394
373 395
    // 将时间字符串'2012-12-11' 转换为[2012, 12, 11];
@ -452,5 +474,4 @@ require(["ipuUI", "jquery", "iScroll", "artTemplate"], function (ipuUI, $, iScro
452 474
    }
453 475
454 476
  });
455
})
456
;
477
});