imeik-bizui 2.6.2 → 2.6.4

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

@@ -2,18 +2,18 @@
   通用「底价明细」弹窗（纯展示，无接口依赖）
   - 顶部汇总：由 Dashboard 传入概览产品行
   - 下方三区（销售订单 / 非销出库 / 销售费用）等分三列并排
-  - 分区表格按当前页行数自适应高度，不设固定 height（避免表内纵向滚动裁切）
-  - 分区数据前端分页（pageSize）
+  - 三列明细等高：固定表格高度 + 预留分页条高度
+  - 分区数据前端分页（pageSize）；无底部关闭按钮，右上角关闭即可
 -->
 <template>
   <el-dialog
     :visible.sync="dialogVisible"
     :title="title"
-    :width="width"
-    :top="top"
+    :width="resolvedWidth"
+    :top="resolvedTop"
     :append-to-body="appendToBody"
     :destroy-on-close="destroyOnClose"
-    custom-class="floor-price-detail-dialog"
+    :custom-class="dialogCustomClass"
     @close="onClose"
   >
     <div v-loading="loading" class="fpd-body">
@@ -21,6 +21,7 @@
 
       <template v-else>
         <div v-if="summaryColumns.length" class="fpd-summary">
+          <div v-if="isNarrow" class="fpd-summary__hint">汇总表可左右滑动</div>
           <el-table
             :data="summaryRows"
             border
@@ -37,7 +38,7 @@
               :min-width="col.minWidth || col.width || 100"
               :width="col.fixedWidth"
               :align="col.align || 'left'"
-              :fixed="col.fixed"
+              :fixed="isNarrow ? false : col.fixed"
               show-overflow-tooltip
             >
               <template slot-scope="{ row }">
@@ -67,6 +68,7 @@
             <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">
@@ -75,6 +77,7 @@
                 border
                 size="small"
                 class="fpd-table"
+                :height="resolvedTableHeight"
                 :header-cell-style="headerCellStyle"
               >
                 <el-table-column
@@ -100,7 +103,8 @@
               :total-count="sectionRowCount(section)"
               :page="sectionPage(section)"
               :page-size="pageSize"
-              :reserve-space="anySectionNeedsPager"
+              :reserve-space="showPagerReserve"
+              :compact="isNarrow"
               @update:page="(p) => setSectionPage(section, p)"
             />
 
@@ -132,10 +136,6 @@
         </div>
       </template>
     </div>
-
-    <span slot="footer" class="fpd-dialog-footer">
-      <button type="button" class="fpd-dialog-close-btn" @click="onClose">关闭</button>
-    </span>
   </el-dialog>
 </template>
 
@@ -203,12 +203,10 @@ export default {
       type: Array,
       default: null
     },
