feat: 预计最终到期时间展示

src/views/asset-management/device-list/index.vue

@@ -995,6 +995,7 @@
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import { useAuth } from '@/composables/useAuth'
   import { formatDateTime } from '@/utils/business/format'
+  import { getExpiryEstimateText, getExpiryEstimateTooltip } from '@/utils/business/expiryEstimate'
   import type { PackageSeriesResponse } from '@/types/api'
   import type { EnterpriseItem } from '@/types/api/enterprise'
   import type {
@@ -1606,6 +1607,7 @@
     { label: '设备名称', prop: 'device_name' },
     { label: '店铺名称', prop: 'shop_name' },
     { label: '套餐系列', prop: 'series_name' },
+    { label: '预计套餐到期时间', prop: 'estimated_final_expires_at' },
     { label: '设备型号', prop: 'device_model' },
     { label: '设备类型', prop: 'device_type' },
     { label: '状态', prop: 'status' },
@@ -1890,6 +1892,20 @@
       minWidth: 180,
       showOverflowTooltip: true
     },
+    {
+      prop: 'estimated_final_expires_at',
+      label: '预计套餐到期时间',
+      width: 180,
+      formatter: (row: Device) =>
+        h(
+          'span',
+          {
+            class: { 'expiry-estimate--expiring': row.is_expiring },
+            title: getExpiryEstimateTooltip(row)
+          },
+          getExpiryEstimateText(row)
+        )
+    },
     {
       prop: 'device_model',
       label: '设备型号',
@@ -3201,4 +3217,9 @@
   :deep(.el-table__row.table-row-with-context-menu) {
     cursor: pointer;
   }
+
+  .expiry-estimate--expiring {
+    font-weight: 500;
+    color: var(--el-color-danger);
+  }
 </style>