fetch(modify):修改原来的bug

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

@@ -2,7 +2,7 @@
   <ArtTableFullScreen>
     <div class="enterprise-cards-page" id="table-full-screen">
       <!-- 企业信息卡片 -->
-      <ElCard shadow="never" style="margin-bottom: 16px">
+      <ElCard shadow="never" class="enterprise-info-card">
         <template #header>
           <div class="card-header">
             <span>企业信息</span>
@@ -10,8 +10,12 @@
           </div>
         </template>
         <ElDescriptions :column="3" border v-if="enterpriseInfo">
-          <ElDescriptionsItem label="企业名称">{{ enterpriseInfo.enterprise_name }}</ElDescriptionsItem>
-          <ElDescriptionsItem label="企业编号">{{ enterpriseInfo.enterprise_code }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="企业名称">{{
+            enterpriseInfo.enterprise_name
+          }}</ElDescriptionsItem>
+          <ElDescriptionsItem label="企业编号">{{
+            enterpriseInfo.enterprise_code
+          }}</ElDescriptionsItem>
           <ElDescriptionsItem label="联系人">{{ enterpriseInfo.contact_name }}</ElDescriptionsItem>
         </ElDescriptions>
       </ElCard>
@@ -67,92 +71,51 @@
         <ElDialog
           v-model="allocateDialogVisible"
           title="授权卡给企业"
-          width="700px"
+          width="85%"
           @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"
+          <!-- 搜索过滤条件 -->
+          <ArtSearchBar
+            v-model:filter="cardSearchForm"
+            :items="cardSearchFormItems"
+            label-width="85"
+            @reset="handleCardSearchReset"
+            @search="handleCardSearch"
+          ></ArtSearchBar>
+
+          <!-- 卡列表 -->
+          <div class="card-selection-info"> 已选择 {{ selectedAvailableCards.length }} 张卡 </div>
+          <ArtTable
+            ref="availableCardsTableRef"
+            row-key="id"
+            :loading="availableCardsLoading"
+            :data="availableCardsList"
+            :currentPage="cardPagination.page"
+            :pageSize="cardPagination.pageSize"
+            :total="cardPagination.total"
+            :marginTop="10"
+            @size-change="handleCardPageSizeChange"
+            @current-change="handleCardPageChange"
+            @selection-change="handleAvailableCardsSelectionChange"
+          >
+            <template #default>
+              <ElTableColumn type="selection" width="55" />
+              <ElTableColumn
+                v-for="col in availableCardColumns"
+                :key="col.prop || col.type"
+                v-bind="col"
               />
-              <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>
+          </ArtTable>
 
           <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"
+                :disabled="selectedAvailableCards.length === 0"
               >
                 确认授权
               </ElButton>
@@ -191,7 +154,12 @@
         </ElDialog>
 
         <!-- 结果对话框 -->
-        <ElDialog v-model="resultDialogVisible" :title="resultTitle" width="700px">
+        <ElDialog
+          v-model="resultDialogVisible"
+          :title="resultTitle"
+          width="700px"
+          @close="handleResultDialogClose"
+        >
           <ElDescriptions :column="2" border>
             <ElDescriptionsItem label="成功数">
               <ElTag type="success">{{ operationResult.success_count }}</ElTag>
@@ -203,7 +171,7 @@
 
           <div
             v-if="operationResult.failed_items && operationResult.failed_items.length > 0"
-            style="margin-top: 20px"
+            class="result-section"
           >
             <ElDivider content-position="left">失败项详情</ElDivider>
             <ElTable :data="operationResult.failed_items" border max-height="300">
@@ -215,7 +183,7 @@
           <!-- 显示授权的设备 -->
           <div
             v-if="operationResult.allocated_devices && operationResult.allocated_devices.length > 0"
-            style="margin-top: 20px"
+            class="result-section"
           >
             <ElDivider content-position="left">已授权设备</ElDivider>
             <ElTable :data="operationResult.allocated_devices" border max-height="200">
@@ -242,21 +210,21 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
-  import { EnterpriseService } from '@/api/modules'
+  import { EnterpriseService, CardService } 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 { BgColorEnum } from '@/enums/appEnum'
   import type {
     EnterpriseCardItem,
-    AllocateCardsPreviewResponse,
     AllocateCardsResponse,
-    RecallCardsResponse,
-    FailedItem
+    RecallCardsResponse
   } from '@/types/api/enterpriseCard'
   import type { EnterpriseItem } from '@/types/api'
+  import type { StandaloneIotCard } from '@/types/api/card'
 
   defineOptions({ name: 'EnterpriseCards' })
 
@@ -265,19 +233,15 @@
   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,
@@ -285,40 +249,39 @@
     allocated_devices: null
   })
 
