微信小程序实现的日期午别医生排班表功能示例


Posted in Javascript onJanuary 09, 2019

本文实例讲述了微信小程序实现的日期午别医生排班表功能。分享给大家供大家参考,具体如下:

1.util.js

//获取几天后日期
function dateCount(arg,date) {
 var date1 = arg;
 var date2 = new Date(date1);
 date2.setDate(date2.getDate() + parseInt(date));
 var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
 var Year = 0;
 var Month = 0;
 var Day = 0;
 var CurrentDate = "";
 Year = date2.getFullYear();
 Month = date2.getMonth() + 1;
 Day = date2.getDate();
 CurrentDate += Year + "-";
 if (Month >= 10) {
 CurrentDate += Month + "-";
 } else {
 CurrentDate += "0" + Month + "-";
 }
 if (Day >= 10) {
 CurrentDate += Day;
 } else {
 CurrentDate += "0" + Day;
 }
 return CurrentDate;
}
Date.prototype.format = function() {
 var s = '';
 s += this.getFullYear() + '-'; // 获取年份。
 if ((this.getMonth() + 1) >= 10) { // 获取月份。
 s += (this.getMonth() + 1) + "-";
 } else {
 s += "0" + (this.getMonth() + 1) + "-";
 }
 if (this.getDate() >= 10) { // 获取日。
 s += this.getDate();
 } else {
 s += "0" + this.getDate();
 }
 return (s); // 返回日期。
};
//两个日期之间的所有日期
function getAll(begin, end) {
 var ab = begin.split("-");
 var ae = end.split("-");
 var db = new Date();
 db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
 var de = new Date();
 de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
 var unixDb = db.getTime();
 var unixDe = de.getTime();
 var str = "";
 for (var k = unixDb + 24 * 60 * 60 * 1000; k < unixDe;) {
 str += (new Date(parseInt(k))).format() + ",";
 k = k + 24 * 60 * 60 * 1000;
 }
 return str;
}
//两个时间相差天数
function datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式
 var aDate, oDate1, oDate2, iDays;
 aDate = sDate1.split("-");
 oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为9-25-2017格式
 aDate = sDate2.split("-");
 oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
 iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
 return iDays;
};
module.exports = {
 DateCount: dateCount,
 GetAll: getAll,
 Datedifference: datedifference
}

2.js

