feat(deploy): unpublish the specified device

src/components/table/GridTable/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :key="tableKey"
     v-loading="options.loading"
     class="l-flex__auto l-flex--col c-table"
   >

src/components/table/Pagination/index.vue

@@ -18,8 +18,8 @@ export default {
   name: 'Pagination',
   props: {
     total: {
-      required: true,
-      type: [Number, String]
+      type: [Number, String],
+      required: true
     },
     page: {
       type: Number,

src/components/table/Table/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :key="tableKey"
     v-loading="options.loading"
     class="l-flex__auto l-flex--col c-table"
     :class="{ 'prevent-copy': preventCopy }"

src/components/table/mixins/table.js

@@ -49,6 +49,7 @@ export default {
   },
   data () {
     return {
+      tableKey: Math.random().toString().slice(2),
       customOptions: null,
       filters: null
     }
@@ -98,6 +99,7 @@ export default {
     },
     schema: {
       handler () {
+        this.tableKey = Math.random().toString().slice(2)
         this.customOptions = this.createOptions(this.schema.condition)
 
         const filterMap = {}

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

@@ -19,8 +19,8 @@ export function getPublishHistory (query) {
   })
 }
 
-export function cancelPublish (calendarReleaseHisId, name) {
-  return confirmAndSend('下架', name, {
+export function cancelPublish (calendarReleaseHisId) {
+  return confirmAndSend('下架', '该发布', {
     url: `/orchestration/calendarReleaseSchedu/${calendarReleaseHisId}/off`,
     method: 'POST'
   })

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

@@ -12,6 +12,7 @@
       />
       <div class="c-sibling-item--v u-font-size--sm u-color--black u-bold">目标设备</div>
       <schema-table
+        ref="deviceTable"
         class="c-sibling-item--v"
         :schema="deviceSchema"
       />
@@ -22,6 +23,7 @@
 
 <script>
 import { State } from '@/constant'
+import { cancelPublishByDevice } from '../api'
 
 export default {
   name: 'WorkflowDetailDialog',
@@ -40,10 +42,32 @@ export default {
           ] }
         ]
       },
-      deviceSchema: {
+      options: {
+        history: false
+      }
+    }
+  },
+  computed: {
+    deviceSchema () {
+      const canInvoke = this.options.history && this.workflow.status !== State.CANCEL
+      const canBatch = canInvoke && this.workflow.devices.length > 1
+
+      return {
         nonPagination: true,
+        listeners: canBatch
+          ? {
+            'row-click': this.onToggleSelection,
+            'selection-change': this.onSelectionChange
+          }
+          : null,
         list: this.getWorkflowDevices,
+        buttons: canBatch
+          ? [
+            { label: '下架', on: this.onCancelPublishByDevices }
+          ]
+          : null,
         cols: [
+          canBatch && { type: 'selection', selectable: ({ singlePublishState }) => singlePublishState === State.RESOLVED },
           { prop: 'deviceName', label: '设备名称' },
           { label: '发布状态', type: 'tag', render: ({ singlePublishState }) => {
             switch (singlePublishState) {
@@ -70,14 +94,19 @@ export default {
               default:
                 return null
             }
-          } }
-        ]
+          } },
+          canInvoke && { type: 'invoke', render: [
+            { label: '下架', allow: ({ singlePublishState }) => singlePublishState === State.RESOLVED, on: this.onCancelPublishByDevice }
+          ] }
+        ].filter(Boolean)
       }
     }
   },
   methods: {
-    show (workflow) {
+    show (workflow, options) {
+      this.$selectionItems = null
       this.workflow = workflow
+      this.options = { ...options }
       this.$refs.dialog.show()
     },
     getList () {
@@ -88,6 +117,43 @@ export default {
     },
     onView ({ target }) {
       this.$refs.materialDialog.showPublishTarget(target)
+    },
+    onCancelPublishByDevice (device) {
+      cancelPublishByDevice(this.workflow.id, [device.deviceId]).then(() => {
+        device.singlePublishState = State.CANCEL
+        if (!this.workflow.devices.some(({ singlePublishState }) => singlePublishState !== State.CANCEL)) {
+          this.workflow.status = State.CANCEL
+        }
+        this.$refs.deviceTable.getInst().toggleRowSelection(device, false)
+      })
+    },
+    onToggleSelection (row) {
+      if (row.singlePublishState !== State.RESOLVED) {
+        return
+      }
+      this.$refs.deviceTable.getInst().toggleRowSelection(row)
+    },
+    onSelectionChange (val) {
+      console.log(val)
+      this.$selectionItems = val
+    },
+    onCancelPublishByDevices () {
+      if (!this.$selectionItems?.length) {
+        this.$message({
+          type: 'warning',
+          message: '请选择需要下架发布内容的设备'
+        })
+        return
+      }
+      cancelPublishByDevice(this.workflow.id, this.$selectionItems.map(({ deviceId }) => deviceId)).then(() => {
+        this.$selectionItems.forEach(device => {
+          device.singlePublishState = State.CANCEL
+          this.$refs.deviceTable.getInst().toggleRowSelection(device, false)
+        })
+        if (!this.workflow.devices.some(({ singlePublishState }) => singlePublishState !== State.CANCEL)) {
+          this.workflow.status = State.CANCEL
+        }
+      })
     }
   }
 }

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

@@ -37,8 +37,8 @@ export default {
         list: getPublishHistory,
         transform: this.transform,
         cols: [
-          { prop: 'priority', label: '优先级', width: 80, align: 'center' },
-          { prop: 'priorityInfo', label: '', width: 80, align: 'center' },
+          { type: 'refresh', render: ({ priority }) => priority },
+          { prop: 'priorityInfo', label: '优先级', width: 80, align: 'center' },
           { prop: 'targetInfo', label: '上播内容', width: 80, align: 'center' },
           { prop: 'targetName', label: '', 'min-width': 100 },
           { prop: 'createBy', label: '发布人' },
@@ -85,13 +85,13 @@ export default {
         ...transformCalendarRelease(item)
       }
     },
-    onCancel (publishItem) {
-      cancelPublish(publishItem.id, publishItem.name).then(() => {
-        publishItem.status = State.CANCEL
+    onCancel (workflowHis) {
+      cancelPublish(workflowHis.id).then(() => {
+        this.$refs.table.pageTo()
       })
     },
-    onDetail (workflow) {
-      this.$refs.workflowDetailDialog.show(workflow)
+    onDetail (workflowHis) {
+      this.$refs.workflowDetailDialog.show(workflowHis, { history: true })
     },
     onViewHistory ({ workflowId }) {
       this.$refs.workflowHistoryDialog.show(workflowId)