imeik-bizui 2.6.6 → 2.6.7

package/dist/bizui/src/FieldFloorPriceBoard/core/FloorPriceDetailDialog.vue

@@ -2,7 +2,7 @@
   通用「底价明细」弹窗（纯展示，无接口依赖）
   - 顶部汇总：由 Dashboard 传入概览产品行
   - 下方三区（销售订单 / 非销出库 / 销售费用）等分三列并排
-  - 三列卡片按内容收高（不强制等高撑白），表格按当前页行数自适应、无内部滚动条
+  - 三列卡片等高：表格固定高度按 pageSize 撑开，合计底对齐
   - 分区数据前端分页（pageSize）；无底部关闭按钮，右上角关闭即可
 -->
 <template>
@@ -22,13 +22,8 @@
     >
       <div v-if="error" class="fpd-msg fpd-msg--error">{{ error }}</div>
 
-      <!-- 首次加载无内容时用骨架撑住高度，避免先闪出一条窄框 -->
+      <!-- 首次加载无内容时用骨架撑住高度，避免先闪出一条窄框；计算说明骨架仍在底部 -->
       <div v-else-if="showLoadingShell" class="fpd-skeleton" aria-hidden="true">
-        <div class="fpd-skeleton__formulas">
-          <div class="fpd-skeleton__bar fpd-skeleton__bar--label" />
-          <div class="fpd-skeleton__bar fpd-skeleton__bar--md" />
-          <div class="fpd-skeleton__bar fpd-skeleton__bar--sm" />
-        </div>
         <div class="fpd-skeleton__summary">
           <div class="fpd-skeleton__bar fpd-skeleton__bar--lg" />
           <div class="fpd-skeleton__bar" />
@@ -41,26 +36,15 @@
             <div class="fpd-skeleton__bar fpd-skeleton__bar--footer" />
           </div>
         </div>
+        <div class="fpd-skeleton__formulas">
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--label" />
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--md" />
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--sm" />
+        </div>
       </div>
 
       <template v-else>
-        <div v-if="formulaItems.length" class="fpd-formulas" role="note">
-          <span class="fpd-formulas__label">计算说明</span>
-          <div class="fpd-formulas__list">
-            <span
-              v-for="(item, idx) in formulaItems"
-              :key="idx"
-              class="fpd-formulas__item"
-            >
-              <em class="fpd-formulas__key">{{ item.key }}</em>
-              <span class="fpd-formulas__eq">=</span>
-              <span class="fpd-formulas__expr">{{ item.expr }}</span>
-            </span>
-          </div>
-        </div>
-
         <div v-if="summaryColumns.length" class="fpd-summary">
-          <div v-if="isNarrow" class="fpd-summary__hint">汇总表可左右滑动</div>
           <el-table
             :data="summaryRows"
             border
@@ -107,7 +91,6 @@
             <div class="fpd-section__head">
               <span class="fpd-section__title">{{ section.title }}</span>
               <span v-if="section.subtitle" class="fpd-section__subtitle">{{ section.subtitle }}</span>
-              <span v-if="isNarrow" class="fpd-section__hint">左右滑动查看完整信息</span>
             </div>
 
             <div class="fpd-section__table-wrap">
@@ -116,6 +99,7 @@
                 border
                 size="small"
                 class="fpd-table fpd-table--section"
+                :height="resolvedTableHeight"
                 :header-cell-style="headerCellStyle"
               >
                 <el-table-column
@@ -166,6 +150,22 @@
             </div>
           </div>
         </div>
+
+        <!-- 计算说明固定底部：有表格内容后再渲染，避免加载时单独成一条窄框 -->
+        <div v-if="formulaItems.length && hasDetailContent" class="fpd-formulas" role="note">
+          <span class="fpd-formulas__label">计算说明</span>
+          <div class="fpd-formulas__list">
+            <span
+              v-for="(item, idx) in formulaItems"
+              :key="idx"
+              class="fpd-formulas__item"
+            >
+              <em class="fpd-formulas__key">{{ item.key }}</em>
+              <span class="fpd-formulas__eq">=</span>
+              <span class="fpd-formulas__expr">{{ item.expr }}</span>
+            </span>
+          </div>
+        </div>
       </template>
     </div>
   </el-dialog>
@@ -236,16 +236,17 @@ export default {
       default: null
     },
     /**
-     * 骨架屏占位高度（表格本身按当前页行数自适应，不再用固定 height，避免内部滚动条）
+     * 三区表格统一高度（按 pageSize 撑满），数量少也留白对齐
+     * 可传 tableHeight 覆盖
      */
     tableHeight: {
       type: [Number, String],
-      default: 180
+      default: null
     },
