feat(workflow): workflow detail

src/views/screen/review/workflow/api.js

@@ -26,6 +26,14 @@ export function cancelPublish (calendarReleaseHisId, name) {
   })
 }
 
+export function cancelPublishByDevice (calendarReleaseHisId, deviceIds) {
+  return confirmAndSend('下架', '该发布', {
+    url: `/orchestration/device/${calendarReleaseHisId}/off`,
+    method: 'POST',
+    data: deviceIds
+  })
+}
+
 export function getWorkflowsByUser (query) {
   const { pageNum: pageIndex, pageSize, ...params } = query
   return request({

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

@@ -5,18 +5,18 @@
       class="l-flex__none c-sibling-item--v"
       :schema="schema"
     />
-    <div class="l-flex__fill c-sibling-item--v u-overflow-y--auto">
-      <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">目标设备</div>
-      <div class="c-sibling-item--v near c-devices u-color--info">
-        <div
-          v-for="device in devices"
-          :key="device.deviceId"
-          class="l-flex__self u-ellipsis"
-        >
-          {{ device.deviceName }}
-        </div>
+    <div class="l-flex__fill l-flex c-sibling-item--v">
+      <div
+        class="l-flex__none l-flex--col c-sibling-item"
+        style="width: 300px;"
+      >
+        <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">目标设备</div>
+        <schema-table
+          class="c-sibling-item--v near"
+          :schema="deviceSchema"
+        />
       </div>
-      <template v-if="targetContent">
+      <div class="l-flex__fill l-flex--col c-sibling-item">
         <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">上播内容</div>
         <template v-if="isProgram || isAssets">
           <schema-table
@@ -27,11 +27,11 @@
         </template>
         <schedule
           v-else
-          class="c-sibling-item--v"
+          class="c-sibling-item--v near"
           :schedule="targetContent"
           hide-header
         />
-      </template>
+      </div>
     </div>
     <material-dialog ref="materialDialog" />
     <confirm-dialog
@@ -134,6 +134,13 @@ export default {
           ] }
         ]
       },
+      deviceSchema: {
+        nonPagination: true,
+        list: this.getDevices,
+        cols: [
+          { prop: 'deviceName', label: '设备名称' }
+        ]
+      },
       reviewOptions: [
         { value: 'reject', label: '驳回' },
         { value: '图文不符' },
@@ -159,11 +166,11 @@ export default {
               thumb: this.programScreenshot
             }
           }, on: this.onView },
-          !this.isAssets && { prop: 'targetName', label: '' },
+          { prop: 'targetName', label: '', 'min-width': 60 },
           { prop: 'desc', label: '上播时间', 'min-width': 160 },
           { type: 'invoke', render: [
             this.isProgram && { label: '查看', on: this.onView },
-            { label: '通过', on: this.onResolve },
+            this.devices.length && { label: '通过', on: this.onResolve },
             { label: '驳回', on: this.onReject }
           ].filter(Boolean), width: this.isProgram ? 160 : 120 }
         ]
@@ -172,9 +179,6 @@ export default {
     contentSchema () {
       return this.isProgram ? this.programAssetSchema : this.assetSchema
     },
-    devices () {
-      return this.list?.[0].devices
-    },
     status () {
       return this.workflow.status
     },
@@ -211,7 +215,7 @@ export default {
       }
     },
     publishTarget () {
-      return this.list?.[0].target
+      return this.list[0]?.target
     },
     isEvent () {
       return this.publishTarget?.type === PublishTargetType.EVENT
@@ -251,6 +255,9 @@ export default {
         return content
       }
       return this.publishTarget?.detail
+    },
+    devices () {
+      return this.list[0]?.devices || []
     }
   },
   created () {
@@ -258,9 +265,7 @@ export default {
   },
   methods: {
     transformItem (item) {
-      return transformCalendarRelease(item, {
-        ignoreDeviceTransform: true
-      })
+      return transformCalendarRelease(item)
     },
     transformProgramAsset (asset) {
       return {
@@ -336,6 +341,9 @@ export default {
         })
         this.$router.replace({ name: 'workflow-list' })
       })
+    },
+    getDevices () {
+      return Promise.resolve({ data: this.devices })
     }
   }
 }

