绑定卡列表操作卡

src/views/my-simcard/single-card/index.vue

@@ -249,6 +249,40 @@
                     </ElTag>
                   </template>
                 </ElTableColumn>
+                <ElTableColumn label="操作" width="280" align="center">
+                  <template #default="scope">
+                    <!-- 根据网络状态显示启用或停用按钮 -->
+                    <ElButton
+                      v-if="scope.row.network_status === 0"
+                      type="success"
+                      size="small"
+                      link
+                      @click="handleEnableBindingCard(scope.row)"
+                      v-permission="'iot_card:start'"
+                    >
+                      启用此卡
+                    </ElButton>
+                    <ElButton
+                      v-if="scope.row.network_status === 1"
+                      type="warning"
+                      size="small"
+                      link
+                      @click="handleDisableBindingCard(scope.row)"
+                      v-permission="'iot_card:stop'"
+                    >
+                      停用此卡
+                    </ElButton>
+                    <ElButton
+                      type="info"
+                      size="small"
+                      link
+                      @click="handleDeactivateBindingCard(scope.row)"
+                      v-permission="'iot_card:manual_deactivate'"
+                    >
+                      手动停用
+                    </ElButton>
+                  </template>
+                </ElTableColumn>
               </ElTable>
               <ElEmpty v-else description="暂无绑定卡" :image-size="80" style="margin-top: 16px" />
 
@@ -917,7 +951,7 @@
             controls-position="right"
             style="width: 100%"
           />
-          <div style=" margin-top: 4px; font-size: 12px;color: #909399">单位: KB/s</div>
+          <div style="margin-top: 4px; font-size: 12px; color: #909399">单位: KB/s</div>
         </ElFormItem>
         <ElFormItem label="上行速率" prop="upload_speed">
           <ElInputNumber
@@ -927,7 +961,7 @@
             controls-position="right"
             style="width: 100%"
           />
-          <div style=" margin-top: 4px; font-size: 12px;color: #909399">单位: KB/s</div>
+          <div style="margin-top: 4px; font-size: 12px; color: #909399">单位: KB/s</div>
         </ElFormItem>
       </ElForm>
       <template #footer>
@@ -944,7 +978,7 @@
 
     <!-- 切换SIM卡对话框 -->
     <ElDialog v-model="switchCardDialogVisible" title="切换SIM卡" width="600px">
-      <div v-if="loadingDeviceCards" style=" padding: 40px;text-align: center">
+      <div v-if="loadingDeviceCards" style="padding: 40px; text-align: center">
         <ElIcon class="is-loading" :size="40"><Loading /></ElIcon>
         <div style="margin-top: 16px">加载设备绑定的卡列表中...</div>
       </div>
@@ -1079,7 +1113,7 @@
         </ElDescriptions>
 
         <!-- 筛选器 -->
-        <div style=" display: flex; gap: 12px; align-items: center;margin-bottom: 16px">
+        <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 16px">
           <span style="font-weight: 500">筛选方式：</span>
           <ElRadioGroup v-model="dateFilterType" @change="handleDateFilterChange">
             <ElRadio value="all">全部</ElRadio>
@@ -1145,7 +1179,7 @@
           </ElTableColumn>
         </ElTable>
       </div>
-      <div v-else-if="!dailyRecordsLoading" style=" padding: 40px 0;text-align: center">
+      <div v-else-if="!dailyRecordsLoading" style="padding: 40px 0; text-align: center">
         <ElEmpty description="暂无流量详单数据" />
       </div>
     </ElDialog>
@@ -2368,6 +2402,74 @@
     }
   }
 
+  // ========== 绑定卡列表操作 ==========
+
+  // 启用绑定卡列表中的某张卡
+  const handleEnableBindingCard = async (card: any) => {
+    try {
+      await ElMessageBox.confirm(`确认要启用卡片 ${card.iccid} 吗？`, '提示', {
+        type: 'warning'
+      })
+
+      const res = await CardService.enableIotCard(card.iccid)
+      if (res.code === 0) {
+        ElMessage.success('启用成功')
+        await handleRefreshAsset()
+      }
+    } catch (error: any) {
+      if (error !== 'cancel') {
+        console.error('启用失败:', error)
+        ElMessage.error(error?.message || '启用失败')
+      }
+    }
+  }
+
+  // 停用绑定卡列表中的某张卡
+  const handleDisableBindingCard = async (card: any) => {
+    try {
+      await ElMessageBox.confirm(`确认要停用卡片 ${card.iccid} 吗？`, '提示', {
+        type: 'warning'
+      })
+
+      const res = await CardService.disableIotCard(card.iccid)
+      if (res.code === 0) {
+        ElMessage.success('停用成功')
+        await handleRefreshAsset()
+      }
+    } catch (error: any) {
+      if (error !== 'cancel') {
+        console.error('停用失败:', error)
+        ElMessage.error(error?.message || '停用失败')
+      }
+    }
+  }
+
+  // 手动停用绑定卡列表中的某张卡
+  const handleDeactivateBindingCard = async (card: any) => {
+    try {
+      await ElMessageBox.confirm(
+        `手动停用后卡片 ${card.iccid} 将永久停用，无法再次使用。此操作不可逆，请谨慎操作。确认要手动停用吗？`,
+        '警告',
+        {
+          type: 'error',
+          confirmButtonText: '确认停用',
+          cancelButtonText: '取消'
+        }
+      )
+
+      const res = await CardService.deactivateIotCard(card.id)
+      if (res.code === 0) {
+        ElMessage.success('手动停用成功')
+        await handleRefreshAsset()
+      }
+    } catch (error: any) {
+      if (error !== 'cancel') {
+        console.error('手动停用失败:', error)
+        ElMessage.error(error?.message || '手动停用失败')
+      }
+    }
+  }
+
   // ========== 设备操作 ==========
 
   // 重启设备