-    /** 分区前端分页大小（略少以控制弹窗总高） */
+    /** 分区前端分页大小 */
     pageSize: {
       type: Number,
-      default: 4
+      default: 5
     }
   },
   data() {
@@ -274,11 +275,16 @@ export default {
     resolvedTop() {
       return this.isNarrow ? '5vh' : this.top
     },
-    /** 仅骨架屏使用；真实表格按页内行数撑开，不设固定 height */
+    /** 三区表格等高：优先用 prop，否则按 pageSize × 行高推算 */
     resolvedTableHeight() {
-      const base = Number(this.tableHeight)
-      const fallback = Number.isFinite(base) && base > 0 ? base : 220
-      return this.isNarrow ? Math.min(fallback, 180) : fallback
+      const override = Number(this.tableHeight)
+      if (Number.isFinite(override) && override > 0) {
+        return this.isNarrow ? Math.min(override, 200) : override
+      }
+      const size = this.pageSize || 5
+      const rowH = this.isNarrow ? 38 : 40
+      const headH = this.isNarrow ? 36 : 38
+      return headH + size * rowH
     },
     formulaList() {
       if (Array.isArray(this.formulas)) return this.formulas
@@ -301,13 +307,13 @@ export default {
       return (this.summaryColumns && this.summaryColumns.length > 0) ||
         (this.sections && this.sections.length > 0)
     },
-    /** 首次打开尚无数据：用骨架撑高，避免窄框闪一下 */
+    /** 首次打开尚无数据：用骨架撑高；计算说明不单独先行渲染 */
     showLoadingShell() {
       return this.loading && !this.error && !this.hasDetailContent
     },
     /** 任一分区需要分页时，其余无分页列才占位对齐；全都没有则不占空白 */
     anySectionNeedsPager() {
-      const size = this.pageSize || 4
+      const size = this.pageSize || 5
       return (this.sections || []).some((section) => this.sectionRowCount(section) > size)
     },
     /** 窄屏三区已改为单列，无需为空分页占位 */
@@ -385,7 +391,7 @@ export default {
     pagedRows(section) {
       const rows = section.rows || []
       const page = this.sectionPage(section)
-      const size = this.pageSize || 4
+      const size = this.pageSize || 5
       const start = (page - 1) * size
       return rows.slice(start, start + size)
     },
@@ -579,6 +585,7 @@ export default {
 }
 
 .fpd-skeleton__formulas {
+  margin-top: auto;
   padding: 8px 12px;
   background: #eef3ff;
   border: 1px solid #d6e0f5;
@@ -658,23 +665,19 @@ export default {
   border-radius: 8px;
 }
 
-.fpd-summary__hint {
-  display: none;
-}
-
 .fpd-sections {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
   gap: 10px;
-  margin-bottom: 0;
-  align-items: start;
+  margin-bottom: 10px;
+  align-items: stretch;
 }
 
 .fpd-section {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: 0;
+  height: 100%;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
@@ -706,13 +709,10 @@ export default {
   color: #8f959e;
 }
 
-.fpd-section__hint {
-  display: none;
-}
-
 .fpd-section__table-wrap {
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   min-width: 0;
+  min-height: 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
@@ -720,6 +720,7 @@ export default {
 
 .fpd-section__footer {
   flex-shrink: 0;
+  margin-top: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -805,6 +806,11 @@ export default {
     border-bottom: none;
   }
 
+  /* 分区表固定等高后，末行下方有留白，需保留底部分隔线 */
+  &.fpd-table--section .el-table__body tr:last-child td.el-table__cell {
+    border-bottom: 1px solid #eef0f3;
+  }
+
   .cell {
     padding: 12px 16px;
     line-height: 22px;
@@ -834,20 +840,20 @@ export default {
   }
 }
 
-/* 分区表略收紧行高，一页内更紧凑且无内部滚动 */
+/* 分区表行高与汇总表接近，避免过扁难读 */
 ::v-deep .fpd-table--section {
   .cell {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    line-height: 18px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 20px;
   }
 
   th .cell {
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 9px;
+    padding-bottom: 9px;
   }
 
-  /* 无固定 height 时仍兜底隐藏纵向滚动条 */
+  /* 固定等高后仍隐藏纵向滚动条（分页控制行数） */
   .el-table__body-wrapper {
     overflow-y: hidden !important;
   }
@@ -903,7 +909,8 @@ export default {
   display: flex;
   align-items: center;
   gap: 8px 10px;
-  margin-bottom: 10px;
+  margin-top: 0;
+  margin-bottom: 0;
   padding: 6px 10px;
   border-radius: 6px;
   background: linear-gradient(90deg, #eef4ff 0%, #f5f8ff 100%);
@@ -996,28 +1003,14 @@ export default {
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
 
-  .fpd-summary__hint,
-  .fpd-section__hint {
-    display: block;
-    padding: 0;
-    font-size: 11px;
-    line-height: 16px;
-    color: #8f959e;
-    font-weight: 400;
-  }
-
-  .fpd-summary__hint {
-    padding: 8px 12px 0;
-  }
-
   .fpd-sections {
     gap: 12px;
-    margin-bottom: 0;
-    align-items: start;
+    margin-bottom: 12px;
+    align-items: stretch;
   }
 
   .fpd-section {
-    min-height: 0;
+    height: auto;
     border-radius: 10px;
     border-color: #e8ebf0;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
@@ -1101,7 +1094,8 @@ export default {
     flex-direction: column;
     gap: 6px;
     padding: 8px 10px 8px 12px;
-    margin-bottom: 12px;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   .fpd-formulas__label {