feat: preview in scheduling timeline

src/components/Wrapper/index.vue

@@ -6,7 +6,7 @@
     <div
       class="c-page__content"
       :class="{
-        fill, padding, background,
+        fill, auto, padding, background,
         'l-flex': !vertical,
         'l-flex--col': vertical
       }"
@@ -23,6 +23,10 @@ export default {
       type: [Boolean, String],
       default: false
     },
+    auto: {
+      type: [Boolean, String],
+      default: false
+    },
     background: {
       type: [Boolean, String],
       default: false
@@ -54,13 +58,17 @@ export default {
   .c-page__content {
     flex: none;
     min-width: 800px;
-    min-height: 0;
+    min-height: 500px;
     overflow: hidden;
 
     &.fill {
       flex: 1 0 0;
     }
 
+    &.auto {
+      flex: 1 0 auto;
+    }
+
     &.padding {
       padding: $spacing;
     }

src/views/schedule/timeline/index.vue

@@ -1,6 +1,6 @@
 <template>
   <wrapper
-    fill
+    auto
     margin
     padding
     background
@@ -12,8 +12,15 @@
       />
       <div class="l-flex__auto l-flex--col">
         <div class="l-flex__none c-device-detail__name u-ellipsis">{{ deivceName }}</div>
-        <div class="l-flex__none c-device-detail__program">{{ programName }}</div>
-        <div class="l-flex__none c-device-detail__time">{{ programTime }}</div>
+        <template v-if="program">
+          <div class="l-flex__none c-device-detail__program">
+            <span
+              class="u-pointer"
+              @click="toView"
+            >{{ programName }}</span>
+          </div>
+          <div class="l-flex__none c-device-detail__time">{{ programTime }}</div>
+        </template>
       </div>
     </div>
     <div
@@ -171,6 +178,17 @@
         @pagination="getDevices"
       />
     </div>
+    <el-dialog
+      :visible.sync="isPreview"
+      custom-class="c-preview schedule"
+      :before-close="handleCloseScheduleDialog"
+    >
+      <schedule
+        v-if="scheduleId"
+        class="l-flex__auto has-padding"
+        :schedule="scheduleId"
+      />
+    </el-dialog>
   </wrapper>
 </template>
 
@@ -188,9 +206,14 @@ import {
   getName,
   getImage
 } from '@/utils/cache'
+import { ScheduleType } from '@/constant'
+import Schedule from '@/components/Schedule'
 
 export default {
   name: 'ScheduleTimeline',
+  components: {
+    Schedule
+  },
   data () {
     return {
       productOptions: [
@@ -213,7 +236,9 @@ export default {
       },
       timestamp: 0,
       device: null,
-      program: null
+      program: null,
+      scheduleId: null,
+      isPreview: false
     }
   },
   computed: {
@@ -297,9 +322,7 @@ export default {
         this._calcPrograms(device.options)
       })
       if (this.program && (this.program.origin.startDateTime >= this.$endDateTime || this.program.origin.endDateTime && this.program.origin.endDateTime <= this.$startDateTime)) {
-        if (this.program.origin) {
-          this.program.origin.selected = false
-        }
+        this.program.origin.selected = false
         this.program = null
       }
     },
@@ -308,6 +331,10 @@ export default {
       this._refreshTimes()
       this._refreshTimeline()
     },
+    onTimeChange (val) {
+      this.initTimes(val)
+      this._refreshTimeline()
+    },
     _getProducts () {
       this.fetching = true
       getProducts({ pageNum: 1, pageSize: this.firstLoadSize }).then(({ data, totalCount }) => {
@@ -351,7 +378,7 @@ export default {
     },
     getDevices () {
       this.device = null
-      if (this.program?.origin) {
+      if (this.program) {
         this.program.origin.selected = false
       }
       this.program = null
@@ -455,17 +482,35 @@ export default {
     },
     chooseProgram (device, program) {
       this.device = device
-      if (this.program?.origin) {
+      if (this.program) {
         this.program.origin.selected = false
       }
-      this.program = program
-      if (this.program?.origin) {
+      if (program?.origin) {
+        this.program = program
         this.program.origin.selected = true
+      } else {
+        this.program = null
       }
     },
-    onTimeChange (val) {
-      this.initTimes(val)
-      this._refreshTimeline()
+    toView () {
+      switch (this.program.origin.type) {
+        case ScheduleType.CALENDAR:
+          window.open(this.$router.resolve({
+            name: 'view',
+            params: { id: this.program.origin.id }
+          }).href, '_blank')
+          break
+        case ScheduleType.RECUR:
+          this.scheduleId = this.program.origin.id
+          this.isPreview = true
+          break
+        default:
+          break
+      }
+    },
+    handleCloseScheduleDialog () {
+      this.scheduleId = null
+      this.isPreview = false
     }
   }
 }
@@ -503,7 +548,7 @@ export default {
 }
 
 .c-timeline {
-  min-height: 300px;
+  min-height: 400px;
 
   &__row {
     height: 56px;