luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(operator): fix operator edit issue
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m35s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-10 09:50:00 +08:00
parent c2c1644799
commit 9a6f085cde
20 changed files with 4082 additions and 2782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/views/asset-management/asset-information/components/PackageListCard.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<ElCard shadow="never" class="info-card package-info">
<template #header>
<div class="card-header">
<span>套餐列表</span>
</div>
</template>
<div class="package-table-wrapper">
<ElTable
v-if="packageList && packageList.length > 0"
:data="packageList"
class="package-table"
border
max-height="400"
>
<ElTableColumn label="套餐名称" min-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 prop="package_price" label="套餐价格" width="120">
<template #default="scope">
{{ formatAmount(scope.row.package_price) }}
</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>
</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>
</ElTable>
<ElEmpty v-else description="暂无套餐数据" :image-size="100" />
</div>
</ElCard>
</template>
<script setup lang="ts">
import {
ElCard,
ElTable,
ElTableColumn,
ElTag,
ElButton,
ElProgress,
ElEmpty
} from 'element-plus'
import { useAssetFormatters } from '../composables/useAssetFormatters'
import { formatDateTime } from '@/utils/business/format'
// Props
interface PackageInfo {
id: number
package_id: number
package_name: string
package_price: number
data_limit_mb: number
data_usage_mb: number
virtual_limit_mb: number
virtual_used_mb: number
virtual_remain_mb: number
activated_at: string
expires_at: string
status: number
status_name: string
}
interface Props {
packageList: PackageInfo[]
}
defineProps<Props>()
// Emits
interface Emits {
(e: 'showDailyRecords', payload: { packageRow: PackageInfo }): void
}
const emit = defineEmits<Emits>()
// 使用格式化工具
const {
formatDataSize,
formatAmount,
getPackageStatusTagType,
getUsageProgress,
getProgressColorByPercentage
} = useAssetFormatters()
// 显示流量详单
const handleShowDailyRecords = (packageRow: PackageInfo) => {
emit('showDailyRecords', { packageRow })
}
</script>
<style scoped lang="scss">
.info-card {
&.package-info {
.package-table-wrapper {
.package-table {
:deep(.el-table__header) {
th {
font-weight: 600;
color: var(--el-text-color-primary, #374151);
}
}
.package-name-link {
font-weight: 500;
}
.traffic-progress {
.progress-text {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
.used {
color: var(--el-color-primary);
}
.remaining {
color: var(--el-color-success);
}
.total {
color: var(--el-text-color-secondary);
}
}
}
}
}
}
}
</style>