feat: add scheduling preview to publishing history

src/views/schedule/history/index.vue

@@ -1,62 +1,95 @@
 <template>
-  <c-table
-    ref="table"
-    class="has-padding"
-    :curr="options"
-    @pagination="getList"
-    @row-click="toggle"
-  >
-    <el-table-column type="expand">
-      <template v-slot="scope">
-        <div class="o-device">
-          设备：{{ scope.row.device }}
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="排期名称"
-      align="center"
-      show-overflow-tooltip
-    />
-    <el-table-column
-      prop="resolutionRatio"
-      label="分辨率"
-      align="center"
-      show-overflow-tooltip
-    />
-    <el-table-column
-      prop="createBy"
-      label="申请人"
-      align="center"
-      show-overflow-tooltip
-    />
-    <el-table-column
-      prop="createTime"
-      label="创建时间"
-      align="center"
-      show-overflow-tooltip
-    />
-  </c-table>
+  <div class="l-flex--col has-padding">
+    <c-table
+      ref="table"
+      :curr="options"
+      @pagination="getList"
+      @row-click="toggle"
+    >
+      <el-table-column type="expand">
+        <template v-slot="scope">
+          <div class="o-device">
+            设备：{{ scope.row.device }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="排期名称"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="resolutionRatio"
+        label="分辨率"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="createBy"
+        label="申请人"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        width="120"
+      >
+        <template v-slot="scope">
+          <div
+            class="c-table__btn u-pointer"
+            @click.stop="toView(scope.row)"
+          >
+            预览
+          </div>
+        </template>
+      </el-table-column>
+    </c-table>
+    <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>
+  </div>
 </template>
 
 <script>
 import { getReleases } from '@/api/calendar'
 import { createListOptions } from '@/utils'
+import Schedule from '@/components/Schedule'
 
 export default {
   name: 'ScheduleDeployHistory',
+  components: {
+    Schedule
+  },
   data () {
     return {
-      options: createListOptions({ status: 2 })
+      options: createListOptions({ status: 2 }),
+      isPreview: false,
+      scheduleId: null
     }
   },
   created () {
     this.getList()
   },
   methods: {
-    transform ({ programCalendarName, resolutionRatio, createBy, createByUsername, createTime, calendarReleaseDeviceList }) {
+    transform ({ programCalendarId, programCalendarName, resolutionRatio, createBy, createByUsername, createTime, calendarReleaseDeviceList }) {
       return {
+        id: programCalendarId,
         name: programCalendarName,
         resolutionRatio,
         createBy: createByUsername || createBy,
@@ -82,6 +115,14 @@ export default {
     },
     toggle (row) {
       this.$refs.table.getInstance().toggleRowExpansion(row)
+    },
+    toView ({ id }) {
+      this.scheduleId = id
+      this.isPreview = true
+    },
+    handleCloseScheduleDialog () {
+      this.scheduleId = null
+      this.isPreview = false
     }
   }
 }