fix(operator): fix operator edit issue
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 5m51s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 5m51s
This commit is contained in:
sexygoat
@@ -60,6 +60,21 @@
|
||||
{{ getAssetStatusName(cardInfo?.status) }}
|
||||
</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<template v-if="cardInfo?.bound_device_id">
|
||||
<ElDescriptionsItem label="绑定设备号">
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
@click="emit('navigateToDevice', cardInfo!.bound_device_no!)"
|
||||
>
|
||||
{{ cardInfo?.bound_device_no || '-' }}
|
||||
</ElButton>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="绑定设备名称">
|
||||
{{ cardInfo?.bound_device_name || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 设备专属字段 -->
|
||||
@@ -329,17 +344,7 @@
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
</div>
|
||||
<ElAlert
|
||||
v-else
|
||||
title="设备实时信息不可用"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
style="margin-top: 16px"
|
||||
>
|
||||
<template #default>
|
||||
<div>Gateway 不可达或设备离线,无法获取实时信息</div>
|
||||
</template>
|
||||
</ElAlert>
|
||||
<ElEmpty v-else description="暂无实时信息" :image-size="80" style="margin-top: 16px" />
|
||||
</template>
|
||||
|
||||
<!-- IoT卡操作按钮 -->
|
||||
@@ -377,7 +382,7 @@
|
||||
ElTableColumn,
|
||||
ElButton,
|
||||
ElEmpty,
|
||||
ElAlert
|
||||
ElMessageBox
|
||||
} from 'element-plus'
|
||||
import { useAssetFormatters } from '../composables/useAssetFormatters'
|
||||
import { formatDateTime } from '@/utils/business/format'
|
||||
@@ -415,6 +420,9 @@
|
||||
series_name?: string
|
||||
real_name_at?: string
|
||||
supplier?: string
|
||||
bound_device_id?: number
|
||||
bound_device_no?: string
|
||||
bound_device_name?: string
|
||||
bound_card_count?: number
|
||||
max_sim_slots?: number
|
||||
activated_at?: string
|
||||
@@ -481,6 +489,7 @@
|
||||
(e: 'enableBindingCard', payload: { card: BindingCard }): void
|
||||
(e: 'disableBindingCard', payload: { card: BindingCard }): void
|
||||
(e: 'navigateToCard', iccid: string): void
|
||||
(e: 'navigateToDevice', deviceNo: string): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
@@ -565,11 +574,27 @@
|
||||
|
||||
// 绑定卡操作
|
||||
const handleEnableBindingCard = (card: BindingCard) => {
|
||||
emit('enableBindingCard', { card })
|
||||
ElMessageBox.confirm(`确定要启用此卡（${card.iccid}）吗？`, '启用确认', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
emit('enableBindingCard', { card })
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const handleDisableBindingCard = (card: BindingCard) => {
|
||||
emit('disableBindingCard', { card })
|
||||
ElMessageBox.confirm(`确定要停用此卡（${card.iccid}）吗？`, '停用确认', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
emit('disableBindingCard', { card })
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -12,114 +12,110 @@
|
||||
{{ currentPackage?.status_name || '-' }}
|
||||
</ElTag>
|
||||
</div>
|
||||
|
||||
<!-- 中间：流量进度 -->
|
||||
<div v-if="currentPackage && !props.boundDeviceId" class="header-progress">
|
||||
<div class="header-progress-info">
|
||||
<span class="progress-title">流量</span>
|
||||
<span class="progress-text">
|
||||
<template v-if="currentPackage.enable_virtual_data">
|
||||
已用 {{ formatDataSize(currentPackage.virtual_data_used || 0) }} / 剩余
|
||||
{{ formatDataSize(currentPackage.virtual_data_remaining || 0) }} / 总量
|
||||
{{ formatDataSize(currentPackage.virtual_data_total || 0) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
已用 {{ formatDataSize(currentPackage.real_data_used || 0) }} / 剩余
|
||||
{{ formatDataSize(currentPackage.real_data_remaining || 0) }} / 总量
|
||||
{{ formatDataSize(currentPackage.real_data_total || 0) }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<ElProgress
|
||||
:percentage="
|
||||
currentPackage.enable_virtual_data
|
||||
? getUsageProgress(
|
||||
currentPackage.virtual_data_used || 0,
|
||||
currentPackage.virtual_data_total || 0
|
||||
)
|
||||
: getUsageProgress(
|
||||
currentPackage.real_data_used || 0,
|
||||
currentPackage.real_data_total || 0
|
||||
)
|
||||
"
|
||||
:color="
|
||||
currentPackage.enable_virtual_data
|
||||
? getProgressColorByPercentage(
|
||||
getUsageProgress(
|
||||
currentPackage.virtual_data_used || 0,
|
||||
currentPackage.virtual_data_total || 0
|
||||
)
|
||||
)
|
||||
: getProgressColorByPercentage(
|
||||
getUsageProgress(
|
||||
currentPackage.real_data_used || 0,
|
||||
currentPackage.real_data_total || 0
|
||||
)
|
||||
)
|
||||
"
|
||||
:stroke-width="10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="currentPackage" class="card-header-right">
|
||||
<ElButton type="primary" size="small" @click="handleShowRecharge"> 套餐充值 </ElButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 绑定设备提示（优先于一切内容） -->
|
||||
<template v-if="props.boundDeviceId">
|
||||
<ElEmpty :image-size="100">
|
||||
<template #description>
|
||||
<span>该卡已绑定设备，请点击 </span>
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
style="font-size: 15px; font-weight: 600"
|
||||
@click="emit('navigateToDevice', props.boundDeviceNo!)"
|
||||
>{{ props.boundDeviceNo }}</ElButton
|
||||
>
|
||||
<span> 进行查看</span>
|
||||
</template>
|
||||
</ElEmpty>
|
||||
</template>
|
||||
|
||||
<!-- 显示错误信息 -->
|
||||
<ElAlert v-if="errorMsg" :title="errorMsg" type="warning" :closable="false" />
|
||||
<ElAlert v-else-if="errorMsg" :title="errorMsg" type="warning" :closable="false" />
|
||||
|
||||
<!-- 显示套餐详情 -->
|
||||
<div v-else-if="currentPackage">
|
||||
<ElDescriptions :column="3" border>
|
||||
<!-- 套餐基本信息 -->
|
||||
<ElDescriptionsItem label="套餐名称">
|
||||
{{ currentPackage.package_name || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="套餐价格">
|
||||
{{ formatAmount(currentPackage.package_price) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="套餐总量">
|
||||
{{ formatDataSize(currentPackage.package_total_data || 0) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="套餐类型">
|
||||
{{ getPackageTypeName(currentPackage.package_type) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="虚流量比例">
|
||||
{{ currentPackage.virtual_ratio || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<!-- 套餐时长 -->
|
||||
<ElDescriptionsItem v-if="currentPackage.duration_days" label="套餐时长" :span="3">
|
||||
{{ currentPackage.duration_days }}天
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 真流量进度 -->
|
||||
<div class="traffic-progress-wrapper">
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">真流量</span>
|
||||
<span class="progress-text">
|
||||
已用 {{ formatDataSize(currentPackage.real_data_used || 0) }} / 剩余
|
||||
{{ formatDataSize(currentPackage.real_data_remaining || 0) }} / 总量
|
||||
{{ formatDataSize(currentPackage.real_data_total || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<ElProgress
|
||||
:percentage="
|
||||
getUsageProgress(
|
||||
currentPackage.real_data_used || 0,
|
||||
currentPackage.real_data_total || 0
|
||||
)
|
||||
"
|
||||
:color="
|
||||
getProgressColorByPercentage(
|
||||
getUsageProgress(
|
||||
currentPackage.real_data_used || 0,
|
||||
currentPackage.real_data_total || 0
|
||||
)
|
||||
)
|
||||
"
|
||||
:stroke-width="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 虚流量进度 -->
|
||||
<div class="traffic-progress-wrapper">
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">虚流量</span>
|
||||
<span class="progress-text">
|
||||
已用 {{ formatDataSize(currentPackage.virtual_data_used || 0) }} / 剩余
|
||||
{{ formatDataSize(currentPackage.virtual_data_remaining || 0) }} / 总量
|
||||
{{ formatDataSize(currentPackage.virtual_data_total || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<ElProgress
|
||||
:percentage="
|
||||
getUsageProgress(
|
||||
currentPackage.virtual_data_used || 0,
|
||||
currentPackage.virtual_data_total || 0
|
||||
)
|
||||
"
|
||||
:color="
|
||||
getProgressColorByPercentage(
|
||||
getUsageProgress(
|
||||
currentPackage.virtual_data_used || 0,
|
||||
currentPackage.virtual_data_total || 0
|
||||
)
|
||||
)
|
||||
"
|
||||
:stroke-width="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 时间信息 -->
|
||||
<ElDescriptions :column="3" border style="margin-top: 16px">
|
||||
<ElDescriptionsItem label="开始时间">
|
||||
{{ formatDateTime(currentPackage.start_time) || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="到期时间">
|
||||
{{ formatDateTime(currentPackage.expire_time) || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="状态">
|
||||
<ElTag :type="getPackageStatusTagType(currentPackage.status)" size="small">
|
||||
{{ currentPackage.status_name || '-' }}
|
||||
</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
</div>
|
||||
<ElDescriptions v-else-if="currentPackage" :column="3" border>
|
||||
<ElDescriptionsItem label="套餐名称">
|
||||
{{ currentPackage.package_name || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="套餐价格">
|
||||
{{ formatAmount(currentPackage.package_price) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="套餐类型">
|
||||
{{ getPackageTypeName(currentPackage.package_type) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem v-if="currentPackage.enable_virtual_data" label="虚流量比例">
|
||||
{{ currentPackage.virtual_ratio || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem v-if="currentPackage.duration_days" label="套餐时长" :span="3">
|
||||
{{ currentPackage.duration_days }}天
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="开始时间">
|
||||
{{ formatDateTime(currentPackage.start_time) || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="到期时间">
|
||||
{{ formatDateTime(currentPackage.expire_time) || '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="状态">
|
||||
<ElTag :type="getPackageStatusTagType(currentPackage.status)" size="small">
|
||||
{{ currentPackage.status_name || '-' }}
|
||||
</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<ElEmpty v-else-if="!loading" :description="errorMsg || '暂无当前生效套餐'" :image-size="100" />
|
||||
@@ -155,16 +151,23 @@
|
||||
currentPackage: PackageInfo | null
|
||||
loading?: boolean
|
||||
errorMsg?: string
|
||||
boundDeviceId?: number
|
||||
boundDeviceNo?: string
|
||||
boundDeviceName?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
errorMsg: ''
|
||||
errorMsg: '',
|
||||
boundDeviceId: undefined,
|
||||
boundDeviceNo: '',
|
||||
boundDeviceName: ''
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
showRecharge: []
|
||||
navigateToDevice: [deviceNo: string]
|
||||
}>()
|
||||
|
||||
// Methods
|
||||
@@ -208,34 +211,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-progress-wrapper {
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 8px;
|
||||
.header-progress {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 24px;
|
||||
|
||||
.progress-info {
|
||||
.header-progress-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.progress-label {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
.progress-title {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-actions {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,110 +6,117 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="package-table-wrapper">
|
||||
<div v-if="packageList && packageList.length > 0" class="table-scroll-container">
|
||||
<ElTable
|
||||
:data="packageList"
|
||||
class="package-table"
|
||||
border
|
||||
>
|
||||
<ElTableColumn label="套餐名称" width="150">
|
||||
<template #default="scope">
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
class="package-name-link"
|
||||
@click="handleShowDailyRecords(scope.row)"
|
||||
v-permission="'package-usage:daily-records:view'"
|
||||
>
|
||||
{{ scope.row.package_name }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="套餐价格" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatAmount(scope.row.package_price || 0) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="status_name" label="套餐状态" width="100">
|
||||
<template #default="scope">
|
||||
<ElTag :type="getPackageStatusTagType(scope.row.status)" size="small">
|
||||
{{ scope.row.status_name }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="data_limit_mb" label="总流量" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatDataSize(scope.row.data_limit_mb) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="真流量" width="280">
|
||||
<template #default="scope">
|
||||
<div class="traffic-progress">
|
||||
<div class="progress-text">
|
||||
<span class="used">已用: {{ formatDataSize(scope.row.data_usage_mb) }}</span>
|
||||
<span class="remaining">
|
||||
剩余: {{ formatDataSize(scope.row.data_limit_mb - scope.row.data_usage_mb) }}
|
||||
</span>
|
||||
<span class="total">总量: {{ formatDataSize(scope.row.data_limit_mb) }}</span>
|
||||
<!-- 绑定设备提示 -->
|
||||
<ElEmpty v-if="props.boundDeviceId" :image-size="100">
|
||||
<template #description>
|
||||
<span>该卡已绑定设备，请点击 </span>
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
style="font-size: 15px; font-weight: 600"
|
||||
@click="emit('navigateToDevice', props.boundDeviceNo!)"
|
||||
>{{ props.boundDeviceNo }}</ElButton
|
||||
>
|
||||
<span> 进行查看</span>
|
||||
</template>
|
||||
</ElEmpty>
|
||||
<div v-else-if="packageList && packageList.length > 0" class="table-scroll-container">
|
||||
<ElTable :data="packageList" class="package-table" border>
|
||||
<ElTableColumn label="套餐名称" width="150">
|
||||
<template #default="scope">
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
class="package-name-link"
|
||||
@click="handleShowDailyRecords(scope.row)"
|
||||
v-permission="'package-usage:daily-records:view'"
|
||||
>
|
||||
{{ scope.row.package_name }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="套餐价格" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatAmount(scope.row.package_price || 0) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="status_name" label="套餐状态" width="100">
|
||||
<template #default="scope">
|
||||
<ElTag :type="getPackageStatusTagType(scope.row.status)" size="small">
|
||||
{{ scope.row.status_name }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="data_limit_mb" label="总流量" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatDataSize(scope.row.data_limit_mb) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="流量" min-width="220">
|
||||
<template #default="scope">
|
||||
<div class="traffic-progress">
|
||||
<div class="progress-text">
|
||||
<template v-if="scope.row.enable_virtual_data">
|
||||
<span class="used"
|
||||
>已用: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span
|
||||
>
|
||||
<span class="remaining"
|
||||
>剩余: {{ formatDataSize(scope.row.virtual_remain_mb || 0) }}</span
|
||||
>
|
||||
<span class="total"
|
||||
>总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}</span
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="used">已用: {{ formatDataSize(scope.row.data_usage_mb) }}</span>
|
||||
<span class="remaining"
|
||||
>剩余:
|
||||
{{ formatDataSize(scope.row.data_limit_mb - scope.row.data_usage_mb) }}</span
|
||||
>
|
||||
<span class="total">总量: {{ formatDataSize(scope.row.data_limit_mb) }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<ElProgress
|
||||
:percentage="
|
||||
scope.row.enable_virtual_data
|
||||
? getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
|
||||
: getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
|
||||
"
|
||||
:color="
|
||||
scope.row.enable_virtual_data
|
||||
? getProgressColorByPercentage(
|
||||
getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
|
||||
)
|
||||
: getProgressColorByPercentage(
|
||||
getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<ElProgress
|
||||
:percentage="getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)"
|
||||
:color="
|
||||
getProgressColorByPercentage(
|
||||
getUsageProgress(scope.row.data_usage_mb, scope.row.data_limit_mb)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="虚流量" width="280">
|
||||
<template #default="scope">
|
||||
<div class="traffic-progress">
|
||||
<div class="progress-text">
|
||||
<span class="used">已用: {{ formatDataSize(scope.row.virtual_used_mb || 0) }}</span>
|
||||
<span class="remaining">
|
||||
剩余: {{ formatDataSize(scope.row.virtual_remain_mb || 0) }}
|
||||
</span>
|
||||
<span class="total">
|
||||
总量: {{ formatDataSize(scope.row.virtual_limit_mb || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<ElProgress
|
||||
:percentage="
|
||||
getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
|
||||
"
|
||||
:color="
|
||||
getProgressColorByPercentage(
|
||||
getUsageProgress(scope.row.virtual_used_mb, scope.row.virtual_limit_mb)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="activated_at" label="开始时间" width="170" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.activated_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="expires_at" label="到期时间" width="170" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.expires_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="操作" width="100" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
@click="handleShowDailyRecords(scope.row)"
|
||||
v-permission="'package-usage:daily-records:view'"
|
||||
>
|
||||
流量详单
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="activated_at" label="开始时间" width="170" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.activated_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="expires_at" label="到期时间" width="170" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.expires_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="操作" width="100" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
@click="handleShowDailyRecords(scope.row)"
|
||||
v-permission="'package-usage:daily-records:view'"
|
||||
>
|
||||
流量详单
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination
|
||||
v-model:current-page="pagination.page"
|
||||
@@ -122,7 +129,7 @@
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<ElEmpty v-else description="暂无套餐数据" :image-size="100" />
|
||||
<ElEmpty v-else-if="!props.boundDeviceId" description="暂无套餐数据" :image-size="100" />
|
||||
</div>
|
||||
</ElCard>
|
||||
</template>
|
||||
@@ -139,6 +146,7 @@
|
||||
ElEmpty,
|
||||
ElPagination
|
||||
} from 'element-plus'
|
||||
|
||||
import { useAssetFormatters } from '../composables/useAssetFormatters'
|
||||
import { formatDateTime } from '@/utils/business/format'
|
||||
import type { AssetPackageUsageRecord } from '@/types/api'
|
||||
@@ -151,12 +159,16 @@
|
||||
total?: number
|
||||
page?: number
|
||||
pageSize?: number
|
||||
boundDeviceId?: number
|
||||
boundDeviceNo?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
pageSize: 10,
|
||||
boundDeviceId: undefined,
|
||||
boundDeviceNo: ''
|
||||
})
|
||||
|
||||
// Emits
|
||||
@@ -164,6 +176,7 @@
|
||||
(e: 'showDailyRecords', payload: { packageRow: PackageInfo }): void
|
||||
(e: 'page-change', page: number): void
|
||||
(e: 'size-change', size: number): void
|
||||
(e: 'navigateToDevice', deviceNo: string): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
@@ -3,10 +3,26 @@
|
||||
<template #header>
|
||||
<div class="card-header wallet-header">
|
||||
<div class="header-left">
|
||||
<span>钱包流水</span>
|
||||
<ElTag type="info" size="small"> 共 {{ total }} 条 </ElTag>
|
||||
<span class="wallet-title">钱包</span>
|
||||
<ElTag v-if="walletInfo" :type="getWalletStatusType(walletInfo.status)" size="small">
|
||||
{{ walletInfo.status_text || '-' }}
|
||||
</ElTag>
|
||||
<template v-if="walletInfo">
|
||||
<ElDivider direction="vertical" />
|
||||
<span class="balance-item"
|
||||
>💰 总余额 <strong>{{ formatAmount(walletInfo.balance) }}</strong></span
|
||||
>
|
||||
<ElDivider direction="vertical" />
|
||||
<span class="balance-item"
|
||||
>✅ 可用 <strong>{{ formatAmount(walletInfo.available_balance) }}</strong></span
|
||||
>
|
||||
<ElDivider direction="vertical" />
|
||||
<span class="balance-item"
|
||||
>🔒 冻结 <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong></span
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<div v-if="!props.boundDeviceId" class="filter-section">
|
||||
<ElSelect
|
||||
v-model="filterForm.transaction_type"
|
||||
placeholder="交易类型"
|
||||
@@ -28,11 +44,27 @@
|
||||
/>
|
||||
<ElButton type="primary" @click="handleQuery">查询</ElButton>
|
||||
<ElButton @click="handleReset">重置</ElButton>
|
||||
<ElTag type="info" size="small">共 {{ total }} 条</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="wallet-table-wrapper">
|
||||
<!-- 流水表格 -->
|
||||
|
||||
<!-- 绑定设备提示 -->
|
||||
<ElEmpty v-if="props.boundDeviceId" :image-size="100">
|
||||
<template #description>
|
||||
<span>该卡已绑定设备，请点击 </span>
|
||||
<ElButton
|
||||
type="primary"
|
||||
link
|
||||
style="font-size: 15px; font-weight: 600"
|
||||
@click="emit('navigateToDevice', props.boundDeviceNo!)"
|
||||
>{{ props.boundDeviceNo }}</ElButton
|
||||
>
|
||||
<span> 进行查看</span>
|
||||
</template>
|
||||
</ElEmpty>
|
||||
|
||||
<div v-else class="wallet-table-wrapper">
|
||||
<ElTable
|
||||
v-if="transactionList && transactionList.length > 0"
|
||||
:data="transactionList"
|
||||
@@ -115,7 +147,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
ElCard,
|
||||
ElTable,
|
||||
@@ -127,30 +159,46 @@
|
||||
ElDatePicker,
|
||||
ElPagination,
|
||||
ElEmpty,
|
||||
ElMessage
|
||||
ElMessage,
|
||||
ElDivider
|
||||
} from 'element-plus'
|
||||
import { useAssetFormatters } from '../composables/useAssetFormatters'
|
||||
import { formatDateTime } from '@/utils/business/format'
|
||||
import { AssetService } from '@/api/modules'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
assetIdentifier: string // ICCID or virtual_no
|
||||
interface WalletInfo {
|
||||
balance: number
|
||||
available_balance: number
|
||||
frozen_balance: number
|
||||
status: number
|
||||
status_text?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
interface Props {
|
||||
assetIdentifier: string
|
||||
walletInfo: WalletInfo | null
|
||||
walletLoading?: boolean
|
||||
boundDeviceId?: number
|
||||
boundDeviceNo?: string
|
||||
}
|
||||
|
||||
// 使用格式化工具
|
||||
const { formatAmount, getTransactionTypeTag } = useAssetFormatters()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
walletLoading: false,
|
||||
boundDeviceId: undefined,
|
||||
boundDeviceNo: ''
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'navigateToDevice', deviceNo: string): void
|
||||
}>()
|
||||
|
||||
const { formatAmount, getTransactionTypeTag, getWalletStatusType } = useAssetFormatters()
|
||||
|
||||
// State
|
||||
const loading = ref(false)
|
||||
const transactionList = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
page_size: 20
|
||||
})
|
||||
const pagination = ref({ page: 1, page_size: 20 })
|
||||
const filterForm = ref<{
|
||||
transaction_type: string | null
|
||||
date_range: [Date, Date] | null
|
||||
@@ -158,8 +206,6 @@
|
||||
transaction_type: null,
|
||||
date_range: null
|
||||
})
|
||||
|
||||
// API调用参数
|
||||
const queryParams = ref({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
@@ -168,10 +214,8 @@
|
||||
end_time: null as string | null
|
||||
})
|
||||
|
||||
// 加载钱包流水列表
|
||||
const loadTransactions = async () => {
|
||||
if (!props.assetIdentifier) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await AssetService.getWalletTransactions(
|
||||
@@ -193,13 +237,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 处理查询按钮点击
|
||||
const handleQuery = () => {
|
||||
queryParams.value.page = 1
|
||||
pagination.value.page = 1
|
||||
queryParams.value.transaction_type = filterForm.value.transaction_type
|
||||
|
||||
// 处理日期范围
|
||||
if (filterForm.value.date_range && filterForm.value.date_range.length === 2) {
|
||||
queryParams.value.start_time = filterForm.value.date_range[0].toISOString()
|
||||
queryParams.value.end_time = filterForm.value.date_range[1].toISOString()
|
||||
@@ -207,16 +248,13 @@
|
||||
queryParams.value.start_time = null
|
||||
queryParams.value.end_time = null
|
||||
}
|
||||
|
||||
loadTransactions()
|
||||
}
|
||||
|
||||
// 处理重置按钮点击
|
||||
const handleFilterChange = () => handleQuery()
|
||||
|
||||
const handleReset = () => {
|
||||
filterForm.value = {
|
||||
transaction_type: null,
|
||||
date_range: null
|
||||
}
|
||||
filterForm.value = { transaction_type: null, date_range: null }
|
||||
queryParams.value = {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
@@ -224,14 +262,10 @@
|
||||
start_time: null,
|
||||
end_time: null
|
||||
}
|
||||
pagination.value = {
|
||||
page: 1,
|
||||
page_size: 20
|
||||
}
|
||||
pagination.value = { page: 1, page_size: 20 }
|
||||
loadTransactions()
|
||||
}
|
||||
|
||||
// 处理分页大小变化
|
||||
const handlePageSizeChange = (size: number) => {
|
||||
queryParams.value.page_size = size
|
||||
queryParams.value.page = 1
|
||||
@@ -239,30 +273,19 @@
|
||||
loadTransactions()
|
||||
}
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page: number) => {
|
||||
queryParams.value.page = page
|
||||
loadTransactions()
|
||||
}
|
||||
|
||||
// 监听资产标识符变化
|
||||
// 仅监听 assetIdentifier 变化加载数据（去掉 onMounted 避免重复调用）
|
||||
watch(
|
||||
() => props.assetIdentifier,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
// 重置状态
|
||||
handleReset()
|
||||
}
|
||||
if (newVal) handleReset()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
if (props.assetIdentifier) {
|
||||
loadTransactions()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -277,14 +300,30 @@
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.wallet-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.balance-item {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -315,7 +354,7 @@
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,49 @@
|
||||
<template>
|
||||
<ElDialog v-model="visible" title="切换SIM卡" width="600px">
|
||||
<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>
|
||||
<ElAlert
|
||||
v-if="bindingCards.length === 0"
|
||||
title="该设备暂无绑定的SIM卡"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<template #default>
|
||||
<div>当前设备没有绑定任何SIM卡,无法进行切换操作。</div>
|
||||
<div>请先为设备绑定SIM卡后再进行切换。</div>
|
||||
</template>
|
||||
</ElAlert>
|
||||
|
||||
<template v-else>
|
||||
<ElAlert
|
||||
v-if="bindingCards.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="bindingCards.length > 0"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<ElFormItem label="目标ICCID" prop="target_iccid">
|
||||
<ElSelect
|
||||
v-model="form.target_iccid"
|
||||
placeholder="请选择要切换到的目标ICCID"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
<ElForm
|
||||
v-if="bindingCards.length > 0"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<ElFormItem label="目标ICCID" prop="target_iccid">
|
||||
<ElSelect
|
||||
v-model="form.target_iccid"
|
||||
placeholder="请选择要切换到的目标ICCID"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<ElOption
|
||||
v-for="card in bindingCards"
|
||||
:key="card.iccid"
|
||||
:label="`${card.iccid} - 插槽${card.slot_position} - ${card.carrier_name || '-'}`"
|
||||
:value="card.iccid"
|
||||
>
|
||||
<ElOption
|
||||
v-for="card in bindingCards"
|
||||
: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">
|
||||
<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">
|
||||
当前设备共绑定 {{ bindingCards.length }} 张SIM卡
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</template>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<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">
|
||||
当前设备共绑定 {{ bindingCards.length }} 张SIM卡
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<template #footer>
|
||||
<ElButton @click="handleCancel">取消</ElButton>
|
||||
@@ -76,17 +69,20 @@
|
||||
ElOption,
|
||||
ElButton,
|
||||
ElAlert,
|
||||
ElIcon,
|
||||
ElTag,
|
||||
ElMessage
|
||||
ElTag
|
||||
} from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import { DeviceService } from '@/api/modules'
|
||||
|
||||
interface BindingCard {
|
||||
iccid: string
|
||||
slot_position?: number
|
||||
carrier_name?: string
|
||||
is_current?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
deviceId: number
|
||||
cards?: BindingCard[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
@@ -94,17 +90,15 @@
|
||||
(e: 'confirm', data: { target_iccid: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
cards: () => []
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
const confirmLoading = ref(false)
|
||||
const bindingCards = ref<any[]>([])
|
||||
|
||||
const form = reactive({
|
||||
target_iccid: ''
|
||||
})
|
||||
const form = reactive({ target_iccid: '' })
|
||||
|
||||
const rules: FormRules = {
|
||||
target_iccid: [{ required: true, message: '请选择目标ICCID', trigger: 'change' }]
|
||||
@@ -115,47 +109,24 @@
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
// 监听对话框打开，加载绑定卡列表
|
||||
watch(visible, async (newVal) => {
|
||||
const bindingCards = computed(() => props.cards || [])
|
||||
|
||||
// 打开时重置选中
|
||||
watch(visible, (newVal) => {
|
||||
if (newVal) {
|
||||
form.target_iccid = ''
|
||||
bindingCards.value = []
|
||||
await loadDeviceCards()
|
||||
}
|
||||
})
|
||||
|
||||
const loadDeviceCards = async () => {
|
||||
if (!props.deviceId) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await DeviceService.getDeviceCards(props.deviceId)
|
||||
if (res.code === 0 && res.data) {
|
||||
bindingCards.value = res.data.bindings || []
|
||||
if (bindingCards.value.length === 0) {
|
||||
ElMessage.warning('该设备暂无绑定的SIM卡')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载设备绑定卡列表失败:', error)
|
||||
console.log('加载卡列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
emit('confirm', {
|
||||
target_iccid: form.target_iccid
|
||||
})
|
||||
emit('confirm', { target_iccid: form.target_iccid })
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user