var HB = require('../../utils/util.js');
Page({
 /**
 * 页面的初始数据
 */
 data: {
 sourceList: [{
  "ClinicLabelName": "医生A",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-12",
  "IsVisit": false,
  "NoonName": "上午",
  "Noon": 1,
  "Total": 50,
  "dayOfWeek": "3",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生D",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-18",
  "IsVisit": false,
  "NoonName": "凌晨",
  "Noon": 4,
  "Total": 50,
  "dayOfWeek": "5",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生B",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-21",
  "IsVisit": false,
  "NoonName": "下午",
  "Noon": 2,
  "Total": 50,
  "dayOfWeek": "3",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生c",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-16",
  "IsVisit": false,
  "NoonName": "全天",
  "Noon": 4,
  "Total": 50,
  "dayOfWeek": "4",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生D",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-16",
  "IsVisit": false,
  "NoonName": "夜间",
  "Noon": 3,
  "Total": 50,
  "dayOfWeek": "5",
  "keyue": true
  }
 ],
 dateArray: [],
 noonList: [],
 StartClinicDate: "2018-12-12",
 EndClinicDate: "2018-12-19"
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 this.removal();
 },
 removal: function() {
 var that =this;
 var objectArray = this.data.sourceList;
 var newObject = [];
 for (var i = 0; i < objectArray.length; i++) //从第二项开始遍历
 {
  newObject.push(objectArray[i].NoonName);
 }
 var finalArray = [newObject[0]]; //结果数组
 for (var j = 1; j < newObject.length; j++) //从第二项开始遍历
 {
  //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
  //那么表示第i项是重复的,忽略掉。否则存入结果数组
  if (newObject.indexOf(newObject[j]) == j) {
  finalArray.push(newObject[j]);
  }
 }
 var noonList = [];
 for (var k = 0; k < finalArray.length; k++) //从第二项开始遍历
 {
  noonList.push({
  NoonName: finalArray[k],
  noon: that.getNoonNum(finalArray[k]),
  Value: false,
  list: []
  })
 }
 that.setData({
  noonList: noonList.sort(that.compare("noon"))
 })
 that.getSevenDays();
 },
 getNoonNum: function(ele) {
 var num;
 switch (ele) {
  case '上午':
  num = 1;
  break;
  case '下午':
  num = 2;
  break;
  case '夜间':
  num = 3;
  break;
  case '凌晨':
  num = 4;
  break;
  case '全天':
  num = 5;
  break;
 }
 return num;
 },
 compare: function compare(property){
 return function (a, b) {
  var value1 = a[property];
  var value2 = b[property];
  return value1 - value2;
 }
 },
 getSevenDays: function() {
 var daysArray = [];
 var dayDict = {};
 var weekStr = '';
 var weekNum = '';
 var date = new Date(); //当前日期
 var newDate = new Date();
 //开始日期与结束日期之间相差天数
 var dateNum = HB.Datedifference(this.data.StartClinicDate, this.data.EndClinicDate);
 //显示几周的表格
 var weekNum = Math.ceil((dateNum + 1) / 7);
 var dateArr = HB.GetAll(this.data.StartClinicDate, HB.DateCount(this.data.StartClinicDate, weekNum * 7 - 1));
 dateArr = (this.data.StartClinicDate + "," + dateArr + HB.DateCount(this.data.StartClinicDate, weekNum * 7 - 1)).split(","); //获取两个日期之间日期
 for (var i = 0; i < dateArr.length; i++) {
  weekNum = this.getWeekNum(this.getWeekByDay(dateArr[i]));
  dayDict = {
  "date": dateArr[i],
  "date_text": dateArr[i].substring(5, 10),
  "weekName": this.getWeekByDay(dateArr[i]),
  "weekNum": weekNum
  };
  daysArray.push(dayDict);
 }
 this.setData({
  dateArray: daysArray
 });
 this.dealData();
 },
 getWeekNum: function(ele) {
 var num;
 switch (ele) {
  case '周一':
  num = 0;
  break;
  case '周二':
  num = 1;
  break;
  case '周三':
  num = 2;
  break;
  case '周四':
  num = 3;
  break;
  case '周五':
  num = 4;
  break;
  case '周六':
  num = 5;
  break;
  case '周日':
  num = 6;
  break;
 }
 return num;
 },
 getWeekByDay: function(value) {
 var day = new Date(Date.parse(value.replace(/-/g, '/'))); //将日期值格式化
 var today = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); //创建星期数组
 return today[day.getDay()];
 },
 dealData: function() {
 var that = this;
 var tag = 0;
 var ar = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7];
 var objectArray = that.data.noonList;
 let loopNum = that.data.dateArray.length;
 for (var k = 0; k < objectArray.length; k++) {
  for (var m = 0; m < loopNum; m++) {
  objectArray[k].list.push({
   keyue: false,
   date: HB.DateCount(that.data.StartClinicDate, m)
  })
  }
 }
 for (var i = 0; i < that.data.sourceList.length; i++) {
  var assignmentArray;
  for (var j = 0; j < objectArray.length; j++) {
  if (objectArray[j].NoonName == that.data.sourceList[i].NoonName){
   assignmentArray = objectArray[j];
  }
  }
  assignmentArray.Value = true;
  for (var n = 0; n < assignmentArray.list.length; n++) {
  if (assignmentArray.list[n].date == that.data.sourceList[i].Date) {
   assignmentArray.list[n].noon = that.data.sourceList[i].Noon,
   assignmentArray.list[n].clinicLabelId = that.data.sourceList[i].ClinicLabelId,
   assignmentArray.list[n].clinicLabelName = that.data.sourceList[i].ClinicLabelName,
   assignmentArray.list[n].count = that.data.sourceList[i].Count,
   assignmentArray.list[n].isVisit = that.data.sourceList[i].IsVisit,
   assignmentArray.list[n].noonName = that.data.sourceList[i].NoonName,
   assignmentArray.list[n].total = that.data.sourceList[i].Total,
   assignmentArray.list[n].dayOfWeek = that.data.sourceList[i].dayOfWeek,
   assignmentArray.list[n].keyue = true
  }
  }
 }
 that.setData({
  noonList: objectArray
 })
 },
 clickDoctor: function(e) {
 let index = e.currentTarget.dataset.item;
 let indexChild = e.currentTarget.dataset.itemchild;
 let arrObiect = this.data.noonList;
 var objectList = arrObiect[index].list[indexChild];
 debugger
 }
})

