fetch(add): 新增

src/views/account-management/enterprise-cards/index.vue

@@ -0,0 +1,795 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="enterprise-cards-page" id="table-full-screen">
+      <!-- 企业信息卡片 -->
+      <ElCard shadow="never" style="margin-bottom: 16px">
+        <template #header>
+          <div class="card-header">
+            <span>企业信息</span>
+            <ElButton @click="goBack">返回</ElButton>
+          </div>
+        </template>
+        <ElDescriptions :column="3" border v-if="enterpriseInfo">
+          <ElDescriptionsItem label="企业名称">{{ enterpriseInfo.enterprise_name }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="企业编号">{{ enterpriseInfo.enterprise_code }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="联系人">{{ enterpriseInfo.contact_name }}</ElDescriptionsItem>
+        </ElDescriptions>
+      </ElCard>
+
+      <!-- 搜索栏 -->
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        @reset="handleReset"
+        @search="handleSearch"
+      ></ArtSearchBar>
+
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        >
+          <template #left>
+            <ElButton type="primary" @click="showAllocateDialog">授权卡</ElButton>
+            <ElButton
+              type="warning"
+              :disabled="selectedCards.length === 0"
+              @click="showRecallDialog"
+            >
+              批量回收
+            </ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="cardList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @selection-change="handleSelectionChange"
+        >
+          <template #default>
+            <ElTableColumn type="selection" width="55" />
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+
+        <!-- 授权卡对话框 -->
+        <ElDialog
+          v-model="allocateDialogVisible"
+          title="授权卡给企业"
+          width="700px"
+          @close="handleAllocateDialogClose"
+        >
+          <ElForm ref="allocateFormRef" :model="allocateForm" :rules="allocateRules" label-width="120px">
+            <ElFormItem label="ICCID列表" prop="iccids">
+              <ElInput
+                v-model="iccidsText"
+                type="textarea"
+                :rows="6"
+                placeholder="请输入ICCID，每行一个或用逗号分隔"
+                @input="handleIccidsChange"
+              />
+              <div style="color: var(--el-color-info); margin-top: 4px; font-size: 12px">
+                已输入 {{ allocateForm.iccids?.length || 0 }} 个ICCID
+              </div>
+            </ElFormItem>
+            <ElFormItem label="确认设备绑定">
+              <ElCheckbox v-model="allocateForm.confirm_device_bundles">
+                我确认已了解设备绑定关系，同意一起授权
+              </ElCheckbox>
+            </ElFormItem>
+          </ElForm>
+
+          <!-- 预检结果 -->
+          <div v-if="previewData" style="margin-top: 20px">
+            <ElDivider content-position="left">预检结果</ElDivider>
+            <ElDescriptions :column="2" border>
+              <ElDescriptionsItem label="待授权卡数">
+                {{ previewData.summary.total_cards }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="可授权卡数">
+                <ElTag type="success">{{ previewData.summary.valid_cards }}</ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="独立卡数">
+                {{ previewData.summary.standalone_cards }}
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="设备绑定数">
+                <ElTag type="warning">{{ previewData.summary.device_bundles }}</ElTag>
+              </ElDescriptionsItem>
+              <ElDescriptionsItem label="失败数" :span="2">
+                <ElTag type="danger">{{ previewData.summary.failed_cards }}</ElTag>
+              </ElDescriptionsItem>
+            </ElDescriptions>
+
+            <!-- 失败项详情 -->
+            <div v-if="previewData.failed_items && previewData.failed_items.length > 0" style="margin-top: 16px">
+              <ElAlert title="以下ICCID无法授权" type="error" :closable="false" style="margin-bottom: 8px" />
+              <ElTable :data="previewData.failed_items" border max-height="200">
+                <ElTableColumn prop="iccid" label="ICCID" width="180" />
+                <ElTableColumn prop="reason" label="失败原因" />
+              </ElTable>
+            </div>
+
+            <!-- 设备绑定详情 -->
+            <div v-if="previewData.device_bundles && previewData.device_bundles.length > 0" style="margin-top: 16px">
+              <ElAlert
+                title="以下ICCID与设备绑定，授权后设备也将一起授权给企业"
+                type="warning"
+                :closable="false"
+                style="margin-bottom: 8px"
+              />
+              <ElTable :data="previewData.device_bundles" border max-height="200">
+                <ElTableColumn prop="device_imei" label="设备IMEI" width="180" />
+                <ElTableColumn label="绑定卡数">
+                  <template #default="{ row }">
+                    {{ row.iccids?.length || 0 }}
+                  </template>
+                </ElTableColumn>
+                <ElTableColumn label="ICCID列表">
+                  <template #default="{ row }">
+                    {{ row.iccids?.join(', ') }}
+                  </template>
+                </ElTableColumn>
+              </ElTable>
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="allocateDialogVisible = false">取消</ElButton>
+              <ElButton @click="handlePreview" :loading="previewLoading">预检</ElButton>
+              <ElButton
+                type="primary"
+                @click="handleAllocate"
+                :loading="allocateLoading"
+                :disabled="!previewData || previewData.summary.valid_cards === 0"
+              >
+                确认授权
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+
+        <!-- 批量回收对话框 -->
+        <ElDialog
+          v-model="recallDialogVisible"
+          title="批量回收卡授权"
+          width="600px"
+          @close="handleRecallDialogClose"
+        >
+          <ElForm ref="recallFormRef" :model="recallForm" :rules="recallRules">
+            <ElFormItem label="回收卡数">
+              <div>已选择 {{ selectedCards.length }} 张卡</div>
+            </ElFormItem>
+            <ElFormItem label="回收原因">
+              <ElInput
+                v-model="recallForm.reason"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入回收原因(可选)"
+              />
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="recallDialogVisible = false">取消</ElButton>
+              <ElButton type="primary" @click="handleRecall" :loading="recallLoading">
+                确认回收
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+
+        <!-- 结果对话框 -->
+        <ElDialog v-model="resultDialogVisible" :title="resultTitle" width="700px">
+          <ElDescriptions :column="2" border>
+            <ElDescriptionsItem label="成功数">
+              <ElTag type="success">{{ operationResult.success_count }}</ElTag>
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="失败数">
+              <ElTag type="danger">{{ operationResult.fail_count }}</ElTag>
+            </ElDescriptionsItem>
+          </ElDescriptions>
+
+          <div
+            v-if="operationResult.failed_items && operationResult.failed_items.length > 0"
+            style="margin-top: 20px"
+          >
+            <ElDivider content-position="left">失败项详情</ElDivider>
+            <ElTable :data="operationResult.failed_items" border max-height="300">
+              <ElTableColumn prop="iccid" label="ICCID" width="180" />
+              <ElTableColumn prop="reason" label="失败原因" />
+            </ElTable>
+          </div>
+
+          <!-- 显示授权的设备 -->
+          <div
+            v-if="operationResult.allocated_devices && operationResult.allocated_devices.length > 0"
+            style="margin-top: 20px"
+          >
+            <ElDivider content-position="left">已授权设备</ElDivider>
+            <ElTable :data="operationResult.allocated_devices" border max-height="200">
+              <ElTableColumn prop="device_imei" label="设备IMEI" width="180" />
+              <ElTableColumn label="绑定卡数">
+                <template #default="{ row }">
+                  {{ row.iccids?.length || 0 }}
+                </template>
+              </ElTableColumn>
+            </ElTable>
+          </div>
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton type="primary" @click="resultDialogVisible = false">确定</ElButton>
+            </div>
+          </template>
+        </ElDialog>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { EnterpriseService } from '@/api/modules'
+  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } 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 type {
+    EnterpriseCardItem,
+    AllocateCardsPreviewResponse,
+    AllocateCardsResponse,
+    RecallCardsResponse,
+    FailedItem
+  } from '@/types/api/enterpriseCard'
+  import type { EnterpriseItem } from '@/types/api'
+
+  defineOptions({ name: 'EnterpriseCards' })
+
+  const route = useRoute()
+  const router = useRouter()
+  const loading = ref(false)
+  const allocateDialogVisible = ref(false)
+  const allocateLoading = ref(false)
+  const previewLoading = ref(false)
+  const recallDialogVisible = ref(false)
+  const recallLoading = ref(false)
+  const resultDialogVisible = ref(false)
+  const resultTitle = ref('')
+  const tableRef = ref()
+  const allocateFormRef = ref<FormInstance>()
+  const recallFormRef = ref<FormInstance>()
+  const selectedCards = ref<EnterpriseCardItem[]>([])
+  const enterpriseId = ref<number>(0)
+  const enterpriseInfo = ref<EnterpriseItem | null>(null)
+  const iccidsText = ref('')
+  const previewData = ref<AllocateCardsPreviewResponse | null>(null)
+  const operationResult = ref<AllocateCardsResponse | RecallCardsResponse>({
+    success_count: 0,
+    fail_count: 0,
+    failed_items: null,
+    allocated_devices: null
+  })
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    iccid: '',
+    msisdn: '',
+    status: undefined as number | undefined,
+    authorization_status: undefined as number | undefined
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 授权表单
+  const allocateForm = reactive({
+    iccids: [] as string[],
+    confirm_device_bundles: false
+  })
+
+  // 授权表单验证规则
+  const allocateRules = reactive<FormRules>({
+    iccids: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          if (!value || value.length === 0) {
+            callback(new Error('请输入至少一个ICCID'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'change'
+      }
+    ]
+  })
+
+  // 回收表单
+  const recallForm = reactive({
+    reason: ''
+  })
+
+  // 回收表单验证规则
+  const recallRules = reactive<FormRules>({})
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: 'ICCID',
+      prop: 'iccid',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入ICCID'
+      }
+    },
+    {
+      label: '手机号',
+      prop: 'msisdn',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入手机号'
+      }
+    },
+    {
+      label: '卡状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '激活', value: 1 },
+        { label: '停机', value: 2 }
+      ]
+    },
+    {
+      label: '授权状态',
+      prop: 'authorization_status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '有效', value: 1 },
+        { label: '已回收', value: 0 }
+      ]
+    }
+  ]
+
+  // 列配置
+  const columnOptions = [
+    { label: 'ICCID', prop: 'iccid' },
+    { label: '手机号', prop: 'msisdn' },
+    { label: '运营商', prop: 'carrier_name' },
+    { label: '卡状态', prop: 'status' },
+    { label: '授权状态', prop: 'authorization_status' },
+    { label: '授权时间', prop: 'authorized_at' },
+    { label: '授权人', prop: 'authorizer_name' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  const cardList = ref<EnterpriseCardItem[]>([])
+
+  // 获取卡状态标签类型
+  const getCardStatusTag = (status: number) => {
+    return status === 1 ? 'success' : 'danger'
+  }
+
+  // 获取卡状态文本
+  const getCardStatusText = (status: number) => {
+    return status === 1 ? '激活' : '停机'
+  }
+
+  // 获取授权状态标签类型
+  const getAuthStatusTag = (status: number) => {
+    return status === 1 ? 'success' : 'info'
+  }
+
+  // 获取授权状态文本
+  const getAuthStatusText = (status: number) => {
+    return status === 1 ? '有效' : '已回收'
+  }
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'iccid',
+      label: 'ICCID',
+      minWidth: 180
+    },
+    {
+      prop: 'msisdn',
+      label: '手机号',
+      width: 120
+    },
+    {
+      prop: 'carrier_name',
+      label: '运营商',
+      width: 100
+    },
+    {
+      prop: 'status',
+      label: '卡状态',
+      width: 100,
+      formatter: (row: EnterpriseCardItem) => {
+        return h(ElTag, { type: getCardStatusTag(row.status) }, () => getCardStatusText(row.status))
+      }
+    },
+    {
+      prop: 'authorization_status',
+      label: '授权状态',
+      width: 100,
+      formatter: (row: EnterpriseCardItem) => {
+        return h(
+          ElTag,
+          { type: getAuthStatusTag(row.authorization_status) },
+          () => getAuthStatusText(row.authorization_status)
+        )
+      }
+    },
+    {
+      prop: 'authorized_at',
+      label: '授权时间',
+      width: 180,
+      formatter: (row: EnterpriseCardItem) =>
+        row.authorized_at ? formatDateTime(row.authorized_at) : '-'
+    },
+    {
+      prop: 'authorizer_name',
+      label: '授权人',
+      width: 120
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 150,
+      fixed: 'right',
+      formatter: (row: EnterpriseCardItem) => {
+        return h('div', { style: 'display: flex; gap: 8px;' }, [
+          row.status === 2
+            ? h(ArtButtonTable, {
+                text: '复机',
+                onClick: () => handleResume(row)
+              })
+            : h(ArtButtonTable, {
+                text: '停机',
+                onClick: () => handleSuspend(row)
+              })
+        ])
+      }
+    }
+  ])
+
+  onMounted(() => {
+    const id = route.query.id
+    if (id) {
+      enterpriseId.value = Number(id)
+      getEnterpriseInfo()
+      getTableData()
+    } else {
+      ElMessage.error('缺少企业ID')
+      goBack()
+    }
+  })
+
+  // 获取企业信息
+  const getEnterpriseInfo = async () => {
+    try {
+      const res = await EnterpriseService.getEnterprises({
+        page: 1,
+        page_size: 1,
+        id: enterpriseId.value
+      })
+      if (res.code === 0 && res.data.items && res.data.items.length > 0) {
+        enterpriseInfo.value = res.data.items[0]
+      }
+    } catch (error) {
+      console.error('获取企业信息失败:', error)
+    }
+  }
+
+  // 获取企业卡列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params: any = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        iccid: searchForm.iccid || undefined,
+        msisdn: searchForm.msisdn || undefined,
+        status: searchForm.status,
+        authorization_status: searchForm.authorization_status
+      }
+
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await EnterpriseService.getEnterpriseCards(enterpriseId.value, params)
+      if (res.code === 0) {
+        cardList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取企业卡列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 刷新表格
+  const handleRefresh = () => {
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 表格选择变化
+  const handleSelectionChange = (selection: EnterpriseCardItem[]) => {
+    selectedCards.value = selection
+  }
+
+  // 返回
+  const goBack = () => {
+    router.back()
+  }
+
+  // 显示授权对话框
+  const showAllocateDialog = () => {
+    allocateDialogVisible.value = true
+    iccidsText.value = ''
+    allocateForm.iccids = []
+    allocateForm.confirm_device_bundles = false
+    previewData.value = null
+    if (allocateFormRef.value) {
+      allocateFormRef.value.resetFields()
+    }
+  }
+
+  // 处理ICCID输入变化
+  const handleIccidsChange = () => {
+    // 解析输入的ICCID，支持逗号、空格、换行分隔
+    const iccids = iccidsText.value
+      .split(/[,\s\n]+/)
+      .map((iccid) => iccid.trim())
+      .filter((iccid) => iccid.length > 0)
+    allocateForm.iccids = iccids
+    // 清除预检结果
+    previewData.value = null
+  }
+
+  // 预检
+  const handlePreview = async () => {
+    if (!allocateFormRef.value) return
+
+    await allocateFormRef.value.validate(async (valid) => {
+      if (valid) {
+        previewLoading.value = true
+        try {
+          const res = await EnterpriseService.previewAllocateCards(enterpriseId.value, {
+            iccids: allocateForm.iccids
+          })
+          if (res.code === 0) {
+            previewData.value = res.data
+            ElMessage.success('预检完成')
+          }
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('预检失败')
+        } finally {
+          previewLoading.value = false
+        }
+      }
+    })
+  }
+
+  // 执行授权
+  const handleAllocate = async () => {
+    if (!allocateFormRef.value) return
+
+    if (!previewData.value) {
+      ElMessage.warning('请先进行预检')
+      return
+    }
+
+    if (previewData.value.summary.valid_cards === 0) {
+      ElMessage.warning('没有可授权的卡')
+      return
+    }
+
+    // 如果有设备绑定且未确认，提示用户
+    if (
+      previewData.value.device_bundles &&
+      previewData.value.device_bundles.length > 0 &&
+      !allocateForm.confirm_device_bundles
+    ) {
+      ElMessage.warning('请确认设备绑定关系')
+      return
+    }
+
+    allocateLoading.value = true
+    try {
+      const res = await EnterpriseService.allocateCards(enterpriseId.value, {
+        iccids: allocateForm.iccids,
+        confirm_device_bundles: allocateForm.confirm_device_bundles || undefined
+      })
+
+      if (res.code === 0) {
+        operationResult.value = res.data
+        resultTitle.value = '授权结果'
+        allocateDialogVisible.value = false
+        resultDialogVisible.value = true
+        getTableData()
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('授权失败')
+    } finally {
+      allocateLoading.value = false
+    }
+  }
+
+  // 关闭授权对话框
+  const handleAllocateDialogClose = () => {
+    if (allocateFormRef.value) {
+      allocateFormRef.value.resetFields()
+    }
+    previewData.value = null
+  }
+
+  // 显示批量回收对话框
+  const showRecallDialog = () => {
+    if (selectedCards.value.length === 0) {
+      ElMessage.warning('请先选择要回收的卡')
+      return
+    }
+    recallDialogVisible.value = true
+    recallForm.reason = ''
+    if (recallFormRef.value) {
+      recallFormRef.value.resetFields()
+    }
+  }
+
+  // 执行批量回收
+  const handleRecall = async () => {
+    if (!recallFormRef.value) return
+
+    await recallFormRef.value.validate(async (valid) => {
+      if (valid) {
+        recallLoading.value = true
+        try {
+          const res = await EnterpriseService.recallCards(enterpriseId.value, {
+            card_ids: selectedCards.value.map((card) => card.id)
+          })
+
+          if (res.code === 0) {
+            operationResult.value = res.data
+            resultTitle.value = '回收结果'
+            recallDialogVisible.value = false
+            resultDialogVisible.value = true
+            // 清空选择
+            if (tableRef.value) {
+              tableRef.value.clearSelection()
+            }
+            selectedCards.value = []
+            getTableData()
+          }
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('回收失败')
+        } finally {
+          recallLoading.value = false
+        }
+      }
+    })
+  }
+
+  // 关闭批量回收对话框
+  const handleRecallDialogClose = () => {
+    if (recallFormRef.value) {
+      recallFormRef.value.resetFields()
+    }
+  }
+
+  // 停机卡
+  const handleSuspend = (row: EnterpriseCardItem) => {
+    ElMessageBox.confirm('确定要停机该卡吗？', '停机卡', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        try {
+          await EnterpriseService.suspendCard(enterpriseId.value, row.id)
+          ElMessage.success('停机成功')
+          getTableData()
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('停机失败')
+        }
+      })
+      .catch(() => {})
+  }
+
+  // 复机卡
+  const handleResume = (row: EnterpriseCardItem) => {
+    ElMessageBox.confirm('确定要复机该卡吗？', '复机卡', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'info'
+    })
+      .then(async () => {
+        try {
+          await EnterpriseService.resumeCard(enterpriseId.value, row.id)
+          ElMessage.success('复机成功')
+          getTableData()
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('复机失败')
+        }
+      })
+      .catch(() => {})
+  }
+</script>
+
+<style lang="scss" scoped>
+  .enterprise-cards-page {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+</style>

src/views/account-management/enterprise-customer/index.vue

@@ -200,6 +200,7 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
+  import { useRouter } from 'vue-router'
   import { EnterpriseService, ShopService } from '@/api/modules'
   import { ElMessage, ElMessageBox, ElTag, ElSwitch } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
@@ -211,6 +212,8 @@
 
   defineOptions({ name: 'EnterpriseCustomer' })
 
+  const router = useRouter()
+
   const dialogVisible = ref(false)
   const passwordDialogVisible = ref(false)
   const loading = ref(false)
@@ -433,10 +436,14 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 160,
+      width: 230,
       fixed: 'right',
       formatter: (row: EnterpriseItem) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
+          h(ArtButtonTable, {
+            icon: '&#xe679;',
+            onClick: () => manageCards(row)
+          }),
           h(ArtButtonTable, {
             icon: '&#xe72b;',
             onClick: () => showPasswordDialog(row)
@@ -696,6 +703,14 @@
       console.error(error)
     }
   }
+
+  // 卡管理
+  const manageCards = (row: EnterpriseItem) => {
+    router.push({
+      path: '/account-management/enterprise-cards',
+      query: { id: row.id }
+    })
+  }
 </script>
 
 <style lang="scss" scoped>

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

@@ -5,6 +5,7 @@
       <ArtSearchBar
         v-model:filter="formFilters"
         :items="formItems"
+        label-width="90"
         @reset="handleReset"
         @search="handleSearch"
       ></ArtSearchBar>
@@ -142,7 +143,7 @@
         clearable: true,
         startPlaceholder: '开始时间',
         endPlaceholder: '结束时间',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+        valueFormat: 'YYYY-MM-DDTHH:mm:ssZ'
       }
     }
   ]

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="authorization-detail-page">
+    <ElCard shadow="never" v-loading="loading">
+      <template #header>
+        <div class="card-header">
+          <span>授权记录详情</span>
+          <ElButton @click="goBack">返回</ElButton>
+        </div>
+      </template>
+
+      <ElDescriptions v-if="authorizationDetail" :column="2" border>
+        <ElDescriptionsItem label="授权记录ID">{{ authorizationDetail.id }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="状态">
+          <ElTag :type="authorizationDetail.status === 1 ? 'success' : 'info'">
+            {{ authorizationDetail.status === 1 ? '有效' : '已回收' }}
+          </ElTag>
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="ICCID">{{ authorizationDetail.iccid }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="手机号">{{ authorizationDetail.msisdn }}</ElDescriptionsItem>
+
+        <ElDescriptionsItem label="企业名称">
+          {{ authorizationDetail.enterprise_name }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="企业ID">
+          {{ authorizationDetail.enterprise_id }}
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="授权人">
+          {{ authorizationDetail.authorizer_name }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="授权人类型">
+          <ElTag :type="authorizationDetail.authorizer_type === 2 ? 'primary' : 'success'">
+            {{ authorizationDetail.authorizer_type === 2 ? '平台' : '代理' }}
+          </ElTag>
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="授权时间">
+          {{ formatDateTime(authorizationDetail.authorized_at) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="授权人ID">
+          {{ authorizationDetail.authorized_by }}
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="回收人">
+          {{ authorizationDetail.revoker_name || '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="回收时间">
+          {{ authorizationDetail.revoked_at ? formatDateTime(authorizationDetail.revoked_at) : '-' }}
+        </ElDescriptionsItem>
+
+        <ElDescriptionsItem label="备注" :span="2">
+          {{ authorizationDetail.remark || '-' }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRoute, useRouter } from 'vue-router'
+  import { AuthorizationService } from '@/api/modules'
+  import { ElMessage, ElTag } from 'element-plus'
+  import { formatDateTime } from '@/utils/business/format'
+  import type { AuthorizationItem } from '@/types/api/authorization'
+
+  defineOptions({ name: 'AuthorizationDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+  const loading = ref(false)
+  const authorizationDetail = ref<AuthorizationItem | null>(null)
+
+  onMounted(() => {
+    const id = route.query.id
+    if (id) {
+      getAuthorizationDetail(Number(id))
+    } else {
+      ElMessage.error('缺少授权记录ID')
+      goBack()
+    }
+  })
+
+  // 获取授权记录详情
+  const getAuthorizationDetail = async (id: number) => {
+    loading.value = true
+    try {
+      const res = await AuthorizationService.getAuthorizationDetail(id)
+      if (res.code === 0) {
+        authorizationDetail.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取授权记录详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 返回
+  const goBack = () => {
+    router.back()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .authorization-detail-page {
+    padding: 20px;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+</style>

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

@@ -0,0 +1,418 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="authorization-records-page" id="table-full-screen">
+      <!-- 搜索栏 -->
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        label-width="85"
+        @reset="handleReset"
+        @search="handleSearch"
+      ></ArtSearchBar>
+
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        />
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="authorizationList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+
+        <!-- 修改备注对话框 -->
+        <ElDialog v-model="remarkDialogVisible" title="修改备注" width="500px">
+          <ElForm ref="remarkFormRef" :model="remarkForm" :rules="remarkRules" label-width="80px">
+            <ElFormItem label="备注" prop="remark">
+              <ElInput
+                v-model="remarkForm.remark"
+                type="textarea"
+                :rows="4"
+                placeholder="请输入备注（最多500字）"
+                maxlength="500"
+                show-word-limit
+              />
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="remarkDialogVisible = false">取消</ElButton>
+              <ElButton type="primary" @click="handleSubmitRemark" :loading="remarkLoading">
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { AuthorizationService } from '@/api/modules'
+  import { ElMessage, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } 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 type {
+    AuthorizationItem,
+    AuthorizationStatus,
+    AuthorizerType
+  } from '@/types/api/authorization'
+  import { CommonStatus } from '@/config/constants'
+
+  defineOptions({ name: 'AuthorizationRecords' })
+
+  const router = useRouter()
+  const loading = ref(false)
+  const remarkDialogVisible = ref(false)
+  const remarkLoading = ref(false)
+  const tableRef = ref()
+  const remarkFormRef = ref<FormInstance>()
+  const currentRecordId = ref<number>(0)
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    enterprise_id: undefined as number | undefined,
+    iccid: '',
+    authorizer_type: undefined as AuthorizerType | undefined,
+    status: undefined as AuthorizationStatus | undefined,
+    dateRange: [] as string[]
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 备注表单
+  const remarkForm = reactive({
+    remark: ''
+  })
+
+  // 备注表单验证规则
+  const remarkRules = reactive<FormRules>({
+    remark: [{ max: 500, message: '备注不能超过500个字符', trigger: 'blur' }]
+  })
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: 'ICCID',
+      prop: 'iccid',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入ICCID'
+      }
+    },
+    {
+      label: '授权人类型',
+      prop: 'authorizer_type',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '平台', value: 2 },
+        { label: '代理', value: 3 }
+      ]
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '有效', value: 1 },
+        { label: '已回收', value: 0 }
+      ]
+    },
+    {
+      label: '授权时间',
+      prop: 'dateRange',
+      type: 'daterange',
+      config: {
+        type: 'daterange',
+        startPlaceholder: '开始日期',
+        endPlaceholder: '结束日期',
+        valueFormat: 'YYYY-MM-DD'
+      }
+    }
+  ]
+
+  // 列配置
+  const columnOptions = [
+    { label: 'ID', prop: 'id' },
+    { label: 'ICCID', prop: 'iccid' },
+    { label: '手机号', prop: 'msisdn' },
+    { label: '企业名称', prop: 'enterprise_name' },
+    { label: '授权人', prop: 'authorizer_name' },
+    { label: '授权人类型', prop: 'authorizer_type' },
+    { label: '授权时间', prop: 'authorized_at' },
+    { label: '状态', prop: 'status' },
+    { label: '回收人', prop: 'revoker_name' },
+    { label: '回收时间', prop: 'revoked_at' },
+    { label: '备注', prop: 'remark' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  const authorizationList = ref<AuthorizationItem[]>([])
+
+  // 获取授权人类型标签类型
+  const getAuthorizerTypeTag = (type: AuthorizerType) => {
+    return type === 2 ? 'primary' : 'success'
+  }
+
+  // 获取授权人类型文本
+  const getAuthorizerTypeText = (type: AuthorizerType) => {
+    return type === 2 ? '平台' : '代理'
+  }
+
+  // 获取状态标签类型
+  const getStatusTag = (status: AuthorizationStatus) => {
+    return status === 1 ? 'success' : 'info'
+  }
+
+  // 获取状态文本
+  const getStatusText = (status: AuthorizationStatus) => {
+    return status === 1 ? '有效' : '已回收'
+  }
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'id',
+      label: 'ID',
+      width: 80
+    },
+    {
+      prop: 'iccid',
+      label: 'ICCID',
+      minWidth: 180
+    },
+    {
+      prop: 'msisdn',
+      label: '手机号',
+      width: 120
+    },
+    {
+      prop: 'enterprise_name',
+      label: '企业名称',
+      minWidth: 150
+    },
+    {
+      prop: 'authorizer_name',
+      label: '授权人',
+      width: 120
+    },
+    {
+      prop: 'authorizer_type',
+      label: '授权人类型',
+      width: 100,
+      formatter: (row: AuthorizationItem) => {
+        return h(
+          ElTag,
+          { type: getAuthorizerTypeTag(row.authorizer_type) },
+          () => getAuthorizerTypeText(row.authorizer_type)
+        )
+      }
+    },
+    {
+      prop: 'authorized_at',
+      label: '授权时间',
+      width: 180,
+      formatter: (row: AuthorizationItem) => formatDateTime(row.authorized_at)
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: AuthorizationItem) => {
+        return h(ElTag, { type: getStatusTag(row.status) }, () => getStatusText(row.status))
+      }
+    },
+    {
+      prop: 'revoker_name',
+      label: '回收人',
+      width: 120,
+      formatter: (row: AuthorizationItem) => row.revoker_name || '-'
+    },
+    {
+      prop: 'revoked_at',
+      label: '回收时间',
+      width: 180,
+      formatter: (row: AuthorizationItem) => (row.revoked_at ? formatDateTime(row.revoked_at) : '-')
+    },
+    {
+      prop: 'remark',
+      label: '备注',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: AuthorizationItem) => row.remark || '-'
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 150,
+      fixed: 'right',
+      formatter: (row: AuthorizationItem) => {
+        return h('div', { style: 'display: flex; gap: 8px;' }, [
+          h(ArtButtonTable, {
+            type: 'view',
+            onClick: () => viewDetail(row)
+          }),
+          h(ArtButtonTable, {
+            type: 'edit',
+            onClick: () => showRemarkDialog(row)
+          })
+        ])
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+  })
+
+  // 获取授权记录列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params: any = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        iccid: searchForm.iccid || undefined,
+        authorizer_type: searchForm.authorizer_type,
+        status: searchForm.status
+      }
+
+      // 处理日期范围
+      if (searchForm.dateRange && searchForm.dateRange.length === 2) {
+        params.start_time = searchForm.dateRange[0]
+        params.end_time = searchForm.dateRange[1]
+      }
+
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await AuthorizationService.getAuthorizations(params)
+      if (res.code === 0) {
+        authorizationList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取授权记录列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 刷新表格
+  const handleRefresh = () => {
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 查看详情
+  const viewDetail = (row: AuthorizationItem) => {
+    router.push({
+      path: '/asset-management/authorization-detail',
+      query: { id: row.id }
+    })
+  }
+
+  // 显示修改备注对话框
+  const showRemarkDialog = (row: AuthorizationItem) => {
+    currentRecordId.value = row.id
+    remarkForm.remark = row.remark || ''
+    remarkDialogVisible.value = true
+  }
+
+  // 提交备注修改
+  const handleSubmitRemark = async () => {
+    if (!remarkFormRef.value) return
+
+    await remarkFormRef.value.validate(async (valid) => {
+      if (valid) {
+        remarkLoading.value = true
+        try {
+          await AuthorizationService.updateAuthorizationRemark(currentRecordId.value, {
+            remark: remarkForm.remark
+          })
+          ElMessage.success('备注修改成功')
+          remarkDialogVisible.value = false
+          getTableData()
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('备注修改失败')
+        } finally {
+          remarkLoading.value = false
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .authorization-records-page {
+    // Authorization records page styles
+  }
+</style>

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

@@ -5,6 +5,7 @@
       <ArtSearchBar
         v-model:filter="formFilters"
         :items="formItems"
+        label-width="90"
         @reset="handleReset"
         @search="handleSearch"
       ></ArtSearchBar>
@@ -74,13 +75,18 @@
                 :on-change="handleFileChange"
                 :on-exceed="handleExceed"
                 :file-list="fileList"
-                accept=".xlsx,.xls"
+                accept=".csv"
               >
                 <template #trigger>
                   <ElButton type="primary">选择文件</ElButton>
                 </template>
                 <template #tip>
-                  <div class="el-upload__tip">只能上传xlsx/xls文件，且不超过10MB</div>
+                  <div class="el-upload__tip">
+                    <div>只支持上传CSV文件，且不超过10MB</div>
+                    <div style="color: var(--el-color-info); margin-top: 4px">
+                      CSV格式：ICCID,MSISDN（两列，逗号分隔，每行一条记录）
+                    </div>
+                  </div>
                 </template>
               </ElUpload>
             </ElFormItem>
@@ -252,6 +258,7 @@
             </div>
           </template>
         </ElDialog>
+
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -259,7 +266,7 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
-  import { CardService } from '@/api/modules'
+  import { CardService, StorageService } from '@/api/modules'
   import { ElMessage, ElTag, ElUpload } from 'element-plus'
   import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
   import type { SearchFormItem } from '@/types'
@@ -714,14 +721,37 @@
 
         importLoading.value = true
         try {
-          const res = await CardService.importIotCards(
+          // 确保 Content-Type 在获取 URL 和上传时完全一致
+          const contentType = importForm.file.type || 'text/csv'
+
+          // 1. 获取上传 URL
+          const uploadUrlRes = await StorageService.getUploadUrl({
+            file_name: importForm.file.name,
+            content_type: contentType,
+            purpose: 'iot_import'
+          })
+
+          if (uploadUrlRes.code !== 0) {
+            ElMessage.error('获取上传地址失败')
+            return
+          }
+
+          // 2. 上传文件到对象存储
+          await StorageService.uploadFile(
+            uploadUrlRes.data.upload_url,
             importForm.file,
-            importForm.carrier_id!,
-            importForm.batch_no || undefined
+            contentType
           )
 
-          if (res.code === 0) {
-            ElMessage.success('导入任务已创建，请到任务管理页面查看导入进度')
+          // 3. 调用导入接口
+          const importRes = await CardService.importIotCards({
+            carrier_id: importForm.carrier_id!,
+            file_key: uploadUrlRes.data.file_key,
+            batch_no: importForm.batch_no || undefined
+          })
+
+          if (importRes.code === 0) {
+            ElMessage.success(importRes.data.message || '导入任务已创建，请到任务管理页面查看导入进度')
             importDialogVisible.value = false
             getTableData()
           }

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

@@ -0,0 +1,348 @@
+<template>
+  <div class="device-detail-page">
+    <ElPageHeader @back="handleBack" title="设备详情" />
+
+    <ElCard shadow="never" style="margin-top: 20px" v-loading="loading">
+      <template #header>
+        <div style="display: flex; align-items: center; justify-content: space-between">
+          <span style="font-weight: bold">基本信息</span>
+          <ElTag :type="statusTypeMap[deviceInfo?.status || 1]">
+            {{ deviceInfo?.status_name || '-' }}
+          </ElTag>
+        </div>
+      </template>
+
+      <ElDescriptions :column="3" border v-if="deviceInfo">
+        <ElDescriptionsItem label="设备ID">{{ deviceInfo.id }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="设备号">{{ deviceInfo.device_no }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="设备名称">{{ deviceInfo.device_name }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="设备型号">{{ deviceInfo.device_model }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="设备类型">{{ deviceInfo.device_type }}</ElDescriptionsItem>
+        <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>
+          / {{ deviceInfo.max_sim_slots }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="所属店铺">
+          {{ deviceInfo.shop_name || '平台库存' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="批次号">
+          {{ deviceInfo.batch_no || '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="激活时间">
+          {{ deviceInfo.activated_at ? formatDateTime(deviceInfo.activated_at) : '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">
+          {{ formatDateTime(deviceInfo.created_at) }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ElCard>
+
+    <ElCard shadow="never" style="margin-top: 20px" v-loading="cardsLoading">
+      <template #header>
+        <div style="display: flex; align-items: center; justify-content: space-between">
+          <span style="font-weight: bold">绑定的卡列表</span>
+          <ElButton
+            type="primary"
+            size="small"
+            @click="showBindDialog"
+            :disabled="!deviceInfo || deviceInfo.bound_card_count >= deviceInfo.max_sim_slots"
+          >
+            绑定新卡
+          </ElButton>
+        </div>
+      </template>
+
+      <ElTable :data="cardList" border>
+        <ElTableColumn prop="slot_position" label="插槽位置" width="100" align="center">
+          <template #default="{ row }">
+            <ElTag type="info" size="small">插槽 {{ row.slot_position }}</ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="iccid" label="ICCID" minWidth="180" />
+        <ElTableColumn prop="msisdn" label="接入号" width="150">
+          <template #default="{ row }">
+            {{ row.msisdn || '-' }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="carrier_name" label="运营商" width="120" />
+        <ElTableColumn prop="status" label="卡状态" width="100">
+          <template #default="{ row }">
+            <ElTag :type="cardStatusTypeMap[row.status]" size="small">
+              {{ cardStatusTextMap[row.status] || '未知' }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="bind_time" label="绑定时间" width="180">
+          <template #default="{ row }">
+            {{ row.bind_time ? formatDateTime(row.bind_time) : '-' }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="操作" width="100" fixed="right" align="center">
+          <template #default="{ row }">
+            <ElButton type="danger" text size="small" @click="handleUnbindCard(row)">
+              解绑
+            </ElButton>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+
+      <ElEmpty v-if="!cardList.length" description="暂无绑定的卡" />
+    </ElCard>
+
+    <!-- 绑定卡对话框 -->
+    <ElDialog v-model="bindDialogVisible" title="绑定卡到设备" width="500px">
+      <ElForm ref="bindFormRef" :model="bindForm" :rules="bindRules" label-width="100px">
+        <ElFormItem label="选择卡" prop="iot_card_id">
+          <ElSelect
+            v-model="bindForm.iot_card_id"
+            placeholder="请搜索并选择卡"
+            filterable
+            remote
+            :remote-method="searchCards"
+            :loading="searchCardsLoading"
+            style="width: 100%"
+          >
+            <ElOption
+              v-for="card in availableCards"
+              :key="card.id"
+              :label="`${card.iccid} - ${card.carrier_name}`"
+              :value="card.id"
+            >
+              <div style="display: flex; justify-content: space-between">
+                <span>{{ card.iccid }}</span>
+                <ElTag size="small" type="info">{{ card.carrier_name }}</ElTag>
+              </div>
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="插槽位置" prop="slot_position">
+          <ElSelect v-model="bindForm.slot_position" placeholder="请选择插槽位置" style="width: 100%">
+            <ElOption
+              v-for="slot in availableSlots"
+              :key="slot"
+              :label="`插槽 ${slot}`"
+              :value="slot"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="bindDialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleConfirmBind" :loading="bindLoading">
+            确认绑定
+          </ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRoute, useRouter } from 'vue-router'
+  import { DeviceService, CardService } from '@/api/modules'
+  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type { Device, DeviceCardBinding } from '@/types/api'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'DeviceDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+  const loading = ref(false)
+  const cardsLoading = ref(false)
+  const bindLoading = ref(false)
+  const searchCardsLoading = ref(false)
+  const bindDialogVisible = ref(false)
+  const bindFormRef = ref<FormInstance>()
+  const deviceInfo = ref<Device | null>(null)
+  const cardList = ref<DeviceCardBinding[]>([])
+  const availableCards = ref<any[]>([])
+
+  // 状态类型映射
+  const statusTypeMap: Record<number, any> = {
+    1: 'info',
+    2: 'primary',
+    3: 'success',
+    4: 'danger'
+  }
+
+  // 卡状态类型映射
+  const cardStatusTypeMap: Record<number, any> = {
+    1: 'info',
+    2: 'primary',
+    3: 'success',
+    4: 'danger'
+  }
+
+  // 卡状态文本映射
+  const cardStatusTextMap: Record<number, string> = {
+    1: '在库',
+    2: '已分销',
+    3: '已激活',
+    4: '已停用'
+  }
+
+  // 绑定表单
+  const bindForm = reactive({
+    iot_card_id: undefined as number | undefined,
+    slot_position: undefined as number | undefined
+  })
+
+  // 绑定表单验证规则
+  const bindRules = reactive<FormRules>({
+    iot_card_id: [{ required: true, message: '请选择卡', trigger: 'change' }],
+    slot_position: [{ required: true, message: '请选择插槽位置', trigger: 'change' }]
+  })
+
+  // 可用插槽
+  const availableSlots = computed(() => {
+    if (!deviceInfo.value) return []
+    const occupiedSlots = cardList.value.map((card) => card.slot_position)
+    const allSlots = Array.from({ length: deviceInfo.value.max_sim_slots }, (_, i) => i + 1)
+    return allSlots.filter((slot) => !occupiedSlots.includes(slot))
+  })
+
+  onMounted(() => {
+    const deviceId = route.query.id
+    if (deviceId) {
+      loadDeviceInfo(Number(deviceId))
+      loadDeviceCards(Number(deviceId))
+    } else {
+      ElMessage.error('设备ID不存在')
+      handleBack()
+    }
+  })
+
+  // 加载设备信息
+  const loadDeviceInfo = async (id: number) => {
+    loading.value = true
+    try {
+      const res = await DeviceService.getDeviceById(id)
+      if (res.code === 0) {
+        deviceInfo.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取设备信息失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 加载设备绑定的卡列表
+  const loadDeviceCards = async (id: number) => {
+    cardsLoading.value = true
+    try {
+      const res = await DeviceService.getDeviceCards(id)
+      if (res.code === 0) {
+        cardList.value = res.data.bindings || []
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取绑定卡列表失败')
+    } finally {
+      cardsLoading.value = false
+    }
+  }
+
+  // 搜索可用的卡
+  const searchCards = async (query: string) => {
+    if (!query) {
+      availableCards.value = []
+      return
+    }
+    searchCardsLoading.value = true
+    try {
+      const res = await CardService.getStandaloneIotCards({
+        iccid: query,
+        page: 1,
+        page_size: 20
+      })
+      if (res.code === 0) {
+        availableCards.value = res.data.list || []
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      searchCardsLoading.value = false
+    }
+  }
+
+  // 显示绑定对话框
+  const showBindDialog = () => {
+    bindForm.iot_card_id = undefined
+    bindForm.slot_position = undefined
+    availableCards.value = []
+    bindDialogVisible.value = true
+  }
+
+  // 确认绑定
+  const handleConfirmBind = async () => {
+    if (!bindFormRef.value || !deviceInfo.value) return
+
+    await bindFormRef.value.validate(async (valid) => {
+      if (valid) {
+        bindLoading.value = true
+        try {
+          const data = {
+            iot_card_id: bindForm.iot_card_id!,
+            slot_position: bindForm.slot_position!
+          }
+          const res = await DeviceService.bindCard(deviceInfo.value!.id, data)
+          if (res.code === 0) {
+            ElMessage.success('绑定成功')
+            bindDialogVisible.value = false
+            await loadDeviceInfo(deviceInfo.value!.id)
+            await loadDeviceCards(deviceInfo.value!.id)
+            if (bindFormRef.value) {
+              bindFormRef.value.resetFields()
+            }
+          }
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('绑定失败')
+        } finally {
+          bindLoading.value = false
+        }
+      }
+    })
+  }
+
+  // 解绑卡
+  const handleUnbindCard = (card: DeviceCardBinding) => {
+    ElMessageBox.confirm(`确定解绑卡 ${card.iccid} 吗？`, '解绑确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        try {
+          await DeviceService.unbindCard(deviceInfo.value!.id, card.iot_card_id)
+          ElMessage.success('解绑成功')
+          await loadDeviceInfo(deviceInfo.value!.id)
+          await loadDeviceCards(deviceInfo.value!.id)
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('解绑失败')
+        }
+      })
+      .catch(() => {
+        // 用户取消
+      })
+  }
+
+  // 返回
+  const handleBack = () => {
+    router.back()
+  }
+</script>
+
+<style scoped lang="scss">
+  .device-detail-page {
+    padding: 20px;
+  }
+</style>

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

@@ -0,0 +1,674 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="device-list-page" id="table-full-screen">
+      <!-- 搜索栏 -->
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        @reset="handleReset"
+        @search="handleSearch"
+      ></ArtSearchBar>
+
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        >
+          <template #left>
+            <ElButton
+              type="primary"
+              @click="handleBatchAllocate"
+              :disabled="!selectedDevices.length"
+            >
+              批量分配
+            </ElButton>
+            <ElButton @click="handleBatchRecall" :disabled="!selectedDevices.length">
+              批量回收
+            </ElButton>
+            <ElButton @click="handleImportDevice">导入设备</ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="deviceList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @selection-change="handleSelectionChange"
+        >
+          <template #default>
+            <ElTableColumn type="selection" width="55" />
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+
+        <!-- 批量分配对话框 -->
+        <ElDialog v-model="allocateDialogVisible" title="批量分配设备" width="600px">
+          <ElForm ref="allocateFormRef" :model="allocateForm" :rules="allocateRules" label-width="120px">
+            <ElFormItem label="已选设备数">
+              <span style="color: #409eff; font-weight: bold">{{ selectedDevices.length }}</span> 台
+            </ElFormItem>
+            <ElFormItem label="目标店铺" prop="target_shop_id">
+              <ElSelect
+                v-model="allocateForm.target_shop_id"
+                placeholder="请选择目标店铺"
+                filterable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="shop in shopList"
+                  :key="shop.id"
+                  :label="shop.name"
+                  :value="shop.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="备注">
+              <ElInput
+                v-model="allocateForm.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入备注信息（选填）"
+              />
+            </ElFormItem>
+          </ElForm>
+
+          <!-- 分配结果 -->
+          <div v-if="allocateResult" style="margin-top: 20px">
+            <ElAlert
+              :type="allocateResult.fail_count === 0 ? 'success' : 'warning'"
+              :closable="false"
+              style="margin-bottom: 10px"
+            >
+              <template #title>
+                成功分配 {{ allocateResult.success_count }} 台，失败 {{ allocateResult.fail_count }} 台
+              </template>
+            </ElAlert>
+            <div v-if="allocateResult.failed_items && allocateResult.failed_items.length > 0">
+              <div style="margin-bottom: 10px; font-weight: bold">失败详情：</div>
+              <div
+                v-for="item in allocateResult.failed_items"
+                :key="item.device_id"
+                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+              >
+                设备号: {{ item.device_no }} - {{ item.reason }}
+              </div>
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="handleCloseAllocateDialog">
+                {{ allocateResult ? '关闭' : '取消' }}
+              </ElButton>
+              <ElButton
+                v-if="!allocateResult"
+                type="primary"
+                @click="handleConfirmAllocate"
+                :loading="allocateLoading"
+              >
+                确认分配
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+
+        <!-- 批量回收对话框 -->
+        <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> 台
+            </ElFormItem>
+            <ElFormItem label="备注">
+              <ElInput
+                v-model="recallForm.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入备注信息（选填）"
+              />
+            </ElFormItem>
+          </ElForm>
+
+          <!-- 回收结果 -->
+          <div v-if="recallResult" style="margin-top: 20px">
+            <ElAlert
+              :type="recallResult.fail_count === 0 ? 'success' : 'warning'"
+              :closable="false"
+              style="margin-bottom: 10px"
+            >
+              <template #title>
+                成功回收 {{ recallResult.success_count }} 台，失败 {{ recallResult.fail_count }} 台
+              </template>
+            </ElAlert>
+            <div v-if="recallResult.failed_items && recallResult.failed_items.length > 0">
+              <div style="margin-bottom: 10px; font-weight: bold">失败详情：</div>
+              <div
+                v-for="item in recallResult.failed_items"
+                :key="item.device_id"
+                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+              >
+                设备号: {{ item.device_no }} - {{ item.reason }}
+              </div>
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="handleCloseRecallDialog">
+                {{ recallResult ? '关闭' : '取消' }}
+              </ElButton>
+              <ElButton
+                v-if="!recallResult"
+                type="primary"
+                @click="handleConfirmRecall"
+                :loading="recallLoading"
+              >
+                确认回收
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { DeviceService, ShopService } from '@/api/modules'
+  import { ElMessage, ElMessageBox, ElTag, ElSwitch } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type {
+    Device,
+    DeviceStatus,
+    AllocateDevicesResponse,
+    RecallDevicesResponse
+  } from '@/types/api'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { formatDateTime } from '@/utils/business/format'
+  import { CommonStatus, getStatusText } from '@/config/constants'
+
+  defineOptions({ name: 'DeviceList' })
+
+  const router = useRouter()
+  const loading = ref(false)
+  const allocateLoading = ref(false)
+  const recallLoading = ref(false)
+  const tableRef = ref()
+  const allocateFormRef = ref<FormInstance>()
+  const recallFormRef = ref<FormInstance>()
+  const allocateDialogVisible = ref(false)
+  const recallDialogVisible = ref(false)
+  const selectedDevices = ref<Device[]>([])
+  const shopList = ref<any[]>([])
+  const allocateResult = ref<AllocateDevicesResponse | null>(null)
+  const recallResult = ref<RecallDevicesResponse | null>(null)
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    device_no: '',
+    device_name: '',
+    status: undefined as DeviceStatus | undefined,
+    shop_id: undefined as number | undefined,
+    batch_no: '',
+    device_type: '',
+    manufacturer: '',
+    created_at_start: '',
+    created_at_end: ''
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '设备号',
+      prop: 'device_no',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入设备号'
+      }
+    },
+    {
+      label: '设备名称',
+      prop: 'device_name',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入设备名称'
+      }
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '请选择状态',
+        options: [
+          { label: '在库', value: 1 },
+          { label: '已分销', value: 2 },
+          { label: '已激活', value: 3 },
+          { label: '已停用', value: 4 }
+        ]
+      }
+    },
+    {
+      label: '批次号',
+      prop: 'batch_no',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入批次号'
+      }
+    },
+    {
+      label: '设备类型',
+      prop: 'device_type',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入设备类型'
+      }
+    },
+    {
+      label: '制造商',
+      prop: 'manufacturer',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入制造商'
+      }
+    }
+  ]
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 列配置
+  const columnOptions = [
+    { label: 'ID', prop: 'id' },
+    { label: '设备号', prop: 'device_no' },
+    { label: '设备名称', prop: 'device_name' },
+    { label: '设备型号', prop: 'device_model' },
+    { label: '设备类型', prop: 'device_type' },
+    { label: '制造商', prop: 'manufacturer' },
+    { label: '最大插槽数', prop: 'max_sim_slots' },
+    { label: '已绑定卡数', prop: 'bound_card_count' },
+    { label: '状态', prop: 'status' },
+    { label: '店铺', prop: 'shop_name' },
+    { label: '批次号', prop: 'batch_no' },
+    { label: '激活时间', prop: 'activated_at' },
+    { label: '创建时间', prop: 'created_at' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  const deviceList = ref<Device[]>([])
+
+  // 分配表单
+  const allocateForm = reactive({
+    target_shop_id: undefined as number | undefined,
+    remark: ''
+  })
+
+  // 分配表单验证规则
+  const allocateRules = reactive<FormRules>({
+    target_shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }]
+  })
+
+  // 回收表单
+  const recallForm = reactive({
+    remark: ''
+  })
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'id',
+      label: 'ID',
+      width: 80
+    },
+    {
+      prop: 'device_no',
+      label: '设备号',
+      minWidth: 150
+    },
+    {
+      prop: 'device_name',
+      label: '设备名称',
+      minWidth: 120
+    },
+    {
+      prop: 'device_model',
+      label: '设备型号',
+      minWidth: 120
+    },
+    {
+      prop: 'device_type',
+      label: '设备类型',
+      width: 100
+    },
+    {
+      prop: 'manufacturer',
+      label: '制造商',
+      minWidth: 120
+    },
+    {
+      prop: 'max_sim_slots',
+      label: '最大插槽数',
+      width: 100,
+      align: 'center'
+    },
+    {
+      prop: 'bound_card_count',
+      label: '已绑定卡数',
+      width: 110,
+      align: 'center',
+      formatter: (row: Device) => {
+        const color = row.bound_card_count > 0 ? '#67c23a' : '#909399'
+        return h('span', { style: { color, fontWeight: 'bold' } }, row.bound_card_count)
+      }
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: Device) => {
+        const statusMap: Record<number, { text: string; type: any }> = {
+          1: { text: '在库', type: 'info' },
+          2: { text: '已分销', type: 'primary' },
+          3: { text: '已激活', type: 'success' },
+          4: { text: '已停用', type: 'danger' }
+        }
+        const status = statusMap[row.status] || { text: '未知', type: 'info' }
+        return h(ElTag, { type: status.type }, () => status.text)
+      }
+    },
+    {
+      prop: 'shop_name',
+      label: '店铺',
+      minWidth: 120,
+      formatter: (row: Device) => row.shop_name || '-'
+    },
+    {
+      prop: 'batch_no',
+      label: '批次号',
+      minWidth: 120,
+      formatter: (row: Device) => row.batch_no || '-'
+    },
+    {
+      prop: 'activated_at',
+      label: '激活时间',
+      width: 180,
+      formatter: (row: Device) => (row.activated_at ? formatDateTime(row.activated_at) : '-')
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: Device) => formatDateTime(row.created_at)
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 150,
+      fixed: 'right',
+      formatter: (row: Device) => {
+        return h('div', { style: 'display: flex; gap: 8px;' }, [
+          h(ArtButtonTable, {
+            type: 'view',
+            onClick: () => viewDeviceDetail(row)
+          }),
+          h(ArtButtonTable, {
+            type: 'delete',
+            onClick: () => deleteDevice(row)
+          })
+        ])
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+    loadShopList()
+  })
+
+  // 加载店铺列表
+  const loadShopList = async () => {
+    try {
+      const res = await ShopService.getShops({ page: 1, pageSize: 1000 })
+      if (res.code === 0) {
+        shopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取店铺列表失败:', error)
+    }
+  }
+
+  // 获取设备列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        device_no: searchForm.device_no || undefined,
+        device_name: searchForm.device_name || undefined,
+        status: searchForm.status,
+        shop_id: searchForm.shop_id,
+        batch_no: searchForm.batch_no || undefined,
+        device_type: searchForm.device_type || undefined,
+        manufacturer: searchForm.manufacturer || undefined,
+        created_at_start: searchForm.created_at_start || undefined,
+        created_at_end: searchForm.created_at_end || undefined
+      }
+      const res = await DeviceService.getDevices(params)
+      if (res.code === 0 && res.data) {
+        deviceList.value = res.data.list || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取设备列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 刷新表格
+  const handleRefresh = () => {
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 处理选择变化
+  const handleSelectionChange = (selection: Device[]) => {
+    selectedDevices.value = selection
+  }
+
+  // 查看设备详情
+  const viewDeviceDetail = (row: Device) => {
+    router.push({
+      path: '/asset-management/device-detail',
+      query: { id: row.id }
+    })
+  }
+
+  // 删除设备
+  const deleteDevice = (row: Device) => {
+    ElMessageBox.confirm(`确定删除设备 ${row.device_no} 吗？删除后将自动解绑所有卡。`, '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    })
+      .then(async () => {
+        try {
+          await DeviceService.deleteDevice(row.id)
+          ElMessage.success('删除成功')
+          await getTableData()
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('删除失败')
+        }
+      })
+      .catch(() => {
+        // 用户取消删除
+      })
+  }
+
+  // 批量分配
+  const handleBatchAllocate = () => {
+    if (selectedDevices.value.length === 0) {
+      ElMessage.warning('请先选择要分配的设备')
+      return
+    }
+    allocateForm.target_shop_id = undefined
+    allocateForm.remark = ''
+    allocateResult.value = null
+    allocateDialogVisible.value = true
+  }
+
+  // 确认批量分配
+  const handleConfirmAllocate = async () => {
+    if (!allocateFormRef.value) return
+
+    await allocateFormRef.value.validate(async (valid) => {
+      if (valid) {
+        allocateLoading.value = true
+        try {
+          const data = {
+            device_ids: selectedDevices.value.map((d) => d.id),
+            target_shop_id: allocateForm.target_shop_id!,
+            remark: allocateForm.remark
+          }
+          const res = await DeviceService.allocateDevices(data)
+          if (res.code === 0) {
+            allocateResult.value = res.data
+            if (res.data.fail_count === 0) {
+              ElMessage.success('全部分配成功')
+              setTimeout(() => {
+                handleCloseAllocateDialog()
+                getTableData()
+              }, 1500)
+            } else {
+              ElMessage.warning(`部分分配失败，请查看失败详情`)
+            }
+          }
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('分配失败')
+        } finally {
+          allocateLoading.value = false
+        }
+      }
+    })
+  }
+
+  // 关闭分配对话框
+  const handleCloseAllocateDialog = () => {
+    allocateDialogVisible.value = false
+    allocateResult.value = null
+    if (allocateFormRef.value) {
+      allocateFormRef.value.resetFields()
+    }
+  }
+
+  // 批量回收
+  const handleBatchRecall = () => {
+    if (selectedDevices.value.length === 0) {
+      ElMessage.warning('请先选择要回收的设备')
+      return
+    }
+    recallForm.remark = ''
+    recallResult.value = null
+    recallDialogVisible.value = true
+  }
+
+  // 确认批量回收
+  const handleConfirmRecall = async () => {
+    recallLoading.value = true
+    try {
+      const data = {
+        device_ids: selectedDevices.value.map((d) => d.id),
+        remark: recallForm.remark
+      }
+      const res = await DeviceService.recallDevices(data)
+      if (res.code === 0) {
+        recallResult.value = res.data
+        if (res.data.fail_count === 0) {
+          ElMessage.success('全部回收成功')
+          setTimeout(() => {
+            handleCloseRecallDialog()
+            getTableData()
+          }, 1500)
+        } else {
+          ElMessage.warning(`部分回收失败，请查看失败详情`)
+        }
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('回收失败')
+    } finally {
+      recallLoading.value = false
+    }
+  }
+
+  // 关闭回收对话框
+  const handleCloseRecallDialog = () => {
+    recallDialogVisible.value = false
+    recallResult.value = null
+    recallForm.remark = ''
+  }
+
+  // 导入设备
+  const handleImportDevice = () => {
+    router.push('/batch/device-import')
+  }
+</script>
+
+<style scoped lang="scss">
+  .device-list-page {
+    height: 100%;
+  }
+</style>

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

@@ -10,8 +10,15 @@
         <!-- 任务基本信息 -->
         <ElDescriptions title="任务基本信息" :column="3" border class="task-info">
           <ElDescriptionsItem label="任务编号">{{ taskDetail?.task_no || '-' }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="任务类型">
+            <ElTag :type="taskType === 'device' ? 'warning' : 'primary'" size="small">
+              {{ taskType === 'device' ? '设备导入' : 'ICCID导入' }}
+            </ElTag>
+          </ElDescriptionsItem>
           <ElDescriptionsItem label="批次号">{{ taskDetail?.batch_no || '-' }}</ElDescriptionsItem>
-          <ElDescriptionsItem label="运营商">{{ taskDetail?.carrier_name || '-' }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="运营商" v-if="taskType === 'card'">
+            {{ (taskDetail as IotCardImportTaskDetail)?.carrier_name || '-' }}
+          </ElDescriptionsItem>
           <ElDescriptionsItem label="文件名">{{ taskDetail?.file_name || '-' }}</ElDescriptionsItem>
           <ElDescriptionsItem label="任务状态">
             <ElTag :type="getStatusType(taskDetail?.status)" v-if="taskDetail">
@@ -55,7 +62,18 @@
           </ElDivider>
           <ElTable :data="taskDetail.failed_items" border style="width: 100%">
             <ElTableColumn prop="line" label="行号" width="100" />
-            <ElTableColumn prop="iccid" label="ICCID" 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>
@@ -67,7 +85,18 @@
           </ElDivider>
           <ElTable :data="taskDetail.skipped_items" border style="width: 100%">
             <ElTableColumn prop="line" label="行号" width="100" />
-            <ElTableColumn prop="iccid" label="ICCID" 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>
@@ -78,18 +107,23 @@
 
 <script setup lang="ts">
   import { useRouter, useRoute } from 'vue-router'
-  import { CardService } from '@/api/modules'
+  import { CardService, DeviceService } from '@/api/modules'
   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'
 
   defineOptions({ name: 'TaskDetail' })
 
   const router = useRouter()
   const route = useRoute()
 
-  const taskDetail = ref<IotCardImportTaskDetail | null>(null)
+  type TaskType = 'card' | 'device'
+  type TaskDetail = IotCardImportTaskDetail | DeviceImportTaskDetail
+
+  const taskDetail = ref<TaskDetail | null>(null)
   const loading = ref(false)
+  const taskType = ref<TaskType>('card')
 
   // 获取状态标签类型
   const getStatusType = (status?: IotCardImportTaskStatus) => {
@@ -116,17 +150,33 @@
   // 获取任务详情
   const getTaskDetail = async () => {
     const taskId = route.query.id
+    const queryTaskType = route.query.task_type as TaskType | undefined
+
     if (!taskId) {
       ElMessage.error('缺少任务ID参数')
       goBack()
       return
     }
 
+    // 设置任务类型
+    if (queryTaskType) {
+      taskType.value = queryTaskType
+    }
+
     loading.value = true
     try {
-      const res = await CardService.getIotCardImportTaskDetail(Number(taskId))
-      if (res.code === 0) {
-        taskDetail.value = res.data
+      if (taskType.value === 'device') {
+        // 获取设备导入任务详情
+        const res = await DeviceService.getImportTaskDetail(Number(taskId))
+        if (res.code === 0) {
+          taskDetail.value = res.data
+        }
+      } else {
+        // 获取ICCID导入任务详情
+        const res = await CardService.getIotCardImportTaskDetail(Number(taskId))
+        if (res.code === 0) {
+          taskDetail.value = res.data
+        }
       }
     } catch (error) {
       console.error(error)

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

@@ -42,13 +42,14 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { useRouter } from 'vue-router'
-  import { CardService } from '@/api/modules'
+  import { CardService, DeviceService } from '@/api/modules'
   import { ElMessage, ElTag } 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 type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
+  import type { DeviceImportTask } from '@/types/api/device'
 
   defineOptions({ name: 'TaskManagement' })
 
@@ -56,8 +57,13 @@
   const loading = ref(false)
   const tableRef = ref()
 
+  // 任务类型
+  type TaskType = 'card' | 'device'
+  type ImportTask = IotCardImportTask | DeviceImportTask
+
   // 搜索表单初始值
   const initialSearchState = {
+    task_type: undefined as TaskType | undefined,
     status: undefined,
     carrier_id: undefined,
     batch_no: '',
@@ -77,6 +83,19 @@
 
   // 搜索表单配置
   const searchFormItems: SearchFormItem[] = [
+    {
+      label: '任务类型',
+      prop: 'task_type',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: 'ICCID导入', value: 'card' },
+        { label: '设备导入', value: 'device' }
+      ]
+    },
     {
       label: '任务状态',
       prop: 'status',
@@ -123,7 +142,7 @@
         type: 'daterange',
         startPlaceholder: '开始时间',
         endPlaceholder: '结束时间',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+        valueFormat: 'YYYY-MM-DDTHH:mm:ssZ'
       }
     }
   ]
@@ -131,6 +150,7 @@
   // 列配置
   const columnOptions = [
     { label: '任务编号', prop: 'task_no' },
+    { label: '任务类型', prop: 'task_type' },
     { label: '批次号', prop: 'batch_no' },
     { label: '运营商', prop: 'carrier_name' },
     { label: '文件名', prop: 'file_name' },
@@ -144,7 +164,7 @@
     { label: '操作', prop: 'operation' }
   ]
 
-  const taskList = ref<IotCardImportTask[]>([])
+  const taskList = ref<ImportTask[]>([])
 
   // 获取状态标签类型
   const getStatusType = (status: IotCardImportTaskStatus) => {
@@ -162,11 +182,28 @@
     }
   }
 
+  // 获取任务类型
+  const getTaskType = (row: ImportTask): TaskType => {
+    // 判断是否为设备导入任务（设备导入任务有 device_no 字段，卡导入任务有 carrier_name 字段）
+    if ('device_no' in row || (row.batch_no && row.batch_no.startsWith('DEV-'))) {
+      return 'device'
+    }
+    return 'card'
+  }
+
+  // 获取任务类型文本
+  const getTaskTypeText = (taskType: TaskType) => {
+    return taskType === 'device' ? '设备导入' : 'ICCID导入'
+  }
+
   // 查看详情
-  const viewDetail = (row: IotCardImportTask) => {
+  const viewDetail = (row: ImportTask) => {
     router.push({
       path: '/asset-management/task-detail',
-      query: { id: row.id }
+      query: {
+        id: row.id,
+        task_type: getTaskType(row)
+      }
     })
   }
 
@@ -177,6 +214,16 @@
       label: '任务编号',
       width: 150
     },
+    {
+      prop: 'task_type',
+      label: '任务类型',
+      width: 100,
+      formatter: (row: ImportTask) => {
+        const taskType = getTaskType(row)
+        const tagType = taskType === 'device' ? 'warning' : 'primary'
+        return h(ElTag, { type: tagType, size: 'small' }, () => getTaskTypeText(taskType))
+      }
+    },
     {
       prop: 'batch_no',
       label: '批次号',
@@ -185,7 +232,10 @@
     {
       prop: 'carrier_name',
       label: '运营商',
-      width: 100
+      width: 100,
+      formatter: (row: ImportTask) => {
+        return (row as IotCardImportTask).carrier_name || '-'
+      }
     },
     {
       prop: 'file_name',
@@ -196,7 +246,7 @@
       prop: 'status',
       label: '任务状态',
       width: 100,
-      formatter: (row: IotCardImportTask) => {
+      formatter: (row: ImportTask) => {
         return h(ElTag, { type: getStatusType(row.status) }, () => row.status_text)
       }
     },
@@ -214,7 +264,7 @@
       prop: 'fail_count',
       label: '失败数',
       width: 80,
-      formatter: (row: IotCardImportTask) => {
+      formatter: (row: ImportTask) => {
         const type = row.fail_count > 0 ? 'danger' : 'success'
         return h(ElTag, { type, size: 'small' }, () => row.fail_count)
       }
@@ -228,20 +278,20 @@
       prop: 'created_at',
       label: '创建时间',
       width: 160,
-      formatter: (row: IotCardImportTask) => formatDateTime(row.created_at)
+      formatter: (row: ImportTask) => formatDateTime(row.created_at)
     },
     {
       prop: 'completed_at',
       label: '完成时间',
       width: 160,
-      formatter: (row: IotCardImportTask) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
+      formatter: (row: ImportTask) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
     },
     {
       prop: 'operation',
       label: '操作',
       width: 100,
       fixed: 'right',
-      formatter: (row: IotCardImportTask) => {
+      formatter: (row: ImportTask) => {
         return h(ArtButtonTable, {
           type: 'view',
           onClick: () => viewDetail(row)
@@ -262,7 +312,6 @@
         page: pagination.page,
         page_size: pagination.pageSize,
         status: searchForm.status,
-        carrier_id: searchForm.carrier_id,
         batch_no: searchForm.batch_no || undefined
       }
 
@@ -279,10 +328,48 @@
         }
       })
 
-      const res = await CardService.getIotCardImportTasks(params)
-      if (res.code === 0) {
-        taskList.value = res.data.list || []
-        pagination.total = res.data.total || 0
+      // 根据任务类型获取不同的数据
+      if (searchForm.task_type === 'device') {
+        // 仅获取设备导入任务
+        const res = await DeviceService.getImportTasks(params)
+        if (res.code === 0) {
+          taskList.value = res.data.list || []
+          pagination.total = res.data.total || 0
+        }
+      } else if (searchForm.task_type === 'card') {
+        // 仅获取ICCID导入任务（需要carrier_id参数）
+        const cardParams = {
+          ...params,
+          carrier_id: searchForm.carrier_id
+        }
+        const res = await CardService.getIotCardImportTasks(cardParams)
+        if (res.code === 0) {
+          taskList.value = res.data.list || []
+          pagination.total = res.data.total || 0
+        }
+      } else {
+        // 获取所有类型任务 - 分别调用两个API然后合并结果
+        const [cardRes, deviceRes] = await Promise.all([
+          CardService.getIotCardImportTasks({
+            ...params,
+            carrier_id: searchForm.carrier_id
+          }),
+          DeviceService.getImportTasks(params)
+        ])
+
+        const cardTasks = cardRes.code === 0 ? cardRes.data.list || [] : []
+        const deviceTasks = deviceRes.code === 0 ? deviceRes.data.list || [] : []
+
+        // 合并并按创建时间排序
+        const allTasks = [...cardTasks, ...deviceTasks].sort((a, b) => {
+          return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        })
+
+        // 前端分页
+        const start = (pagination.page - 1) * pagination.pageSize
+        const end = start + pagination.pageSize
+        taskList.value = allTasks.slice(start, end)
+        pagination.total = allTasks.length
       }
     } catch (error) {
       console.error(error)

src/views/batch/device-import/index.vue

@@ -12,11 +12,12 @@
             <template #title>
               <div style="line-height: 1.8">
                 <p><strong>导入说明：</strong></p>
-                <p>1. 请先下载模板文件，按照模板格式填写设备信息</p>
-                <p>2. 支持 Excel 格式（.xlsx, .xls），单次最多导入 500 条</p>
-                <p>3. 必填字段：设备编号、设备名称、设备类型、ICCID（绑定网卡）</p>
-                <p>4. ICCID 必须在系统中已存在，否则导入失败</p>
-                <p>5. 设备编号重复将自动跳过</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>
+                <p>6. 设备号重复将自动跳过，导入后可在任务管理中查看详情</p>
               </div>
             </template>
           </ElAlert>
@@ -31,18 +32,15 @@
             <ElUpload
               ref="uploadRef"
               drag
-              :action="uploadUrl"
-              :on-change="handleFileChange"
-              :on-success="handleUploadSuccess"
-              :on-error="handleUploadError"
               :auto-upload="false"
+              :on-change="handleFileChange"
               :limit="1"
-              accept=".xlsx,.xls"
+              accept=".csv"
             >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__text">将 CSV 文件拖到此处，或<em>点击选择</em></div>
               <template #tip>
-                <div class="el-upload__tip">只能上传 xlsx/xls 文件，且不超过 5MB</div>
+                <div class="el-upload__tip">只能上传 CSV 文件，且不超过 10MB</div>
               </template>
             </ElUpload>
             <div style="margin-top: 16px; text-align: center">
@@ -124,7 +122,7 @@
               <ElOption label="完成" value="success" />
               <ElOption label="失败" value="failed" />
             </ElSelect>
-            <ElButton size="small" @click="refreshList">刷新</ElButton>
+            <ElButton @click="refreshList">刷新</ElButton>
           </div>
         </div>
       </template>
@@ -239,6 +237,7 @@
 <script setup lang="ts">
   import { computed } from 'vue'
   import { ElMessage } from 'element-plus'
+  import { useRouter } from 'vue-router'
   import {
     Download,
     UploadFilled,
@@ -249,10 +248,14 @@
     CircleCloseFilled,
     TrendCharts
   } from '@element-plus/icons-vue'
-  import type { UploadInstance, UploadRawFile } from 'element-plus'
+  import type { UploadInstance } from 'element-plus'
+  import { StorageService } from '@/api/modules/storage'
+  import { DeviceService } from '@/api/modules'
 
   defineOptions({ name: 'DeviceImport' })
 
+  const router = useRouter()
+
   interface FailReason {
     row: number
     deviceCode: string
@@ -276,8 +279,7 @@
   }
 
   const uploadRef = ref<UploadInstance>()
-  const uploadUrl = ref('/api/batch/device-import')
-  const fileList = ref<UploadRawFile[]>([])
+  const fileList = ref<File[]>([])
   const uploading = ref(false)
   const detailDialogVisible = ref(false)
   const statusFilter = ref('')
@@ -366,8 +368,25 @@
     }, 1000)
   }
 
-  const handleFileChange = (file: any, files: any[]) => {
-    fileList.value = files
+  const handleFileChange = (uploadFile: any) => {
+    // 验证文件大小（10MB限制）
+    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 = () => {
@@ -375,56 +394,73 @@
     fileList.value = []
   }
 
+  /**
+   * 三步上传流程
+   * 1. 调用 StorageService.getUploadUrl() 获取预签名 URL 和 file_key
+   * 2. 调用 StorageService.uploadFile() 上传文件到对象存储
+   * 3. 调用 DeviceService.importDevices() 触发后端导入任务
+   */
   const submitUpload = async () => {
     if (!fileList.value.length) {
-      ElMessage.warning('请先选择文件')
+      ElMessage.warning('请先选择CSV文件')
       return
     }
 
+    const file = fileList.value[0]
     uploading.value = true
-    ElMessage.info('正在导入设备并绑定ICCID，请稍候...')
 
-    // 模拟上传和导入过程
-    setTimeout(() => {
-      const newRecord: ImportRecord = {
-        id: Date.now().toString(),
-        batchNo: `DEV${new Date().getTime()}`,
-        fileName: fileList.value[0].name,
-        totalCount: 100,
-        successCount: 95,
-        failCount: 5,
-        bindCount: 95,
-        status: 'success',
-        progress: 100,
-        importTime: new Date().toLocaleString('zh-CN'),
-        operator: 'admin',
-        failReasons: [
-          {
-            row: 12,
-            deviceCode: 'TEST001',
-            iccid: '89860123456789012351',
-            message: 'ICCID 不存在'
-          },
-          { row: 34, deviceCode: 'TEST002', iccid: '89860123456789012352', message: '设备类型无效' }
-        ]
+    try {
+      // 第一步：获取预签名上传 URL
+      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 || '获取上传地址失败')
       }
 
-      importRecords.value.unshift(newRecord)
-      uploading.value = false
+      const { upload_url, file_key } = uploadUrlRes.data
+
+      // 第二步：上传文件到对象存储
+      ElMessage.info('正在上传文件...')
+      await StorageService.uploadFile(upload_url, file, 'text/csv')
+
+      // 第三步：调用设备导入API
+      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
+
+      // 清空文件列表
       clearFiles()
-      ElMessage.success(
-        `导入完成！成功 ${newRecord.successCount} 条，失败 ${newRecord.failCount} 条，已绑定 ${newRecord.bindCount} 个ICCID`
-      )
-    }, 2000)
-  }
 
-  const handleUploadSuccess = () => {
-    ElMessage.success('上传成功')
-  }
+      // 显示成功消息并提供跳转链接
+      ElMessage.success({
+        message: `导入任务已创建！任务编号：${taskNo}`,
+        duration: 5000,
+        showClose: true
+      })
 
-  const handleUploadError = () => {
-    uploading.value = false
-    ElMessage.error('上传失败')
+      // 3秒后跳转到任务管理页面
+      setTimeout(() => {
+        router.push('/asset-management/task-management')
+      }, 3000)
+    } catch (error: any) {
+      console.error('设备导入失败:', error)
+      ElMessage.error(error.message || '设备导入失败')
+    } finally {
+      uploading.value = false
+    }
   }
 
   const refreshList = () => {