手写排班日历

手写排班日历：

结果图：

vue代码如下：

1. <template>
2.   <div class="YSPB">
3.     <div class="title">排班日历</div>
4.     <div class="banner">
5.       <span class='iconfont icon-youjiantou ' @click="nextMounth('l')">{{ "{" }}</span>
6.       <span>{{ y }}年{{ m }}月</span>
7.       <span class='iconfont icon-youjiantou' @click="nextMounth('r')">{{ "}" }}</span>
8.     </div>
9.     <div class="cander" v-show="show">
10.       <div class="week">
11.         <span class='box' style='color:#ff0000a1;'>日</span>
12.         <span class='box'>一</span>
13.         <span class='box'>二</span>
14.         <span class='box'>三</span>
15.         <span class='box'>四</span>
16.         <span class='box'>五</span>
17.         <span class='box' style='color:#ff0000a1;'>六</span>
18.       </div>
19.       <div class="days">
20.         <div class="days1" v-for="(obj, i) in dateList" :key="i">
21.           <div :class="['txt',
22.             obj.day == today ? (obj.bool ? 'sel' : '') : '',
23.             obj.bool ? '' : 'old',
24.             obj.isWork == '上午' ? 'shangwuColor' : obj.isWork == '下午' ? 'xiawuColor' : obj.isWork == '全天' ? 'quantianColor' : '',
25.             obj.label == '左' ? 'Color_l' : obj.label == '中' ? 'Color_z' : obj.label == '右' ? 'Color_r' : '']"
26.             @click='selClick(obj.day, obj.bool, obj)'>
27.             <span v-if="obj.isWork == '上午'" class="t1">{{ obj.day }}</span>
28.             <span v-if="obj.isWork == '上午'" class="t2">{{ obj.lunar }}</span>
29.             <!-- <div :class="['t3', obj.isWork == '上午' ? 't4' : '']" v-show="(obj.day != today) && obj.bool && obj.isWork == '上午'">上午</div> -->
31.             <span v-if="obj.isWork == '下午'" class="t1">{{ obj.day }}</span>
32.             <span v-if="obj.isWork == '下午'" class="t2">{{ obj.lunar }}</span>
33.             <!-- <div :class="['t3', obj.isWork == '下午' ? 't4' : '']" v-show="(obj.day != today) && obj.bool && obj.isWork == '下午'">下午</div> -->
35.             <span v-if="obj.isWork == '全天'" class="t1">{{ obj.day }}</span>
36.             <span v-if="obj.isWork == '全天'" class="t2">{{ obj.lunar }}</span>
37.             <!-- <div :class="['t3', obj.isWork == '全天' ? 't4' : '']" v-show="(obj.day != today) && obj.bool && obj.isWork == '全天'">全天</div> -->
39.             <span v-if="!obj.isWork" class="t1">{{ obj.day }}</span>
40.             <span v-if="!obj.isWork" class="t2">{{ obj.lunar }}</span>
41.             <div :class="['t3']" v-show="(obj.day != today) && obj.bool && !obj.isWork">休</div>
42.           </div>
43.         </div>
44.       </div>
45.     </div>
46.     <div class="bot">
47.       注意：所有排班不可自行更改，如需更改排班，请联系医院管理人员进行更改
48.     </div>
49.     <div class="forterColor">
50.       <div class="forterColor1">
51.         <div class="shangwuColor_qiu"></div> <span>上午班</span>
52.       </div>
53.       <div class="forterColor1">
54.         <div class="xiawuColor_qiu"></div><span>下午班</span>
55.       </div>
56.       <div class="forterColor1">
57.         <div class="quantianColor_qiu"></div><span>全天班</span>
58.       </div>
59.     </div>
60.   </div>
61. </template>
62. <script>
63. export default {
64.   name: "cu-divClick",
65.   props: {
66.     list: {
67.       type: Array,
68.       default: () => []
69.     },
70.     clickAction: {
71.       type: Number,
72.       default: 3
73.     }
74.   },
75.   data() {
76.     return {
77.       show: true,
78.       dateList: [],
79.       today: new Date().getDate(),
80.       y: new Date().getFullYear(),
81.       m: new Date().getMonth() + 1,
82.       pbList: [], //排班列表
83.     };
84.   },
85.   mounted() {
86.     this.dateList = this.getTime()
87.     this.pbList = [
89.             {
90.               "doctorCode": "10015",
91.               "doctorName": "韩辰份",
92.               "resourcesDate": "2024-09-02",
93.               "timeType": "全天"
94.             },
95.             {
96.               "doctorCode": "10015",
97.               "doctorName": "韩辰份",
98.               "resourcesDate": "2024-09-03",
99.               "timeType": "全天"
100.             },
101.             {
102.               "doctorCode": "10015",
103.               "doctorName": "韩辰份",
104.               "resourcesDate": "2024-09-15",
105.               "timeType": "上午"
106.             },
107.             {
108.               "doctorCode": "10015",
109.               "doctorName": "韩辰份",
110.               "resourcesDate": "2024-09-16",
111.               "timeType": "上午"
112.             },
113.             {
114.               "doctorCode": "10015",
115.               "doctorName": "韩辰份",
116.               "resourcesDate": "2024-09-17",
117.               "timeType": "上午"
118.             },
119.             {
120.               "doctorCode": "10015",
121.               "doctorName": "韩辰份",
122.               "resourcesDate": "2024-09-18",
123.               "timeType": "下午"
124.             },
126.             {
127.               "doctorCode": "10015",
128.               "doctorName": "韩辰份",
129.               "resourcesDate": "2024-09-26",
130.               "timeType": "全天"
131.             },
132.             {
133.               "doctorCode": "10015",
134.               "doctorName": "韩辰份",
135.               "resourcesDate": "2024-09-27",
136.               "timeType": "全天"
137.             },
138.           ];
139.           this.pbList = this.labelArray(this.pbList);
140.           console.log("this.pbList:", this.pbList)
141.           this.isWork()
142.   },
143.   watch: {
144.     dateList: {
145.       handler(newval) {
146.         this.isWork()
147.       },
148.       deep: true,
149.       immediate: true
150.     }
151.   },
152.   methods: {
153.     isWork() {
154.       this.show = false
155.       this.dateList.forEach(val => {
156.         this.pbList.forEach(item => {
157.           const date = this.y + '-' + this.m + '-' + val.day
158.           if (val.timeDate == item.resourcesDate && item.timeType == "上午") {
159.             val.isWork = "上午"
160.             console.log(date + val.isWork)
161.             val.label = item.label
162.           } else if (val.timeDate == item.resourcesDate && item.timeType == "下午") {
163.             val.isWork = "下午"
164.             console.log(date + val.isWork)
165.             val.label = item.label
166.           } else if (val.timeDate == item.resourcesDate && item.timeType == "全天") {
167.             val.isWork = "全天"
168.             console.log(date + val.isWork)
169.             val.label = item.label
171.           }
172.         })
173.       })
175.       this.show = true
176.     },
178.     areConsecutiveDates(date1, date2) {
179.       let d1 = new Date(date1);
180.       let d2 = new Date(date2);
181.       let oneDay = 24 * 60 * 60 * 1000;
182.       return Math.round((d2 - d1) / oneDay) === 1;
183.     },
184.     labelArray(arr) {
185.       let result = [];
186.       let i = 0;
187.       while (i < arr.length) {
188.         let start = i;
189.         let end = i;
190.         while (end + 1 < arr.length && arr[end].timeType === arr[end + 1].timeType && this.areConsecutiveDates(arr[end].resourcesDate, arr[end + 1].resourcesDate)) {
191.           end++;
192.         }
193.         if (start === end) {
194.           result.push(arr[start]);
195.         } else {
196.           result.push({ ...arr[start], label: '左' });// 上午/下午/全天-左边元素
197.           for (let j = start + 1; j < end; j++) {
198.             result.push({ ...arr[j], label: '中' });// 上午/下午/全天-中间元素
199.           }
200.           result.push({ ...arr[end], label: '右' });// 上午/下午/全天-右边元素
201.         }
202.         i = end + 1;
203.       }
204.       return result;
205.     },
208.     /* 日历 ----------------------------------*/
209.     // 选中日期
210.     selClick(day, flag, obj) {
211.       console.log(obj)
212.       if (!flag) return
213.       this.today = day
214.     },
215.     //获取当月天数
216.     getMounthNum(m) {
217.       let days = 0
218.       if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
219.         days = 31
220.       } else if (m == 4 || m == 6 || m == 9 || m == 11) {
221.         days = 30
222.       } else if (m == 2) {
223.         if ((this.y % 4 == 0 && this.y % 100 != 0) || (this.y % 400 == 0)) {
224.           days = 29
225.         } else {
226.           days = 28
227.         }
228.       }
229.       return days
230.     },
231.     //获取当月每一天对应周几
232.     getTime() {
233.       const date = new Date(this.y + '/' + this.m + '/' + '1')
234.       const arr = []
235.       const start = date.getDay()
236.       const end = new Date(this.y + '/' + this.m + '/' + this.getMounthNum(this.m)).getDay()
237.       for (let i = 1 - start; i <= this.getMounthNum(this.m) + 6 - end; i++) {
238.         let day = '',
239.           week = '',
240.           lunar = '',
241.           bool = true,
242.           m = '',
243.           y = this.y,
244.           today = this.today;
245.         if (i < 1) {
246.           m = this.m - 1
247.           if (m < 1) {
248.             y--
249.             m = 12
250.           }
251.           day = this.getMounthNum(m) + i
252.         } else if (i >= 1 && i <= this.getMounthNum(this.m)) {
253.           m = this.m
254.           day = i
255.         } else if (i > this.getMounthNum(this.m)) {
256.           m = this.m + 1
257.           if (m > 12) {
258.             y++
259.             m = 1
260.           }
261.           day = i - this.getMounthNum(this.m)
262.         }
263.         week = this.setWeek(new Date(y + '/' + m + '/' + day).getDay())
264.         day = day >= 10 ? day.toString() : '0' + day
265.         const ary = this.$cu.test.getLunar(new Date(y + '/' + m + '/' + day))
266.         if (day < this.today || i < 1 || i > this.getMounthNum(this.m)) {
267.           bool = false
268.         }
269.         console.log("y")
270.         m = m >= 10 ? m.toString() : '0' + m
271.         let timeDate = y + "-" + m + "-" + day
272.         arr.push({
273.           day,
274.           week,
275.           lunar: ary[1],
276.           nl: ary[0],
277.           bool,
278.           timeDate
279.         })
280.       }
281.       return arr
282.     },
283.     setWeek(val) {
284.       switch (val) {
285.         case 0:
286.           val = '周日'
287.           break;
288.         case 1:
289.           val = '周一'
290.           break;
291.         case 2:
292.           val = '周二'
293.           break;
294.         case 3:
295.           val = '周三'
296.           break;
297.         case 4:
298.           val = '周四'
299.           break;
300.         case 5:
301.           val = '周五'
302.           break;
303.         case 6:
304.           val = '周六'
305.           break;
306.       }
307.       return val
308.     },
309.     // 下一月或上一月
310.     nextMounth(val) {
311.       if (this.y == new Date().getFullYear() && this.m == new Date().getMonth() + 1 && val == 'l') return
312.       this.show = false
313.       if (val == 'l') {
314.         this.m--
315.         if (this.m < 1) {
316.           this.y--
317.           this.m = 12
318.         }
319.       } else if (val == 'r') {
320.         this.m++
321.         if (this.m > 12) {
322.           this.y++
323.           this.m = 1
324.         }
325.       }
326.       if (this.m != new Date().getMonth() + 1) {
327.         this.today = null
328.       } else {
329.         this.today = new Date().getDate()
330.       }
331.       this.dateList = this.getTime()
332.       this.show = true
333.     }
334.     /* 日历 ----------------------------------*/
335.   }
336. };
337. </script>
339. <style lang="less" scoped>
340. .YSPB {
341.   width: 100%;
342.   height: 100%;
343.   background-color: #f8f8f8;
345.   .title {
346.     // line-height: 110px;
347.     text-align: center;
348.     background-color: #fff;
349.     font-size: 24px;
350.     font-weight: bold;
351.     color: #000000;
352.     border-bottom: 1px solid #ddd;
353.     padding: 10px 0px;
354.   }
356.   .banner {
357.     display: flex;
358.     align-items: center;
359.     // line-height: 110px;
360.     text-align: center;
361.     background-color: #fff;
362.     font-size: 24px;
363.     font-weight: bold;
364.     padding: 20px 0px;
366.     .iconfont {
367.       flex: 1;
368.       color: #999;
369.       cursor: pointer;
370.       -moz-user-select: none;
371.       /*mozilar*/
372.       -webkit-user-select: none;
373.       /*webkit*/
374.       -ms-user-select: none;
375.       /*IE*/
376.       user-select: none;
377.     }
379.     .right {
380.       display: inline-block;
381.       transform: rotate(180deg);
382.     }
384.     span {
385.       display: inline-block;
386.       margin: 0 30px;
387.       color: #000;
388.     }
389.   }
391.   .cander {
392.     background-color: #fff;
393.     padding: 0 27px 50px;
395.     .week {
396.       height: 62px;
397.       border-radius: 31px;
398.       background-color: #f0f0f0;
399.       display: flex;
401.       .box {
402.         /* 每个项占宽度的 14% */
403.         width: 14.285714285714286%;
404.         font-size: 20px;
405.         display: flex;
406.         align-items: center;
407.         justify-content: center;
408.       }
409.     }
411.     .days {
412.       width: 100%;
413.       margin-top: 30px;
414.       display: flex;
415.       flex-wrap: wrap;
417.       .days1 {
418.         padding-top: 30px;
419.         /* 每个项占宽度的 14% */
420.         width: 14.285714285714286%;
421.         display: flex;
422.         align-items: center;
423.         justify-content: center;
425.         .txt {
426.           padding: 10px 14px;
427.           position: relative;
428.           text-align: center;
429.           color: #000;
430.           display: flex;
431.           flex-direction: column;
432.           align-items: center;
433.           justify-content: center;
435.           .t1 {
436.             display: inline-block;
437.             font-size: 20px;
438.             color: #333;
439.             line-height: 20px;
440.           }
442.           .t2 {
443.             display: block;
444.             font-size: 12px;
445.             color: #666;
446.             line-height: 12px;
447.           }
449.           .t3 {
450.             position: absolute;
451.             top: 0;
452.             right: 0;
453.             color: #00AF46;
454.             font-size: 12px;
455.           }
457.           .t4 {
458.             color: #F8764E;
459.           }
461.         }
463.         /* 设置每一行的第一位和第七位的文字颜色为红色 */
468.         .old {
469.           opacity: 0.5;
471.           /* 淡化子元素背景色 */
472.           .t1,
473.           .t2 {
474.             color: #b3b3b3;
475.           }
476.         }
479.       }
481.       .days1:nth-child(7n + 1),
482.       .days1:nth-child(7n) {
483.         .txt {
484.           span {
485.             color: #ff0000a1;
486.           }
487.         }
489.       }
491.     }
492.   }
496.   .forterColor1 {
497.     display: flex;
498.     align-items: center;
500.     span {
501.       margin-left: 10px;
502.     }
503.   }
504. }
506. .sel {
507.   border-radius: 50%;
508.   border: 1px solid #dddddd;
512. }
514. .shangwuColor_qiu {
515.   margin-top: 4px;
516.   width: 18px;
517.   height: 18px;
518.   background-color: #ed4014;
519.   border-radius: 50%;
520. }
522. .xiawuColor_qiu {
523.   margin-top: 4px;
524.   width: 18px;
525.   height: 18px;
526.   background-color: #19be6b;
527.   border-radius: 50%;
528. }
530. .quantianColor_qiu {
531.   margin-top: 4px;
532.   width: 18px;
533.   height: 18px;
534.   background-color: #2d8cf0;
535.   border-radius: 50%;
536. }
538. .bot {
539.   padding: 10px 30px;
540.   font-size: 16px;
541.   color: #999;
542.   // line-height: 34px;
543.   text-align: justify;
544. }
546. .forterColor {
547.   display: flex;
548.   align-items: center;
549.   justify-content: space-between;
550.   padding: 10px 30px;
551.   font-size: 16px;
552. }
554. .shangwuColor {
555.   margin-top: 4px;
556.   background-color: #ed4014;
557.   border-radius: 50%;
559.   .t1,
560.   .t2 {
561.     color: #fff !important;
562.   }
563. }
565. .xiawuColor {
566.   margin-top: 4px;
567.   background-color: #19be6b;
568.   border-radius: 50%;
570.   .t1,
571.   .t2 {
572.     color: #fff !important;
573.   }
574. }
576. .quantianColor {
577.   margin-top: 4px;
578.   background-color: #2d8cf0;
579.   border-radius: 50%;
581.   .t1,
582.   .t2 {
583.     color: #fff !important;
584.   }
585. }
587. .Color_l {
588.   border-radius: 140px 0 0 140px;
589.   width: 100% !important;
590. }
592. .Color_z {
593.   border-radius: 0 0 0 0;
594.   width: 100% !important;
595. }
597. // .Color_z::before {
598. //   content: "";
599. //   position: absolute;
600. //   top: 0;
601. //   left: 0;
602. //   width: 100%;
603. //   height: 100%;
604. //   background-color: rgba(0, 0, 0, 0.1);
605. //   /* 半透明覆盖层 */
606. //   z-index: 1;
607. // }
609. .Color_r {
610.   border-radius: 0 140px 140px 0;
611.   width: 100% !important;
612. }
614. .t1 {
615.   font-weight: bold;
616.   font-size: 20px !important;
617. }
619. .t2 {
620.   font-size: 12px !important;
621. }</style>

复制代码

---

学习内容：

提示：这里可以添加要学的内容
例如：

• 搭建 Java 开发环境
  
• 掌握 Java 根本语法
  
• 掌握条件语句
  
• 掌握循环语句
  

---

学习时间：

提示：这里可以添加计划学习的时间
例如：

• 周一至周五晚上 7 点—晚上9点
  
• 周六上午 9 点-上午 11 点
  
• 周日下午 3 点-下午 6 点
  

---

学习产出：

提示：这里统计学习计划的总量
例如：

• 技术条记 2 遍
  
• CSDN 技术博客 3 篇
  
• 习的 vlog 视频 1 个
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。