one-pipe-system/src/views/asset-management/device-search/index.vue

<template>
  <div class="device-search-page">
    <!-- 搜索区域 -->
    <ElCard shadow="never" class="search-card">
      <template #header>
        <div class="card-header">
          <span>设备查询</span>
        </div>
      </template>

      <div class="search-content">
        <ElForm :model="searchForm" label-width="100px">
          <ElFormItem label="设备号(IMEI)">
            <ElInput
              v-model="searchForm.imei"
              placeholder="请输入设备号(IMEI)"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <ElButton type="primary" :loading="loading" @click="handleSearch"> 查询 </ElButton>
              </template>
            </ElInput>
          </ElFormItem>
        </ElForm>
      </div>
    </ElCard>

    <!-- 设备详情区域 -->
    <ElCard v-if="deviceDetail" shadow="never" class="detail-card" style="margin-top: 16px">
      <template #header>
        <div class="card-header">
          <span>设备详情</span>
        </div>
      </template>

      <ElDescriptions :column="3" border>
        <ElDescriptionsItem label="设备ID">{{ deviceDetail.id }}</ElDescriptionsItem>
        <ElDescriptionsItem label="设备号" :span="2">{{
          deviceDetail.virtual_no
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="设备名称">{{
          deviceDetail.device_name || '--'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="设备型号">{{
          deviceDetail.device_model || '--'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="设备类型">{{
          deviceDetail.device_type || '--'
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="制造商">{{
          deviceDetail.manufacturer || '--'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="最大插槽数">{{ deviceDetail.max_sim_slots }}</ElDescriptionsItem>
        <ElDescriptionsItem label="已绑定卡数量">{{
          deviceDetail.bound_card_count
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="状态">
          <ElTag :type="getStatusTagType(deviceDetail.status)">
            {{ deviceDetail.status_name }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="店铺名称">{{
          deviceDetail.shop_name || '--'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="批次号">{{ deviceDetail.batch_no }}</ElDescriptionsItem>

        <ElDescriptionsItem label="激活时间">{{
          deviceDetail.activated_at || '--'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">{{ deviceDetail.created_at }}</ElDescriptionsItem>
        <ElDescriptionsItem label="更新时间">{{ deviceDetail.updated_at }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElCard>

    <!-- 空状态 -->
    <ElEmpty v-if="searched && !deviceDetail && !loading" description="未找到相关设备信息" />
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { AssetService } from '@/api/modules'

  defineOptions({ name: 'DeviceSearch' })

  const loading = ref(false)
  const searched = ref(false)
  const searchForm = reactive({
    imei: ''
  })
  const deviceDetail = ref<any>(null)

  // 查询设备详情
  const handleSearch = async () => {
    if (!searchForm.imei.trim()) {
      ElMessage.warning('请输入设备号(IMEI)')
      return
    }

    loading.value = true
    searched.value = true
    deviceDetail.value = null

    try {
      const res = await AssetService.resolveAsset(searchForm.imei.trim())
      if (res.code === 0 && res.data) {
        deviceDetail.value = res.data
        ElMessage.success('查询成功')
      } else {
        ElMessage.error(res.msg || '查询失败')
      }
    } catch (error: any) {
      console.error('查询设备详情失败:', error)
      ElMessage.error(error?.message || '查询失败，请检查设备号是否正确')
    } finally {
      loading.value = false
    }
  }

  // 获取状态标签类型
  const getStatusTagType = (status: number) => {
    const typeMap: Record<number, any> = {
      1: 'info', // 在库
      2: 'warning', // 已分销
      3: 'success', // 已激活
      4: 'danger' // 已停用
    }
    return typeMap[status] || 'info'
  }
</script>

<style lang="scss" scoped>
  .device-search-page {
    padding: 16px;

    .card-header {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    .search-content {
      max-width: 800px;
    }

    .detail-card {
      animation: fadeIn 0.3s ease-in;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>