fetch(modify):修改原来的bug

src/views/asset-management/allocation-record-detail/index.vue

@@ -12,7 +12,9 @@
         <ElSkeleton :loading="loading" :rows="10" animated>
           <template #default>
             <ElDescriptions v-if="recordDetail" title="基本信息" :column="3" border>
-              <ElDescriptionsItem label="分配单号">{{ recordDetail.allocation_no }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="分配单号">{{
+                recordDetail.allocation_no
+              }}</ElDescriptionsItem>
               <ElDescriptionsItem label="分配类型">
                 <ElTag :type="getAllocationTypeType(recordDetail.allocation_type)">
                   {{ recordDetail.allocation_name }}
@@ -23,14 +25,24 @@
                   {{ recordDetail.asset_type_name }}
                 </ElTag>
               </ElDescriptionsItem>
-              <ElDescriptionsItem label="资产标识符">{{ recordDetail.asset_identifier }}</ElDescriptionsItem>
-              <ElDescriptionsItem label="关联卡数量">{{ recordDetail.related_card_count }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="资产标识符">{{
+                recordDetail.asset_identifier
+              }}</ElDescriptionsItem>
+              <ElDescriptionsItem label="关联卡数量">{{
+                recordDetail.related_card_count
+              }}</ElDescriptionsItem>
               <ElDescriptionsItem label="关联设备ID">
                 {{ recordDetail.related_device_id || '-' }}
               </ElDescriptionsItem>
             </ElDescriptions>
 
-            <ElDescriptions v-if="recordDetail" title="所有者信息" :column="2" border style="margin-top: 20px">
+            <ElDescriptions
+              v-if="recordDetail"
+              title="所有者信息"
+              :column="2"
+              border
+              style="margin-top: 20px"
+            >
               <ElDescriptionsItem label="来源所有者">
                 {{ recordDetail.from_owner_name }} ({{ recordDetail.from_owner_type }})
               </ElDescriptionsItem>
@@ -39,8 +51,16 @@
               </ElDescriptionsItem>
             </ElDescriptions>
 
-            <ElDescriptions v-if="recordDetail" title="操作信息" :column="2" border style="margin-top: 20px">
-              <ElDescriptionsItem label="操作人">{{ recordDetail.operator_name }}</ElDescriptionsItem>
+            <ElDescriptions
+              v-if="recordDetail"
+              title="操作信息"
+              :column="2"
+              border
+              style="margin-top: 20px"
+            >
+              <ElDescriptionsItem label="操作人">{{
+                recordDetail.operator_name
+              }}</ElDescriptionsItem>
               <ElDescriptionsItem label="创建时间">
                 {{ formatDateTime(recordDetail.created_at) }}
               </ElDescriptionsItem>
@@ -50,7 +70,14 @@
             </ElDescriptions>
 
             <!-- 关联卡列表 -->
-            <div v-if="recordDetail && recordDetail.related_card_ids && recordDetail.related_card_ids.length > 0" style="margin-top: 20px">
+            <div
+              v-if="
+                recordDetail &&
+                recordDetail.related_card_ids &&
+                recordDetail.related_card_ids.length > 0
+              "
+              style="margin-top: 20px"
+            >
               <ElDivider content-position="left">关联卡列表</ElDivider>
               <ElTable :data="relatedCardsList" border>
                 <ElTableColumn type="index" label="序号" width="60" />
@@ -155,8 +182,8 @@
   .allocation-record-detail-page {
     .card-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
     }
   }
 </style>

src/views/asset-management/asset-assign/index.vue

@@ -53,11 +53,7 @@
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { formatDateTime } from '@/utils/business/format'
-  import type {
-    AssetAllocationRecord,
-    AllocationTypeEnum,
-    AssetTypeEnum
-  } from '@/types/api/card'
+  import type { AssetAllocationRecord, AllocationTypeEnum, AssetTypeEnum } from '@/types/api/card'
 
   defineOptions({ name: 'AssetAllocationRecords' })
 

src/views/asset-management/authorization-detail/index.vue

@@ -46,7 +46,9 @@
           {{ authorizationDetail.revoker_name || '-' }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="回收时间">
-          {{ authorizationDetail.revoked_at ? formatDateTime(authorizationDetail.revoked_at) : '-' }}
+          {{
+            authorizationDetail.revoked_at ? formatDateTime(authorizationDetail.revoked_at) : '-'
+          }}
         </ElDescriptionsItem>
 
         <ElDescriptionsItem label="备注" :span="2">
@@ -109,8 +111,8 @@
 
     .card-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
     }
   }
 </style>

src/views/asset-management/authorization-records/index.vue

@@ -240,10 +240,8 @@
       label: '授权人类型',
       width: 100,
       formatter: (row: AuthorizationItem) => {
-        return h(
-          ElTag,
-          { type: getAuthorizerTypeTag(row.authorizer_type) },
-          () => getAuthorizerTypeText(row.authorizer_type)
+        return h(ElTag, { type: getAuthorizerTypeTag(row.authorizer_type) }, () =>
+          getAuthorizerTypeText(row.authorizer_type)
         )
       }
     },

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

@@ -21,7 +21,7 @@
         <ElDescriptionsItem label="制造商">{{ deviceInfo.manufacturer }}</ElDescriptionsItem>
         <ElDescriptionsItem label="最大插槽数">{{ deviceInfo.max_sim_slots }}</ElDescriptionsItem>
         <ElDescriptionsItem label="已绑定卡数">
-          <span style="color: #67c23a; font-weight: bold">{{ deviceInfo.bound_card_count }}</span>
+          <span style="font-weight: bold; color: #67c23a">{{ deviceInfo.bound_card_count }}</span>
           / {{ deviceInfo.max_sim_slots }}
         </ElDescriptionsItem>
         <ElDescriptionsItem label="所属店铺">
@@ -118,7 +118,11 @@
           </ElSelect>
         </ElFormItem>
         <ElFormItem label="插槽位置" prop="slot_position">
-          <ElSelect v-model="bindForm.slot_position" placeholder="请选择插槽位置" style="width: 100%">
+          <ElSelect
+            v-model="bindForm.slot_position"
+            placeholder="请选择插槽位置"
+            style="width: 100%"
+          >
             <ElOption
               v-for="slot in availableSlots"
               :key="slot"

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

@@ -56,9 +56,14 @@
 
         <!-- 批量分配对话框 -->
         <ElDialog v-model="allocateDialogVisible" title="批量分配设备" width="600px">
-          <ElForm ref="allocateFormRef" :model="allocateForm" :rules="allocateRules" label-width="120px">
+          <ElForm
+            ref="allocateFormRef"
+            :model="allocateForm"
+            :rules="allocateRules"
+            label-width="120px"
+          >
             <ElFormItem label="已选设备数">
-              <span style="color: #409eff; font-weight: bold">{{ selectedDevices.length }}</span> 台
+              <span style="font-weight: bold; color: #409eff">{{ selectedDevices.length }}</span> 台
             </ElFormItem>
             <ElFormItem label="目标店铺" prop="target_shop_id">
               <ElSelect
@@ -93,7 +98,8 @@
               style="margin-bottom: 10px"
             >
               <template #title>
-                成功分配 {{ allocateResult.success_count }} 台，失败 {{ allocateResult.fail_count }} 台
+                成功分配 {{ allocateResult.success_count }} 台，失败
+                {{ allocateResult.fail_count }} 台
               </template>
             </ElAlert>
             <div v-if="allocateResult.failed_items && allocateResult.failed_items.length > 0">
@@ -101,7 +107,7 @@
               <div
                 v-for="item in allocateResult.failed_items"
                 :key="item.device_id"
-                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+                style="margin-bottom: 8px; font-size: 12px; color: #f56c6c"
               >
                 设备号: {{ item.device_no }} - {{ item.reason }}
               </div>
@@ -129,7 +135,7 @@
         <ElDialog v-model="recallDialogVisible" title="批量回收设备" width="600px">
           <ElForm ref="recallFormRef" :model="recallForm" label-width="120px">
             <ElFormItem label="已选设备数">
-              <span style="color: #e6a23c; font-weight: bold">{{ selectedDevices.length }}</span> 台
+              <span style="font-weight: bold; color: #e6a23c">{{ selectedDevices.length }}</span> 台
             </ElFormItem>
             <ElFormItem label="备注">
               <ElInput
@@ -157,7 +163,7 @@
               <div
                 v-for="item in recallResult.failed_items"
                 :key="item.device_id"
-                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+                style="margin-bottom: 8px; font-size: 12px; color: #f56c6c"
               >
                 设备号: {{ item.device_no }} - {{ item.reason }}
               </div>
@@ -182,10 +188,19 @@
         </ElDialog>
 
         <!-- 批量设置套餐系列绑定对话框 -->
-        <ElDialog v-model="seriesBindingDialogVisible" title="批量设置设备套餐系列绑定" width="600px">
-          <ElForm ref="seriesBindingFormRef" :model="seriesBindingForm" :rules="seriesBindingRules" label-width="120px">
+        <ElDialog
+          v-model="seriesBindingDialogVisible"
+          title="批量设置设备套餐系列绑定"
+          width="600px"
+        >
+          <ElForm
+            ref="seriesBindingFormRef"
+            :model="seriesBindingForm"
+            :rules="seriesBindingRules"
+            label-width="120px"
+          >
             <ElFormItem label="已选设备数">