src/views/screen/review/workflow/components/WorkflowDetailDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <c-dialog
+    ref="dialog"
+    size="lg"
+    title="详情"
+  >
+    <template #default>
+      <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">上播内容</div>
+      <schema-table
+        class="l-flex__none c-sibling-item--v"
+        :schema="schema"
+      />
+      <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">目标设备</div>
+      <schema-table
+        class="c-sibling-item--v"
+        :schema="deviceSchema"
+      />
+      <material-dialog ref="materialDialog" />
+    </template>
+  </c-dialog>
+</template>
+
+<script>
+import { State } from '@/constant'
+
+export default {
+  name: 'WorkflowDetailDialog',
+  data () {
+    return {
+      schema: {
+        list: this.getList,
+        cols: [
+          { prop: 'priority', label: '优先级', width: 80, align: 'center' },
+          { prop: 'priorityInfo', label: '', width: 80, align: 'center' },
+          { prop: 'targetInfo', label: '上播内容', width: 80, align: 'center' },
+          { prop: 'targetName', label: '' },
+          { prop: 'desc', label: '上播时间', 'min-width': 160 },
+          { type: 'invoke', render: [
+            { label: '查看', on: this.onView }
+          ] }
+        ]
+      },
+      deviceSchema: {
+        nonPagination: true,
+        list: this.getWorkflowDevices,
+        cols: [
+          { prop: 'deviceName', label: '设备名称' },
+          { label: '发布状态', type: 'tag', render: ({ singlePublishState }) => {
+            switch (singlePublishState) {
+              case State.SUBMITTED:
+                return {
+                  type: 'primary',
+                  label: '发布中'
+                }
+              case State.RESOLVED:
+                return {
+                  type: 'success',
+                  label: '已发布'
+                }
+              case State.CANCEL:
+                return {
+                  type: 'danger',
+                  label: '已下架'
+                }
+              case 5:
+                return {
+                  type: 'warning',
+                  label: '发布失败'
+                }
+              default:
+                return null
+            }
+          } }
+        ]
+      }
+    }
+  },
+  methods: {
+    show (workflow) {
+      this.workflow = workflow
+      this.$refs.dialog.show()
+    },
+    getList () {
+      return Promise.resolve({ data: [this.workflow] })
+    },
+    getWorkflowDevices () {
+      return Promise.resolve({ data: this.workflow.devices })
+    },
+    onView ({ target }) {
+      this.$refs.materialDialog.showPublishTarget(target)
+    }
+  }
+}
+</script>

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

@@ -8,9 +8,8 @@
     <schema-table
       ref="table"
       :schema="schema"
-      @row-click="onToggle"
     />
-    <material-dialog ref="materialDialog" />
+    <workflow-detail-dialog ref="workflowDetailDialog" />
     <workflow-history-dialog ref="workflowHistoryDialog" />
   </wrapper>
 </template>
@@ -22,27 +21,22 @@ import {
   cancelPublish
 } from '../api'
 import { transformCalendarRelease } from '../utils'
+import WorkflowDetailDialog from '../components/WorkflowDetailDialog.vue'
 import WorkflowHistoryDialog from '../components/WorkflowHistoryDialog.vue'
 
 export default {
   name: 'ScheduleDeployHistory',
   components: {
+    WorkflowDetailDialog,
     WorkflowHistoryDialog
   },
   data () {
     return {
+      workflow: {},
       schema: {
         list: getPublishHistory,
         transform: this.transform,
         cols: [
-          { type: 'expand', refresh: true, render (data, h) {
-            return h('div', {
-              staticClass: 'o-info'
-            }, [
-              h('div', null, data.desc),
-              h('div', null, `设备：${data.devices}`)
-            ])
-          } },
           { prop: 'priority', label: '优先级', width: 80, align: 'center' },
           { prop: 'priorityInfo', label: '', width: 80, align: 'center' },
           { prop: 'targetInfo', label: '上播内容', width: 80, align: 'center' },
@@ -74,16 +68,11 @@ export default {
                 }
             }
           } },
-          { type: 'invoke', render: this.$store.getters.isGroupAdmin
-            ? [
-              { label: '下架', allow: ({ status }) => status === State.RESOLVED, on: this.onCancel },
-              { label: '历史', allow: ({ workflowId }) => !!workflowId, on: this.onViewHistory },
-              { label: '查看', on: this.onView }
-            ]
-            : [
-              { label: '历史', allow: ({ workflowId }) => !!workflowId, on: this.onViewHistory },
-              { label: '查看', on: this.onView }
-            ], width: this.$store.getters.isGroupAdmin ? 160 : 120 }
+          { type: 'invoke', render: [
+            this.$store.getters.isGroupAdmin && { label: '下架', allow: ({ status }) => status === State.RESOLVED, on: this.onCancel },
+            { label: '详情', on: this.onDetail },
+            { label: '流程历史', allow: ({ workflowId }) => !!workflowId, on: this.onViewHistory }
+          ].filter(Boolean), width: 200 }
         ]
       }
     }
