fetch(add): 运营商管理

src/views/asset-management/device-search/index.vue

@@ -0,0 +1,152 @@
+<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.device_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 { DeviceService } from '@/api/modules/device'
+
+  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 DeviceService.getDeviceByImei(searchForm.imei.trim())
+      if (res.code === 0 && res.data) {
+        deviceDetail.value = res.data
+        ElMessage.success('查询成功')
+      } else {
+        ElMessage.error(res.message || '查询失败')
+      }
+    } 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>