-              <span style="color: #409eff; font-weight: bold">{{ selectedDevices.length }}</span> 台
+              <span style="font-weight: bold; color: #409eff">{{ selectedDevices.length }}</span> 台
             </ElFormItem>
             <ElFormItem label="套餐系列分配" prop="series_allocation_id">
               <ElSelect
@@ -214,15 +229,18 @@
               style="margin-bottom: 10px"
             >
               <template #title>
-                成功设置 {{ seriesBindingResult.success_count }} 台，失败 {{ seriesBindingResult.fail_count }} 台
+                成功设置 {{ seriesBindingResult.success_count }} 台，失败
+                {{ seriesBindingResult.fail_count }} 台
               </template>
             </ElAlert>
-            <div v-if="seriesBindingResult.failed_items && seriesBindingResult.failed_items.length > 0">
+            <div
+              v-if="seriesBindingResult.failed_items && seriesBindingResult.failed_items.length > 0"
+            >
               <div style="margin-bottom: 10px; font-weight: bold">失败详情：</div>
               <div
                 v-for="item in seriesBindingResult.failed_items"
                 :key="item.device_id"
-                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+                style="margin-bottom: 8px; font-size: 12px; color: #f56c6c"
               >
                 设备号: {{ item.device_no }} - {{ item.reason }}
               </div>
@@ -245,6 +263,61 @@
             </div>
           </template>
         </ElDialog>