+  // 可用卡列表相关
+  const availableCardsTableRef = ref()
+  const availableCardsLoading = ref(false)
+  const availableCardsList = ref<StandaloneIotCard[]>([])
+  const selectedAvailableCards = ref<StandaloneIotCard[]>([])
+
+  // 卡搜索表单初始值
+  const initialCardSearchState = {
+    status: undefined,
+    carrier_id: undefined,
+    iccid: '',
+    msisdn: '',
+    is_distributed: undefined
+  }
+
+  const cardSearchForm = reactive({ ...initialCardSearchState })
+  const cardPagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
   // 搜索表单初始值
   const initialSearchState = {
     iccid: '',
-    msisdn: '',
-    status: undefined as number | undefined,
-    authorization_status: undefined as number | undefined
+    device_no: '',
+    carrier_id: undefined as number | undefined,
+    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: ''
@@ -346,16 +309,30 @@
       }
     },
     {
-      label: '手机号',
-      prop: 'msisdn',
+      label: '设备号',
+      prop: 'device_no',
       type: 'input',
       config: {
         clearable: true,
-        placeholder: '请输入手机号'
+        placeholder: '请输入设备号'
       }
     },
     {
-      label: '卡状态',
+      label: '运营商',
+      prop: 'carrier_id',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '中国移动', value: 1 },
+        { label: '中国联通', value: 2 },
+        { label: '中国电信', value: 3 }
+      ]
+    },
+    {
+      label: '状态',
       prop: 'status',
       type: 'select',
       config: {
@@ -363,21 +340,74 @@
         placeholder: '全部'
       },
       options: () => [
-        { label: '激活', value: 1 },
-        { label: '停机', value: 2 }
+        { label: '在库', value: 1 },
+        { label: '已分销', value: 2 },
+        { label: '已激活', value: 3 },
+        { label: '已停用', value: 4 }
       ]
-    },
+    }
+  ]
+
+  // 卡列表搜索表单配置
+  const cardSearchFormItems: SearchFormItem[] = [
     {
-      label: '授权状态',
-      prop: 'authorization_status',
+      label: '状态',
+      prop: 'status',
       type: 'select',
       config: {
         clearable: true,
         placeholder: '全部'
       },
       options: () => [
-        { label: '有效', value: 1 },
-        { label: '已回收', value: 0 }
+        { label: '在库', value: 1 },
+        { label: '已分销', value: 2 },
+        { label: '已激活', value: 3 },
+        { label: '已停用', value: 4 }
+      ]
+    },
+    {
+      label: '运营商',
+      prop: 'carrier_id',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '中国移动', value: 1 },
+        { label: '中国联通', value: 2 },
+        { label: '中国电信', value: 3 }
+      ]
+    },
+    {
+      label: 'ICCID',
+      prop: 'iccid',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入ICCID'
+      }
+    },
+    {
+      label: '卡接入号',
+      prop: 'msisdn',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入卡接入号'
+      }
+    },
+    {
+      label: '是否已分销',
+      prop: 'is_distributed',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '是', value: true },
+        { label: '否', value: false }
       ]
     }
   ]
