smsb-web-develop/src/views/screen/review/workflow/components/WorkflowDetailDialog.vue

<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>