imeik-bizui 2.7.6 → 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

@@ -7,7 +7,7 @@
   <div v-if="visible" class="floor-price-board">
     <div v-if="showTitle" class="fpb-title">
       <span class="fpb-title__bar" />
-      <span class="fpb-title__text">{{ title }}</span>
+      <span class="fpb-title__text" @click="onSecretTitleClick">{{ title }}</span>
     </div>
 
     <div
@@ -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
@@ -28,7 +28,7 @@
                 :alt="resolvedStatusLabel"
                 aria-hidden="true"
               >
-              <h2 class="fpb-result__title">{{ resolvedResultTitle }}</h2>
+              <h2 class="fpb-result__title" @click="onSecretTitleClick">{{ resolvedResultTitle }}</h2>
               <span class="fpb-badge">{{ resolvedStatusLabel }}</span>
               <button
                 v-if="useDemo"
@@ -39,6 +39,52 @@
               >
                 Mock
               </button>
+              <el-popover
+                v-if="settingsUnlocked"
+                v-model="settingsOpen"
+                placement="bottom-start"
+                width="300"
+                trigger="click"
+              >
+                <div class="fpb-settings">
+                  <div class="fpb-settings__head">
+                    <span class="fpb-settings__title">价格展示</span>
+                    <span class="fpb-settings__hint">临时生效，刷新恢复默认</span>
+                  </div>
+                  <div
+                    v-for="opt in displayModeOptions"
+                    :key="opt.value"
+                    :class="['fpb-settings__option', { 'is-active': displayMode === opt.value }]"
+                    role="radio"
+                    :aria-checked="displayMode === opt.value ? 'true' : 'false'"
+                    @click="selectDisplayMode(opt.value)"
+                  >
+                    <span class="fpb-settings__radio" />
+                    <span class="fpb-settings__body">
+                      <span class="fpb-settings__label">
+                        {{ opt.label }}
+                        <em v-if="opt.value === defaultDisplayMode" class="fpb-settings__tag">默认</em>
+                      </span>
+                      <span class="fpb-settings__desc">{{ opt.desc }}</span>
+                    </span>
+                    <i v-if="displayMode === opt.value" class="el-icon-check fpb-settings__check" />
+                  </div>
+                  <div class="fpb-settings__foot">
+                    <button type="button" class="fpb-settings__link" @click="onLockSettings">
+                      隐藏设置入口
+                    </button>
+                  </div>
+                </div>
+                <button
+                  slot="reference"
+                  type="button"
+                  class="fpb-settings-trigger"
+                  title="价格展示设置"
+                  aria-label="价格展示设置"
+                >
+                  <i class="el-icon-setting" />
+                </button>
+              </el-popover>
             </div>
             <p v-if="resolvedResultDescription" class="fpb-result__desc">
               {{ resolvedResultDescription }}
@@ -105,9 +151,9 @@
                 <dt>与标准差额</dt>
                 <dd
                   :class="{ 'is-danger': row.hit, 'is-ok': !row.hit && row.gap > 0 }"
-                  :title="row.gapLabel || '-'"
+                  :title="gapLabelOf(row)"
                 >
-                  {{ row.gapLabel || '-' }}
+                  {{ gapLabelOf(row) }}
                 </dd>
               </div>
             </dl>
@@ -146,9 +192,20 @@ import {
   DEFAULT_STATUS_LABEL,
   PANEL_STATE,
   buildResultCopy,
+  formatGapLabel,
   formatMoney,
   formatNumber
 } from './utils'
+import {
+  DEFAULT_DISPLAY_MODE,
+  DISPLAY_MODE_OPTIONS,
+  getDisplayMode,
+  isSettingsUnlocked,
+  lockSettings,
+  setDisplayMode,
+  subscribeDisplayMode,
+  unlockSettings
+} from './displayPrefs'
 import FloorPriceSectionPager from './FloorPriceSectionPager.vue'
 import iconBlocked from '../assets/icon-blocked.png'
 import iconPass from '../assets/icon-pass.png'
@@ -160,6 +217,9 @@ const STATUS_ICON = {
   [PANEL_STATE.EXEMPT]: iconExempt
 }
 
