From 159ea27ea8e5d156ffd98ff3acaca9b084f23641 Mon Sep 17 00:00:00 2001
From: "271556543@qq.com" <271556543@qq.com>
Date: Fri, 8 Jul 2022 17:22:53 +0800
Subject: [PATCH] 7.8 pages

---
 src/views/order/schedulingManage.vue | 334 +++++++++++++++++++++++++--
 1 file changed, 310 insertions(+), 24 deletions(-)

diff --git a/src/views/order/schedulingManage.vue b/src/views/order/schedulingManage.vue
index 08a7a05..be7eb4c 100644
--- a/src/views/order/schedulingManage.vue
+++ b/src/views/order/schedulingManage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0px 20px">
+  <div style="padding: 0px 20px;">
     <div>
       <div ref="lxHeader">
         <lx-header icon="md-apps" text="排班管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
@@ -8,10 +8,12 @@
       </div>
     </div>
 
+
+
     <el-card :style="{height : cardHeight + 'px'}">
       <div class="content">
         <div class="content-left">
-          <Button type="primary" style="min-width: 140px;margin-top: 10px;">添加排班</Button>
+          <Button type="primary" style="min-width: 140px;margin-top: 10px;" @click="isShowDialog = true">添加排班</Button>
 
           <div style="color: #b9b9c3;padding: 10px 0;">筛选</div>
 
@@ -24,27 +26,136 @@
         </div>
 
         <div class="content-right">
-          <el-calendar>
+          <div class="type-select">
+            <div class="type-select-item" @click="typeSelect = 'Month'" :class="{selectActive:typeSelect == 'Month'}">Month</div>
+            <div class="type-select-item" @click="typeSelect = 'Week'" :class="{selectActive:typeSelect == 'Week'}">Week</div>
+            <div class="type-select-item" @click="typeSelect = 'Day'" :class="{selectActive:typeSelect == 'Day'}">Day</div>
+            <div class="type-select-item" @click="typeSelect = 'List'" :class="{selectActive:typeSelect == 'List'}">List</div>
+          </div>
+
+          <el-calendar v-if="typeSelect == 'Month'">
             <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
             <template
               slot="dateCell"
               slot-scope="{date, data}">
               <div :class="data.isSelected ? 'is-selected' : ''" @click="dateClick(data)" style="height: 100%;width: 100%;position: relative;">
                 {{ data.day.split('-')[2].replace(/^(0+)/g,"") }}日 {{ data.isSelected ? '✔️' : ''}}
-                <div v-if="data.day == '2022-07-08'" class="range" :style="{width:dateWidth*3 - 16 + 'px'}">牛大爷</div>
+                <div v-if="data.day == '2022-07-08'" class="range" :style="{width:dateWidth*3 - 16 + 'px'}" @click="isShowDialog = true">牛大爷</div>
               </div>
             </template>
           </el-calendar>
+
+          <div v-if="typeSelect == 'Week'" class="week">
+            <div class="week-title">
+              <div>
+                <Icon size="24" type="ios-arrow-back" />
+                <Icon size="24" type="ios-arrow-forward" style="margin-left: 10px;"/>
+              </div>
+              <div style="margin-left: 20px;">{{nowDate.year}}年{{nowDate.weekStart}}-{{nowDate.weekEnd}}</div>
+            </div>
+            <table>
+              <tr style="border: 1px #ebe9f1 solid;">
+                <th></th>
+                <th v-for="item in weeks"><div>{{dateFormat(item)}}</div></th>
+              </tr>
+              <tr>
+                <td style="width: 50px;text-align: center;color: #b9b9c3;"><div>all-day</div></td>
+                <td v-for="td in 7"><div></div></td>
+              </tr>
+              <tr v-for="(tr,index) in 48">
+                <td style="width: 50px;text-align: center;"><div>{{ index%2 === 0 ? `${index/2}时` : ' '}}</div></td>
+                <td v-for="td in 7"><div></div></td>
+              </tr>
+            </table>
+          </div>
+
+          <div v-if="typeSelect == 'Day'" class="week">
+            <div class="week-title">
+              <div>
+                <Icon size="24" type="ios-arrow-back" />
+                <Icon size="24" type="ios-arrow-forward" style="margin-left: 10px;"/>
+              </div>
+              <div style="margin-left: 20px;">{{nowDate.year}}年{{nowDate.month}}月{{nowDate.day}}日</div>
+            </div>
+            <table>
+              <tr style="border: 1px #ebe9f1 solid;">
+                <th></th>
+                <th><div>{{dateFormat(new Date().getTime())}}</div></th>
+              </tr>
+              <tr>
+                <td style="width: 50px;text-align: center;color: #b9b9c3;"><div>all-day</div></td>
+                <td><div></div></td>
+              </tr>
+              <tr v-for="(tr,index) in 48">
+                <td style="width: 50px;text-align: center;"><div>{{ index%2 === 0 ? `${index/2}时` : ' '}}</div></td>
+                <td><div></div></td>
+              </tr>
+            </table>
+          </div>
+
+          <div v-if="typeSelect == 'List'" class="list">
+            <div class="list-title">
+              <div>
+                <Icon size="24" type="ios-arrow-back" />
+                <Icon size="24" type="ios-arrow-forward" style="margin-left: 10px;"/>
+              </div>
+              <div style="margin-left: 20px;">{{nowDate.year}}年{{nowDate.month}}月</div>
+            </div>
+
+            <div class="list-content">
+              <div v-for="i in 3">
+                <div class="list-content-title">
+                  <div>2022年7月8日</div>
+                  <div>星期五</div>
+                </div>
+
+                <div class="list-content-item">
+                  <div class="list-content-item-time">14:10 - 0:00</div>
+                  <div class="list-content-item-icon"></div>
+                  <div class="list-content-item-name">张大爷</div>
+                </div>
+              </div>
+
+              <div>
+                <div class="list-content-title">
+                  <div>2022年7月8日</div>
+                  <div>星期五</div>
+                </div>
+
+                <div class="list-content-item" v-for="i in 15">
+                  <div class="list-content-item-time">14:10 - 0:00</div>
+                  <div class="list-content-item-icon"></div>
+                  <div class="list-content-item-name">张大爷</div>
+                </div>
+              </div>
+
+            </div>
+          </div>
         </div>
       </div>
     </el-card>
