feat: 套餐分层级

src/views/asset-management/asset-information/components/PackageListCard.vue

@@ -29,8 +29,19 @@
         </template>
       </ElEmpty>
       <div v-else-if="packageList && packageList.length > 0" class="table-scroll-container">
-        <ElTable :data="packageList" class="package-table" border>
-          <ElTableColumn label="订单号" width="240">
+        <ElTable
+          :data="packageList"
+          :expand-row-keys="defaultExpandedPackageUsageIds"
+          :tree-props="{ children: 'children' }"
+          row-key="package_usage_id"
+          class="package-table"
+          border
+        >
+          <ElTableColumn
+            label="订单号"
+            :width="orderNoColumnWidth"
+            class-name="package-order-column"
+          >
             <template #default="scope">
               <div class="order-no-cell">
                 <ElTooltip :content="scope.row.order_no" placement="top" :show-after="300">
@@ -50,7 +61,16 @@
           </ElTableColumn>
           <ElTableColumn label="套餐名称" width="200" show-overflow-tooltip>
             <template #default="scope">
-              <span class="package-name-text">{{ scope.row.package_name }}</span>
+              <div class="package-name-cell">
+                <span class="package-name-text">{{ scope.row.package_name }}</span>
+                <ElTag
+                  v-if="scope.row.relationship_status === 'master_missing'"
+                  type="warning"
+                  size="small"
+                >
+                  {{ scope.row.relationship_status_name || '主套餐缺失' }}
+                </ElTag>
+              </div>
             </template>
           </ElTableColumn>
           <ElTableColumn v-if="isAdminOrPlatform" label="套餐成本价格" width="120">
@@ -659,6 +679,25 @@
     total: props.total
   })
 
+  const defaultExpandedPackageUsageIds = computed(() =>
+    props.packageList
+      .filter((pkg) => pkg.expand_by_default && pkg.children?.length)
+      .map((pkg) => pkg.package_usage_id ?? pkg.id)
+      .filter((id): id is number => typeof id === 'number')
+      .map(String)
+  )
+
+  const getLongestOrderNoLength = (packages: PackageInfo[]): number =>
+    packages.reduce((longestLength, pkg) => {
+      const childLongestLength = pkg.children?.length ? getLongestOrderNoLength(pkg.children) : 0
+      return Math.max(longestLength, pkg.order_no?.length || 0, childLongestLength)
+    }, 0)
+
+  // 为树形展开按钮、层级缩进和单元格留出空间，避免订单号过早省略。
+  const orderNoColumnWidth = computed(() =>
+    Math.min(Math.max(240, getLongestOrderNoLength(props.packageList) * 8 + 80), 500)
+  )
+
   // 监听props变化更新分页
   watch(
     () => [props.page, props.pageSize, props.total],
@@ -757,6 +796,12 @@
             }
           }
 
+          :deep(.package-order-column .cell) {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+          }
+
           .package-name-text {
             display: block;
             overflow: hidden;
@@ -765,8 +810,20 @@
             white-space: nowrap;
           }
 
+          .package-name-cell {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            min-width: 0;
+
+            .package-name-text {
+              flex: 1;
+              min-width: 0;
+            }
+          }
+
           .order-no-cell {
-            width: 100%;
+            flex: 1;
             min-width: 0;
 
             :deep(.el-tooltip__trigger) {