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

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >

      <el-tab-pane
        label="待审核"
        name="1"
      />
      <el-tab-pane
        label="已审核"
        name="2"
      />
      <el-tab-pane
        label="被驳回"
        name="3"
      />
    </el-tabs>
    <schema-table
      ref="table"
      :schema="schema"
      @row-click="onToggle"
    />
    <schedule-dialog ref="scheduleDialog" />
  </wrapper>
</template>

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

export default {
  name: 'MyWorkflow',
  data () {
    return {
      active: '1',
      schema: {
        condition: { self: true, status: 1, name: '' },
        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: 'createTime', label: '提交时间' },
          {
            label: '审核状态',
            type: 'tag',
            render ({ status }) {
              return {
                type: ['', 'warning', 'success', 'danger'][status],
                label: ['草稿', '待审核', '通过', '驳回'][status]
              }
            }
          },
          {
            type: 'invoke',
            width: 120,
            render: [
              { label: '查看', on: this.onView },
              { label: '提交', render ({ status }) {
                return status === 3
              }, on: this.restart }
            ]
          }
        ]
      }
    }
  },
  methods: {
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        this.active = active
        this.$refs.table.mergeCondition({ status: Number(active) })
      }
    },
    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)
    },
    restart (item) {
      calendarPublishRestart(item.workflowId, item.name).then(() => {
        this.$refs.table.onPagination()
      })
    }
  }
}
</script>