新增排班資料 & 顯示

Author: BYSu

src/components/Week/DatePicker.vue

@@ -218,14 +218,16 @@ export default {
   }
   &_weekday {
     display: flex;
-    width: 90vw;
+    width: calc(90vw - 15px);
     margin: auto;
   }
   &_weekday_label {
-    width: calc(90vw / 7);
+    font-weight: 550;
+    width: calc((90vw - 15px) / 7);
   }
   &_body {
     height: calc(100vh - 112px);
+    padding-bottom: 3.2rem;
     overflow: auto;
     &::-webkit-scrollbar {
       width: 0px;
@@ -237,11 +239,11 @@ export default {
   &_month {
     display: flex;
     flex-wrap: wrap;
-    width: 90vw;
+    width: calc(90vw - 15px);
     margin: auto;
   }
   &_date {
-    width: calc(90vw / 7);
+    width: calc((90vw - 15px) / 7);
     padding: 0.5rem 0.5rem;
     padding-top: 1rem;
     cursor: pointer;

src/components/Week/DayBody.vue

@@ -17,6 +17,13 @@
         :class="{ active: isToday }"
         :style="{ top: pinTop + 'px' }"
       />
+      <!-- 顯示排班 -->
+      <div
+        v-for="schedule in schedulesWithStyle"
+        :key="schedule.id"
+        class="dayBody_schedule"
+        :style="schedule.style"
+      />
       <!-- 顯示預約事件 -->
       <div
         v-for="order in ordersWithStyle"
@@ -46,6 +53,7 @@ export default {
   props: {
     current: { type: Date, required: true },
     calendar: { type: Object, required: true },
+    schedules: { type: Array, required: true },
     orders: { type: Array, required: true },
     use12Hour: { type: Boolean, default: true }
   },
@@ -91,6 +99,27 @@ export default {
             }
           }
         })
+    },
+    // 處理當日排班的樣式
+    schedulesWithStyle () {
+      const { schedules } = this
+      const oneDay = 24 * 60 * 60
+      const HeightPerHour = 70
+
+      return schedules
+        .map(schedule => {
+          const { from, to } = schedule.online
+          const height = (to - from) * HeightPerHour / (60 * 60 * 1000)
+          const totalSec = from.getSeconds() + 60 * from.getMinutes() + 60 * 60 * from.getHours()
+          const top = (totalSec % oneDay) * HeightPerHour * 24 / oneDay
+          return {
+            ...schedule,
+            style: {
+              height: height + 'px',
+              top: top + 'px'
+            }
+          }
+        })
     }
   }
 }
@@ -101,6 +130,7 @@ $border: #d4d5d6;
 $pinColor: #757575;
 $orderBg: #e5e5e5;
 $orderBg: rgba(229, 229, 229, 0.7);
+$scheduleBg: rgba(246, 246, 246, 0.5);
 
 .dayBody {
   height: 100%;
@@ -145,6 +175,19 @@ $orderBg: rgba(229, 229, 229, 0.7);
     background-color: $orderBg;
     cursor: pointer;
   }
+  &_schedule {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    z-index: 1;
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    text-align: left;
+    background-color: $scheduleBg;
+    cursor: pointer;
+  }
   &_order_user {
     color: #98999a;
   }

src/components/Week/WeekBody.vue

@@ -22,6 +22,13 @@
         :class="{ active: isToday(d-1) }"
         :style="{ top: pinTop + 'px' }"
       />
+      <!-- 顯示排班 -->
+      <div
+        v-for="schedule in weekDaySchedules(d-1)"
+        :key="schedule.id"
+        class="weekBody_schedule"
+        :style="schedule.style"
+      />
       <!-- 顯示預約事件 -->
       <div
         v-for="order in weekDayOrders(d-1)"
@@ -49,6 +56,7 @@ export default {
     current: { type: Date, required: true },
     today: { type: Object, required: true },
     orders: { type: Array, required: true },
+    schedules: { type: Array, required: true },
     daysOfWeek: { type: Array, required: true },
     use12Hour: { type: Boolean, default: true }
   },
@@ -100,6 +108,37 @@ export default {
         })
       }
     },