@@ -96,17 +85,14 @@ export default {
         ...transformCalendarRelease(item)
       }
     },
-    onToggle (row) {
-      this.$refs.table.getInst().toggleRowExpansion(row)
-    },
-    onView ({ target }) {
-      this.$refs.materialDialog.showPublishTarget(target)
-    },
     onCancel (publishItem) {
       cancelPublish(publishItem.id, publishItem.name).then(() => {
         publishItem.status = State.CANCEL
       })
     },
+    onDetail (workflow) {
+      this.$refs.workflowDetailDialog.show(workflow)
+    },
     onViewHistory ({ workflowId }) {
       this.$refs.workflowHistoryDialog.show(workflowId)
     }

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

@@ -9,6 +9,7 @@
       ref="table"
       :schema="schema"
     />
+    <workflow-history-dialog ref="workflowHistoryDialog" />
   </wrapper>
 </template>
 
@@ -19,11 +20,15 @@ import {
   State,
   Access
 } from '@/constant'
-import { getWorkflows } from './api'
 import { transformCalendarRelease } from './utils'
+import { getWorkflows } from './api'
+import WorkflowHistoryDialog from './components/WorkflowHistoryDialog.vue'
 
 export default {
   name: 'WorkflowList',
+  components: {
+    WorkflowHistoryDialog
+  },
   data () {
     return {
       schema: {
@@ -31,19 +36,20 @@ export default {
         transform: this.transformWorkflow,
         cols: [
           { type: 'refresh' },
-          { prop: 'priority', label: '优先级', width: 80, align: 'center' },
-          { prop: 'priorityInfo', label: '', width: 80, align: 'center' },
-          { prop: 'targetInfo', label: '内容', width: 80, align: 'center' },
-          { prop: 'targetName', label: '', 'min-width': 100 },
           { label: '当前节点', render: ({ status }) => status === State.SECOND_LEVEL
             ? '三审'
             : status === State.FIRST_LEVEL
               ? '二审'
               : '一审', width: 120, align: 'center' },
+          { prop: 'priority', label: '优先级', width: 80, align: 'center' },
+          { prop: 'priorityInfo', label: '', width: 80, align: 'center' },
+          { prop: 'targetInfo', label: '内容', width: 80, align: 'center' },
+          { prop: 'targetName', label: '', 'min-width': 100 },
           { prop: 'createBy', label: '申请人', align: 'center' },
           { prop: 'updateTime', label: '提交时间', 'min-width': 100 },
           { type: 'invoke', render: [
-            { label: '审核', on: this.onReview }
+            { label: '审核', on: this.onAudit },
+            { label: '流程历史', on: this.onViewHistory }
           ] }
         ]
       }
@@ -95,11 +101,14 @@ export default {
         ...data
       }
     },
-    onReview (item) {
+    onAudit (item) {
       this.$router.push({
         name: 'workflow-audit',
         params: { id: item.workflowId }
       })
+    },
+    onViewHistory ({ workflowId }) {
+      this.$refs.workflowHistoryDialog.show(workflowId)
     }
   }
 }

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

@@ -27,10 +27,8 @@
       ref="table"
       :key="active"
       :schema="schema"
-      @row-click="onToggle"
     />
-    <preview-dialog ref="previewDialog" />
-    <material-dialog ref="materialDialog" />
+    <workflow-detail-dialog ref="workflowDetailDialog" />
     <workflow-history-dialog ref="workflowHistoryDialog" />
   </wrapper>
 </template>
@@ -42,11 +40,13 @@ import {
   getWorkflowsByUser,
   deleteWorkflow
 } from '../api'
+import WorkflowDetailDialog from '../components/WorkflowDetailDialog.vue'
 import WorkflowHistoryDialog from '../components/WorkflowHistoryDialog.vue'
 
 export default {
   name: 'MyWorkflows',
   components: {
+    WorkflowDetailDialog,
     WorkflowHistoryDialog
   },
   data () {
@@ -66,7 +66,7 @@ export default {
         list: this.getWorkflows,
         transform: this.transformWorkflow,
         cols: [
-          { type: 'expand', refresh: true, render: this.renderRelative },
+          isSubmitted && { type: 'refresh' },
           isSubmitted && { label: '当前节点', render: ({ status }) => status === State.SECOND_LEVEL
             ? '三审'
             : status === State.FIRST_LEVEL
@@ -77,12 +77,13 @@ export default {
           { prop: 'targetInfo', label: '上播内容', width: 80, align: 'center' },
           { prop: 'targetName', label: '' },
           isRejected && { prop: 'reason', label: '驳回原因', 'min-width': 120 },
-          { prop: 'createTime', label: '提交时间' },
-          !isSubmitted && { prop: 'updateTime', label: '审批时间' },
+          { prop: 'createTime', label: '提交时间', 'min-width': 60 },
+          !isSubmitted && { prop: 'updateTime', label: '审批时间', 'min-width': 60 },
           { type: 'invoke', render: [
-            { label: '历史', on: this.onViewHistory },
-            isRejected ? { label: '删除', on: this.onDel } : { label: '查看', on: this.onView }
-          ] }
+            { label: '详情', on: this.onDetail },
+            { label: '流程历史', on: this.onViewHistory },
+            isRejected && { label: '删除', on: this.onDel }
+          ].filter(Boolean), width: 180 }
         ]
       }
     }
@@ -99,15 +100,6 @@ export default {
         ...params
       })
     },
-    renderRelative (data, h) {
-      return h('div', { staticClass: 'o-info' }, [
-        h('div', null, data.desc),
-        h('div', { staticClass: 'c-sibling-item--v' }, `设备：${data.devices}`)
-      ])
-    },
-    onViewHistory ({ workflowId }) {
-      this.$refs.workflowHistoryDialog.show(workflowId)
-    },
     onTabClick ({ name: active }) {
       if (this.active !== active) {
         this.active = active
@@ -120,11 +112,11 @@ export default {
         ...workflow
       }
     },
-    onToggle (row) {
-      this.$refs.table.getInst().toggleRowExpansion(row)
+    onDetail (workflow) {
+      this.$refs.workflowDetailDialog.show(workflow)
     },
-    onView ({ target }) {
-      this.$refs.materialDialog.showPublishTarget(target)
+    onViewHistory ({ workflowId }) {
+      this.$refs.workflowHistoryDialog.show(workflowId)
     },
     onDel ({ workflowId }) {
       deleteWorkflow(workflowId).then(() => {

src/views/screen/review/workflow/utils.js

@@ -1,5 +1,4 @@
 import {
-  PublishType,
   PublishTargetType,
   EventTargetInfo,
   EventPriority,
@@ -7,8 +6,8 @@ import {
 } from '@/constant'
 import { getEventDescription } from '@/utils/event'
 
-export function transformCalendarRelease (data, options) {
-  const { id, target, programCalendarName, createByUsername, createBy, createTime } = data
+export function transformCalendarRelease (data) {
+  const { id, target, programCalendarName, createByUsername, createBy, createTime, calendarReleaseDeviceList } = data
   const publishTarget = JSON.parse(target)
   let priority = 0
   let desc = '-'
@@ -34,18 +33,8 @@ export function transformCalendarRelease (data, options) {
     targetInfo,
     targetName: programCalendarName,
     desc,
-    devices: getDeviceDesc(data, options),
+    devices: calendarReleaseDeviceList || [],
     createBy: createByUsername || createBy,
     createTime
   }
 }
-
-function getDeviceDesc ({ type, programCalendarName, calendarReleaseDeviceList }, options) {
-  switch (type) {
-    case PublishType.ASSET_TO_PRODUCT_TYPE:
-    case PublishType.PROGRAM_TO_PRODUCT_TYPE:
-      return options?.ignoreDeviceTransform ? [{ deviceId: 'auto', deviceName: `宽高比为${programCalendarName}的设备` }] : [`宽高比为${programCalendarName}的设备`]
-    default:
-      return options?.ignoreDeviceTransform ? calendarReleaseDeviceList : calendarReleaseDeviceList?.map(({ deviceName }) => deviceName).join('，')
-  }
-}