smsb-web-develop/src/views/review/workflow/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
      @row-click="onToggle"
    />
  </wrapper>
</template>

<script>
import { getPublishWorkflows } from '@/api/workflow'
import {
  PublishType,
  EventPriority,
  State,
  EventTarget
} from '@/constant'
import { getEventDescription } from '@/utils/event'

export default {
  name: 'WorkflowList',
  data () {
    return {
      schema: {
        condition: { status: State.SUBMITTED },
        list: getPublishWorkflows,
        transform: this.transform,
        cols: [
          {
            prop: 'expand',
            type: 'expand',
            render (data, h) {
              return h(
                'div',
                {
                  staticClass: 'o-info'
                },
                [
                  h('div', null, data.desc),
                  h('div', null, `设备：${data.device}`)
                ]
              )
            }
          },
          { prop: 'type', label: '类型', width: 100 },
          { prop: 'name', label: '名称', 'min-width': 100 },
          { prop: 'resolutionRatio', label: '分辨率' },
          { prop: 'createBy', label: '申请人' },
          { prop: 'createTime', label: '提交时间' },
          {
            label: '审核状态',
            type: 'tag',
            render ({ status }) {
              return {
                type: ['', 'warning', 'success', 'danger'][status],
                label: ['草稿', '待审核', '通过', '驳回'][status]
              }
            }
          },
          {
            type: 'invoke',
            width: 80,
            render: [{ label: '审核', on: this.review }]
          }
        ]
      }
    }
  },
  methods: {
    transform (item) {
      const same = this.getSame(item.calendarRelease)
      const diff = this.getDiff(item.calendarRelease)
      return { ...same, ...diff, workflowId: item.id, status: item.status }
    },
    getSame ({
      id,
      programCalendarName,
      resolutionRatio,
      createBy,
      createByUsername,
      createTime,
      calendarReleaseDeviceList
    }) {
      return {
        id,
        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 = '排期'
          break
        case PublishType.EVENT:
          type = ['', '默认播放', '单播', '插播'][target.detail.priority]
          break
        default:
          break
      }
      return {
        type,
        target,
        desc: this.getDesc(target)
      }
    },
    getDesc (target) {
      if (
        target.type === PublishType.EVENT
        && target.detail.priority === EventPriority.INSERTED
      ) {
        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.viewProgram(detail.target.id)
          }
          break
        default:
          break
      }
    },
    viewSchedule (id) {
      this.$refs.scheduleDialog.show(id)
    },
    viewProgram (id) {
      this.$viewProgram(id)
    },
    review (item) {
      this.$router.push({
        name: 'workflow-detail',
        params: {
          id: item.workflowId,
          name: item.name
        }
      })
    }
  }
}
</script>