+    // 處理當日排班的樣式
+    schedulesWithStyle () {
+      const { schedules } = this
+      const oneDay = 24 * 60 * 60
+      const HeightPerHour = 70
+
+      return schedules
+        .map(schedule => {
+          const { from, to } = schedule.online
+          const height = (to - from) * HeightPerHour / (60 * 60 * 1000)
+          const totalSec = from.getSeconds() + 60 * from.getMinutes() + 60 * 60 * from.getHours()
+          const top = (totalSec % oneDay) * HeightPerHour * 24 / oneDay
+          return {
+            ...schedule,
+            style: {
+              height: height + 'px',
+              top: top + 'px'
+            }
+          }
+        })
+    },
+    // 取得當日的排班
+    weekDaySchedules () {
+      const { schedulesWithStyle, daysOfWeek } = this
+      return (d) => {
+        const day = daysOfWeek[d]
+        return schedulesWithStyle.filter(order => {
+          return order.online.from.getDay() === day.weekDay
+        })
+      }
+    },
     isToday () {
       const { today, daysOfWeek } = this
       return d => {
@@ -117,7 +156,7 @@ $border: #d4d5d6;
 $pinColor: #757575;
 $orderBg: #e5e5e5;
 $orderBg: rgba(229, 229, 229, 0.7);
-
+$scheduleBg: rgba(246, 246, 246, 0.5);
 .weekBody {
   height: 100%;
   overflow: auto;
@@ -164,6 +203,19 @@ $orderBg: rgba(229, 229, 229, 0.7);
   &_order_name {
     font-weight: 550;
   }
+  &_schedule {
+    position: absolute;
+    background-color: $scheduleBg;
+    width: 100%;
+    z-index: 1;
+    text-align: left;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+  }
   .pin {
     width: 100%;
     height: 1px;

src/components/Week/index.vue

@@ -22,13 +22,15 @@
         :today="today"
         :orders="filtOrders"
         :days-of-week="daysOfWeek"
+        :schedules="filtSchedules"
       />
       <DayBody
         v-if="bodyComponent === 'DayBody'"
         key="DayBody"
         :current="current"
         :calendar="observeCanlendar"
         :orders="filtSingleDateOrders"
+        :schedules="filtSingleDateSchedules"
       />
     </transition-group>
     <transition name="fade">
@@ -250,6 +252,32 @@ export default {
           const orderDate = order.reserve.from
           return orderDate > singleDateStart && orderDate < singleDateEnd
         })
+    },
+    // 過濾當週排班
+    filtSchedules () {
+      const { firstDateOfWeek, lastDateOfWeek } = this
+      const first = new Date(firstDateOfWeek.year, firstDateOfWeek.month, firstDateOfWeek.date)
+      const last = new Date(lastDateOfWeek.year, lastDateOfWeek.month, lastDateOfWeek.date)
+
+      const { schedules } = this
+      return schedules
+        .filter(schedule => {
+          const scheduleDate = schedule.online.from
+          return scheduleDate > first && scheduleDate < last
+        })
+    },
+    // 過濾當日排班
+    filtSingleDateSchedules () {
+      const { year, month, date } = this.observeCanlendar
+      const singleDateStart = new Date(year, month, date)
+      const singleDateEnd = new Date(year, month, date + 1)
+
+      const { schedules } = this
+      return schedules
+        .filter(schedule => {
+          const scheduleDate = schedule.online.from
+          return scheduleDate > singleDateStart && scheduleDate < singleDateEnd
+        })
     }
   },
   created () {

src/pages/OhBot/OhBot.scss

@@ -58,6 +58,9 @@ $secondary: #dedaf4;
             font-size: 0.8rem;
         }
     }
+    &_switch_btn {
+        border-radius: 50%;
+    }
     &_body {
         height: 100%;
     }
@@ -67,7 +70,7 @@ $secondary: #dedaf4;
         width: 100%;
         height: 4.2rem;
         padding-top: 1rem;
-        background-image: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, #f2f2f2 100%);
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f2f2f2 100%);
         z-index: 1;
         > button {
             width: 9rem;

src/pages/OhBot/index.vue

@@ -26,6 +26,7 @@
         <b-dropdown
           :text="mode+'檢視'"
           class="mr-3"
+          toggle-class="text-primary rounded-pill"
         >
           <b-dropdown-item @click="setMode('週')">
             週
@@ -36,7 +37,7 @@
         </b-dropdown>
         <b-dropdown
           text="測試"
-          pill
+          toggle-class="text-primary rounded-pill"
         >
           <b-dropdown-item>測試</b-dropdown-item>
         </b-dropdown>
@@ -87,7 +88,7 @@ export default {
           user: '王大美',
           reserve: {
             from: new Date(2021, 3, 1, 15, 30),
-            to: new Date(2021, 3, 1, 19, 30)
+            to: new Date(2021, 3, 1, 16, 30)
           }
         },
         {