+
+    <my-dialog :dialog-visible.sync="isShowDialog" title="排班"></my-dialog>
   </div>
 </template>
 
 <script>
+import ResizeObserver from "resize-observer-polyfill";
+
 export default {
   data() {
     return {
+      isShowDialog:false,
+      nowDate:{
+        year:new Date().getFullYear(),
+        month:new Date().getMonth()+1,
+        day:new Date().getDate(),
+        date:new Date(),
+        weekStart:null,
+        weekEnd:null
+      },
+      typeSelect:'Month',
+      weeks:[],//表格题目
       dateWidth:0,
       cardHeight: 0,
       select:{
@@ -61,11 +172,11 @@ export default {
   },
   methods: {
     initLoad() {
-      var that = this;
-      var clientHeight = document.documentElement.clientHeight
-      var lxHeader_height = 96.5; //查询 头部
-      var paginationHeight = 37; //分页的高度
-      var topHeight = 50; //页面 头部
+      let that = this;
+      let clientHeight = document.documentElement.clientHeight
+      let lxHeader_height = 96.5; //查询 头部
+      let paginationHeight = 37; //分页的高度
+      let topHeight = 50; //页面 头部
       let cardHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
       that.cardHeight = cardHeight;
     },
@@ -76,6 +187,36 @@ export default {
     },
     dateClick(day){
       console.log(day)
+    },
+    getWeeks(date = new Date()){
+      let one_day = 86400000;
+      let day = date.getDay();
+      // 设置时间为当天的0点
+      date.setHours(0);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      let week_start_time = date.getTime() - (day - 1) * one_day;
+      let week_end_time = date.getTime() + (7 - day) * one_day;
+      let last = week_start_time - 2*24*60*60*1000;
+      let next = week_end_time + 24*60*60*1000;
+      let month1 = new Date(week_start_time).getMonth()+1;
+      let month2 = new Date(week_end_time).getMonth()+1;
+      let day1 = new Date(week_start_time).getDate();
+      let day2 = new Date(week_end_time).getDate();
+      this.nowDate.weekStart = `${month1}月${day1}日`
+      this.nowDate.weekEnd = `${month2}月${day2}日`
+      for(let i = 0;i<7;i++){
+        this.weeks.push(new Date(`${this.nowDate.year}/${month1}/${day1}`).getTime() + (i*24*60*60*1000))
+      }
+    }
+  },
+  computed:{
+    dateFormat(){
+      return function (date){
+        let word = ['日','一','二','三','四','五','六',]
+        return `${new Date(date).getMonth()+1}/${new Date(date).getDate()}周${word[new Date(date).getDay()]}`
+      }
     }
   },
   created() {
@@ -83,18 +224,22 @@ export default {
   },
   mounted() {
     this.dateWidth = document.querySelector(".current").offsetWidth
-    window.addEventListener('resize',()=>{
-      if(this.dateWidth){
-        this.dateWidth = document.querySelector(".current").offsetWidth
-      }
-    })
 
+    this.getWeeks()
+
+    let resizeOb = new ResizeObserver((entries)=>{
+      let copy = this.dateWidth
+      this.dateWidth = document.querySelector(".current")?.offsetWidth ?? copy
+    })
+    resizeOb.observe(document.querySelector('.el-card__body'))
   }
 }
 </script>
 
 <style scoped lang="scss">
 .content{
+  width: 100%;
+  height: 100%;
   display: flex;
   &-left{
     flex: 0;
@@ -103,7 +248,19 @@ export default {
     padding: 0 10px;
   }
   &-right{
+    flex: 1;
     min-width: 420px;
+    overflow: scroll;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      background: #ddd;
+    }
+
+    position: relative;
   }
 }
 .range{
@@ -113,24 +270,146 @@ export default {
   border-radius: 4px;
   border: 0.5px solid #7367F0;
   background: #EEEDFD;
+
+  z-index: 10;
   position: absolute;
   bottom: 0;
   left: 0;
+  &:hover{
+    animation: hover-range 400ms forwards;
+  }
+  @keyframes hover-range {
+    from{}
+    to{
+      color: #EEEDFD;
+      background: #7367F0;
+    }
+  }
+}
+.type-select{
+  display: flex;
+  border-radius: 4px;
+  border:1px solid #b3241d;
+  color: #B3241D;
+  font-size: 12px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  position: absolute;
+  top: 8px;
+  right: 26px;
+  &-item{
+    border-right: 1px solid #b3241d;
+
+    padding: 7px 15px;
+    &:hover{
+      animation: hover 400ms forwards;
+    }
+    @keyframes hover {
+      from{}
+      to{
+        background: rgba(179,36,29,0.4);
+      }
+    }
+  }
+  &:nth-child(1){
+    border-right: none;
+  }
+}
+.selectActive{
+  background: rgba(179,36,29,0.4);
+  box-shadow: 0 0 5px 3px rgba(179,36,29,0.2);
+}
+@media screen and (max-width: 800px){
+  .type-select{
+    animation: disappear 600ms forwards;
+  }
+  @keyframes disappear {
+    from{
+
+    }
+    to{
+      opacity: 0;
+    }
+  }
+}
+.week{
+  padding: 12px 20px 35px 20px;
+  i{
+    cursor: pointer;
+  }
+  &-title{
+    font-size: 16px;
+    color: #6E6B7B;
+    font-weight: 600;
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+
+    padding-bottom: 20px;
+  }
+  &>table{
+    color: #6E6B7B;
+    border-collapse:collapse;
+    width: 100%;
+    &>tr{
+      &>td{
+        height: 60px;
+        border: 1px #ebe9f1 solid;
+        margin: 0;
+        &:nth-child(2n){
+          border: 1px #ebe9f1 dashed;
+        }
+      }
+    }
+  }
+}
+.list{
+  @extend .week;
+  &-title{
+    @extend .week-title;
+  }
+  &-content{
+    border-collapse: collapse;
+    &-title{
+      color: #6E6B7B;
+      font-weight: 600;
+      background-color: #f8f8f8;
+      display: flex;
+      justify-content: space-between;
+      border: solid 1px #d0d0d0;
+
+      padding: 8px 14px;
+    }
+    &-item{
+      display: flex;
+      align-items: center;
+      border: solid 1px #d0d0d0;
+
+      padding: 8px 14px;
+      &-time{
+
+        padding-right: 14px;
+      }
+      &-icon{
+        width: 10px;
+        height: 10px;
+        border-radius: 100%;
+        background: radial-gradient(#fff 0,#7367f0 26%) no-repeat;
+
+        margin-right: 14px;
+      }
+      &-name{
+        flex: 1;
+      }
+    }
+  }
 }
 </style>
 <style scoped lang="scss">
 ::v-deep .el-card__body{
   height: 100% !important;
-  min-width: 300px ;
-  overflow: scroll;
-}
-::v-deep .el-card__body::-webkit-scrollbar {
-  width: 4px !important;
-  height: 10px !important;
-}
-::v-deep .el-card__body::-webkit-scrollbar-thumb {
-  border-radius: 6px !important;
-  background: #ddd !important;
+  min-width: 400px ;
 }
 ::v-deep .ivu-checkbox-wrapper{
   font-size: 13.5px;
@@ -149,4 +428,11 @@ export default {
 ::v-deep .el-calendar-day{
   height: 70px;
 }
+::v-deep .el-calendar__header{
+  justify-content: flex-start;
+  align-items: center;
+}
+::v-deep .el-calendar__button-group{
+  margin-left: 20px;
+}
 </style>