pms-iot-vue/src/views/iot/device/detail/DeviceDetailsHeader.vue

<template>
  <div>
    <div class="flex items-start justify-between">
      <div>
        <el-col>
          <el-row>
            <span class="text-xl font-bold">{{ device.deviceName }}</span>
          </el-row>
        </el-col>
      </div>
      <div>
        <!-- 右上：按钮 -->
        <el-button
          @click="openForm('update', device.id)"
          v-hasPermi="['iot:device:update']"
          v-if="product.status === 0"
        >
          编辑
        </el-button>
      </div>
    </div>
  </div>
  <ContentWrap class="mt-10px">
    <el-descriptions :column="5" direction="horizontal">
      <el-descriptions-item label="产品">
        <el-link @click="goToProductDetail(product.id)">{{ product.name }}</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="ProductKey">
        {{ product.productKey }}
        <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
  <!-- 表单弹窗：添加/修改 -->
  <DeviceForm ref="formRef" @success="emit('refresh')" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import DeviceForm from '@/views/iot/device/DeviceForm.vue'
import { ProductVO } from '@/api/iot/product'
import { DeviceVO } from '@/api/iot/device'
import { useRouter } from 'vue-router'

const message = useMessage()
const router = useRouter()

// 操作修改
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
const emit = defineEmits(['refresh'])

/**
 * 将文本复制到剪贴板
 *
 * @param text 需要复制的文本
 */
const copyToClipboard = async (text: string) => {
  if (!navigator.clipboard) {
    // 浏览器不支持 Clipboard API，使用回退方法
    const textarea = document.createElement('textarea')
    textarea.value = text
    // 防止页面滚动
    textarea.style.position = 'fixed'
    textarea.style.top = '0'
    textarea.style.left = '0'
    textarea.style.width = '2em'
    textarea.style.height = '2em'
    textarea.style.padding = '0'
    textarea.style.border = 'none'
    textarea.style.outline = 'none'
    textarea.style.boxShadow = 'none'
    textarea.style.background = 'transparent'
    document.body.appendChild(textarea)
    textarea.focus()
    textarea.select()

    try {
      const successful = document.execCommand('copy')
      if (successful) {
        message.success('复制成功！')
      } else {
        message.error('复制失败，请手动复制')
      }
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err)
      message.error('复制失败，请手动复制')
    }

    document.body.removeChild(textarea)
    return
  }

  try {
    await navigator.clipboard.writeText(text)
    message.success('复制成功！')
  } catch (err) {
    console.error('Async: Could not copy text: ', err)
    message.error('复制失败，请手动复制')
  }
}

/**
 * 跳转到产品详情页面
 *
 * @param productId 产品 ID
 */
const goToProductDetail = (productId: number) => {
  router.push({ name: 'IoTProductDetail', params: { id: productId } })
}
</script>