3.wxml

<!-- 医生排班表 -->
<scroll-view scroll-x="true" class='scrollClass'>
 <view class='cell-table'>
 <view class='cell-table_header'>
  <view class="th">
  <view class='cell_label'></view>
  </view>
  <block wx:for="{{dateArray}}" wx:key="">
  <view class='th'>
   <view class="cell_label centerclass">{{item.weekName}}</view>
   <view class="cell_date_label centerclass">{{item.date_text}}</view>
  </view>
  </block>
 </view>
 <block wx:for="{{noonList}}" wx:key="" wx:for-index="parentIndex" wx:if='{{item.Value}}'>
  <view class='cell-table_main'>
  <!--上午下午晚上全天-->
  <view class='td' style='background-color:white;'>
   <view class="cell_label centerclass">{{item.NoonName}}</view>
  </view>
  <block wx:key="" wx:for="{{item.list}}" wx:for-item="trade" wx:for-index="ind">
   <view class='td' wx:if='{{trade.keyue}}'>
   <view class='cell-table_choose"' bindtap='clickDoctor' data-item='{{parentIndex}}' data-itemchild='{{ind}}'>{{trade.count+"/"+trade.total}}</view>
   </view>
   <view class='td' wx:else>
   <view class='cell-table_empty"'></view>
   </view>
  </block>
  </view>
 </block>
 </view>
</scroll-view>

4.wxss

/*医生排班表 */
.cell-table {
 display: inline-flex;
 flex-direction: column;
 border: 1rpx solid #e5e5e5;
 border-bottom: 0;
}
.scrollClass {
 display: flex;
 width: 100%;
 white-space: nowrap;
 margin-top: 23px;
 height: 100%;
 background-color: white;
}
.cell-table_header {
 display: inline-flex;
}
.th {
 display: flex;
 flex-direction: column;
 width: 100px;
 height: 45px;
 background: #f8f8f8;
 border-right: 1rpx solid #e5e5e5;
 border-bottom: 1rpx solid #e5e5e5;
 justify-content: center;
 align-items: center;
 overflow-x: auto;
}
.th:first-child {
 width: 60px;
}
.cell_label {
 font-size: 13px;
 color: #999;
}
.cell_date_label {
 font-size: 12px;
 color: #999;
}
.cell-table_main {
 display: inline-flex;
 flex-direction: row;
}
.right-item {
 display: flex;
 flex-direction: row;
}
.td {
 display: flex;
 flex-direction: column;
 width: 100px;
 height: 45px;
 background: white;
 justify-content: center;
 align-items: center;
 border: 1rpx solid #e5e5e5;
 border-top: 0;
 border-left: 0;
}
.td:first-child {
 width: 60px;
}
.cell-table_empty {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 45px;
 font-size: 15px;
 color: rgba(55, 134, 244, 1);
 width: 100%;
 word-break: normal;
}
.cell-table_choose {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 45px;
 font-size: 15px;
 background: linear-gradient(to bottom, #5acafe, #45a1fc);
 color: white;
 width: 100%;
 word-break: normal;
}

效果:

微信小程序实现的日期午别医生排班表功能示例微信小程序实现的日期午别医生排班表功能示例

微信小程序实现的日期午别医生排班表功能示例微信小程序实现的日期午别医生排班表功能示例

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
js模拟微博发布消息
Feb 23 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Windows下Node爬虫神器Puppeteer安装记
Jan 09 #Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 #jQuery
爬虫利器Puppeteer实战
Jan 09 #Javascript
puppeteer库入门初探
Jan 09 #Javascript
node.js的Express服务器基本使用教程
Jan 09 #Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 #Javascript
You might like
NOT NULL 和NULL
2007/01/15 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
babel基本使用详解
2017/02/17 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python调用C语言程序方法解析
2020/07/07 Python
智能电子应届生求职信
2013/11/10 职场文书
七年级音乐教学反思
2014/01/26 职场文书
一年级数学教学反思
2014/02/01 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Vue监视数据的原理详解
2022/02/24 Vue.js
Java异常体系非正常停止和分类
2022/06/14 Java/Android
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技