@@ -385,12 +415,15 @@
   // 列配置
   const columnOptions = [
     { label: 'ICCID', prop: 'iccid' },
-    { label: '手机号', prop: 'msisdn' },
+    { label: '卡接入号', prop: 'msisdn' },
+    { label: '设备号', prop: 'device_no' },
+    { label: '运营商ID', prop: 'carrier_id' },
     { label: '运营商', prop: 'carrier_name' },
-    { label: '卡状态', prop: 'status' },
-    { label: '授权状态', prop: 'authorization_status' },
-    { label: '授权时间', prop: 'authorized_at' },
-    { label: '授权人', prop: 'authorizer_name' },
+    { label: '套餐名称', prop: 'package_name' },
+    { label: '状态', prop: 'status' },
+    { label: '状态名称', prop: 'status_name' },
+    { label: '网络状态', prop: 'network_status' },
+    { label: '网络状态名称', prop: 'network_status_name' },
     { label: '操作', prop: 'operation' }
   ]
 
@@ -398,22 +431,44 @@
 
   // 获取卡状态标签类型
   const getCardStatusTag = (status: number) => {
+    switch (status) {
+      case 1:
+        return 'info'
+      case 2:
+        return 'warning'
+      case 3:
+        return 'success'
+      case 4:
+        return 'danger'
+      default:
+        return 'info'
+    }
+  }
+
+  // 获取卡状态文本 - 使用API返回的status_name
+  const getCardStatusText = (status: number) => {
+    switch (status) {
+      case 1:
+        return '在库'
+      case 2:
+        return '已分销'
+      case 3:
+        return '已激活'
+      case 4:
+        return '已停用'
+      default:
+        return '未知'
+    }
+  }
+
+  // 获取网络状态标签类型
+  const getNetworkStatusTag = (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 ? '有效' : '已回收'
+  // 获取网络状态文本 - 使用API返回的network_status_name
+  const getNetworkStatusText = (status: number) => {
+    return status === 1 ? '开机' : '停机'
   }
 
   // 动态列配置
@@ -421,64 +476,77 @@
     {
       prop: 'iccid',
       label: 'ICCID',
-      minWidth: 180
+      minWidth: 200
     },
     {
       prop: 'msisdn',
-      label: '手机号',
-      width: 120
+      label: '卡接入号',
+      width: 130
+    },
+    {
+      prop: 'device_no',
+      label: '设备号',
+      width: 150
+    },
+    {
+      prop: 'carrier_id',
+      label: '运营商ID',
+      width: 100
     },
     {
       prop: 'carrier_name',
       label: '运营商',
-      width: 100
+      width: 120
+    },
+    {
+      prop: 'package_name',
+      label: '套餐名称',
+      width: 150
     },
     {
       prop: 'status',
-      label: '卡状态',
+      label: '状态',
       width: 100,
       formatter: (row: EnterpriseCardItem) => {
         return h(ElTag, { type: getCardStatusTag(row.status) }, () => getCardStatusText(row.status))
       }
     },
     {
-      prop: 'authorization_status',
-      label: '授权状态',
+      prop: 'status_name',
+      label: '状态名称',
+      width: 100
+    },
+    {
+      prop: 'network_status',
+      label: '网络状态',
       width: 100,
       formatter: (row: EnterpriseCardItem) => {
-        return h(
-          ElTag,
-          { type: getAuthStatusTag(row.authorization_status) },
-          () => getAuthStatusText(row.authorization_status)
+        return h(ElTag, { type: getNetworkStatusTag(row.network_status) }, () =>
+          getNetworkStatusText(row.network_status)
         )
       }
     },
     {
-      prop: 'authorized_at',
-      label: '授权时间',
-      width: 180,
-      formatter: (row: EnterpriseCardItem) =>
-        row.authorized_at ? formatDateTime(row.authorized_at) : '-'
-    },
-    {
-      prop: 'authorizer_name',
-      label: '授权人',
-      width: 120
+      prop: 'network_status_name',
+      label: '网络状态名称',
+      width: 130
     },
     {
       prop: 'operation',
       label: '操作',
-      width: 150,
+      width: 100,
       fixed: 'right',
       formatter: (row: EnterpriseCardItem) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
-          row.status === 2
+          row.network_status === 0
             ? h(ArtButtonTable, {
                 text: '复机',
+                iconClass: BgColorEnum.SUCCESS,
                 onClick: () => handleResume(row)
               })
             : h(ArtButtonTable, {
                 text: '停机',
+                iconClass: BgColorEnum.ERROR,
                 onClick: () => handleSuspend(row)
               })
         ])
@@ -522,9 +590,9 @@
         page: pagination.page,
         page_size: pagination.pageSize,
         iccid: searchForm.iccid || undefined,
-        msisdn: searchForm.msisdn || undefined,
-        status: searchForm.status,
-        authorization_status: searchForm.authorization_status
+        device_no: searchForm.device_no || undefined,
+        carrier_id: searchForm.carrier_id,
+        status: searchForm.status
       }
 
       // 清理空值
