feat: the component MaterailDialog

src/components/dialog/EventTargetDialog/index.vue

@@ -8,8 +8,7 @@
     v-bind="$attrs"
     @choosen="onChoosen"
   >
-    <program-dialog ref="programDialog" />
-    <schedule-dialog ref="scheduleDialog" />
+    <materail-dialog ref="materailDialog" />
   </table-dialog>
 </template>
 
@@ -80,10 +79,10 @@ export default {
     onView ({ id }) {
       switch (this.$refs.tableDialog.getTable().getCondition().type) {
         case EventTarget.PROGRAM:
-          this.$refs.programDialog.show(id)
+          this.$refs.materailDialog.showProgram(id)
           break
         case EventTarget.RECUR:
-          this.$refs.scheduleDialog.show(id)
+          this.$refs.materailDialog.showSchedule(id)
           break
         default:
           break

src/components/dialog/MaterailDialog/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    :visible.sync="isPreviewing"
+    :custom-class="customClass"
+    :before-close="onCloseDialog"
+    :close-on-click-modal="false"
+    append-to-body
+    v-on="$attrs"
+    @closed="onClosed"
+  >
+    <program
+      v-if="program"
+      :program="program"
+    />
+    <schedule
+      v-if="scheduleId"
+      class="l-flex__auto has-padding"
+      :schedule="scheduleId"
+    />
+    <i
+      class="l-flex__none c-dialog--preview__close el-icon-close has-active u-bold u-pointer"
+      @click="onCloseDialog"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { getProgram } from '@/api/program'
+import {
+  PublishType,
+  EventTarget
+} from '@/constant'
+import Program from '@/views/screen/material/program/ast/Previewer'
+
+export default {
+  name: 'MaterailDialog',
+  components: {
+    Program
+  },
+  inheritAttrs: false,
+  data () {
+    return {
+      program: null,
+      scheduleId: null,
+      isPreviewing: false
+    }
+  },
+  computed: {
+    customClass () {
+      return `c-dialog--preview ${this.program ? 'program' : ''}`
+    }
+  },
+  methods: {
+    showProgram (id) {
+      const loading = this.$showLoading()
+      getProgram(id).then(({ data }) => {
+        try {
+          const { id, status, name, resolutionRatio, itemJsonStr } = data
+          const [width, height] = resolutionRatio.split('x')
+          if (!width || !height) {
+            this.showMessage('error', '布局分辨率异常，请联系管理员')
+            return
+          }
+
+          this.program = {
+            id, status, name, resolutionRatio,
+            detail: {
+              width: Number(width),
+              height: Number(height),
+              ...JSON.parse(itemJsonStr)
+            }
+          }
+          this.isPreviewing = true
+        } catch (e) {
+          this.showMessage('error', '布局解析失败')
+        }
+      }).finally(() => {
+        this.$closeLoading(loading)
+      })
+    },
+    showSchedule (id) {
+      this.scheduleId = id
+      this.isPreviewing = true
+    },
+    showPublishTarget ({ type, detail }) {
+      switch (type) {
+        case PublishType.CALENDAR:
+          this.showSchedule(detail)
+          break
+        case PublishType.EVENT:
+          this.showEventTarget(detail.target)
+          break
+        default:
+          break
+      }
+    },
+    showEventTarget ({ type, id }) {
+      switch (type) {
+        case EventTarget.PROGRAM:
+          this.showProgram(id)
+          break
+        case EventTarget.RECUR:
+          this.showSchedule(id)
+          break
+        default:
+          break
+      }
+    },
+    onCloseDialog () {
+      this.isPreviewing = false
+    },
+    onClosed () {
+      this.program = null
+      this.scheduleId = null
+    }
+  }
+}
+</script>

src/components/service/Schedule/ScheduleCalendar/index.vue

@@ -86,8 +86,7 @@
         <div class="o-conflict__desc">{{ conflict.desc }}</div>
       </div>
     </confirm-dialog>
-    <program-dialog ref="programDialog" />
-    <schedule-dialog ref="scheduleDialog" />
+    <materail-dialog ref="materailDialog" />
   </schedule-wrapper>
 </template>
 

src/components/service/Schedule/mixins/event.js

@@ -7,10 +7,7 @@ import {
   getConflict,
   getEventDescription
 } from '@/utils/event'
-import {
-  EventFreq,
-  EventTarget
-} from '@/constant'
+import { EventFreq } from '@/constant'
 
 export default {
   data () {
@@ -57,16 +54,7 @@ export default {
         this.$eventProxy = eventProxy
         this.editEvent(event)
       } else {
-        switch (event.target.type) {
-          case EventTarget.PROGRAM:
-            this.$refs.programDialog.show(event.target.id)
-            break
-          case EventTarget.RECUR:
-            this.$refs.scheduleDialog.show(event.target.id)
-            break
-          default:
-            break
-        }
+        this.$refs.materailDialog.showEventTarget(event.target)
       }
     },
     editEvent (event) {

src/views/device/timeline/index.vue

@@ -175,8 +175,7 @@
         @pagination="getDevices"
       />
     </div>
-    <program-dialog ref="programDialog" />
-    <schedule-dialog ref="scheduleDialog" />
+    <materail-dialog ref="materailDialog" />
   </wrapper>
 </template>
 
@@ -185,10 +184,7 @@ import {
   getDevices,
   getTimeline
 } from '@/api/device'
-import {
-  EventTarget,
-  EventPriorityDescription
-} from '@/constant'
+import { EventPriorityDescription } from '@/constant'
 import {
   toDate,
   toDateStr,
@@ -465,16 +461,7 @@ export default {
     },
     onView () {
       if (this.programProxy) {
-        switch (this.programProxy.event.target.type) {
-          case EventTarget.PROGRAM:
-            this.$refs.programDialog.show(this.programProxy.event.target.id)
-            break
-          case EventTarget.RECUR:
-            this.$refs.scheduleDialog.show(this.programProxy.event.target.id)
-            break
-          default:
-            break
-        }
+        this.$refs.materailDialog.showEventTarget(this.programProxy.event.target)
       }
     }
   }

src/views/screen/review/history/index.vue

@@ -10,8 +10,7 @@
       :schema="schema"
       @row-click="onToggle"
     />
-    <program-dialog ref="programDialog" />
-    <schedule-dialog ref="scheduleDialog" />
+    <materail-dialog ref="materailDialog" />
   </wrapper>
 </template>
 
@@ -20,14 +19,8 @@ import {
   getPublishHistory,
   cancelPublish
 } from '@/api/platform'
-import {
-  State,
-  EventPriority,
-  EventPriorityDescription,
-  EventTarget,
-  PublishType
-} from '@/constant'
-import { getEventDescription } from '@/utils/event'
+import { State } from '@/constant'
+import { transformCalendarRelease } from '@/views/screen/review/utils'
 
 export default {
   name: 'ScheduleDeployHistory',
@@ -42,7 +35,7 @@ export default {
               staticClass: 'o-info'
             }, [
               h('div', null, `发布人：${data.createBy}`),
-              h('div', null, `发布时间${data.createTime}`),
+              h('div', null, `发布时间：${data.createTime}`),
               h('div', null, `设备：${data.device}`)
             ])
           } },
@@ -71,67 +64,16 @@ export default {
   },
   methods: {
     transform (item) {
-      const same = this.getSame(item)
-      const diff = this.getDiff(item)
-      return { ...same, ...diff }
-    },
-    getSame ({ id, status, programCalendarName, resolutionRatio, createBy, createByUsername, createTime, calendarReleaseDeviceList }) {
-      return {
-        id,
-        status,
-        name: programCalendarName,
-        resolutionRatio,
-        createBy: createByUsername || createBy,
-        createTime,
-        device: calendarReleaseDeviceList?.map(item => item.deviceName).join('，')
-      }
-    },
-    getDiff (item) {
-      const target = JSON.parse(item.target)
-      let type = ''
-      switch (target.type) {
-        case PublishType.CALENDAR:
-          type = EventPriorityDescription[EventPriority.NORMAL]
-          break
-        case PublishType.EVENT:
-          type = EventPriorityDescription[target.detail.priority]
-          break
-        default:
-          break
-      }
       return {
-        type,
-        target,
-        desc: this.getDesc(target)
-      }
-    },
-    getDesc (target) {
-      if (target.type === PublishType.EVENT) {
-        return getEventDescription(target.detail)
+        status: item.status,
+        ...transformCalendarRelease(item)
       }
-      return ''
     },
     onToggle (row) {
       this.$refs.table.getInst().toggleRowExpansion(row)
     },
-    onView ({ target: { type, detail } }) {
-      switch (type) {
-        case PublishType.CALENDAR:
-          this.viewSchedule(detail)
-          break
-        case PublishType.EVENT:
-          if (detail.target.type === EventTarget.RECUR) {
-            this.viewSchedule(detail.target.id)
-          } else {
-            this.$refs.programDialog.show(detail.target.id)
-          }
-          break
-        default:
-          break
-      }
-    },
-    viewSchedule (id) {
-      this.$refs.scheduleDialog.show(id)
+    onView ({ target }) {
+      this.$refs.materailDialog.showPublishTarget(target)
     },
     onCancel (publishItem) {
       cancelPublish(publishItem.id, publishItem.name).then(() => {

src/views/screen/review/utils.js

@@ -0,0 +1,31 @@
+import {
+  PublishType,
+  EventPriority,
+  EventPriorityDescription
+} from '@/constant'
+import { getEventDescription } from '@/utils/event'
+
+export function transformCalendarRelease ({ id, target, programCalendarName, calendarReleaseDeviceList, createByUsername, createBy, createTime }) {
+  const publishTarget = JSON.parse(target)
+  let type = ''
+  switch (publishTarget.type) {
+    case PublishType.CALENDAR:
+      type = EventPriorityDescription[EventPriority.NORMAL]
+      break
+    case PublishType.EVENT:
+      type = EventPriorityDescription[publishTarget.detail.priority]
+      break
+    default:
+      break
+  }
+  return {
+    id,
+    name: programCalendarName,
+    type,
+    target: publishTarget,
+    desc: publishTarget.type === PublishType.EVENT ? getEventDescription(publishTarget.detail) : '-',
+    device: calendarReleaseDeviceList?.map(({ deviceName }) => deviceName).join('，'),
+    createBy: createByUsername || createBy,
+    createTime
+  }
+}

src/views/screen/review/workflow/detail/components/ReviewPublish.vue

@@ -5,20 +5,13 @@
     default-expand-all
     @row-click="onToggle"
   >
-    <program-dialog ref="programDialog" />
-    <schedule-dialog ref="scheduleDialog" />
+    <materail-dialog ref="materailDialog" />
   </schema-table>
 </template>
 
 <script>
-import {
-  State,
-  EventPriority,
-  EventPriorityDescription,
-  EventTarget,
-  PublishType
-} from '@/constant'
-import { getEventDescription } from '@/utils/event'
+import { State } from '@/constant'
+import { transformCalendarRelease } from '@/views/screen/review/utils'
 import mixin from './mixin'
 
 export default {
@@ -61,66 +54,16 @@ export default {
       return arr.map(this.transformItem)
     },
     transformItem (item) {
-      const same = this.getSame(item)
-      const diff = this.getDiff(item)
-      return { ...same, ...diff }
-    },
-    getSame ({ id, status, programCalendarName, createBy, createByUsername, createTime, calendarReleaseDeviceList }) {
-      return {
-        pass: status !== State.SUBMITTED,
-        id,
-        name: programCalendarName,
-        createBy: createByUsername || createBy,
-        createTime,
-        device: calendarReleaseDeviceList?.map(item => item.deviceName).join('，')
-      }
-    },
-    getDiff (item) {
-      const target = JSON.parse(item.target)
-      let type = ''
-      switch (target.type) {
-        case PublishType.CALENDAR:
-          type = EventPriorityDescription[EventPriority.NORMAL]
-          break
-        case PublishType.EVENT:
-          type = EventPriorityDescription[target.detail.priority]
-          break
-        default:
-          break
-      }
       return {
-        type,
-        target,
-        desc: this.getDesc(target)
+        pass: item.status !== State.SUBMITTED,
+        ...transformCalendarRelease(item)
       }
     },
-    getDesc (target) {
-      if (target.type === PublishType.EVENT) {
-        return getEventDescription(target.detail)
-      }
-      return ''
-    },
     onToggle (row) {
       this.$refs.table.getInst().toggleRowExpansion(row)
     },
-    onView ({ target: { type, detail } }) {
-      switch (type) {
-        case PublishType.CALENDAR:
-          this.viewSchedule(detail)
-          break
-        case PublishType.EVENT:
-          if (detail.target.type === EventTarget.RECUR) {
-            this.viewSchedule(detail.target.id)
-          } else {
-            this.$refs.programDialog.show(detail.target.id)
-          }
-          break
-        default:
-          break
-      }
-    },
-    viewSchedule (id) {
-      this.$refs.scheduleDialog.show(id)
+    onView ({ target }) {
+      this.$refs.materailDialog.showPublishTarget(target)
     }
   }
 }

src/views/screen/review/workflow/index.vue

@@ -15,13 +15,8 @@
 
 <script>
 import { getPublishWorkflows } from '@/api/workflow'
-import {
-  PublishType,
-  EventPriority,
-  EventPriorityDescription,
-  State
-} from '@/constant'
-import { getEventDescription } from '@/utils/event'
+import { State } from '@/constant'
+import { transformCalendarRelease } from '@/views/screen/review/utils'
 
 export default {
   name: 'WorkflowList',
@@ -61,49 +56,9 @@ export default {
         workflowId: id,
         status,
         updateTime,
-        ...this.getSame(calendarRelease),
-        ...this.getDiff(calendarRelease)
+        ...transformCalendarRelease(calendarRelease)
       }
     },
-    getSame ({
-      id,
-      programCalendarName,
-      createBy,
-      createByUsername,
-      calendarReleaseDeviceList
-    }) {
-      return {
-        id,
-        name: programCalendarName,
-        createBy: createByUsername || createBy,
-        device: calendarReleaseDeviceList?.map(({ deviceName }) => deviceName).join('，')
-      }
-    },
-    getDiff (item) {
-      const target = JSON.parse(item.target)
-      let type = ''
-      switch (target.type) {
-        case PublishType.CALENDAR:
-          type = EventPriorityDescription[EventPriority.NORMAL]
-          break
-        case PublishType.EVENT:
-          type = EventPriorityDescription[target.detail.priority]
-          break
-        default:
-          break
-      }
-      return {
-        type,
-        target,
-        desc: this.getDesc(target)
-      }
-    },
-    getDesc (target) {
-      if (target.type === PublishType.EVENT) {
-        return getEventDescription(target.detail)
-      }
-      return ''
-    },
     onToggle (row) {
       this.$refs.table.getInst().toggleRowExpansion(row)
     },

src/views/screen/review/workflow/mine/index.vue

@@ -29,8 +29,7 @@
       @row-click="onToggle"
     />
     <preview-dialog ref="previewDialog" />
-    <program-dialog ref="programDialog" />
-    <schedule-dialog ref="scheduleDialog" />
+    <materail-dialog ref="materailDialog" />
     <table-dialog
       ref="tableDialog"
       title="流程历史"
@@ -48,12 +47,10 @@ import {
 } from '@/api/workflow'
 import {
   PublishType,
-  EventPriority,
-  EventPriorityDescription,
   State,
   EventTarget
 } from '@/constant'
-import { getEventDescription } from '@/utils/event'
+import { transformCalendarRelease } from '@/views/screen/review/utils'
 
 const Category = {
   minio: '媒资',
@@ -185,10 +182,10 @@ export default {
     },
     transform (data) {
       return {
-        ...this.getDiff(data.calendarRelease),
-        ...this.getStatus(data),
         workflowId: data.id,
-        updateTime: data.updateTime
+        updateTime: data.updateTime,
+        ...transformCalendarRelease(data.calendarRelease),
+        ...this.getStatus(data)
       }
     },
     transformHistory (data) {
@@ -218,33 +215,6 @@ export default {
         canResubmit: false
       }
     },
-    getDiff (item) {
-      const target = JSON.parse(item.target)
-      let type = ''
-      switch (target.type) {
-        case PublishType.CALENDAR:
-          type = EventPriorityDescription[EventPriority.NORMAL]
-          break
-        case PublishType.EVENT:
-          type = EventPriorityDescription[target.detail.priority]
-          break
-        default:
-          break
-      }
-      return {
-        name: item.programCalendarName,
-        type,
-        target,
-        desc: this.getDesc(target),
-        device: item.calendarReleaseDeviceList?.map(({ deviceName }) => deviceName).join('，')
-      }
-    },
-    getDesc (target) {
-      if (target.type === PublishType.EVENT) {
-        return getEventDescription(target.detail)
-      }
-      return ''
-    },
     onToggle (row) {
       this.$refs.table.getInst().toggleRowExpansion(row)
     },
@@ -253,21 +223,8 @@ export default {
         this.$refs.tableDialog.getTable().getInst().toggleRowExpansion(row)
       }
     },
-    onView ({ target: { type, detail } }) {
-      switch (type) {
-        case PublishType.CALENDAR:
-          this.$refs.scheduleDialog.show(detail)
-          break
-        case PublishType.EVENT:
-          if (detail.target.type === EventTarget.RECUR) {
-            this.$refs.scheduleDialog.show(detail.target.id)
-          } else {
-            this.$refs.programDialog.show(detail.target.id)
-          }
-          break
-        default:
-          break
-      }
+    onView ({ target }) {
+      this.$refs.materailDialog.showPublishTarget(target)
     },
     onEdit ({ target: { type, detail } }) {
       switch (type) {