新增

src/components/device/SwitchCardDialog.vue

@@ -0,0 +1,153 @@
+<template>
+  <ElDialog v-model="visible" title="切换SIM卡" width="600px" @close="handleClose">
+    <div v-if="loading" style="text-align: center; padding: 40px">
+      <ElIcon class="is-loading" :size="40"><Loading /></ElIcon>
+      <div style="margin-top: 16px">加载设备绑定的卡列表中...</div>
+    </div>
+
+    <template v-else>
+      <ElAlert
+        v-if="cards.length === 0"
+        title="该设备暂无绑定的SIM卡"
+        type="warning"
+        :closable="false"
+        style="margin-bottom: 20px"
+      >
+        <template #default>
+          <div>当前设备没有绑定任何SIM卡,无法进行切换操作。</div>
+          <div>请先为设备绑定SIM卡后再进行切换。</div>
+        </template>
+      </ElAlert>
+
+      <ElForm
+        v-if="cards.length > 0"
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
+      >
+        <ElFormItem label="设备信息">
+          <span style="font-weight: bold; color: #409eff">{{ deviceInfo }}</span>
+        </ElFormItem>
+        <ElFormItem label="目标ICCID" prop="target_iccid">
+          <ElSelect
+            v-model="formData.target_iccid"
+            placeholder="请选择要切换到的目标ICCID"
+            style="width: 100%"
+            clearable
+          >
+            <ElOption
+              v-for="card in cards"
+              :key="card.iccid"
+              :label="`${card.iccid} - 插槽${card.slot_position} - ${card.carrier_name}`"
+              :value="card.iccid"
+            >
+              <div style="display: flex; justify-content: space-between; align-items: center">
+                <span>{{ card.iccid }}</span>
+                <ElTag size="small" style="margin-left: 10px">插槽{{ card.slot_position }}</ElTag>
+              </div>
+            </ElOption>
+          </ElSelect>
+          <div style="margin-top: 8px; font-size: 12px; color: #909399">
+            当前设备共绑定 {{ cards.length }} 张SIM卡
+          </div>
+        </ElFormItem>
+      </ElForm>
+    </template>
+
+    <template #footer>
+      <ElButton @click="visible = false">取消</ElButton>
+      <ElButton
+        v-if="cards.length > 0"
+        type="primary"
+        @click="handleConfirm"
+        :loading="confirmLoading"
+      >
+        确认切换
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, watch } from 'vue'
+  import {
+    ElDialog,
+    ElForm,
+    ElFormItem,
+    ElSelect,
+    ElOption,
+    ElButton,
+    ElAlert,
+    ElIcon,
+    ElTag
+  } from 'element-plus'
+  import { Loading } from '@element-plus/icons-vue'
+  import type { FormInstance, FormRules } from 'element-plus'
+
+  interface CardBinding {
+    id: number
+    iccid: string
+    slot_position: number
+    carrier_name: string
+  }
+
+  interface Props {
+    modelValue: boolean
+    deviceInfo: string
+    cards: CardBinding[]
+    loading?: boolean
+    confirmLoading?: boolean
+  }
+
+  interface Emits {
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm', data: { target_iccid: string }): void
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    loading: false,
+    confirmLoading: false
+  })
+
+  const emit = defineEmits<Emits>()
+
+  const visible = ref(props.modelValue)
+  const formRef = ref<FormInstance>()
+
+  const formData = reactive({
+    target_iccid: ''
+  })
+
+  const rules = reactive<FormRules>({
+    target_iccid: [{ required: true, message: '请选择目标ICCID', trigger: 'change' }]
+  })
+
+  watch(() => props.modelValue, (val) => {
+    visible.value = val
+    if (val) {
+      // 重置表单
+      formData.target_iccid = ''
+    }
+  })
+
+  watch(visible, (val) => {
+    emit('update:modelValue', val)
+  })
+
+  const handleClose = () => {
+    formRef.value?.resetFields()
+  }
+
+  const handleConfirm = async () => {
+    if (!formRef.value) return
+
+    await formRef.value.validate((valid) => {
+      if (valid) {
+        emit('confirm', {
+          target_iccid: formData.target_iccid
+        })
+      }
+    })
+  }
+</script>