+
+        <!-- 设备详情弹窗 -->
+        <ElDialog v-model="deviceDetailDialogVisible" title="设备详情" width="900px">
+          <div v-if="deviceDetailLoading" style="text-align: center; padding: 40px 0">
+            <ElIcon class="is-loading" :size="40"><Loading /></ElIcon>
+          </div>
+          <ElDescriptions v-else-if="currentDeviceDetail" :column="3" border>
+            <ElDescriptionsItem label="设备ID">{{ currentDeviceDetail.id }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="设备号" :span="2">{{
+              currentDeviceDetail.device_no
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="设备名称">{{
+              currentDeviceDetail.device_name || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="设备型号">{{
+              currentDeviceDetail.device_model || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="设备类型">{{
+              currentDeviceDetail.device_type || '--'
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="制造商">{{
+              currentDeviceDetail.manufacturer || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="最大插槽数">{{
+              currentDeviceDetail.max_sim_slots
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="已绑定卡数量">{{
+              currentDeviceDetail.bound_card_count
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="状态">
+              <ElTag :type="getDeviceStatusTagType(currentDeviceDetail.status)">
+                {{ currentDeviceDetail.status_name }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="店铺名称">{{
+              currentDeviceDetail.shop_name || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="批次号">{{
+              currentDeviceDetail.batch_no || '--'
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="激活时间">{{
+              currentDeviceDetail.activated_at || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="创建时间">{{
+              currentDeviceDetail.created_at || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="更新时间">{{
+              currentDeviceDetail.updated_at || '--'
+            }}</ElDescriptionsItem>
+          </ElDescriptions>
+        </ElDialog>
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -255,7 +328,8 @@
   import { useRouter } from 'vue-router'
   import { DeviceService, ShopService } from '@/api/modules'
   import { ShopSeriesAllocationService } from '@/api/modules/shopSeriesAllocation'
-  import { ElMessage, ElMessageBox, ElTag, ElSwitch } from 'element-plus'
+  import { ElMessage, ElMessageBox, ElTag, ElSwitch, ElIcon } from 'element-plus'
+  import { Loading } from '@element-plus/icons-vue'
   import type { FormInstance, FormRules } from 'element-plus'
   import type {
     Device,
@@ -301,6 +375,11 @@
   })
   const seriesBindingResult = ref<BatchSetDeviceSeriesBindingResponse | null>(null)
 
+  // 设备详情弹窗相关
+  const deviceDetailDialogVisible = ref(false)
+  const deviceDetailLoading = ref(false)
+  const currentDeviceDetail = ref<any>(null)
+
   // 搜索表单初始值
   const initialSearchState = {
     device_no: '',
@@ -424,6 +503,40 @@
     remark: ''
   })
 
+  // 查看设备详情（通过弹窗）
+  const goToDeviceSearchDetail = async (deviceNo: string) => {
+    deviceDetailDialogVisible.value = true
+    deviceDetailLoading.value = true
+    currentDeviceDetail.value = null
+
+    try {
+      const res = await DeviceService.getDeviceByImei(deviceNo)
+      if (res.code === 0 && res.data) {
+        currentDeviceDetail.value = res.data
+      } else {
+        ElMessage.error(res.message || '查询失败')
+        deviceDetailDialogVisible.value = false
+      }
+    } catch (error: any) {
+      console.error('查询设备详情失败:', error)
+      ElMessage.error(error?.message || '查询失败，请检查设备号是否正确')
+      deviceDetailDialogVisible.value = false
+    } finally {
+      deviceDetailLoading.value = false
+    }
+  }
+
+  // 获取设备状态标签类型
+  const getDeviceStatusTagType = (status: number) => {
+    const typeMap: Record<number, any> = {
+      1: 'info', // 在库
+      2: 'warning', // 已分销
+      3: 'success', // 已激活
+      4: 'danger' // 已停用
+    }
+    return typeMap[status] || 'info'
+  }
+
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
     {
@@ -434,7 +547,17 @@
     {
       prop: 'device_no',
       label: '设备号',
-      minWidth: 150
+      minWidth: 150,
+      formatter: (row: Device) => {
+        return h(
+          'span',
+          {
+            style: { color: 'var(--el-color-primary)', cursor: 'pointer' },
+            onClick: () => goToDeviceSearchDetail(row.device_no)
+          },
+          row.device_no
+        )
+      }
     },
     {
       prop: 'device_name',

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

@@ -18,9 +18,7 @@
               @keyup.enter="handleSearch"
             >
               <template #append>
-                <ElButton type="primary" :loading="loading" @click="handleSearch">
-                  查询
-                </ElButton>
+                <ElButton type="primary" :loading="loading" @click="handleSearch"> 查询 </ElButton>
               </template>
             </ElInput>
           </ElFormItem>
@@ -38,25 +36,41 @@
 
       <ElDescriptions :column="3" border>
         <ElDescriptionsItem label="设备ID">{{ deviceDetail.id }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="设备号" :span="2">{{ deviceDetail.device_no }}</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.device_name || '--'
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="设备型号">{{
+          deviceDetail.device_model || '--'
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="设备类型">{{
+          deviceDetail.device_type || '--'
+        }}</ElDescriptionsItem>
 
-        <ElDescriptionsItem label="制造商">{{ deviceDetail.manufacturer || '--' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="制造商">{{
+          deviceDetail.manufacturer || '--'
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="最大插槽数">{{ deviceDetail.max_sim_slots }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="已绑定卡数量">{{ deviceDetail.bound_card_count }}</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.shop_name || '--'
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="批次号">{{ deviceDetail.batch_no }}</ElDescriptionsItem>
 
-        <ElDescriptionsItem label="激活时间">{{ deviceDetail.activated_at || '--' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="激活时间">{{
+          deviceDetail.activated_at || '--'
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="创建时间">{{ deviceDetail.created_at }}</ElDescriptionsItem>
         <ElDescriptionsItem label="更新时间">{{ deviceDetail.updated_at }}</ElDescriptionsItem>
       </ElDescriptions>

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

@@ -5,6 +5,7 @@
       <ArtSearchBar
         v-model:filter="searchForm"
         :items="searchFormItems"
+        :show-expand="false"
         @reset="handleReset"
         @search="handleSearch"
       ></ArtSearchBar>
@@ -15,7 +16,13 @@
           :columnList="columnOptions"
           v-model:columns="columnChecks"
           @refresh="handleRefresh"
-        />
+        >
+          <template #left>
+            <ElButton type="primary" :icon="Upload" @click="importDialogVisible = true">
+              批量导入设备
+            </ElButton>
+          </template>
+        </ArtTableHeader>
 
         <!-- 表格 -->
         <ArtTable
@@ -36,25 +43,149 @@
         </ArtTable>
       </ElCard>
     </div>
+
+    <!-- 导入对话框 -->
+    <ElDialog v-model="importDialogVisible" title="批量导入设备" width="700px" align-center>
+      <ElAlert type="info" :closable="false" style="margin-bottom: 20px">
+        <template #title>
+          <div style="line-height: 1.8">
+            <p><strong>导入说明：</strong></p>
+            <p>1. 请先下载 CSV 模板文件，按照模板格式填写设备信息</p>
+            <p>2. 支持 CSV 格式（.csv），单次最多导入 1000 条</p>
+            <p>3. CSV 文件编码：UTF-8（推荐）或 GBK</p>
+            <p
+              >4.
+              必填字段：device_no（设备号）、device_name（设备名称）、device_model（设备型号）</p
+            >
+            <p
+              >5.
+              可选字段：device_type（设备类型）、manufacturer（制造商）、max_sim_slots（最大插槽数，默认1）</p
+            >
+          </div>
+        </template>
+      </ElAlert>
+
+      <div style="margin-bottom: 20px">
+        <ElButton type="primary" :icon="Download" @click="downloadTemplate">
+          下载导入模板
+        </ElButton>
+      </div>
+
+      <ElUpload
+        ref="uploadRef"
+        drag
+        :auto-upload="false"
+        :on-change="handleFileChange"
+        :limit="1"
+        accept=".csv"
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将 CSV 文件拖到此处，或<em>点击选择</em></div>
+        <template #tip>
+          <div class="el-upload__tip">只能上传 CSV 文件，且不超过 10MB</div>
+        </template>
+      </ElUpload>
+
+      <template #footer>
+        <ElButton @click="handleCancelImport">取消</ElButton>
+        <ElButton
+          type="primary"
+          :loading="uploading"
+          :disabled="!fileList.length"
+          @click="submitUpload"
+        >
+          开始导入
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 任务详情对话框 -->
+    <ElDialog v-model="detailDialogVisible" title="设备导入任务详情" width="900px" align-center>
+      <ElDescriptions :column="2" border>
+        <ElDescriptionsItem label="任务编号" :span="2">{{
+          currentDetail.task_no
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="状态">
+          <ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="批次号">{{ currentDetail.batch_no }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="文件名" :span="2">{{
+          currentDetail.file_name
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="成功数">
+          <span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="失败数">
+          <span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="警告数">
+          <span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="错误信息" :span="2">{{
+          currentDetail.error_message
+        }}</ElDescriptionsItem>
+      </ElDescriptions>
+
+      <ElDivider content-position="left">失败明细</ElDivider>
+      <div
+        v-if="currentDetail.failed_items && currentDetail.failed_items.length"
+        style="max-height: 300px; overflow-y: auto"
+      >
+        <ElTable :data="currentDetail.failed_items" border size="small">
+          <ElTableColumn label="行号" type="index" width="80" :index="(index) => index + 1" />
+          <ElTableColumn label="设备编号" prop="device_no" width="150" />
+          <ElTableColumn label="ICCID" prop="iccid" width="200" />
+          <ElTableColumn label="失败原因" prop="reason" min-width="200">
+            <template #default="{ row }">
+              {{ row.reason || row.error || '未知错误' }}
+            </template>
+          </ElTableColumn>
+        </ElTable>
+      </div>
+      <ElEmpty v-else description="无失败记录" />
+
+      <template #footer>
+        <ElButton @click="detailDialogVisible = false">关闭</ElButton>
+        <ElButton
+          v-if="currentDetail.fail_count > 0"
+          type="primary"
+          :icon="Download"
+          @click="downloadFailData"
+        >
+          下载失败数据
+        </ElButton>
+      </template>
+    </ElDialog>
   </ArtTableFullScreen>
 </template>
 
 <script setup lang="ts">
   import { h } from 'vue'
-  import { useRouter } from 'vue-router'
   import { DeviceService } from '@/api/modules'
   import { ElMessage, ElTag } from 'element-plus'
+  import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
+  import type { UploadInstance } from 'element-plus'
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { formatDateTime } from '@/utils/business/format'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { StorageService } from '@/api/modules/storage'
   import type { DeviceImportTask, DeviceImportTaskStatus } from '@/types/api/device'
 
   defineOptions({ name: 'DeviceTask' })
 
-  const router = useRouter()
   const loading = ref(false)
   const tableRef = ref()
+  const uploadRef = ref<UploadInstance>()
+  const fileList = ref<File[]>([])
+  const uploading = ref(false)
+  const importDialogVisible = ref(false)
+  const detailDialogVisible = ref(false)
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -116,19 +247,21 @@
   // 列配置
   const columnOptions = [
     { label: '任务编号', prop: 'task_no' },
-    { label: '批次号', prop: 'batch_no' },
-    { label: '文件名', prop: 'file_name' },
     { label: '任务状态', prop: 'status' },
+    { label: '文件名', prop: 'file_name' },
     { label: '总数', prop: 'total_count' },
     { label: '成功数', prop: 'success_count' },
     { label: '失败数', prop: 'fail_count' },
     { label: '跳过数', prop: 'skip_count' },
-    { label: '创建时间', prop: 'created_at' },
+    { label: '开始时间', prop: 'started_at' },
     { label: '完成时间', prop: 'completed_at' },
+    { label: '错误信息', prop: 'error_message' },
+    { label: '创建时间', prop: 'created_at' },
     { label: '操作', prop: 'operation' }
   ]
 
   const taskList = ref<DeviceImportTask[]>([])
+  const currentDetail = ref<any>({})
 
   // 获取状态标签类型
   const getStatusType = (status: DeviceImportTaskStatus) => {
@@ -147,14 +280,22 @@
   }
 
   // 查看详情
-  const viewDetail = (row: DeviceImportTask) => {
-    router.push({
-      path: '/asset-management/task-detail',
-      query: {
-        id: row.id,
-        task_type: 'device'
+  const viewDetail = async (row: DeviceImportTask) => {
+    try {
+      const res = await DeviceService.getImportTaskDetail(row.id)
+      if (res.code === 0 && res.data) {
+        currentDetail.value = {
+          ...res.data,
+          started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
+          completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
+          created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-'
+        }
+        detailDialogVisible.value = true
       }
-    })
+    } catch (error) {
+      console.error('获取任务详情失败:', error)
+      ElMessage.error('获取任务详情失败')
+    }
   }
 
   // 动态列配置
@@ -162,17 +303,7 @@
     {
       prop: 'task_no',
       label: '任务编号',
-      width: 150
-    },
-    {
-      prop: 'batch_no',
-      label: '批次号',
-      width: 120
-    },
-    {
-      prop: 'file_name',
-      label: '文件名',
-      minWidth: 200
+      width: 180
     },
     {
       prop: 'status',
@@ -182,6 +313,12 @@
         return h(ElTag, { type: getStatusType(row.status) }, () => row.status_text)
       }
     },
+    {
+      prop: 'file_name',
+      label: '文件名',
+      minWidth: 250,
+      showOverflowTooltip: true
+    },
     {
       prop: 'total_count',
       label: '总数',
@@ -190,15 +327,17 @@
     {
       prop: 'success_count',
       label: '成功数',
-      width: 80
+      width: 80,
+      formatter: (row: DeviceImportTask) => {
+        return h('span', { style: { color: 'var(--el-color-success)' } }, row.success_count)
+      }
     },
     {
       prop: 'fail_count',
       label: '失败数',
       width: 80,
       formatter: (row: DeviceImportTask) => {
-        const type = row.fail_count > 0 ? 'danger' : 'success'
-        return h(ElTag, { type, size: 'small' }, () => row.fail_count)
+        return h('span', { style: { color: 'var(--el-color-danger)' } }, row.fail_count)
       }
     },
     {
@@ -207,27 +346,59 @@
       width: 80
     },
     {
-      prop: 'created_at',
-      label: '创建时间',
-      width: 160,
-      formatter: (row: DeviceImportTask) => formatDateTime(row.created_at)
+      prop: 'started_at',
+      label: '开始时间',
+      width: 180,
+      formatter: (row: DeviceImportTask) => (row.started_at ? formatDateTime(row.started_at) : '-')
     },
     {
       prop: 'completed_at',
       label: '完成时间',
-      width: 160,
-      formatter: (row: DeviceImportTask) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
+      width: 180,
+      formatter: (row: DeviceImportTask) =>
+        row.completed_at ? formatDateTime(row.completed_at) : '-'
+    },
+    {
+      prop: 'error_message',
+      label: '错误信息',
+      minWidth: 200,
+      showOverflowTooltip: true,
+      formatter: (row: DeviceImportTask) => row.error_message || '-'
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: DeviceImportTask) => formatDateTime(row.created_at)
     },
     {
       prop: 'operation',
       label: '操作',
-      width: 100,
+      width: 180,
       fixed: 'right',
       formatter: (row: DeviceImportTask) => {
-        return h(ArtButtonTable, {
-          type: 'view',
-          onClick: () => viewDetail(row)
-        })
+        const buttons = []
+
+        // 显示"查看详情"按钮
+        buttons.push(
+          h(ArtButtonTable, {
+            text: '详情',
+            onClick: () => viewDetail(row)
+          })
+        )
+
+        // 如果有失败数据，显示"失败数据"按钮
+        if (row.fail_count > 0) {
+          buttons.push(
+            h(ArtButtonTable, {
+              text: '失败数据',
+              type: 'danger',
+              onClick: () => downloadFailDataByRow(row)
+            })
+          )
+        }
+
+        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
       }
     }
   ])
@@ -262,7 +433,7 @@
 
       const res = await DeviceService.getImportTasks(params)
       if (res.code === 0) {
-        taskList.value = res.data.list || []
+        taskList.value = res.data.items || []
         pagination.total = res.data.total || 0
       }
     } catch (error) {
@@ -301,10 +472,195 @@
     pagination.page = newCurrentPage
     getTableData()
   }
+
+  // 下载模板
+  const downloadTemplate = () => {
+    const csvContent = [
+      'device_no,device_name,device_model,device_type,manufacturer,max_sim_slots',
+      'DEV001,智能水表01,WM-2000,智能水表,华为,1',
+      'DEV002,GPS定位器01,GPS-3000,定位设备,小米,2',
+      'DEV003,智能燃气表01,GM-1500,智能燃气表,海尔,1'
+    ].join('\n')
+
+    const BOM = '\uFEFF'
+    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
+
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(blob)
+    link.setAttribute('href', url)
+    link.setAttribute('download', '设备导入模板.csv')
+    link.style.visibility = 'hidden'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    ElMessage.success('设备导入模板下载成功')
+  }
+
+  // 文件选择变化
+  const handleFileChange = (uploadFile: any) => {
+    const maxSize = 10 * 1024 * 1024
+    if (uploadFile.raw && uploadFile.raw.size > maxSize) {
+      ElMessage.error('文件大小不能超过 10MB')
+      uploadRef.value?.clearFiles()
+      fileList.value = []
+      return
+    }
+
+    if (uploadFile.raw && !uploadFile.raw.name.endsWith('.csv')) {
+      ElMessage.error('只能上传 CSV 文件')
+      uploadRef.value?.clearFiles()
+      fileList.value = []
+      return
+    }
+
+    fileList.value = uploadFile.raw ? [uploadFile.raw] : []
+  }
+
+  // 清空文件
+  const clearFiles = () => {
+    uploadRef.value?.clearFiles()
+    fileList.value = []
+  }
+
+  // 取消导入
+  const handleCancelImport = () => {
+    clearFiles()
+    importDialogVisible.value = false
+  }
+
+  // 提交上传
+  const submitUpload = async () => {
+    if (!fileList.value.length) {
+      ElMessage.warning('请先选择CSV文件')
+      return
+    }
+
+    const file = fileList.value[0]
+    uploading.value = true
+
+    try {
+      ElMessage.info('正在准备上传...')
+      const uploadUrlRes = await StorageService.getUploadUrl({
+        file_name: file.name,
+        content_type: 'text/csv',
+        purpose: 'iot_import'
+      })
+
+      if (uploadUrlRes.code !== 0) {
+        throw new Error(uploadUrlRes.msg || '获取上传地址失败')
+      }
+
+      const { upload_url, file_key } = uploadUrlRes.data
+
+      ElMessage.info('正在上传文件...')
+      await StorageService.uploadFile(upload_url, file, 'text/csv')
+
+      ElMessage.info('正在创建导入任务...')
+      const importRes = await DeviceService.importDevices({
+        file_key,
+        batch_no: `DEV-${Date.now()}`
+      })
+
+      if (importRes.code !== 0) {
+        throw new Error(importRes.msg || '创建导入任务失败')
+      }
+
+      const taskNo = importRes.data.task_no
+
+      handleCancelImport()
+      getTableData()
+
+      ElMessage.success({
+        message: `导入任务已创建！任务编号：${taskNo}`,
+        duration: 3000,
+        showClose: true
+      })
+    } catch (error: any) {
+      console.error('设备导入失败:', error)
+      ElMessage.error(error.message || '设备导入失败')
+    } finally {
+      uploading.value = false
+    }
+  }
+
+  // 从行数据下载失败数据
+  const downloadFailDataByRow = async (row: DeviceImportTask) => {
+    try {
+      const res = await DeviceService.getImportTaskDetail(row.id)
+      if (res.code === 0 && res.data) {
+        const detail = res.data
+        downloadFailDataFromDetail(detail, row.batch_no)
+      }
+    } catch (error) {
+      console.error('下载失败数据失败:', error)
+      ElMessage.error('下载失败数据失败')
+    }
+  }
+
+  // 下载失败数据（从详情对话框）
+  const downloadFailData = () => {
+    downloadFailDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
+  }
+
+  // 下载失败数据的通用方法
+  const downloadFailDataFromDetail = (detail: any, batchNo: string) => {
+    const failReasons =
+      detail.failed_items?.map((item: any, index: number) => ({
+        row: index + 1,
+        deviceCode: item.device_no || '-',
+        iccid: item.iccid || '-',
+        message: item.reason || item.error || '未知错误'
+      })) || []
+
+    if (failReasons.length === 0) {
+      ElMessage.warning('没有失败数据可下载')
+      return
+    }
+
+    const headers = ['行号', '设备编号', 'ICCID', '失败原因']
+    const csvRows = [
+      headers.join(','),
+      ...failReasons.map((item: any) =>
+        [item.row, item.deviceCode, item.iccid, `"${item.message}"`].join(',')
+      )
+    ]
+    const csvContent = csvRows.join('\n')
+
+    const BOM = '\uFEFF'
+    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
+
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(blob)
+    link.setAttribute('href', url)
+    link.setAttribute('download', `导入失败数据_${batchNo}.csv`)
+    link.style.visibility = 'hidden'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    ElMessage.success('失败数据下载成功')
+  }
 </script>
 
 <style lang="scss" scoped>
   .device-task-page {
-    // Device task page styles
+    :deep(.el-icon--upload) {
+      margin-bottom: 16px;
+      font-size: 67px;
+      color: var(--el-text-color-placeholder);
+    }
+
+    :deep(.el-upload__text) {
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+
+      em {
+        font-style: normal;
+        color: var(--el-color-primary);
+      }
+    }
   }
 </style>

src/views/asset-management/enterprise-devices/index.vue

@@ -90,7 +90,7 @@
                 :placeholder="$t('enterpriseDevices.form.deviceNosPlaceholder')"
                 @input="handleDeviceNosChange"
               />
-              <div style="color: var(--el-color-info); margin-top: 4px; font-size: 12px">
+              <div style="margin-top: 4px; font-size: 12px; color: var(--el-color-info)">
                 {{
                   $t('enterpriseDevices.form.selectedCount', {
                     count: allocateForm.device_nos?.length || 0
@@ -110,9 +110,7 @@
 
           <template #footer>
             <div class="dialog-footer">
-              <ElButton @click="allocateDialogVisible = false">{{
-                $t('common.cancel')
-              }}</ElButton>
+              <ElButton @click="allocateDialogVisible = false">{{ $t('common.cancel') }}</ElButton>
               <ElButton type="primary" @click="handleAllocate" :loading="allocateLoading">
                 {{ $t('common.confirm') }}
               </ElButton>
@@ -635,8 +633,8 @@
   .enterprise-devices-page {
     .card-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
     }
   }
 </style>

src/views/asset-management/iot-card-management/index.vue

@@ -19,13 +19,25 @@
         >
           <template #left>
             <ElButton type="primary" @click="showImportDialog">导入ICCID</ElButton>
-            <ElButton type="success" :disabled="selectedCards.length === 0" @click="showAllocateDialog">
+            <ElButton
+              type="success"
+              :disabled="selectedCards.length === 0"
+              @click="showAllocateDialog"
+            >
               批量分配
             </ElButton>
-            <ElButton type="warning" :disabled="selectedCards.length === 0" @click="showRecallDialog">
+            <ElButton
+              type="warning"
+              :disabled="selectedCards.length === 0"
+              @click="showRecallDialog"
+            >
               批量回收
             </ElButton>
-            <ElButton type="info" :disabled="selectedCards.length === 0" @click="showSeriesBindingDialog">
+            <ElButton
+              type="info"
+              :disabled="selectedCards.length === 0"
+              @click="showSeriesBindingDialog"
+            >
               批量设置套餐系列
             </ElButton>
             <ElButton type="primary" @click="cardDistribution">网卡分销</ElButton>
@@ -65,7 +77,11 @@
         >
           <ElForm ref="importFormRef" :model="importForm" :rules="importRules" label-width="100px">
             <ElFormItem label="运营商" prop="carrier_id">
-              <ElSelect v-model="importForm.carrier_id" placeholder="请选择运营商" style="width: 100%">
+              <ElSelect
+                v-model="importForm.carrier_id"
+                placeholder="请选择运营商"
+                style="width: 100%"
+              >
                 <ElOption label="中国移动" :value="1" />
                 <ElOption label="中国联通" :value="2" />
                 <ElOption label="中国电信" :value="3" />
@@ -91,7 +107,7 @@
                 <template #tip>
                   <div class="el-upload__tip">
                     <div>只支持上传CSV文件，且不超过10MB</div>
-                    <div style="color: var(--el-color-info); margin-top: 4px">
+                    <div style="margin-top: 4px; color: var(--el-color-info)">
                       CSV格式：ICCID,MSISDN（两列，逗号分隔，每行一条记录）
                     </div>
                   </div>
@@ -116,9 +132,18 @@
           width="600px"
           @close="handleAllocateDialogClose"
         >
-          <ElForm ref="allocateFormRef" :model="allocateForm" :rules="allocateRules" label-width="120px">
+          <ElForm
+            ref="allocateFormRef"
+            :model="allocateForm"
+            :rules="allocateRules"
+            label-width="120px"
+          >
             <ElFormItem label="目标店铺" prop="to_shop_id">
-              <ElSelect v-model="allocateForm.to_shop_id" placeholder="请选择目标店铺" style="width: 100%">
+              <ElSelect
+                v-model="allocateForm.to_shop_id"
+                placeholder="请选择目标店铺"
+                style="width: 100%"
+              >
                 <ElOption label="店铺A" :value="1" />
                 <ElOption label="店铺B" :value="2" />
                 <ElOption label="店铺C" :value="3" />
@@ -136,22 +161,40 @@
               <div>已选择 {{ selectedCards.length }} 张卡</div>
             </ElFormItem>
 
-            <ElFormItem v-if="allocateForm.selection_type === 'range'" label="起始ICCID" prop="iccid_start">
+            <ElFormItem
+              v-if="allocateForm.selection_type === 'range'"
+              label="起始ICCID"
+              prop="iccid_start"
+            >
               <ElInput v-model="allocateForm.iccid_start" placeholder="请输入起始ICCID" />
             </ElFormItem>
-            <ElFormItem v-if="allocateForm.selection_type === 'range'" label="结束ICCID" prop="iccid_end">
+            <ElFormItem
+              v-if="allocateForm.selection_type === 'range'"
+              label="结束ICCID"
+              prop="iccid_end"
+            >
               <ElInput v-model="allocateForm.iccid_end" placeholder="请输入结束ICCID" />
             </ElFormItem>
 
             <ElFormItem v-if="allocateForm.selection_type === 'filter'" label="运营商">
-              <ElSelect v-model="allocateForm.carrier_id" placeholder="请选择运营商" clearable style="width: 100%">
+              <ElSelect
+                v-model="allocateForm.carrier_id"
+                placeholder="请选择运营商"
+                clearable
+                style="width: 100%"
+              >
                 <ElOption label="中国移动" :value="1" />
                 <ElOption label="中国联通" :value="2" />
                 <ElOption label="中国电信" :value="3" />
               </ElSelect>
             </ElFormItem>
             <ElFormItem v-if="allocateForm.selection_type === 'filter'" label="卡状态">
-              <ElSelect v-model="allocateForm.status" placeholder="请选择状态" clearable style="width: 100%">
+              <ElSelect
+                v-model="allocateForm.status"
+                placeholder="请选择状态"
+                clearable
+                style="width: 100%"
+              >
                 <ElOption label="在库" :value="1" />
                 <ElOption label="已分销" :value="2" />
                 <ElOption label="已激活" :value="3" />
@@ -163,7 +206,12 @@
             </ElFormItem>
 
             <ElFormItem label="备注">
-              <ElInput v-model="allocateForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+              <ElInput
+                v-model="allocateForm.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入备注信息"
+              />
             </ElFormItem>
           </ElForm>
           <template #footer>
@@ -185,7 +233,11 @@
         >
           <ElForm ref="recallFormRef" :model="recallForm" :rules="recallRules" label-width="120px">
             <ElFormItem label="来源店铺" prop="from_shop_id">
-              <ElSelect v-model="recallForm.from_shop_id" placeholder="请选择来源店铺" style="width: 100%">
+              <ElSelect
+                v-model="recallForm.from_shop_id"
+                placeholder="请选择来源店铺"
+                style="width: 100%"
+              >
                 <ElOption label="店铺A" :value="1" />
                 <ElOption label="店铺B" :value="2" />
                 <ElOption label="店铺C" :value="3" />
@@ -203,15 +255,28 @@
               <div>已选择 {{ selectedCards.length }} 张卡</div>
             </ElFormItem>
 
-            <ElFormItem v-if="recallForm.selection_type === 'range'" label="起始ICCID" prop="iccid_start">
+            <ElFormItem
+              v-if="recallForm.selection_type === 'range'"
+              label="起始ICCID"
+              prop="iccid_start"
+            >
               <ElInput v-model="recallForm.iccid_start" placeholder="请输入起始ICCID" />
             </ElFormItem>
-            <ElFormItem v-if="recallForm.selection_type === 'range'" label="结束ICCID" prop="iccid_end">
+            <ElFormItem
+              v-if="recallForm.selection_type === 'range'"
+              label="结束ICCID"
+              prop="iccid_end"
+            >
               <ElInput v-model="recallForm.iccid_end" placeholder="请输入结束ICCID" />
             </ElFormItem>
 
             <ElFormItem v-if="recallForm.selection_type === 'filter'" label="运营商">
-              <ElSelect v-model="recallForm.carrier_id" placeholder="请选择运营商" clearable style="width: 100%">
+              <ElSelect
+                v-model="recallForm.carrier_id"
+                placeholder="请选择运营商"
+                clearable
+                style="width: 100%"
+              >
                 <ElOption label="中国移动" :value="1" />
                 <ElOption label="中国联通" :value="2" />
                 <ElOption label="中国电信" :value="3" />
@@ -222,7 +287,12 @@
             </ElFormItem>
 
             <ElFormItem label="备注">
-              <ElInput v-model="recallForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+              <ElInput
+                v-model="recallForm.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入备注信息"
+              />
             </ElFormItem>
           </ElForm>
           <template #footer>
@@ -236,14 +306,14 @@
         </ElDialog>
 
         <!-- 分配结果对话框 -->
-        <ElDialog
-          v-model="resultDialogVisible"
-          :title="resultTitle"
-          width="700px"
-        >
+        <ElDialog v-model="resultDialogVisible" :title="resultTitle" width="700px">
           <ElDescriptions :column="2" border>
-            <ElDescriptionsItem label="操作单号">{{ allocationResult.allocation_no }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="待处理总数">{{ allocationResult.total_count }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="操作单号">{{
+              allocationResult.allocation_no
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="待处理总数">{{
+              allocationResult.total_count
+            }}</ElDescriptionsItem>
             <ElDescriptionsItem label="成功数">
               <ElTag type="success">{{ allocationResult.success_count }}</ElTag>
             </ElDescriptionsItem>
@@ -252,7 +322,10 @@
             </ElDescriptionsItem>
           </ElDescriptions>
 
-          <div v-if="allocationResult.failed_items && allocationResult.failed_items.length > 0" style="margin-top: 20px">
+          <div
+            v-if="allocationResult.failed_items && allocationResult.failed_items.length > 0"
+            style="margin-top: 20px"
+          >
             <ElDivider content-position="left">失败项详情</ElDivider>
             <ElTable :data="allocationResult.failed_items" border max-height="300">
               <ElTableColumn prop="iccid" label="ICCID" width="180" />
@@ -274,7 +347,12 @@
           width="600px"
           @close="handleSeriesBindingDialogClose"
         >
-          <ElForm ref="seriesBindingFormRef" :model="seriesBindingForm" :rules="seriesBindingRules" label-width="120px">
+          <ElForm
+            ref="seriesBindingFormRef"
+            :model="seriesBindingForm"
+            :rules="seriesBindingRules"
+            label-width="120px"
+          >
             <ElFormItem label="已选择卡数">
               <div>已选择 {{ selectedCards.length }} 张卡</div>
             </ElFormItem>
@@ -307,11 +385,7 @@
         </ElDialog>
 
         <!-- 套餐系列绑定结果对话框 -->
-        <ElDialog
-          v-model="seriesBindingResultDialogVisible"
-          title="设置结果"
-          width="700px"
-        >
+        <ElDialog v-model="seriesBindingResultDialogVisible" title="设置结果" width="700px">
           <ElDescriptions :column="2" border>
             <ElDescriptionsItem label="成功数">
               <ElTag type="success">{{ seriesBindingResult.success_count }}</ElTag>
@@ -321,7 +395,10 @@
             </ElDescriptionsItem>
           </ElDescriptions>
 
-          <div v-if="seriesBindingResult.failed_items && seriesBindingResult.failed_items.length > 0" style="margin-top: 20px">
+          <div
+            v-if="seriesBindingResult.failed_items && seriesBindingResult.failed_items.length > 0"
+            style="margin-top: 20px"
+          >
             <ElDivider content-position="left">失败项详情</ElDivider>
             <ElTable :data="seriesBindingResult.failed_items" border max-height="300">
               <ElTableColumn prop="iccid" label="ICCID" width="180" />
@@ -331,11 +408,99 @@
 
           <template #footer>
             <div class="dialog-footer">
-              <ElButton type="primary" @click="seriesBindingResultDialogVisible = false">确定</ElButton>
+              <ElButton type="primary" @click="seriesBindingResultDialogVisible = false"
+                >确定</ElButton
+              >
             </div>
           </template>
         </ElDialog>
 
+        <!-- 卡详情对话框 -->
+        <ElDialog v-model="cardDetailDialogVisible" title="卡片详情" width="900px">
+          <div v-if="cardDetailLoading" style="text-align: center; padding: 40px">
+            <ElIcon class="is-loading" :size="40"><Loading /></ElIcon>
+            <div style="margin-top: 16px">加载中...</div>
+          </div>
+
+          <ElDescriptions v-else-if="currentCardDetail" :column="3" border>
+            <ElDescriptionsItem label="卡ID">{{ currentCardDetail.id }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="ICCID" :span="2">{{
+              currentCardDetail.iccid
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="卡接入号">{{
+              currentCardDetail.msisdn || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="运营商">{{
+              currentCardDetail.carrier_name || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="运营商类型">{{
+              getCarrierTypeText(currentCardDetail.carrier_type)
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="卡类型">{{
+              currentCardDetail.card_type || '--'
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="卡业务类型">{{
+              getCardCategoryText(currentCardDetail.card_category)
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="成本价">{{
+              formatCardPrice(currentCardDetail.cost_price)
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="分销价">{{
+              formatCardPrice(currentCardDetail.distribute_price)
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="状态">
+              <ElTag :type="getCardDetailStatusTagType(currentCardDetail.status)">
+                {{ getCardDetailStatusText(currentCardDetail.status) }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="激活状态">
+              <ElTag :type="currentCardDetail.activation_status === 1 ? 'success' : 'info'">
+                {{ currentCardDetail.activation_status === 1 ? '已激活' : '未激活' }}
+              </ElTag>
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="实名状态">
+              <ElTag :type="currentCardDetail.real_name_status === 1 ? 'success' : 'warning'">
+                {{ currentCardDetail.real_name_status === 1 ? '已实名' : '未实名' }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="网络状态">
+              <ElTag :type="currentCardDetail.network_status === 1 ? 'success' : 'danger'">
+                {{ currentCardDetail.network_status === 1 ? '开机' : '停机' }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="累计流量使用"
+              >{{ currentCardDetail.data_usage_mb }} MB</ElDescriptionsItem
+            >
+
+            <ElDescriptionsItem label="首次佣金">
+              <ElTag :type="currentCardDetail.first_commission_paid ? 'success' : 'info'">
+                {{ currentCardDetail.first_commission_paid ? '已支付' : '未支付' }}
+              </ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="累计充值">{{
+              formatCardPrice(currentCardDetail.accumulated_recharge)
+            }}</ElDescriptionsItem>
+            <ElDescriptionsItem label="创建时间">{{
+              formatDateTime(currentCardDetail.created_at)
+            }}</ElDescriptionsItem>
+
+            <ElDescriptionsItem label="更新时间" :span="2">{{
+              formatDateTime(currentCardDetail.updated_at)
+            }}</ElDescriptionsItem>
+          </ElDescriptions>
+
+          <ElEmpty v-else description="未找到卡片信息" />
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton type="primary" @click="cardDetailDialogVisible = false">关闭</ElButton>
+            </div>
+          </template>
+        </ElDialog>
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -343,9 +508,11 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
+  import { useRouter } from 'vue-router'
   import { CardService, StorageService } from '@/api/modules'
   import { ShopSeriesAllocationService } from '@/api/modules/shopSeriesAllocation'
-  import { ElMessage, ElTag, ElUpload } from 'element-plus'
+  import { ElMessage, ElTag, ElUpload, ElIcon } from 'element-plus'
+  import { Loading } from '@element-plus/icons-vue'
   import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
@@ -362,6 +529,7 @@
 
   defineOptions({ name: 'StandaloneCardList' })
 
+  const router = useRouter()
   const loading = ref(false)
   const importDialogVisible = ref(false)
   const importLoading = ref(false)
@@ -405,13 +573,17 @@
     failed_items: null
   })
 
+  // 卡详情弹窗相关
+  const cardDetailDialogVisible = ref(false)
+  const cardDetailLoading = ref(false)
+  const currentCardDetail = ref<any>(null)
+
   // 搜索表单初始值
   const initialSearchState = {
     status: undefined,
     carrier_id: undefined,
     iccid: '',
     msisdn: '',
-    batch_no: '',
     is_distributed: undefined
   }
 
@@ -576,15 +748,6 @@
         placeholder: '请输入卡接入号'
       }
     },
-    {
-      label: '批次号',
-      prop: 'batch_no',
-      type: 'input',
-      config: {
-        clearable: true,
-        placeholder: '请输入批次号'
-      }
-    },
     {
       label: '是否已分销',
       prop: 'is_distributed',
@@ -653,12 +816,88 @@
     }
   }
 
+  // 打开卡详情弹窗
+  const goToCardDetail = async (iccid: string) => {
+    cardDetailDialogVisible.value = true
+    cardDetailLoading.value = true
+    currentCardDetail.value = null
+
+    try {
+      const res = await CardService.getIotCardDetailByIccid(iccid)
+      if (res.code === 0 && res.data) {
+        currentCardDetail.value = res.data
+      } else {
+        ElMessage.error(res.message || '查询失败')
+        cardDetailDialogVisible.value = false
+      }
+    } catch (error: any) {
+      console.error('查询卡片详情失败:', error)
+      ElMessage.error(error?.message || '查询失败，请检查ICCID是否正确')
+      cardDetailDialogVisible.value = false
+    } finally {
+      cardDetailLoading.value = false
+    }
+  }
+
+  // 卡详情辅助函数
+  const getCarrierTypeText = (type: string) => {
+    const typeMap: Record<string, string> = {
+      CMCC: '中国移动',
+      CUCC: '中国联通',
+      CTCC: '中国电信',
+      CBN: '中国广电'
+    }
+    return typeMap[type] || type
+  }
+
+  const getCardCategoryText = (category: string) => {
+    const categoryMap: Record<string, string> = {
+      normal: '普通卡',
+      industry: '行业卡'
+    }
+    return categoryMap[category] || category
+  }
+
+  const getCardDetailStatusText = (status: number) => {
+    const statusMap: Record<number, string> = {
+      1: '在库',
+      2: '已分销',
+      3: '已激活',
+      4: '已停用'
+    }
+    return statusMap[status] || '未知'
+  }
+
+  const getCardDetailStatusTagType = (status: number) => {
+    const typeMap: Record<number, any> = {
+      1: 'info',
+      2: 'warning',
+      3: 'success',
+      4: 'danger'
+    }
+    return typeMap[status] || 'info'
+  }
+
+  const formatCardPrice = (price: number) => {
+    return `¥${(price / 100).toFixed(2)}`
+  }
+
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
     {
       prop: 'iccid',
       label: 'ICCID',
-      minWidth: 190
+      minWidth: 200,
+      formatter: (row: StandaloneIotCard) => {
+        return h(
+          'span',
+          {
+            style: { color: 'var(--el-color-primary)', cursor: 'pointer' },
+            onClick: () => goToCardDetail(row.iccid)
+          },
+          row.iccid
+        )
+      }
     },
     {
       prop: 'msisdn',
@@ -754,7 +993,7 @@
     {
       prop: 'created_at',
       label: '创建时间',
-      width: 160,
+      width: 180,
       formatter: (row: StandaloneIotCard) => formatDateTime(row.created_at)
     }
   ])
@@ -897,7 +1136,9 @@
           })
 
           if (importRes.code === 0) {
-            ElMessage.success(importRes.data.message || '导入任务已创建，请到任务管理页面查看导入进度')
+            ElMessage.success(
+              importRes.data.message || '导入任务已创建，请到任务管理页面查看导入进度'
+            )
             importDialogVisible.value = false
             getTableData()
           }
@@ -1167,7 +1408,9 @@
             } else if (res.data.success_count === 0) {
               ElMessage.error('套餐系列绑定设置失败')
             } else {
-              ElMessage.warning(`部分设置成功：成功 ${res.data.success_count} 项，失败 ${res.data.fail_count} 项`)
+              ElMessage.warning(
+                `部分设置成功：成功 ${res.data.success_count} 项，失败 ${res.data.fail_count} 项`
+              )
             }
           }
         } catch (error) {

src/views/asset-management/iot-card-query/index.vue

@@ -18,9 +18,7 @@
               @keyup.enter="handleSearch"
             >
               <template #append>
-                <ElButton type="primary" :loading="loading" @click="handleSearch">
-                  查询
-                </ElButton>
+                <ElButton type="primary" :loading="loading" @click="handleSearch"> 查询 </ElButton>
               </template>
             </ElInput>
           </ElFormItem>
@@ -44,9 +42,13 @@
         <ElDescriptionsItem label="卡接入号">{{ cardDetail.msisdn || '--' }}</ElDescriptionsItem>
         <ElDescriptionsItem label="运营商">{{ cardDetail.carrier_name }}</ElDescriptionsItem>
 
-        <ElDescriptionsItem label="运营商类型">{{ getCarrierTypeText(cardDetail.carrier_type) }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="运营商类型">{{
+          getCarrierTypeText(cardDetail.carrier_type)
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="卡类型">{{ cardDetail.card_type }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="卡业务类型">{{ getCardCategoryText(cardDetail.card_category) }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="卡业务类型">{{
+          getCardCategoryText(cardDetail.card_category)
+        }}</ElDescriptionsItem>
 
         <ElDescriptionsItem label="状态">
           <ElTag :type="getStatusTagType(cardDetail.status)">
@@ -73,11 +75,19 @@
         <ElDescriptionsItem label="供应商">{{ cardDetail.supplier || '--' }}</ElDescriptionsItem>
 
         <ElDescriptionsItem label="店铺名称">{{ cardDetail.shop_name || '--' }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="成本价">{{ formatPrice(cardDetail.cost_price) }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="分销价">{{ formatPrice(cardDetail.distribute_price) }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="成本价">{{
+          formatPrice(cardDetail.cost_price)
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="分销价">{{
+          formatPrice(cardDetail.distribute_price)
+        }}</ElDescriptionsItem>
 
-        <ElDescriptionsItem label="累计流量使用">{{ cardDetail.data_usage_mb }} MB</ElDescriptionsItem>
-        <ElDescriptionsItem label="激活时间">{{ cardDetail.activated_at || '--' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="累计流量使用"
+          >{{ cardDetail.data_usage_mb }} MB</ElDescriptionsItem
+        >
+        <ElDescriptionsItem label="激活时间">{{
+          cardDetail.activated_at || '--'
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="创建时间">{{ cardDetail.created_at }}</ElDescriptionsItem>
       </ElDescriptions>
     </ElCard>

src/views/asset-management/iot-card-task/index.vue

@@ -5,6 +5,7 @@
       <ArtSearchBar
         v-model:filter="searchForm"
         :items="searchFormItems"
+        :show-expand="false"
         @reset="handleReset"
         @search="handleSearch"
       ></ArtSearchBar>
@@ -15,7 +16,13 @@
           :columnList="columnOptions"
           v-model:columns="columnChecks"
           @refresh="handleRefresh"
-        />
+        >
+          <template #left>
+            <ElButton type="primary" :icon="Upload" @click="importDialogVisible = true">
+              批量导入IoT卡
+            </ElButton>
+          </template>
+        </ArtTableHeader>
 
         <!-- 表格 -->
         <ArtTable
@@ -36,25 +43,152 @@
         </ArtTable>
       </ElCard>
     </div>
+
+    <!-- 导入对话框 -->
+    <ElDialog v-model="importDialogVisible" title="批量导入IoT卡" width="700px" align-center>
+      <ElAlert type="info" :closable="false" style="margin-bottom: 20px">
+        <template #title>
+          <div style="line-height: 1.8">
+            <p><strong>导入说明：</strong></p>
+            <p>1. 请先下载 CSV 模板文件，按照模板格式填写IoT卡信息</p>
+            <p>2. 支持 CSV 格式（.csv），单次最多导入 1000 条</p>
+            <p>3. CSV 文件编码：UTF-8（推荐）或 GBK</p>
+            <p>4. 必填字段：iccid（ICCID）、msisdn（MSISDN/手机号）</p>
+            <p>5. 必须选择运营商</p>
+          </div>
+        </template>
+      </ElAlert>
+
+      <div style="margin-bottom: 20px">
+        <ElButton type="primary" :icon="Download" @click="downloadTemplate">
+          下载导入模板
+        </ElButton>
+      </div>
+
+      <ElFormItem label="运营商" required style="margin-bottom: 20px">
+        <ElSelect v-model="selectedCarrierId" placeholder="请选择运营商" style="width: 100%">
+          <ElOption label="中国移动" :value="1" />
+          <ElOption label="中国联通" :value="2" />
+          <ElOption label="中国电信" :value="3" />
+        </ElSelect>
+      </ElFormItem>
+
+      <ElUpload
+        ref="uploadRef"
+        drag
+        :auto-upload="false"
+        :on-change="handleFileChange"
+        :limit="1"
+        accept=".csv"
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将 CSV 文件拖到此处，或<em>点击选择</em></div>
+        <template #tip>
+          <div class="el-upload__tip">只能上传 CSV 文件，且不超过 10MB</div>
+        </template>
+      </ElUpload>
+
+      <template #footer>
+        <ElButton @click="handleCancelImport">取消</ElButton>
+        <ElButton
+          type="primary"
+          :loading="uploading"
+          :disabled="!fileList.length || !selectedCarrierId"
+          @click="submitUpload"
+        >
+          开始导入
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 任务详情对话框 -->
+    <ElDialog v-model="detailDialogVisible" title="IoT卡导入任务详情" width="900px" align-center>
+      <ElDescriptions :column="2" border>
+        <ElDescriptionsItem label="任务编号" :span="2">{{
+          currentDetail.task_no
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="状态">
+          <ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运营商">{{ currentDetail.carrier_name }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="文件名" :span="2">{{
+          currentDetail.file_name
+        }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="成功数">
+          <span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="失败数">
+          <span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="警告数">
+          <span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="错误信息" :span="2">{{
+          currentDetail.error_message
+        }}</ElDescriptionsItem>
+      </ElDescriptions>
+
+      <ElDivider content-position="left">失败明细</ElDivider>
+      <div
+        v-if="currentDetail.failed_items && currentDetail.failed_items.length"
+        style="max-height: 300px; overflow-y: auto"
+      >
+        <ElTable :data="currentDetail.failed_items" border size="small">
+          <ElTableColumn label="行号" type="index" width="80" :index="(index) => index + 1" />
+          <ElTableColumn label="ICCID" prop="iccid" width="200" />
+          <ElTableColumn label="MSISDN" prop="msisdn" width="150" />
+          <ElTableColumn label="失败原因" prop="reason" min-width="200">
+            <template #default="{ row }">
+              {{ row.reason || row.error || '未知错误' }}
+            </template>
+          </ElTableColumn>
+        </ElTable>
+      </div>
+      <ElEmpty v-else description="无失败记录" />
+
+      <template #footer>
+        <ElButton @click="detailDialogVisible = false">关闭</ElButton>
+        <ElButton
+          v-if="currentDetail.fail_count > 0"
+          type="primary"
+          :icon="Download"
+          @click="downloadFailData"
+        >
+          下载失败数据
+        </ElButton>
+      </template>
+    </ElDialog>
   </ArtTableFullScreen>
 </template>
 
 <script setup lang="ts">
   import { h } from 'vue'
-  import { useRouter } from 'vue-router'
   import { CardService } from '@/api/modules'
-  import { ElMessage, ElTag } from 'element-plus'
+  import { ElMessage, ElTag, ElFormItem, ElSelect, ElOption } from 'element-plus'
+  import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
+  import type { UploadInstance } from 'element-plus'
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { formatDateTime } from '@/utils/business/format'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { StorageService } from '@/api/modules/storage'
   import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
 
   defineOptions({ name: 'IotCardTask' })
 
-  const router = useRouter()
   const loading = ref(false)
   const tableRef = ref()
+  const uploadRef = ref<UploadInstance>()
+  const fileList = ref<File[]>([])
+  const uploading = ref(false)
+  const importDialogVisible = ref(false)
+  const detailDialogVisible = ref(false)
+  const selectedCarrierId = ref<number>()
 
   // 搜索表单初始值
   const initialSearchState = {
@@ -145,6 +279,7 @@
   ]
 
   const taskList = ref<IotCardImportTask[]>([])
+  const currentDetail = ref<any>({})
 
   // 获取状态标签类型
   const getStatusType = (status: IotCardImportTaskStatus) => {
@@ -163,14 +298,24 @@
   }
 
   // 查看详情
-  const viewDetail = (row: IotCardImportTask) => {
-    router.push({
-      path: '/asset-management/task-detail',
-      query: {
-        id: row.id,
-        task_type: 'card'
+  const viewDetail = async (row: IotCardImportTask) => {
+    try {
+      const res = await CardService.getIotCardImportTaskDetail(row.id)
+      if (res.code === 0 && res.data) {
+        currentDetail.value = {
+          ...res.data,
+          started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
+          completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
+          created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-',
+          carrier_name: res.data.carrier_name || '-',
+          error_message: res.data.error_message || '-'
+        }
+        detailDialogVisible.value = true
       }
-    })
+    } catch (error) {
+      console.error('获取任务详情失败:', error)
+      ElMessage.error('获取任务详情失败')
+    }
   }
 
   // 动态列配置
@@ -196,7 +341,8 @@
     {
       prop: 'file_name',
       label: '文件名',
-      minWidth: 250
+      minWidth: 250,
+      showOverflowTooltip: true
     },
     {
       prop: 'total_count',
@@ -206,15 +352,17 @@
     {
       prop: 'success_count',
       label: '成功数',
-      width: 80
+      width: 80,
+      formatter: (row: IotCardImportTask) => {
+        return h('span', { style: { color: 'var(--el-color-success)' } }, row.success_count)
+      }
     },
     {
       prop: 'fail_count',
       label: '失败数',
       width: 80,
       formatter: (row: IotCardImportTask) => {
-        const type = row.fail_count > 0 ? 'danger' : 'success'
-        return h(ElTag, { type, size: 'small' }, () => row.fail_count)
+        return h('span', { style: { color: 'var(--el-color-danger)' } }, row.fail_count)
       }
     },
     {
@@ -225,37 +373,57 @@
     {
       prop: 'started_at',
       label: '开始时间',
-      width: 160,
+      width: 180,
       formatter: (row: IotCardImportTask) => (row.started_at ? formatDateTime(row.started_at) : '-')
     },
     {
       prop: 'completed_at',
       label: '完成时间',
-      width: 160,
-      formatter: (row: IotCardImportTask) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
+      width: 180,
+      formatter: (row: IotCardImportTask) =>
+        row.completed_at ? formatDateTime(row.completed_at) : '-'
     },
     {
       prop: 'error_message',
       label: '错误信息',
       minWidth: 200,
+      showOverflowTooltip: true,
       formatter: (row: IotCardImportTask) => row.error_message || '-'
     },
     {
       prop: 'created_at',
       label: '创建时间',
-      width: 160,
+      width: 180,
       formatter: (row: IotCardImportTask) => formatDateTime(row.created_at)
     },
     {
       prop: 'operation',
       label: '操作',
-      width: 120,
+      width: 180,
       fixed: 'right',
       formatter: (row: IotCardImportTask) => {
-        return h(ArtButtonTable, {
-          text: '查看详情',
-          onClick: () => viewDetail(row)
-        })
+        const buttons = []
+
+        // 显示"查看详情"按钮
+        buttons.push(
+          h(ArtButtonTable, {
+            text: '详情',
+            onClick: () => viewDetail(row)
+          })
+        )
+
+        // 如果有失败数据，显示"失败数据"按钮
+        if (row.fail_count > 0) {
+          buttons.push(
+            h(ArtButtonTable, {
+              text: '失败数据',
+              type: 'danger',
+              onClick: () => downloadFailDataByRow(row)
+            })
+          )
+        }
+
+        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
       }
     }
   ])
@@ -330,10 +498,202 @@
     pagination.page = newCurrentPage
     getTableData()
   }
+
+  // 从行数据下载失败数据
+  const downloadFailDataByRow = async (row: IotCardImportTask) => {
+    try {
+      const res = await CardService.getIotCardImportTaskDetail(row.id)
+      if (res.code === 0 && res.data) {
+        const detail = res.data
+        downloadFailDataFromDetail(detail, row.task_no)
+      }
+    } catch (error) {
+      console.error('下载失败数据失败:', error)
+      ElMessage.error('下载失败数据失败')
+    }
+  }
+
+  // 下载失败数据（从详情对话框）
+  const downloadFailData = () => {
+    downloadFailDataFromDetail(currentDetail.value, currentDetail.value.task_no)
+  }
+
+  // 下载失败数据的通用方法
+  const downloadFailDataFromDetail = (detail: any, taskNo: string) => {
+    const failReasons =
+      detail.failed_items?.map((item: any, index: number) => ({
+        row: index + 1,
+        iccid: item.iccid || '-',
+        msisdn: item.msisdn || '-',
+        message: item.reason || item.error || '未知错误'
+      })) || []
+
+    if (failReasons.length === 0) {
+      ElMessage.warning('没有失败数据可下载')
+      return
+    }
+
+    const headers = ['行号', 'ICCID', 'MSISDN', '失败原因']
+    const csvRows = [
+      headers.join(','),
+      ...failReasons.map((item: any) =>
+        [item.row, item.iccid, item.msisdn, `"${item.message}"`].join(',')
+      )
+    ]
+    const csvContent = csvRows.join('\n')
+
+    const BOM = '\uFEFF'
+    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
+
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(blob)
+    link.setAttribute('href', url)
+    link.setAttribute('download', `IoT卡导入失败数据_${taskNo}.csv`)
+    link.style.visibility = 'hidden'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    ElMessage.success('失败数据下载成功')
+  }
+
+  // 下载模板
+  const downloadTemplate = () => {
+    const csvContent = [
+      'iccid,msisdn',
+      '89860123456789012345,13800138000',
+      '89860123456789012346,13800138001',
+      '89860123456789012347,13800138002'
+    ].join('\n')
+
+    const BOM = '\uFEFF'
+    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
+
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(blob)
+    link.setAttribute('href', url)
+    link.setAttribute('download', 'IoT卡导入模板.csv')
+    link.style.visibility = 'hidden'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    ElMessage.success('IoT卡导入模板下载成功')
+  }
+
+  // 文件选择变化
+  const handleFileChange = (uploadFile: any) => {
+    const maxSize = 10 * 1024 * 1024
+    if (uploadFile.raw && uploadFile.raw.size > maxSize) {
+      ElMessage.error('文件大小不能超过 10MB')
+      uploadRef.value?.clearFiles()
+      fileList.value = []
+      return
+    }
+
+    if (uploadFile.raw && !uploadFile.raw.name.endsWith('.csv')) {
+      ElMessage.error('只能上传 CSV 文件')
+      uploadRef.value?.clearFiles()
+      fileList.value = []
+      return
+    }
+
+    fileList.value = uploadFile.raw ? [uploadFile.raw] : []
+  }
+
+  // 清空文件
+  const clearFiles = () => {
+    uploadRef.value?.clearFiles()
+    fileList.value = []
+    selectedCarrierId.value = undefined
+  }
+
+  // 取消导入
+  const handleCancelImport = () => {
+    clearFiles()
+    importDialogVisible.value = false
+  }
+
+  // 提交上传
+  const submitUpload = async () => {
+    if (!selectedCarrierId.value) {
+      ElMessage.warning('请先选择运营商')
+      return
+    }
+
+    if (!fileList.value.length) {
+      ElMessage.warning('请先选择CSV文件')
+      return
+    }
+
+    const file = fileList.value[0]
+    uploading.value = true
+
+    try {
+      ElMessage.info('正在准备上传...')
+      const uploadUrlRes = await StorageService.getUploadUrl({
+        file_name: file.name,
+        content_type: 'text/csv',
+        purpose: 'iot_import'
+      })
+
+      if (uploadUrlRes.code !== 0) {
+        throw new Error(uploadUrlRes.msg || '获取上传地址失败')
+      }
+
+      const { upload_url, file_key } = uploadUrlRes.data
+
+      ElMessage.info('正在上传文件...')
+      await StorageService.uploadFile(upload_url, file, 'text/csv')
+
+      ElMessage.info('正在创建导入任务...')
+      const importRes = await CardService.importIotCards({
+        carrier_id: selectedCarrierId.value,
+        file_key,
+        batch_no: `IOT-${Date.now()}`
+      })
+
+      if (importRes.code !== 0) {
+        throw new Error(importRes.msg || '创建导入任务失败')
+      }
+
+      const taskNo = importRes.data.task_no
+
+      handleCancelImport()
+      getTableData()
+
+      ElMessage.success({
+        message: `导入任务已创建！任务编号：${taskNo}`,
+        duration: 3000,
+        showClose: true
+      })
+    } catch (error: any) {
+      console.error('IoT卡导入失败:', error)
+      ElMessage.error(error.message || 'IoT卡导入失败')
+    } finally {
+      uploading.value = false
+    }
+  }
 </script>
 
 <style lang="scss" scoped>
   .iot-card-task-page {
-    // IoT card task page styles
+    :deep(.el-icon--upload) {
+      margin-bottom: 16px;
+      font-size: 67px;
+      color: var(--el-text-color-placeholder);
+    }
+
+    :deep(.el-upload__text) {
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+
+      em {
+        font-style: normal;
+        color: var(--el-color-primary);
+      }
+    }
   }
 </style>

src/views/asset-management/task-detail/index.vue

@@ -62,18 +62,8 @@
           </ElDivider>
           <ElTable :data="taskDetail.failed_items" border style="width: 100%">
             <ElTableColumn prop="line" label="行号" width="100" />
-            <ElTableColumn
-              v-if="taskType === 'card'"
-              prop="iccid"
-              label="ICCID"
-              min-width="180"
-            />
-            <ElTableColumn
-              v-else
-              prop="device_no"
-              label="设备号"
-              min-width="180"
-            />
+            <ElTableColumn v-if="taskType === 'card'" prop="iccid" label="ICCID" min-width="180" />
+            <ElTableColumn v-else prop="device_no" label="设备号" min-width="180" />
             <ElTableColumn prop="reason" label="失败原因" min-width="300" />
           </ElTable>
         </div>
@@ -85,18 +75,8 @@
           </ElDivider>
           <ElTable :data="taskDetail.skipped_items" border style="width: 100%">
             <ElTableColumn prop="line" label="行号" width="100" />
-            <ElTableColumn
-              v-if="taskType === 'card'"
-              prop="iccid"
-              label="ICCID"
-              min-width="180"
-            />
-            <ElTableColumn
-              v-else
-              prop="device_no"
-              label="设备号"
-              min-width="180"
-            />
+            <ElTableColumn v-if="taskType === 'card'" prop="iccid" label="ICCID" min-width="180" />
+            <ElTableColumn v-else prop="device_no" label="设备号" min-width="180" />
             <ElTableColumn prop="reason" label="跳过原因" min-width="300" />
           </ElTable>
         </div>
@@ -108,7 +88,15 @@
 <script setup lang="ts">
   import { useRouter, useRoute } from 'vue-router'
   import { CardService, DeviceService } from '@/api/modules'
-  import { ElMessage, ElTag, ElDescriptions, ElDescriptionsItem, ElDivider, ElTable, ElTableColumn } from 'element-plus'
+  import {
+    ElMessage,
+    ElTag,
+    ElDescriptions,
+    ElDescriptionsItem,
+    ElDivider,
+    ElTable,
+    ElTableColumn
+  } from 'element-plus'
   import { formatDateTime } from '@/utils/business/format'
   import type { IotCardImportTaskDetail, IotCardImportTaskStatus } from '@/types/api/card'
   import type { DeviceImportTaskDetail } from '@/types/api/device'