shangyun/Web/src/components/devices/device-upgrade/DeviceFirmwareUpgrade.vue

<template>
  <div class="firmware_upgrade_wrap">
    <!-- tag -->
    <span v-if="getTagStatus(device)" class="status-tag pointer">
      <a-tag class="pointer" :color="getFirmwareTag(device.firmware_status).color" @click="deviceUpgrade(device)">
        {{ getFirmwareTag(device.firmware_status).text }}
      </a-tag>
    </span>
    <!-- 进度 -->
    <span v-if="device.firmware_status === DeviceFirmwareStatusEnum.DuringUpgrade">
      {{ `${device.firmware_progress}` }}
    </span>
    <span v-else>
      不支持
    </span>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, computed } from 'vue'
import { Device, DeviceFirmwareStatusEnum, DeviceFirmwareStatus, DeviceFirmwareStatusColor } from '/@/types/device'

const props = defineProps<{
  device: Device,
}>()

const emit = defineEmits(['device-upgrade'])

const needUpgrade = computed(() => {
  return props.device.firmware_status === DeviceFirmwareStatusEnum.ConsistencyUpgrade ||
    props.device.firmware_status === DeviceFirmwareStatusEnum.ToUpgraded
})

function getTagStatus(record: Device) {
  return record.firmware_status && record.firmware_status !== DeviceFirmwareStatusEnum.None
}

function getFirmwareTag(status: DeviceFirmwareStatusEnum) {
  return {
    text: DeviceFirmwareStatus[status] || '',
    color: DeviceFirmwareStatusColor[status] || ''
  }
}

function deviceUpgrade(record: Device) {
  if (!needUpgrade.value) return
  emit('device-upgrade', record)
}
</script>

<style lang="scss" scoped>
.firmware_upgrade_wrap {

  .status-tag {
    margin-left: 10px;
  }

  .pointer {
    cursor: pointer;
  }
}
</style>