+const SECRET_CLICK_NEED = 5
+const SECRET_CLICK_WINDOW_MS = 2500
+
 export default {
   name: 'FloorPriceBoard',
   components: {
@@ -248,7 +308,7 @@ export default {
       type: Boolean,
       default: false
     },
-    /** 价格/金额小数位；默认 null 不强制，跟随接口原值 */
+    /** 价格/金额小数位；显式传入时覆盖 displayMode */
     numberDigits: {
       type: Number,
       default: null
@@ -264,7 +324,14 @@ export default {
   },
   data() {
     return {
-      productPage: 1
+      productPage: 1,
+      displayMode: getDisplayMode(),
+      displayModeOptions: DISPLAY_MODE_OPTIONS,
+      defaultDisplayMode: DEFAULT_DISPLAY_MODE,
+      settingsUnlocked: isSettingsUnlocked(),
+      settingsOpen: false,
+      secretClickCount: 0,
+      secretClickTimer: null
     }
   },
   computed: {
@@ -314,8 +381,14 @@ export default {
       )
     },
     applyTotalFeeText() {
+      // 依赖 displayMode，切换展示偏好时同步刷新
+      const mode = this.displayMode
       if (this.applyTotalFee == null || this.applyTotalFee === '') return ''
-      return `${formatNumber(this.applyTotalFee)} 元`
+      return `${formatNumber(this.applyTotalFee, {
+        digits: this.numberDigits,
+        mode,
+        fallback: '-'
+      })} 元`
     },
     yearText() {
       if (this.year == null || this.year === '') return ''
@@ -349,9 +422,36 @@ export default {
       if (this.productPage > maxPage) this.productPage = 1
     }
   },
+  created() {
+    this._unsubDisplayMode = subscribeDisplayMode((mode) => {
+      this.displayMode = mode
+    })
+  },
+  beforeDestroy() {
+    if (this._unsubDisplayMode) this._unsubDisplayMode()
+    if (this.secretClickTimer) clearTimeout(this.secretClickTimer)
+  },
   methods: {
+    formatNumber(v) {
+      return formatNumber(v, {
+        digits: this.numberDigits,
+        mode: this.displayMode,
+        fallback: '-'
+      })
+    },
     formatMoney(v) {
-      return formatMoney(v, { digits: this.numberDigits, fallback: '-' })
+      return formatMoney(v, {
+        digits: this.numberDigits,
+        mode: this.displayMode,
+        fallback: '-'
+      })
+    },
+    gapLabelOf(row) {
+      if (!row) return '-'
+      if (row.gap === undefined || row.gap === null || row.gap === '') {
+        return row.gapLabel || '-'
+      }
+      return formatGapLabel(row.gap, { mode: this.displayMode }) || row.gapLabel || '-'
     },
     shiftAria(row) {
       if (!row) return ''
@@ -365,6 +465,39 @@ export default {
     },
     onProductPage(page) {
       this.productPage = page
+    },
+    /** 连点标题 5 次：未解锁则显示设置入口，已解锁则隐藏 */
+    onSecretTitleClick() {
+      this.secretClickCount += 1
+      if (this.secretClickTimer) clearTimeout(this.secretClickTimer)
+      this.secretClickTimer = setTimeout(() => {
+        this.secretClickCount = 0
+        this.secretClickTimer = null
+      }, SECRET_CLICK_WINDOW_MS)
+      if (this.secretClickCount < SECRET_CLICK_NEED) return
+      this.secretClickCount = 0
+      if (this.secretClickTimer) {
+        clearTimeout(this.secretClickTimer)
+        this.secretClickTimer = null
+      }
+      if (this.settingsUnlocked) {
+        this.onLockSettings()
+        return
+      }
+      unlockSettings()
+      this.settingsUnlocked = true
+      // popover 的 reference 刚渲染出来，需等 DOM 就绪后再打开
+      this.$nextTick(() => {
+        this.settingsOpen = true
+      })
+    },
+    selectDisplayMode(mode) {
+      this.displayMode = setDisplayMode(mode)
+    },
+    onLockSettings() {
+      lockSettings()
+      this.settingsOpen = false
+      this.settingsUnlocked = false
     }
   }
 }
@@ -372,6 +505,7 @@ export default {
 
 <style lang="scss" scoped>
 .floor-price-board {
+  position: relative;
   width: 100%;
   max-width: 100%;
   min-width: 0;
@@ -415,6 +549,8 @@ export default {
   font-weight: 600;
   color: var(--fpb-text);
   line-height: 1;
+  cursor: default;
+  user-select: none;
 }
 
 .fpb-body {
@@ -518,6 +654,181 @@ export default {
   font-size: 17px;
   line-height: 24px;
   font-weight: 600;
+  cursor: default;
+  user-select: none;
+}
+
+.fpb-settings-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--fpb-tertiary);
+  font-size: 16px;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--fpb-brand);
+    background: rgba(51, 112, 255, 0.08);
+    outline: none;
+  }
+}
+
+/*
+ * popover 内容：不用原生 label/input，避免宿主全局样式导致文字重叠。
+ * popover 挂在 body 下，拿不到 .floor-price-board 上的变量，需在此重新声明。
+ */
+.fpb-settings {
+  --fpb-brand: #3370ff;
+  font-size: 13px;
+  line-height: 20px;
+  color: #1f2329;
+}
+
+.fpb-settings__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0 4px 8px;
+}
+
+.fpb-settings__title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.fpb-settings__hint {
+  font-size: 12px;
+  color: #8f959e;
+}
+
+.fpb-settings__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+
+  & + & {
+    margin-top: 4px;
+  }
+
+  &:hover {
+    background: #f5f7fa;
+  }
+
+  &.is-active {
+    border-color: var(--fpb-brand);
+    background: #f0f5ff;
+  }
+}
+
+.fpb-settings__radio {
+  flex: 0 0 auto;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  border: 1px solid #c0c4cc;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: #fff;
+  transition: border-color 0.15s, background-color 0.15s;
+
+  .is-active & {
+    border-color: var(--fpb-brand);
+    background: var(--fpb-brand);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 6px;
+      height: 6px;
+      margin: -3px 0 0 -3px;
+      border-radius: 50%;
+      background: #fff;
+    }
+  }
+}
+
+.fpb-settings__body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.fpb-settings__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+
+  .is-active & {
+    color: var(--fpb-brand);
+    font-weight: 600;
+  }
+}
+
+.fpb-settings__check {
+  flex: 0 0 auto;
+  align-self: center;
+  color: var(--fpb-brand);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.fpb-settings__tag {
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #eef0f3;
+  color: #646a73;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.fpb-settings__desc {
+  font-size: 12px;
+  line-height: 18px;
+  color: #8f959e;
+  font-variant-numeric: tabular-nums;
+}
+
+.fpb-settings__foot {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+  padding: 8px 4px 0;
+  border-top: 1px solid #f0f2f5;
+}
+
+.fpb-settings__link {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #8f959e;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--fpb-brand);
+  }
 }
 
 .fpb-badge {
@@ -772,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>