-    /**
-     * @deprecated 三区表格已改为按内容撑开，不再使用固定高度（保留 prop 以免业务侧报错）
-     */
+    /** 三列表格统一高度，保证等高 */
     tableHeight: {
       type: [Number, String],
-      default: null
+      default: 260
     },
     /** 分区前端分页大小 */
     pageSize: {
@@ -218,7 +216,8 @@ export default {
   },
   data() {
     return {
-      sectionPages: {}
+      sectionPages: {},
+      isNarrow: false
     }
   },
   computed: {
@@ -230,6 +229,22 @@ export default {
         this.$emit('update:visible', val)
       }
     },
+    dialogCustomClass() {
+      return this.isNarrow
+        ? 'floor-price-detail-dialog floor-price-detail-dialog--narrow'
+        : 'floor-price-detail-dialog'
+    },
+    resolvedWidth() {
+      return this.isNarrow ? 'calc(100% - 28px)' : this.width
+    },
+    resolvedTop() {
+      return this.isNarrow ? '5vh' : this.top
+    },
+    resolvedTableHeight() {
+      const base = Number(this.tableHeight)
+      const fallback = Number.isFinite(base) && base > 0 ? base : 260
+      return this.isNarrow ? Math.min(fallback, 200) : fallback
+    },
     formulaList() {
       if (Array.isArray(this.formulas)) return this.formulas
       return DEFAULT_DETAIL_FORMULAS
@@ -239,6 +254,10 @@ export default {
       const size = this.pageSize || 5
       return (this.sections || []).some((section) => this.sectionRowCount(section) > size)
     },
+    /** 窄屏三区已改为单列，无需为空分页占位 */
+    showPagerReserve() {
+      return this.anySectionNeedsPager && !this.isNarrow
+    },
     headerCellStyle() {
       return {
         background: '#fafbfc',
@@ -250,7 +269,10 @@ export default {
   },
   watch: {
     visible(val) {
-      if (val) this.resetSectionPages()
+      if (val) {
+        this.updateNarrow()
+        this.resetSectionPages()
+      }
     },
     sections: {
       deep: true,
@@ -259,7 +281,22 @@ export default {
       }
     }
   },
+  mounted() {
+    this.updateNarrow()
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.updateNarrow)
+    }
+  },
+  beforeDestroy() {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', this.updateNarrow)
+    }
+  },
   methods: {
+    updateNarrow() {
+      if (typeof window === 'undefined') return
+      this.isNarrow = window.innerWidth <= 768
+    },
     onClose() {
       this.$emit('close')
       this.$emit('update:visible', false)
@@ -386,54 +423,57 @@ export default {
 
   .el-dialog__body {
     padding: 18px 20px 16px;
-    max-height: calc(92vh - 120px);
+    max-height: calc(92vh - 64px);
     overflow: auto;
     background: #f7f8fa;
   }
 
   .el-dialog__footer {
-    padding: 12px 20px;
-    background: #fff;
-    border-top: 1px solid #e5e7eb;
+    display: none;
+    padding: 0;
+    border: none;
   }
 }
-</style>
-
-<style lang="scss" scoped>
-.fpd-body {
-  min-width: 0;
-}
 
-.fpd-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-}
+@media (max-width: 768px) {
+  .floor-price-detail-dialog.floor-price-detail-dialog--narrow {
+    width: calc(100% - 28px) !important;
+    max-width: 560px;
+    margin-bottom: 5vh !important;
+    border-radius: 14px;
+    border: 1px solid #e4e7ec;
+    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.2);
+
+    .el-dialog__header {
+      padding: 14px 16px 12px;
+      background: #fff;
+    }
 
-.fpd-dialog-close-btn {
-  min-width: 80px;
-  height: 34px;
-  padding: 0 16px;
-  color: #1f2329;
-  background: #fff;
-  border: 1px solid #d3d7de;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
+    .el-dialog__title {
+      font-size: 16px;
+      line-height: 24px;
+      padding-right: 28px;
+      letter-spacing: 0.01em;
+    }
 
-  &:hover {
-    color: #3370ff;
-    border-color: #8babff;
-  }
+    .el-dialog__headerbtn {
+      top: 15px;
+      right: 14px;
+    }
 
-  &:focus {
-    outline: none;
+    .el-dialog__body {
+      padding: 12px 12px 16px;
+      max-height: calc(90vh - 64px);
+      background: linear-gradient(180deg, #f4f6f8 0%, #f7f8fa 40%, #f7f8fa 100%);
+      -webkit-overflow-scrolling: touch;
+    }
   }
+}
+</style>
 
-  &:focus-visible {
-    outline: 2px solid #3370ff;
-    outline-offset: 2px;
-  }
+<style lang="scss" scoped>
+.fpd-body {
+  min-width: 0;
 }
 
 .fpd-msg {
@@ -452,24 +492,29 @@ export default {
 .fpd-summary {
   margin-bottom: 12px;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   background: #fff;
   border: 1px solid #e5e7eb;
   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: 12px;
   margin-bottom: 12px;
-  /* 按内容高度，不强制三列拉齐（数据少时不留大块空白） */
-  align-items: start;
+  align-items: stretch;
 }
 
 .fpd-section {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  min-height: 100%;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
@@ -501,10 +546,15 @@ export default {
   color: #8f959e;
 }
 
+.fpd-section__hint {
+  display: none;
+}
+
 .fpd-section__table-wrap {
   flex: 0 0 auto;
   min-width: 0;
-  overflow-x: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .fpd-section__footer {
@@ -688,4 +738,160 @@ export default {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 768px) {
+  .fpd-summary {
+    margin-bottom: 12px;
+    border-radius: 10px;
+    border-color: #e8ebf0;
+    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: 12px;
+    align-items: start;
+  }
+
+  .fpd-section {
+    min-height: 0;
+    border-radius: 10px;
+    border-color: #e8ebf0;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+  }
+
+  .fpd-section--purple {
+    border-color: #e4e0f5;
+
+    .fpd-section__head {
+      background: linear-gradient(90deg, #f6f4ff 0%, #fafbfc 48%);
+      border-bottom-color: #ece8f8;
+    }
+
+    .fpd-section__title::before {
+      background: #7b61ff;
+    }
+
+    .fpd-section__footer {
+      background: #f8f6ff;
+      border-top-color: #ece8f8;
+    }
+  }
+
+  .fpd-section--danger {
+    border-color: #f3d6d2;
+
+    .fpd-section__head {
+      background: linear-gradient(90deg, #fff6f5 0%, #fafbfc 48%);
+      border-bottom-color: #f3e0dd;
+    }
+
+    .fpd-section__title::before {
+      background: #e45b4c;
+    }
+
+    .fpd-section__footer {
+      background: #fff8f7;
+      border-top-color: #f3e0dd;
+    }
+  }
+
+  .fpd-section__head {
+    padding: 10px 12px 8px;
+    gap: 4px;
+  }
+
+  .fpd-section__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    line-height: 20px;
+
+    &::before {
+      content: '';
+      flex: none;
+      width: 3px;
+      height: 14px;
+      border-radius: 2px;
+      background: #3370ff;
+    }
+  }
+
+  .fpd-section__footer {
+    padding: 9px 12px;
+    font-size: 12px;
+  }
+
+  .fpd-section__footer-values {
+    font-size: 13px;
+    justify-content: flex-end;
+  }
+
+  .fpd-formulas {
+    padding: 10px 12px;
+    border-radius: 10px;
+    border-color: #e8ebf0;
+    font-size: 11px;
+    line-height: 18px;
+    color: #6b7280;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+  }
+
+  ::v-deep .fpd-table {
+    .cell {
+      padding: 9px 10px;
+      line-height: 20px;
+    }
+
+    .is-right .cell {
+      padding-left: 8px;
+      padding-right: 12px;
+    }
+
+    .is-center .cell {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    th {
+      font-size: 12px;
+    }
+
+    td {
+      font-size: 12px;
+    }
+  }
+
+  ::v-deep .fpd-table--summary {
+    min-width: 960px;
+
+    th .cell,
+    td .cell {
+      padding-top: 9px;
+      padding-bottom: 9px;
+    }
+  }
+
+  .fpd-status {
+    min-height: 20px;
+    min-width: 40px;
+    padding: 0 6px;
+    font-size: 11px;
+  }
+}
 </style>

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

@@ -3,13 +3,22 @@
   <div
     v-if="needPager || reserveSpace"
     class="fpd-pager"
-    :class="{ 'fpd-pager--placeholder': !needPager }"
+    :class="{
+      'fpd-pager--placeholder': !needPager,
+      'fpd-pager--compact': compact
+    }"
   >
     <template v-if="needPager">
       <span class="fpd-pager__total">共 {{ totalCount }} 条</span>
-      <button type="button" class="fpd-pager__btn" :disabled="page <= 1" @click="goPrev">&lt; 上一页</button>
-      <span class="fpd-pager__page">第 {{ page }} / {{ totalPages }} 页</span>
-      <button type="button" class="fpd-pager__btn" :disabled="page >= totalPages" @click="goNext">下一页 &gt;</button>
+      <button type="button" class="fpd-pager__btn" :disabled="page <= 1" @click="goPrev">
+        {{ compact ? '< 上页' : '< 上一页' }}
+      </button>
+      <span class="fpd-pager__page">
+        {{ compact ? `${page}/${totalPages}` : `第 ${page} / ${totalPages} 页` }}
+      </span>
+      <button type="button" class="fpd-pager__btn" :disabled="page >= totalPages" @click="goNext">
+        {{ compact ? '下页 >' : '下一页 >' }}
+      </button>
     </template>
   </div>
 </template>
@@ -35,6 +44,11 @@ export default {
     reserveSpace: {
       type: Boolean,
       default: false
+    },
+    /** 窄屏紧凑文案 */
+    compact: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -77,6 +91,17 @@ export default {
   border-top-color: transparent;
 }
 
+.fpd-pager--compact {
+  gap: 4px 8px;
+  padding: 6px 10px;
+  min-height: 36px;
+
+  .fpd-pager__btn {
+    min-height: 28px;
+    padding: 0 4px;
+  }
+}
+
 .fpd-pager__total {
   margin-right: auto;
 }

package/dist/bizui/src/FieldFloorPriceBoard/core/normalize.js

@@ -133,11 +133,11 @@ function buildSections(data = {}) {
       subtitle: '订单价 × 数量',
       theme: 'purple',
       columns: [
-        { prop: 'orderNum', label: '订单号', minWidth: 120 },
-        { prop: 'productName', label: '产品', minWidth: 80 },
+        { prop: 'orderNum', label: '订单号', minWidth: 140 },
+        { prop: 'productName', label: '产品', minWidth: 100 },
         { prop: 'saleTypeLabel', label: '类型', width: 64 },
         { prop: 'qty', label: '数量', align: 'right', width: 56 },
-        { prop: 'amount', label: '金额', type: 'number', digits: 0, align: 'right', width: 88 }
+        { prop: 'amount', label: '金额', type: 'number', digits: 0, align: 'right', width: 96 }
       ],
       rows: saleRows,
       footer: {
@@ -154,10 +154,10 @@ function buildSections(data = {}) {
       subtitle: '折算非销售促进费',
       theme: 'danger',
       columns: [
-        { prop: 'orderNum', label: '出库单号', minWidth: 120 },
-        { prop: 'productName', label: '产品', minWidth: 80 },
+        { prop: 'orderNum', label: '出库单号', minWidth: 140 },
+        { prop: 'productName', label: '产品', minWidth: 100 },
         { prop: 'qty', label: '数量', align: 'right', width: 56 },
-        { prop: 'amount', label: '折算费用', type: 'number', digits: 0, align: 'right', width: 88 }
+        { prop: 'amount', label: '折算费用', type: 'number', digits: 0, align: 'right', width: 96 }
       ],
       rows: nonSaleRows,
       footer: {
@@ -177,9 +177,9 @@ function buildSections(data = {}) {
       subtitle: '费用申请单口径',
       theme: 'danger',
       columns: [
-        { prop: 'bizOrderCode', label: '单号', minWidth: 100 },
-        { prop: 'costTypeName', label: '类型', minWidth: 80 },
-        { prop: 'costAmount', label: '金额', type: 'number', digits: 0, align: 'right', width: 88 }
+        { prop: 'bizOrderCode', label: '单号', minWidth: 120 },
+        { prop: 'costTypeName', label: '类型', minWidth: 88 },
+        { prop: 'costAmount', label: '金额', type: 'number', digits: 0, align: 'right', width: 96 }
       ],
       rows: expenseRows,
       footer: {