smsb-web-develop/src/views/device/detail/components/DeviceExternal/index.vue

<template>
  <full-link
    class="l-flex__fill"
    :device="device"
    :add-listener="addListener"
    :remove-listener="removeListener"
    @click="onClick"
  >
    <c-dialog
      ref="dialog"
      size="lg"
      :title="title"
    >
      <template #default>
        <component
          :is="activeComponent"
          class="l-flex__auto"
          :device="device"
          :info="receiver"
        />
      </template>
    </c-dialog>
  </full-link>
</template>

<script>
import { ThirdPartyDevice } from '@/constant'
import {
  addListener,
  removeListener
} from '@/utils/adapter'
import SendingCard from './components/SendingCard.vue'
import ReceivingCard from './components/ReceivingCard'
import LedCamera from './components/LED.vue'
import TrafficCamera from './components/Traffic.vue'
import Gateway from './components/Gateway.vue'

export default {
  name: 'DeviceExternal',
  components: {
    SendingCard,
    ReceivingCard,
    TrafficCamera,
    LedCamera,
    Gateway
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      title: '',
      activeComponent: null,
      receiver: null
    }
  },
  methods: {
    addListener (cb) {
      addListener(this.device.id, cb)
    },
    removeListener (cb) {
      removeListener(this.device.id, cb)
    },
    onClick ({ key, label }) {
      let activeComponent = null
      switch (key) {
        case ThirdPartyDevice.SENDING_CARD:
          activeComponent = 'SendingCard'
          break
        case ThirdPartyDevice.RECEIVING_CARD:
          activeComponent = 'ReceivingCard'
          break
        case ThirdPartyDevice.LED_CAMERA:
          activeComponent = 'LedCamera'
          break
        case ThirdPartyDevice.TRAFFIC_CAMERA:
          activeComponent = 'TrafficCamera'
          break
        case ThirdPartyDevice.GATEWAY:
          activeComponent = 'Gateway'
          break
        default:
          return
      }
      this.title = label
      this.activeComponent = activeComponent
      this.$refs.dialog.show()
    }
  }
}
</script>