imeik-bizui 2.7.7 → 2.7.8

package/dist/bizui/src/FieldFloorPriceBoard/README.md

@@ -30,6 +30,8 @@ imeik-bizui/src/bizui/
 />
 ```
 
+移动端想保留弹窗：加 `narrow-detail-mode="dialog"`（默认 `inline`，在看板下方展开）。
+
 `scene`：`supplies` | `meeting` | `apply` / `applyCenter`。
 
 请求体组装在业务系统（如会议 `buildFloorPricePayload.js`）。
@@ -55,7 +57,8 @@ bizui：  scene 选接口 → Dashboard 拉数 → Board / Detail
 
 | 类型 | 内容 |
 | --- | --- |
-| Props | `scene`、`requestPayload`、`customerName`、`showDetailLink`、`useMock`、`emptyText` |
+| Props | `scene`、`requestPayload`、`customerName`、`showDetailLink`、`narrowDetailMode`、`useMock`、`emptyText` |
+| 明细形态 | 宽屏始终弹窗；窄屏 / 移动端（≤768px）由 `narrowDetailMode` 决定：`inline`（默认，看板下方展开）或 `dialog`（弹窗） |
 | 物资入参 | `customUniqueCode`、`businessLineNumber`、`isGroupCustomer`、`applyDeptCode`、`costBearDeptCode`、`costType`、`materialList[]`（允许 `[]`） |
 | 会议入参 | `meetTypeCode`、`meetFormJson`、`customUniqueCode`、`forceRefresh`；`meetCode` 有值才传 |
 | 申请中心入参 | 见丽臻底价接口文档 |

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

@@ -19,7 +19,7 @@
       <div v-if="error" class="fpb-msg fpb-msg--error">{{ error }}</div>
 
       <div v-else-if="hasContent" :class="['fpb-panel', panelThemeClass]" role="status">
-        <div class="fpb-result">
+        <div :class="['fpb-result', { 'fpb-result--with-link': showDetailLink }]">
           <div class="fpb-result__main">
             <div class="fpb-result__heading">
               <img
@@ -1083,35 +1083,125 @@ export default {
 
 @media (max-width: 640px) {
   .fpb-panel {
-    padding: 16px;
+    padding: 12px;
   }
 
+  /* 链接钉在标题行右侧，说明文字可占满整行 */
   .fpb-result {
-    gap: 14px;
-    flex-wrap: wrap;
+    position: relative;
+    display: block;
+  }
+
+  .fpb-result__heading {
+    gap: 6px 8px;
+    margin-bottom: 4px;
+  }
+
+  .fpb-result--with-link .fpb-result__heading {
+    padding-right: 104px;
+  }
+
+  .fpb-mark {
+    width: 22px;
+    height: 22px;
+  }
+
+  .fpb-result__title {
+    font-size: 15px;
+    line-height: 22px;
+  }
+
+  .fpb-badge {
+    min-height: 22px;
+    padding: 0 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .fpb-result__desc {
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .fpb-link {
-    margin-left: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-height: 22px;
+    font-size: 13px;
+    line-height: 22px;
+  }
+
+  .fpb-list {
+    gap: 8px;
+    margin-top: 10px;
+  }
+
+  .fpb-card {
+    padding: 10px 12px;
+    border-radius: 6px;
+  }
+
+  .fpb-card__topline {
+    gap: 6px 8px;
+    margin-bottom: 8px;
+  }
+
+  .fpb-card-title {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .fpb-card__tag {
+    min-height: 20px;
+    padding: 0 6px;
+    font-size: 11px;
   }
 
+  /* 与下方「申请前 / 申请后」重复，窄屏省掉这一行 */
   .fpb-card__shift {
-    margin-left: 0;
-    width: 100%;
+    display: none;
   }
 
   .fpb-price-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 6px 12px;
+  }
+
+  .fpb-price-item {
+    dt {
+      margin-bottom: 1px;
+      font-size: 11px;
+      line-height: 16px;
+    }
+
+    dd {
+      font-size: 14px;
+      line-height: 20px;
+
+      &.is-strong {
+        font-size: 15px;
+      }
+    }
   }
 
   .fpb-footer {
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
+    margin-top: 10px;
+    padding-top: 8px;
+  }
+
+  .fpb-footer__note {
+    font-size: 11px;
+    line-height: 16px;
   }
 
   .fpb-footer__meta {
     justify-content: flex-start;
     flex-wrap: wrap;
+    line-height: 18px;
   }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <!--
   通用底价看板（展示 + 拉数编排）
 
-  职责：防抖请求、normalize、看板/明细 UI。
+  职责：防抖请求、normalize、看板/明细 UI（宽屏弹窗；≤ NARROW_BREAKPOINT 按 narrowDetailMode 就地展开或弹窗）。
   不负责：各业务域字段映射、拼请求体 —— 由业务系统组装后经 FieldFloorPriceBoard 传入。
 
   推荐：业务侧挂 <FieldFloorPriceBoard scene="..." :request-payload="..." />
@@ -24,11 +24,23 @@
       :year="board.year"
       :footer-text="board.footerText"
       :show-detail-link="showDetailLink"
+      :detail-link-text="detailLinkText"
       :use-demo="useDemo"
       :empty-text="emptyText"
       @view-detail="onViewDetail"
       @toggle-demo="onToggleDemo"
     />
+    <FloorPriceDetailInline
+      v-if="useInlineDetail && inlineOpen"
+      :loading="detailLoading"
+      :error="detailError"
+      :title="detailView.title"
+      :summary-columns="detailView.summaryColumns"
+      :summary-rows="detailView.summaryRows"
+      :sections="detailView.sections"
+      :formulas="detailView.formulas"
+      @collapse="collapseInline"
+    />
     <FloorPriceDetailDialog
       :visible.sync="detailVisible"
       :loading="detailLoading"
@@ -45,9 +57,10 @@
 <script>
 import FloorPriceBoard from './FloorPriceBoard.vue'
 import FloorPriceDetailDialog from './FloorPriceDetailDialog.vue'
+import FloorPriceDetailInline from './FloorPriceDetailInline.vue'
 import { createDemoDetail, createDemoOverview, nextDemoState } from './mock'
 import { normalizeDetail, normalizeOverview } from './normalize'
-import { PANEL_STATE } from './utils'
+import { NARROW_BREAKPOINT, PANEL_STATE } from './utils'
 
 const EMPTY_DETAIL = {
   title: '底价明细',
@@ -79,7 +92,8 @@ export default {
   name: 'FloorPriceDashboard',
   components: {
     FloorPriceBoard,
-    FloorPriceDetailDialog
+    FloorPriceDetailDialog,
+    FloorPriceDetailInline
   },
   props: {
     // ——— 受控：外部已拉好数 ———
@@ -109,6 +123,14 @@ export default {
     title: { type: String, default: '底价信息' },
     showTitle: { type: Boolean, default: false },
     showDetailLink: { type: Boolean, default: true },
+    /** 窄屏（≤ NARROW_BREAKPOINT）明细形态：inline 看板下方展开 | dialog 弹窗；宽屏恒为弹窗 */
+    narrowDetailMode: {
+      type: String,
+      default: 'inline',
+      validator(v) {
+        return ['inline', 'dialog'].includes(v)
+      }
+    },
     useDemo: { type: Boolean, default: false },
     customerName: { type: String, default: '' },
     /** 无概览数据时的空态文案 */
@@ -123,6 +145,10 @@ export default {
       detailLoading: false,
       detailError: '',
       innerDetail: null,
+      /** 已加载明细对应的概览入参签名；与当前不一致时视为过期 */
+      detailLoadedSig: null,
+      isNarrow: false,
+      inlineOpen: false,
       debouncedFetch: null,
       /** demo 三态：blocked → pass → exempt → … */
       demoState: PANEL_STATE.BLOCKED
@@ -175,6 +201,13 @@ export default {
     },
     overviewSignature() {
       return JSON.stringify(this.overviewPayload || null)
+    },
+    useInlineDetail() {
+      return this.isNarrow && this.narrowDetailMode === 'inline'
+    },
+    detailLinkText() {
+      if (!this.useInlineDetail) return '查看底价明细 →'
+      return this.inlineOpen ? '收起底价明细 ↑' : '查看底价明细 ↓'
     }
   },
   watch: {
@@ -192,24 +225,47 @@ export default {
       } else if (this.selfFetch) {
         this.scheduleFetch()
       }
+    },
+    /** 跨断点或切换配置时两种形态互换：已开弹窗 → 就地展开；离开内联不自动弹窗 */
+    useInlineDetail(inline) {
+      if (inline && this.detailVisible) {
+        this.detailVisible = false
+        this.inlineOpen = true
+      } else if (!inline) {
+        this.inlineOpen = false
+      }
     }
   },
   created() {
+    this._detailReqSeq = 0
     this.debouncedFetch = debounce(this.runFetch, this.debounceMs)
     if (this.selfFetch) this.debouncedFetch()
   },
+  mounted() {
+    this.updateNarrow()
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.updateNarrow)
+    }
+  },
   beforeDestroy() {
     if (this.debouncedFetch && this.debouncedFetch.cancel) {
       this.debouncedFetch.cancel()
     }
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', this.updateNarrow)
+    }
   },
   methods: {
+    updateNarrow() {
+      if (typeof window === 'undefined') return
+      this.isNarrow = window.innerWidth <= NARROW_BREAKPOINT
+    },
     /** Mock 按钮：循环切换 禁止 → 通过 → 免于监控 */
     onToggleDemo() {
       if (!this.useDemo) return
       this.demoState = nextDemoState(this.demoState)
       // 明细若已打开，随概览产品行一起刷新汇总
-      if (this.detailVisible) {
+      if (this.detailVisible || this.inlineOpen) {
         this.innerDetail = createDemoDetail({
           ...this.board,
           customerName: this.board.customerName || this.customerName
@@ -246,16 +302,54 @@ export default {
       } finally {
         this.innerLoading = false
       }
+      this.syncInlineAfterOverview()
     },
-    async onViewDetail() {
+    /** 内联已展开时：概览没了就收起，入参变了就重拉明细 */
+    syncInlineAfterOverview() {
+      if (!this.useInlineDetail || !this.inlineOpen) return
+      if (!this.innerOverview) {
+        this.inlineOpen = false
+        return
+      }
+      if (this.detailLoadedSig !== this.overviewSignature) this.loadDetailData()
+    },
+    onViewDetail() {
+      if (this.useInlineDetail) {
+        this.toggleInline()
+        return
+      }
+      this.detailVisible = true
+      this.loadDetailData()
+    },
+    toggleInline() {
+      if (this.inlineOpen) {
+        this.inlineOpen = false
+        return
+      }
+      this.inlineOpen = true
+      const hasDetail = !!(this.innerDetail || this.detail)
+      const stale = this.detailLoadedSig !== this.overviewSignature
+      if (this.useDemo || this.detailError || !hasDetail || stale) this.loadDetailData()
+    },
+    collapseInline() {
+      this.inlineOpen = false
+      this.$nextTick(() => {
+        const el = this.$el
+        if (!el || typeof el.getBoundingClientRect !== 'function') return
+        if (el.getBoundingClientRect().top < 0) el.scrollIntoView({ block: 'start' })
+      })
+    },
+    async loadDetailData() {
+      const reqId = ++this._detailReqSeq
+      const isLatest = () => reqId === this._detailReqSeq
+      const sig = this.overviewSignature
       this.detailError = ''
-      // 先进入 loading，再打开弹窗，避免首帧只有公式行的窄框
+      // 先进入 loading 再展示，避免首帧只有公式行的窄框
       const willFetch =
         this.useDemo ||
         typeof this.fetchDetail === 'function' ||
         typeof this.loadDetail === 'function'
       if (willFetch) this.detailLoading = true
-      this.detailVisible = true
 
       if (this.useDemo) {
         try {
@@ -263,6 +357,7 @@ export default {
             ...this.board,
             customerName: this.board.customerName || this.customerName
           })
+          this.detailLoadedSig = sig
         } finally {
           this.detailLoading = false
         }
@@ -280,24 +375,26 @@ export default {
           const detailPayload = this.detailPayload
           if (!detailPayload) {
             this.innerDetail = base
-            this.detailLoading = false
+            this.detailLoadedSig = sig
             return
           }
           const res = await this.fetchDetail(detailPayload)
+          if (!isLatest()) return
           if (res && res.code === 200) {
             // 保留接口 customName，勿用空 prop 覆盖
             this.innerDetail = {
               ...base,
               ...(res.data || {})
             }
+            this.detailLoadedSig = sig
           } else {
             this.innerDetail = null
             throw new Error((res && res.message) || '底价明细获取失败')
           }
         } catch (e) {
-          this.detailError = (e && e.message) || '底价明细获取失败'
+          if (isLatest()) this.detailError = (e && e.message) || '底价明细获取失败'
         } finally {
-          this.detailLoading = false
+          if (isLatest()) this.detailLoading = false
         }
         return
       }
@@ -305,13 +402,16 @@ export default {
       if (typeof this.loadDetail === 'function') {
         try {
           const data = await this.loadDetail({ overview: this.board, raw: this.rawOverview })
+          if (!isLatest()) return
           this.innerDetail = data || null
-          if (!data) this.detailError = '暂无底价明细'
+          if (data) this.detailLoadedSig = sig
+          else this.detailError = '暂无底价明细'
         } catch (e) {
+          if (!isLatest()) return
           this.innerDetail = null
           this.detailError = (e && e.message) || '底价明细获取失败'
         } finally {
-          this.detailLoading = false
+          if (isLatest()) this.detailLoading = false
         }
         return
       }
@@ -331,5 +431,7 @@ export default {
   padding: 0;
   box-sizing: border-box;
   min-width: 0;
+  /* 收起明细回滚时给宿主固定顶栏留位 */
+  scroll-margin-top: 80px;
 }
 </style>

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

@@ -172,8 +172,8 @@
 </template>
 
 <script>
-import { DEFAULT_DETAIL_FORMULAS, formatNumber, formatSignedNumber } from './utils'
-import { getDisplayMode, subscribeDisplayMode } from './displayPrefs'
+import { NARROW_BREAKPOINT } from './utils'
+import detailFormat from './detailFormat'
 import FloorPriceSectionPager from './FloorPriceSectionPager.vue'
 
 export default {
@@ -181,6 +181,7 @@ export default {
   components: {
     FloorPriceSectionPager
   },
+  mixins: [detailFormat],
   props: {
     visible: {
       type: Boolean,
@@ -253,8 +254,7 @@ export default {
   data() {
     return {
       sectionPages: {},
-      isNarrow: false,
-      displayMode: getDisplayMode()
+      isNarrow: false
     }
   },
   computed: {
@@ -288,22 +288,6 @@ export default {
       const headH = this.isNarrow ? 36 : 38
       return headH + size * rowH
     },
-    formulaList() {
-      if (Array.isArray(this.formulas)) return this.formulas
-      return DEFAULT_DETAIL_FORMULAS
-    },
-    /** 拆成「指标名 = 表达式」，便于加粗高亮 */
-    formulaItems() {
-      return (this.formulaList || []).map((line) => {
-        const text = String(line || '').trim()
-        const idx = text.indexOf('=')
-        if (idx < 0) return { key: text, expr: '' }
-        return {
-          key: text.slice(0, idx).trim(),
-          expr: text.slice(idx + 1).trim()
-        }
-      }).filter((item) => item.key)
-    },
     /** 有汇总或分区时视为已有明细内容（可在旧数据上盖 loading） */
     hasDetailContent() {
       return (this.summaryColumns && this.summaryColumns.length > 0) ||
@@ -350,20 +334,16 @@ export default {
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', this.updateNarrow)
     }
-    this._unsubDisplayMode = subscribeDisplayMode((mode) => {
-      this.displayMode = mode
-    })
   },
   beforeDestroy() {
     if (typeof window !== 'undefined') {
       window.removeEventListener('resize', this.updateNarrow)
     }
-    if (this._unsubDisplayMode) this._unsubDisplayMode()
   },
   methods: {
     updateNarrow() {
       if (typeof window === 'undefined') return
-      this.isNarrow = window.innerWidth <= 768
+      this.isNarrow = window.innerWidth <= NARROW_BREAKPOINT
     },
     onClose() {
       this.$emit('close')
@@ -401,74 +381,6 @@ export default {
       const start = (page - 1) * size
       return rows.slice(start, start + size)
     },
-    formatCell(value, col = {}) {
-      if (col.type === 'number' || col.type === 'highlight' || col.digits != null) {
-        return formatNumber(value, {
-          digits: col.digits != null ? col.digits : null,
-          mode: this.displayMode,
-          fallback: '-'
-        })
-      }
-      if (value === undefined || value === null || value === '') return '-'
-      return String(value)
-    },
-    formatGapCell(value, col = {}) {
-      return formatSignedNumber(value, {
-        digits: col.digits != null ? col.digits : null,
-        mode: this.displayMode,
-        fallback: '-'
-      })
-    },
-    formatFooterValue(v) {
-      if (v == null) return ''
-      if (typeof v !== 'object') return String(v)
-      if (v.kind === 'qty') {
-        const n = v.value == null ? '-' : String(v.value)
-        return v.label ? `${v.label} ${n}` : n
-      }
-      const body = formatNumber(v.value, { mode: this.displayMode, fallback: '-' })
-      return v.label ? `${v.label} ${body}` : body
-    },
-    gapClass(value, row) {
-      const n = Number(value != null ? value : row && row.gap)
-      if (Number.isNaN(n) || n >= 0) return ''
-      return 'fpd-td--danger'
-    },
-    statusText(row, col) {
-      if (col.statusMap && row[col.prop] != null && col.statusMap[row[col.prop]]) {
-        return col.statusMap[row[col.prop]]
-      }
-      if (row.statusLabel) return row.statusLabel
-      return row.hit ? '禁止' : '通过'
-    },
-    statusClass(row) {
-      if (row.statusTone === 'danger' || row.statusTone === 'ok') {
-        return row.statusTone === 'danger' ? 'fpd-status--danger' : 'fpd-status--ok'
-      }
-      return row.hit ? 'fpd-status--danger' : 'fpd-status--ok'
-    },
-    highlightClass(row, col) {
-      const tone = col.highlightTone || row[col.toneField] || 'current'
-      if (tone === 'danger') return 'fpd-td--danger fpd-td--bold'
-      if (tone === 'ok') return 'fpd-td--ok fpd-td--bold'
-      return 'fpd-td--current fpd-td--bold'
-    },
-    /** 申请后底价：低于标准时标红 */
-    summaryCellClass(row, col) {
-      const classes = []
-      if (col.bold) classes.push('fpd-td--bold')
-      if (col.prop === 'afterPrice' && row && row.hit) {
-        classes.push('fpd-td--danger')
-      }
-      return classes
-    },
-    cellToneClass(row, col) {
-      if (row.current || row.isCurrent || (col.currentField && row[col.currentField])) {
-        return 'fpd-td--current'
-      }
-      if (col.tone === 'danger') return 'fpd-td--danger'
-      return ''
-    },
     sectionThemeClass(section) {
       const t = section.theme || 'default'
       return `fpd-section--${t}`
@@ -1004,6 +916,19 @@ export default {
   color: #4e5969;
 }
 
+/* 三栏并排放不下各表最小列宽：首区独占一行，其余两区并排 */
+@media (min-width: 1101px) and (max-width: 1360px) {
+  .fpd-sections,
+  .fpd-skeleton__sections {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .fpd-section:first-child:nth-last-child(3),
+  .fpd-skeleton__section:first-child {
+    grid-column: 1 / -1;
+  }
+}
+
 @media (max-width: 1100px) {
   .fpd-sections,
   .fpd-skeleton__sections {