refactor: merge program editing and viewing

src/components/Schedule/ScheduleSwiper/index.vue

@@ -206,7 +206,7 @@ export default {
     },
     onView ({ id }) {
       window.open(this.$router.resolve({
-        name: 'view',
+        name: 'program',
         params: { id }
       }).href, '_blank')
     },

src/components/Schedule/mixins/event.js

@@ -62,7 +62,7 @@ export default {
             break
           default:
             window.open(this.$router.resolve({
-              name: 'view',
+              name: 'program',
               params: { id: event.target.id }
             }).href, '_blank')
             break

src/components/Warning/index.vue

@@ -3,7 +3,7 @@
     <template #extra>
       <el-link
         type="warning"
-        @click="retry"
+        v-bind="$listeners"
       >
         获取失败，点击重试
       </el-link>
@@ -12,13 +12,7 @@
 </template>
 
 <script>
-
 export default {
-  name: 'Warning',
-  methods: {
-    retry () {
-      this.$emit('retry')
-    }
-  }
+  name: 'Warning'
 }
 </script>

src/components/dialog/EventTargetDialog/index.vue

@@ -78,7 +78,7 @@ export default {
       switch (this.$refs.tableDialog.getTable().getCondition().type) {
         case EventTarget.PROGRAM:
           window.open(this.$router.resolve({
-            name: 'view',
+            name: 'program',
             params: { id }
           }).href, '_blank')
           break

src/router/index.js

@@ -75,7 +75,7 @@ export const asyncRoutes = [
         meta: { title: '媒资管理' }
       },
       {
-        name: 'program',
+        name: 'program-list',
         path: 'program',
         component: () => import('@/views/bigscreen/index'),
         access: Access.MANAGE_CALENDAR,
@@ -316,26 +316,26 @@ export const asyncRoutes = [
       }
     ]
   },
-  {
-    hidden: true,
-    name: 'design',
-    path: '/design/:id',
-    component: () => import('@/views/bigscreen/designer/index'),
-    access: Access.MANAGE_CALENDAR
-  },
-  {
-    hidden: true,
-    name: 'view',
-    path: '/view/:id',
-    component: () => import('@/views/bigscreen/viewer/index')
-  },
   // {
   //   hidden: true,
-  //   name: 'program',
-  //   path: '/cm/program/:id',
-  //   component: () => import('@/views/bigscreen/ast/index'),
-  //   props: true
+  //   name: 'design',
+  //   path: '/design/:id',
+  //   component: () => import('@/views/bigscreen/designer/index'),
+  //   access: Access.MANAGE_CALENDAR
   // },
+  // {
+  //   hidden: true,
+  //   name: 'view',
+  //   path: '/view/:id',
+  //   component: () => import('@/views/bigscreen/viewer/index')
+  // },
+  {
+    hidden: true,
+    name: 'program',
+    path: '/cm/program/:id',
+    component: () => import('@/views/bigscreen/ast/index'),
+    props: true
+  },
   // 404 page must be placed at the end !!!
   { hidden: true, path: '*', redirect: '/' }
 ]

src/scss/bem/_component.scss

@@ -61,7 +61,7 @@
   }
 
   .el-loading-text {
-    margin-top: 10px;
+    margin: 10px;
     color: #fff;
     font-size: 18px;
   }

src/views/bigscreen/ast/index.vue

@@ -37,47 +37,49 @@ export default {
       immediate: true
     }
   },
