173 lines
4.4 KiB
Vue
173 lines
4.4 KiB
Vue
<template>
|
|
<ElDialog v-model="visible" title="切换SIM卡" width="600px" @close="handleClose">
|
|
<div v-if="loading" style="padding: 40px; text-align: center">
|
|
<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;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
"
|
|
>
|
|
<span>{{ card.iccid }}</span>
|
|
<div>
|
|
<ElTag size="small" style="margin-left: 10px">插槽{{ card.slot_position }}</ElTag>
|
|
<ElTag
|
|
v-if="card.carrier_name"
|
|
size="small"
|
|
type="success"
|
|
style="margin-left: 5px"
|
|
>{{ card.carrier_name }}</ElTag
|
|
>
|
|
</div>
|
|
</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>
|