imeik-bizui 2.7.8 → 2.8.0

package/dist/bizui/api/applycenter.js

@@ -279,3 +279,51 @@ export function getLizhenBasePriceDetail(data) {
     data
   })
 }
+
+/**
+ * 个人预算概述
+ * POST /application-center-admin/openApi/personBudget/overview
+ */
+export function getPersonBudgetOverview(data) {
+  return request({
+    url: '/application-center-admin/openApi/personBudget/overview',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 个人预算详情（概述 + 使用/业绩明细分页快照）
+ * POST /application-center-admin/openApi/personBudget/detail
+ */
+export function getPersonBudgetDetail(data) {
+  return request({
+    url: '/application-center-admin/openApi/personBudget/detail',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 个人预算使用明细分页
+ * POST /application-center-admin/openApi/personBudget/usagePage
+ */
+export function getPersonBudgetUsagePage(data) {
+  return request({
+    url: '/application-center-admin/openApi/personBudget/usagePage',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 个人预算业绩明细分页
+ * POST /application-center-admin/openApi/personBudget/performancePage
+ */
+export function getPersonBudgetPerformancePage(data) {
+  return request({
+    url: '/application-center-admin/openApi/personBudget/performancePage',
+    method: 'post',
+    data
+  })
+}

package/dist/bizui/api/mms.js

@@ -81,3 +81,39 @@ export function getProductPriceDetail(data) {
     data
   })
 }
+
+/**
+ * 个人预算概述（实时不传 applyNumber；查看只传 applyNumber）
+ * POST /mms/admin/custom/getPersonBudgetOverview
+ */
+export function getPersonBudgetOverview(data) {
+  return request({
+    url: '/mms/admin/custom/getPersonBudgetOverview',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 个人预算使用明细独立分页
+ * POST /mms/admin/custom/getPersonBudgetUsagePage
+ */
+export function getPersonBudgetUsagePage(data) {
+  return request({
+    url: '/mms/admin/custom/getPersonBudgetUsagePage',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 个人预算业绩明细独立分页
+ * POST /mms/admin/custom/getPersonBudgetPerformancePage
+ */
+export function getPersonBudgetPerformancePage(data) {
+  return request({
+    url: '/mms/admin/custom/getPersonBudgetPerformancePage',
+    method: 'post',
+    data
+  })
+}

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

@@ -720,6 +720,14 @@ export default {
     background-color: transparent !important;
   }
 
+  /*
+   * 右固定列的左分割线原本是前一列的 border-right，属于主表；
+   * 列宽有小数时会被固定层盖住，故由固定列自绘左线
+   */
+  .el-table__fixed-right .el-table__cell:not(.is-hidden):not(.gutter) {
+    box-shadow: inset 1px 0 0 #eef0f3;
+  }
+
   .el-table__header-wrapper,
   .el-table__body-wrapper {
     width: 100% !important;

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

@@ -0,0 +1,121 @@
+# 个人预算看板（FieldPersonBudgetBoard）
+
+> 范围：物资系统 · 会议系统 · 申请中心 · **imeik-bizui**  
+> 目标：bizui 只负责「选接口 + 拉数 + 看板 UI」；**请求体组装在业务系统**  
+> 对齐：`FieldFloorPriceBoard`（底价看板）同一套分层
+
+---
+
+## 一、目录结构
+
+```
+imeik-bizui/src/bizui/
+├── api/mms.js                         # 物资/会议 getPersonBudgetOverview / UsagePage / PerformancePage
+├── api/applycenter.js                 # 申请中心 openApi/personBudget/*
+└── src/
+    └── FieldPersonBudgetBoard/
+        ├── index.vue                  # scene → 接口映射 + Dashboard
+        ├── README.md
+        └── core/                      # Overview / Dashboard / Detail / format / mock
+```
+
+`Vue.use(bizui)` 后：
+
+```vue
+<FieldPersonBudgetBoard
+  scene="supplies"
+  :request-payload="payload"
+  :show-detail-link="hasPerm"
+  @submit-blocked="onBlocked"
+/>
+```
+
+移动端想保留弹窗：加 `narrow-detail-mode="dialog"`（默认 `inline`，在看板下方展开）。
+
+`scene`：`supplies` | `meeting` | `apply` / `applyCenter`。
+
+请求体组装在业务系统（如物资 / 申请中心 `buildRequestPayload.js`）。
+
+---
+
+## 二、分层原则
+
+1. **接口**在 `api/mms.js`（物资/会议）与 `api/applycenter.js`（申请中心）。  
+2. **对外只注册** `FieldPersonBudgetBoard`；`index.vue` 按 `scene` 选 fetch。  
+3. **宿主组装** `requestPayload` + 权限；不写 debounce / 看板 UI。  
+4. **bizui 不解析**各域表单字段（费用承担人、snapshotList、整表 formDataJson 等）。
+
+```
+业务系统：表单字段 → requestPayload
+         ↓
+bizui：  scene 选接口 → Dashboard 拉数 → Overview / Detail
+```
+
+---
+
+## 三、标准契约
+
+| 类型 | 内容 |
+| --- | --- |
+| Props | `scene`、`requestPayload`、`showDetailLink`、`narrowDetailMode`、`useMock`、`emptyText`、`debounceMs` |
+| Events | `submit-blocked`：`{ blocked, warn }`（禁止提交 / 预警） |
+| 明细形态 | 宽屏始终弹窗；窄屏（≤768px）由 `narrowDetailMode`：`inline`（默认）或 `dialog` |
+| 物资/会议 · 查看 | `{ applyNumber }`（真实申请单号，不是 objectCode） |
+| 物资/会议 · 实时 | `{ costBearEmployeeNo, costType, materialList[] }`；`materialList` **允许 `[]`**；可选 `budgetDate` |
+| 申请中心 | `{ forceRefresh, formDataJson?, formDataNumber? }`（`PersonBudgetQueryDTO`）；明细另带 `usageCurrPage` / `performanceCurrPage` 等 |
+| 编辑态（物资） | **不传** `applyNumber`（即使草稿已有单号） |
+
+---
+
+## 四、scene → 接口
+
+| 域 | scene | 接口 |
+| --- | --- | --- |
+| 物资 | `supplies` | `mms.getPersonBudgetOverview` / `UsagePage` / `PerformancePage` |
+| 会议 | `meeting` | 同上（传参同形） |
+| 申请中心 | `apply` / `applyCenter` | `applycenter` `openApi/personBudget/overview|usagePage|performancePage` |
+
+---
+
+## 五、业务侧薄封装示例
+
+### 物资
+
+```js
+export function buildSuppliesPersonBudgetPayload(ctx) {
+  if (ctx.isView) {
+    const no = String(ctx.applyNumber || '').trim()
+    return no ? { applyNumber: no } : null
+  }
+  const employeeNo = String(ctx.costBearEmployeeNo || '').trim()
+  const type = ctx.costType != null && ctx.costType !== '' ? String(ctx.costType) : ''
+  if (!employeeNo || !type) return null
+  return {
+    costBearEmployeeNo: employeeNo,
+    costType: type,
+    materialList: mapMaterialList(ctx.snapshotList) // 允许 []
+  }
+}
+```
+
+### 申请中心
+
+```js
+export function buildApplyPersonBudgetPayload(ctx) {
+  const forceRefresh = !!ctx.forceRefresh
+  const formDataNumber = String(ctx.formDataNumber || '').trim()
+  const formDataJson = typeof ctx.formData === 'string'
+    ? ctx.formData
+    : JSON.stringify(ctx.formData || {})
+  if (forceRefresh) {
+    return hasMeaningfulFormData(ctx.formData) ? { forceRefresh: true, formDataJson } : null
+  }
+  return formDataNumber ? { forceRefresh: false, formDataNumber, formDataJson } : null
+}
+```
+
+---
+
+## 六、一句话
+
+**业务侧拼好 `requestPayload`；bizui 按 `scene` 调对应个人预算接口并展示。**

package/dist/bizui/src/FieldPersonBudgetBoard/core/PersonBudgetDashboard.vue

@@ -0,0 +1,295 @@
+<!--
+  个人预算看板编排：防抖拉概述、宽屏弹窗 / 窄屏就地展开、禁止态事件
+  对齐底价 FieldFloorPriceBoard：≤768 默认 inline
+
+  不负责：各业务域字段映射、拼请求体 —— 由业务系统组装后经 FieldPersonBudgetBoard 传入。
+-->
+<template>
+  <div class="person-budget-dashboard">
+    <PersonBudgetOverview
+      :overview="overview"
+      :loading="loading"
+      :error="error"
+      :empty-text="emptyText"
+      :show-detail-link="showDetailLink && !!overview && !useDemo"
+      :detail-link-text="detailLinkText"
+      @view-detail="onViewDetail"
+    />
+    <PersonBudgetDetailPanel
+      v-if="useInlineDetail && inlineOpen"
+      variant="inline"
+      :active="inlineOpen"
+      :overview="overview"
+      :request-payload="requestPayload"
+      :fetch-usage-page="fetchUsagePage"
+      :fetch-performance-page="fetchPerformancePage"
+      @collapse="collapseInline"
+    />
+    <PersonBudgetDetailDialog
+      :visible.sync="detailVisible"
+      :overview="overview"
+      :request-payload="requestPayload"
+      :fetch-usage-page="fetchUsagePage"
+      :fetch-performance-page="fetchPerformancePage"
+    />
+  </div>
+</template>
+
+<script>
+import { BUDGET_STATUS, normalizeBudgetStatus } from './format'
+import { createDemoOverview } from './mock'
+import PersonBudgetOverview from './PersonBudgetOverview.vue'
+import PersonBudgetDetailDialog from './PersonBudgetDetailDialog.vue'
+import PersonBudgetDetailPanel from './PersonBudgetDetailPanel.vue'
+
+const NARROW_BREAKPOINT = 768
+
+function debounce(fn, wait) {
+  let timer = null
+  const wrapped = function() {
+    const ctx = this
+    const args = arguments
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      timer = null
+      fn.apply(ctx, args)
+    }, wait)
+  }
+  wrapped.cancel = function() {
+    if (timer) clearTimeout(timer)
+    timer = null
+  }
+  return wrapped
+}
+
+function payloadSignature(payload) {
+  try {
+    return JSON.stringify(payload || null)
+  } catch (e) {
+    return String(payload)
+  }
+}
+
+export default {
+  name: 'PersonBudgetDashboard',
+  components: {
+    PersonBudgetOverview,
+    PersonBudgetDetailDialog,
+    PersonBudgetDetailPanel
+  },
+  props: {
+    requestPayload: {
+      type: Object,
+      default: null
+    },
+    showDetailLink: {
+      type: Boolean,
+      default: true
+    },
+    emptyText: {
+      type: String,
+      default: '请完善费用承担人和费用类型后查看个人预算'
+    },
+    debounceMs: {
+      type: Number,
+      default: 320
+    },
+    /**
+     * 窄屏明细形态：inline 看板下方展开（默认）| dialog 仍用弹窗
+     */
+    narrowDetailMode: {
+      type: String,
+      default: 'inline',
+      validator(v) {
+        return ['inline', 'dialog'].includes(v)
+      }
+    },
+    /** (payload) => Promise<{ code, data, message }>；useDemo 时可为空 */
+    fetchOverview: {
+      type: Function,
+      default: null
+    },
+    fetchUsagePage: {
+      type: Function,
+      default: null
+    },
+    fetchPerformancePage: {
+      type: Function,
+      default: null
+    },
+    /** true 时不调接口，展示演示概述（配置态） */
+    useDemo: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      error: '',
+      overview: null,
+      detailVisible: false,
+      inlineOpen: false,
+      isNarrow: false,
+      reqSeq: 0,
+      debouncedFetch: null
+    }
+  },
+  computed: {
+    useInlineDetail() {
+      return this.isNarrow && this.narrowDetailMode === 'inline'
+    },
+    detailLinkText() {
+      if (!this.useInlineDetail) return '查看详情 →'
+      return this.inlineOpen ? '收起详情 ↑' : '查看详情 ↓'
+    }
+  },
+  watch: {
+    requestPayload: {
+      deep: true,
+      handler() {
+        if (this.debouncedFetch) this.debouncedFetch()
+      }
+    },
+    useDemo: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.overview = createDemoOverview()
+          this.error = ''
+          this.loading = false
+          this.emitSubmitBlocked(false, false)
+          return
+        }
+        if (this.debouncedFetch) this.debouncedFetch()
+      }
+    },
+    useInlineDetail(inline) {
+      if (inline && this.detailVisible) {
+        this.detailVisible = false
+        this.inlineOpen = true
+      } else if (!inline) {
+        this.inlineOpen = false
+      }
+    },
+    overview(val) {
+      if (!val && this.inlineOpen) this.inlineOpen = false
+    }
+  },
+  created() {
+    this.debouncedFetch = debounce(() => {
+      this.fetchOverviewNow()
+    }, this.debounceMs)
+    if (!this.useDemo) 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)
+    }
+    this.emitSubmitBlocked(false, false)
+  },
+  methods: {
+    updateNarrow() {
+      if (typeof window === 'undefined') return
+      this.isNarrow = window.innerWidth <= NARROW_BREAKPOINT
+    },
+    emitSubmitBlocked(blocked, warn) {
+      this.$emit('submit-blocked', { blocked: !!blocked, warn: !!warn })
+    },
+    clearBoard() {
+      this.overview = null
+      this.error = ''
+      this.loading = false
+      this.inlineOpen = false
+      this.emitSubmitBlocked(false, false)
+    },
+    async fetchOverviewNow() {
+      if (this.useDemo) {
+        this.overview = createDemoOverview()
+        this.error = ''
+        this.loading = false
+        this.emitSubmitBlocked(false, false)
+        return
+      }
+
+      const payload = this.requestPayload
+      const sig = payloadSignature(payload)
+      const seq = ++this.reqSeq
+
+      if (!payload || typeof this.fetchOverview !== 'function') {
+        this.clearBoard()
+        return
+      }
+
+      this.loading = true
+      this.error = ''
+      try {
+        const res = await this.fetchOverview(payload)
+        if (seq !== this.reqSeq || sig !== payloadSignature(this.requestPayload)) return
+
+        if (!res || res.code !== 200) {
+          this.overview = null
+          this.error = (res && res.message) || '个人预算概述获取失败'
+          this.emitSubmitBlocked(false, false)
+          return
+        }
+
+        this.overview = res.data || null
+        const status = normalizeBudgetStatus(this.overview && this.overview.status)
+        this.emitSubmitBlocked(
+          status === BUDGET_STATUS.FORBID,
+          status === BUDGET_STATUS.WARN
+        )
+      } catch (e) {
+        if (seq !== this.reqSeq) return
+        this.overview = null
+        this.error = (e && e.message) || '个人预算概述获取失败'
+        this.emitSubmitBlocked(false, false)
+      } finally {
+        if (seq === this.reqSeq) this.loading = false
+      }
+    },
+    onViewDetail() {
+      if (!this.overview) return
+      // 配置态演示：无真实 requestPayload / fetch，不允许进明细
+      if (this.useDemo || !this.requestPayload) return
+      if (typeof this.fetchUsagePage !== 'function' || typeof this.fetchPerformancePage !== 'function') {
+        return
+      }
+      if (this.useInlineDetail) {
+        this.toggleInline()
+        return
+      }
+      this.detailVisible = true
+    },
+    toggleInline() {
+      this.inlineOpen = !this.inlineOpen
+    },
+    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' })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.person-budget-dashboard {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+</style>

package/dist/bizui/src/FieldPersonBudgetBoard/core/PersonBudgetDetailDialog.vue

@@ -0,0 +1,84 @@
+<!--
+  个人预算详情弹窗（宽屏）
+-->
+<template>
+  <ImDialog
+    :visible.sync="dialogVisible"
+    custom-class="person-budget-detail-dialog-wrap"
+    title="个人预算详情"
+    :width="dialogWidth"
+    height="auto"
+    top="3vh"
+    container-style="maxHeight: 90vh;overflow-y: auto;"
+    append-to-body
+    destroy-on-close
+    hide-footer
+    @closeDialog="onClosed"
+  >
+    <PersonBudgetDetailPanel
+      variant="dialog"
+      :active="visible"
+      :overview="overview"
+      :request-payload="requestPayload"
+      :fetch-usage-page="fetchUsagePage"
+      :fetch-performance-page="fetchPerformancePage"
+    />
+  </ImDialog>
+</template>
+
+<script>
+import PersonBudgetDetailPanel from './PersonBudgetDetailPanel.vue'
+
+export default {
+  name: 'PersonBudgetDetailDialog',
+  components: {
+    PersonBudgetDetailPanel
+  },
+  props: {
+    visible: { type: Boolean, default: false },
+    overview: { type: Object, default: null },
+    requestPayload: { type: Object, default: null },
+    fetchUsagePage: { type: Function, required: true },
+    fetchPerformancePage: { type: Function, required: true }
+  },
+  data() {
+    return {
+      viewportWidth: typeof window !== 'undefined' ? window.innerWidth : 1360
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(v) {
+        this.$emit('update:visible', v)
+      }
+    },
+    dialogWidth() {
+      const w = this.viewportWidth || 1360
+      return `${Math.min(1360, Math.max(w - 48, 720))}px`
+    }
+  },
+  mounted() {
+    this.onResize = () => {
+      this.viewportWidth = window.innerWidth
+    }
+    window.addEventListener('resize', this.onResize)
+  },
+  beforeDestroy() {
+    if (this.onResize) window.removeEventListener('resize', this.onResize)
+  },
+  methods: {
+    onClosed() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-dialog.person-budget-detail-dialog-wrap {
+  max-width: calc(100vw - 48px);
+}
+</style>