+  beforeRouteLeave (to, from, next) {
+    window.close()
+    next(false)
+  },
   methods: {
     getProgram () {
       this.loading = true
       this.error = null
-      getProgram(this.id, { custom: true }).then(({ data }) => {
-        try {
-          const { id, status, name, resolutionRatio, itemJsonStr } = data
-          const [width, height] = resolutionRatio.split('x')
-          if (!width || !height) {
-            this.showMessage('warning', '布局分辨率异常')
-            return
-          }
+      getProgram(this.id, { custom: true }).then(
+        ({ data }) => {
+          try {
+            const { id, status, name, resolutionRatio, itemJsonStr } = data
+            const [width, height] = resolutionRatio.split('x')
+            if (!width || !height) {
+              return this.showMessage('error', '布局分辨率异常，请联系管理员')
+            }
 
-          if (status === State.READY) {
-            if (this.accessSet.has(Access.MANAGE_CALENDAR)) {
-              this.activeComponent = 'Designer'
+            if (status === State.READY) {
+              if (this.accessSet.has(Access.MANAGE_CALENDAR)) {
+                this.activeComponent = 'Designer'
+              } else {
+                return this.showMessage('warning', '暂无编辑权限，请联系管理员')
+              }
             } else {
-              this.$message({
-                type: 'warning',
-                message: '暂无编辑权限'
-              })
               this.activeComponent = 'Viewer'
             }
-          } else {
-            this.activeComponent = 'Viewer'
-          }
 
-          this.program = {
-            id, status, name, resolutionRatio,
-            detail: {
-              width: Number(width),
-              height: Number(height),
-              ...JSON.parse(itemJsonStr)
+            this.program = {
+              id, status, name, resolutionRatio,
+              detail: {
+                width: Number(width),
+                height: Number(height),
+                ...JSON.parse(itemJsonStr)
+              }
             }
+          } catch (e) {
+            this.showMessage('error', '布局解析失败')
           }
-        } catch (e) {
-          this.showMessage('error', '布局解析失败')
+        },
+        err => {
+          this.showMessage('warning', err.errMessage || '获取布局失败')
         }
-      }, err => {
-        this.showMessage('error', err.errMessage || '获取布局失败')
-      }).finally(() => {
+      ).finally(() => {
         this.loading = false
       })
     },
@@ -89,7 +91,7 @@ export default {
     if (this.loading) {
       return h('div', {
         key: 'loading',
-        class: 'c-ast c-lock',
+        class: 'c-ast',
         directives: [
           {
             name: 'loading',
@@ -107,20 +109,19 @@ export default {
       const { type, message } = this.error
       return h('div', {
         key: 'error',
-        class: `c-ast c-lock ${type}`,
-        directives: [
-          {
-            name: 'loading',
-            value: true,
-            modifiers: { lock: true }
-          }
-        ],
-        attrs: {
-          'element-loading-text': `${message}`,
-          'element-loading-spinner': `el-icon-${type}`,
-          'element-loading-background': 'rgba(0, 0, 0, 0.8)'
-        }
-      })
+        class: `c-ast ${type}`
+      }, [
+        h('div', { staticClass: 'el-loading-spinner' }, [
+          h('i', { staticClass: `el-icon-${type}` }),
+          h('p', { staticClass: 'el-loading-text' }, message),
+          type === 'warning'
+            ? h('el-link', {
+              props: { type },
+              on: { click: this.getProgram }
+            }, '点击重试')
+            : null
+        ])
+      ])
     }
 
     return h(this.activeComponent, {
@@ -136,5 +137,28 @@ export default {
 .c-ast {
   width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  .el-loading-spinner > i {
+    font-size: 48px;
+  }
+
+  .el-loading-text {
+    margin: 10px;
+    color: #fff;
+    font-size: 18px;
+  }
+
+  &.warning {
+    .el-loading-spinner > i {
+      color: $warning;
+    }
+  }
+
+  &.error {
+    .el-loading-spinner > i {
+      color: $error;
+    }
+  }
 }
 </style>

src/views/bigscreen/index.vue

@@ -255,13 +255,13 @@ export default {
     },
     onDesign (id) {
       window.open(this.$router.resolve({
-        name: 'design',
+        name: 'program',
         params: { id }
       }).href, '_blank')
     },
     onView (id) {
       window.open(this.$router.resolve({
-        name: 'view',
+        name: 'program',
         params: { id }
       }).href, '_blank')
     },

src/views/review/components/ReviewProgram.vue

@@ -46,7 +46,7 @@ export default {
     },
     onView ({ id }) {
       window.open(this.$router.resolve({
-        name: 'view',
+        name: 'program',
         params: { id }
       }).href, '_blank')
     }

src/views/review/components/ReviewPublish.vue

@@ -139,7 +139,7 @@ export default {
     },
     viewProgram (id) {
       window.open(this.$router.resolve({
-        name: 'view',
+        name: 'program',
         params: { id }
       }).href, '_blank')
     }

src/views/schedule/deploy/index.vue

@@ -107,7 +107,7 @@
         <div
           v-if="programId"
           class="o-program u-pointer"
-          @click="toViewProgram"
+          @click="onViewProgram"
         >
           {{ eventTarget.name }}
         </div>
@@ -264,7 +264,7 @@ export default {
         this.active += 1
       }
     },
-    _onError (message) {
+    onError (message) {
       this.$message({
         type: 'warning',
         message
@@ -278,11 +278,11 @@ export default {
       const devices = this.selectedDevices
       const length = devices.length
       if (!length) {
-        return this._onError('请选择目标设备')
+        return this.onError('请选择目标设备')
       }
       const resolutionRatio = this.resolutionRatio
       if (devices.some(device => device.resolutionRatio !== resolutionRatio)) {
-        return this._onError('选择的设备分辨率不一致')
+        return this.onError('选择的设备分辨率不一致')
       }
       if (this.eventOptions) {
         if (this.resolutionRatio !== this.eventOptions.ratio) {
@@ -346,9 +346,9 @@ export default {
       }
       return true
     },
-    toViewProgram () {
+    onViewProgram () {
       window.open(this.$router.resolve({
-        name: 'view',
+        name: 'program',
         params: { id: this.programId }
       }).href, '_blank')
     },

src/views/schedule/history/index.vue

@@ -138,7 +138,7 @@ export default {
     },
     viewProgram (id) {
       window.open(this.$router.resolve({
-        name: 'view',
+        name: 'program',
         params: { id }
       }).href, '_blank')
     }

src/views/schedule/timeline/index.vue

@@ -520,7 +520,7 @@ export default {
         switch (this.programProxy.event.target.type) {
           case ScheduleType.CALENDAR:
             window.open(this.$router.resolve({
-              name: 'view',
+              name: 'program',
               params: { id: this.programProxy.event.target.id }
             }).href, '_blank')
             break