@@ -586,84 +654,213 @@
     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()
+  // 获取可用卡状态类型
+  const getAvailableCardStatusType = (status: number) => {
+    switch (status) {
+      case 1:
+        return 'info'
+      case 2:
+        return 'warning'
+      case 3:
+        return 'success'
+      case 4:
+        return 'danger'
+      default:
+        return 'info'
     }
   }
 
-  // 处理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 getAvailableCardStatusText = (status: number) => {
+    switch (status) {
+      case 1:
+        return '在库'
+      case 2:
+        return '已分销'
+      case 3:
+        return '已激活'
+      case 4:
+        return '已停用'
+      default:
+        return '未知'
+    }
   }
 
-  // 预检
-  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 availableCardColumns = computed(() => [
+    {
+      prop: 'iccid',
+      label: 'ICCID',
+      minWidth: 180
+    },
+    {
+      prop: 'msisdn',
+      label: '卡接入号',
+      width: 130
+    },
+    {
+      prop: 'carrier_name',
+      label: '运营商',
+      width: 100
+    },
+    {
+      prop: 'cost_price',
+      label: '成本价',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => `¥${(row.cost_price / 100).toFixed(2)}`
+    },
+    {
+      prop: 'distribute_price',
+      label: '分销价',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => `¥${(row.distribute_price / 100).toFixed(2)}`
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => {
+        return h(ElTag, { type: getAvailableCardStatusType(row.status) }, () =>
+          getAvailableCardStatusText(row.status)
+        )
       }
-    })
+    },
+    {
+      prop: 'activation_status',
+      label: '激活状态',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => {
+        const type = row.activation_status === 1 ? 'success' : 'info'
+        const text = row.activation_status === 1 ? '已激活' : '未激活'
+        return h(ElTag, { type }, () => text)
+      }
+    },
+    {
+      prop: 'network_status',
+      label: '网络状态',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => {
+        const type = row.network_status === 1 ? 'success' : 'danger'
+        const text = row.network_status === 1 ? '开机' : '停机'
+        return h(ElTag, { type }, () => text)
+      }
+    },
+    {
+      prop: 'real_name_status',
+      label: '实名状态',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => {
+        const type = row.real_name_status === 1 ? 'success' : 'warning'
+        const text = row.real_name_status === 1 ? '已实名' : '未实名'
+        return h(ElTag, { type }, () => text)
+      }
+    },
+    {
+      prop: 'data_usage_mb',
+      label: '累计流量(MB)',
+      width: 120
+    },
+    {
+      prop: 'first_commission_paid',
+      label: '首次佣金',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => {
+        const type = row.first_commission_paid ? 'success' : 'info'
+        const text = row.first_commission_paid ? '已支付' : '未支付'
+        return h(ElTag, { type, size: 'small' }, () => text)
+      }
+    },
+    {
+      prop: 'accumulated_recharge',
+      label: '累计充值',
+      width: 100,
+      formatter: (row: StandaloneIotCard) => `¥${(row.accumulated_recharge / 100).toFixed(2)}`
+    }
+  ])
+
+  // 获取可用卡列表
+  const getAvailableCardsList = async () => {
+    availableCardsLoading.value = true
+    try {
+      const params: any = {
+        page: cardPagination.page,
+        page_size: cardPagination.pageSize,
+        ...cardSearchForm
+      }
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await CardService.getStandaloneIotCards(params)
+      if (res.code === 0) {
+        availableCardsList.value = res.data.items || []
+        cardPagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取卡列表失败')
+    } finally {
+      availableCardsLoading.value = false
+    }
+  }
+
+  // 处理卡列表选择变化
+  const handleAvailableCardsSelectionChange = (selection: StandaloneIotCard[]) => {
+    selectedAvailableCards.value = selection
+  }
+
+  // 卡列表搜索
+  const handleCardSearch = () => {
+    cardPagination.page = 1
+    getAvailableCardsList()
+  }
+
+  // 卡列表重置
+  const handleCardSearchReset = () => {
+    Object.assign(cardSearchForm, { ...initialCardSearchState })
+    cardPagination.page = 1
+    getAvailableCardsList()
+  }
+
+  // 卡列表分页大小变化
+  const handleCardPageSizeChange = (newPageSize: number) => {
+    cardPagination.pageSize = newPageSize
+    getAvailableCardsList()
+  }
+
+  // 卡列表页码变化
+  const handleCardPageChange = (newPage: number) => {
+    cardPagination.page = newPage
+    getAvailableCardsList()
+  }
+
+  // 显示授权对话框
+  const showAllocateDialog = () => {
+    allocateDialogVisible.value = true
+    selectedAvailableCards.value = []
+    // 重置搜索条件
+    Object.assign(cardSearchForm, { ...initialCardSearchState })
+    cardPagination.page = 1
+    cardPagination.pageSize = 20
+    // 加载可用卡列表
+    getAvailableCardsList()
   }
 
   // 执行授权
   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('请确认设备绑定关系')
+    if (selectedAvailableCards.value.length === 0) {
+      ElMessage.warning('请选择要授权的卡')
       return
     }
 
     allocateLoading.value = true
     try {
+      const iccids = selectedAvailableCards.value.map((card) => card.iccid)
       const res = await EnterpriseService.allocateCards(enterpriseId.value, {
-        iccids: allocateForm.iccids,
-        confirm_device_bundles: allocateForm.confirm_device_bundles || undefined
+        iccids
       })
 
       if (res.code === 0) {
@@ -683,10 +880,7 @@
 
   // 关闭授权对话框
   const handleAllocateDialogClose = () => {
-    if (allocateFormRef.value) {
-      allocateFormRef.value.resetFields()
-    }
-    previewData.value = null
+    selectedAvailableCards.value = []
   }
 
   // 显示批量回收对话框
@@ -711,7 +905,7 @@
         recallLoading.value = true
         try {
           const res = await EnterpriseService.recallCards(enterpriseId.value, {
-            card_ids: selectedCards.value.map((card) => card.id)
+            iccids: selectedCards.value.map((card) => card.iccid)
           })
 
           if (res.code === 0) {
@@ -743,6 +937,11 @@
     }
   }
 
+  // 关闭结果对话框
+  const handleResultDialogClose = () => {
+    getTableData()
+  }
+
   // 停机卡
   const handleSuspend = (row: EnterpriseCardItem) => {
     ElMessageBox.confirm('确定要停机该卡吗？', '停机卡', {
@@ -786,10 +985,34 @@
 
 <style lang="scss" scoped>
   .enterprise-cards-page {
+    .enterprise-info-card {
+      margin-bottom: 16px;
+    }
+
     .card-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+    }
+
+    .card-selection-info {
+      margin-top: 10px;
+      margin-bottom: 12px;
+      color: var(--el-color-info);
+      font-size: 14px;
+    }
+
+    .card-pagination {
+      margin-top: 16px;
+      text-align: right;
+    }
+
+    .result-section {
+      margin-top: 20px;
+    }
+
+    .mt-20 {
+      margin-top: 20px;
     }
   }
 </style>