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

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

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;
}

效果：

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