BizExpenseClaim 费用报销单

企业内部报销单据复合件：单据头（编号 / 报销人 / 部门 / 事由）+ 费用明细行（类型 · 日期 · 金额 · 发票号 · 备注，行增删复制）+ 合计（千分位 + 人民币大写）+ 发票夹（代码 + 号码重复拦截 / 查验标记）+ 发票影像附件 + 提交审批 / 暂存草稿。readonly 只读快照供审批详情页回显，model-value 支持快照 / 草稿恢复。

基础用法

单号BX20261026-975报销人王小明 部门

报销事由

0 / 100

费用明细

合计（1 笔）¥ 0.00零元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

明细行金额支持千分位与失焦规整（内嵌 BizAmountInput）；合计实时汇总并联动人民币大写；「暂存草稿」将数据经 draft 事件外抛。

默认费用类型与明细行操作；合计实时汇总并联动大写；暂存草稿经 draft 事件外抛。

<script setup lang="ts">
/** 基础用法：默认费用类型 + 明细行增删复制 + 合计大写联动，提交进入成功页 */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const onSubmit = (): void => {
  ElMessage.success('提交成功，进入成功页（演示零接口）')
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim
      :departments="['市场部', '技术部', '行政部', '财务部']"
      applicant="王小明"
      @submit="onSubmit"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      明细行金额支持千分位与失焦规整（内嵌 BizAmountInput）；合计实时汇总并联动人民币大写；「暂存草稿」将数据经 draft 事件外抛。
    </p>
  </div>
</template>

显示代码

明细校验与单笔上限

单号BX20261026-482报销人李雷

报销事由

16 / 100

费用明细

合计（2 笔）¥ 7,000.00柒仟元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

amount-limit=5000：第二行 4680 元在输入框失焦时回弹受限；即便绕过，提交校验仍按行拦截并提示行号。

amount-limit 双保险：金额输入失焦回弹 + 提交校验按行拦截（提示行号）。

<script setup lang="ts">
/** 明细校验：事由必填、单行金额上限（失焦回弹 + 提交拦截双保险） */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import type { BizExpenseClaimSnapshot } from 'vue3-ep-biz-lib'

const snapshot: BizExpenseClaimSnapshot = {
  reason: '华东区客户回访差旅（含一晚住宿）',
  details: [
    { id: 'd1', type: 'travel-traffic', date: '2026-10-15', amount: 2320, invoiceNo: '02156872', note: '往返高铁 + 市内打车' },
    { id: 'd2', type: 'travel-hotel', date: '2026-10-15', amount: 4680, invoiceNo: '', note: '酒店一晚（超上限示例行）' },
  ],
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim :model-value="snapshot" :amount-limit="5000" applicant="李雷" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      amount-limit=5000：第二行 4680 元在输入框失焦时回弹受限；即便绕过，提交校验仍按行拦截并提示行号。
    </p>
  </div>
</template>

显示代码

发票夹与重复拦截

单号BX20261026-355报销人韩梅梅

报销事由

0 / 100

费用明细

合计（1 笔）¥ 0.00零元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

先完整登记一张发票（代码 / 号码 / 金额 / 日期均必填），再用相同代码+号码登记第二次——将被拦截并提示「防重复报销」；登记后可切换查验状态。

登记必填校验；同「代码 + 号码」重复登记被拦截；查验状态可切换并随单提交。

<script setup lang="ts">
/** 发票夹：登记必填校验 + 「代码+号码」重复拦截 + 查验标记 */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim applicant="韩梅梅" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      先完整登记一张发票（代码 / 号码 / 金额 / 日期均必填），再用相同代码+号码登记第二次——将被拦截并提示「防重复报销」；登记后可切换查验状态。
    </p>
  </div>
</template>

显示代码

附件上传

单号BX20261026-563报销人赵敏

报销事由

0 / 100

费用明细

合计（1 笔）¥ 0.00零元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

发票影像 / 凭证附件

支持 Ctrl + V 粘贴截图

支持截图 Ctrl+V 粘贴上传

未注入 uploadRequest 时隐藏上传入口；注入后复用 BizUploadFile 全链路（类型 / 大小校验、失败重传、Ctrl+V 截图粘贴）。

uploadRequest 注入后出现发票影像上传区（复用 BizUploadFile，支持截图粘贴）。

<script setup lang="ts">
/** 附件上传：uploadRequest 注入后出现发票影像上传区（支持截图粘贴） */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'

/** 模拟上传接口：800ms 后返回文件地址（真实项目替换为 OSS / 后端接口） */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`https://cdn.demo-local.com/receipts/${Date.now()}-${encodeURIComponent(file.name)}`)
    }, 800)
  })
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim applicant="赵敏" :upload-request="uploadRequest" :upload-limit="9" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      未注入 uploadRequest 时隐藏上传入口；注入后复用 BizUploadFile 全链路（类型 / 大小校验、失败重传、Ctrl+V 截图粘贴）。
    </p>
  </div>
</template>

显示代码

合计与人民币大写

单号BX20261026-716报销人财务共享中心

报销事由

11 / 100

费用明细

合计（3 笔）¥ 15,008,449.80壹仟伍佰万零捌仟肆佰肆拾玖元捌角

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

首行 15,005,000 元演示跨节零口径：壹仟伍佰万零伍仟元整；修改任意行金额，合计与大写即时重算。

15,005,000 元演示跨节零口径：壹仟伍佰万零伍仟元整。

<script setup lang="ts">
/** 合计与人民币大写：明细变化实时联动（含跨节零口径 15005000 → 壹仟伍佰万零伍仟） */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import type { BizExpenseClaimSnapshot } from 'vue3-ep-biz-lib'

const snapshot: BizExpenseClaimSnapshot = {
  reason: '年度供应商大会费用归集',
  details: [
    { id: 'd1', type: 'entertain', date: '2026-10-08', amount: 15005000, invoiceNo: '88210011', note: '大会场地与餐饮（大额演示）' },
    { id: 'd2', type: 'training', date: '2026-10-09', amount: 3250.8, invoiceNo: '88210012', note: '讲师课酬' },
    { id: 'd3', type: 'office', date: '2026-10-10', amount: 199, invoiceNo: '', note: '物料印刷' },
  ],
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim :model-value="snapshot" applicant="财务共享中心" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      首行 15,005,000 元演示跨节零口径：壹仟伍佰万<b>零</b>伍仟元整；修改任意行金额，合计与大写即时重算。
    </p>
  </div>
</template>

显示代码

部门与费用类型定制

单号CW20261026-656报销人车队·马强 部门

报销事由

0 / 100

费用明细

合计（1 笔）¥ 0.00零元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

departments 部门候选、expense-types 业务口径、code-prefix 单号前缀。

<script setup lang="ts">
/** 部门与费用类型定制：部门候选、自定义类型口径、事由占位文案 */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import type { BizExpenseType } from 'vue3-ep-biz-lib'

const expenseTypes: BizExpenseType[] = [
  { value: 'fuel', label: '车辆油费' },
  { value: 'maintain', label: '车辆维修保养' },
  { value: 'parking', label: '停车过路' },
  { value: 'other', label: '其他车务' },
]
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim
      applicant="车队·马强"
      code-prefix="CW"
      :departments="['车队', '总经办', '后勤保障部']"
      department="车队"
      :expense-types="expenseTypes"
      reason-placeholder="简述用车事由，如：10 月园区通勤车辆油费"
    />
  </div>
</template>

显示代码

提交载荷

单号BX20261026-115报销人陈晨 部门

报销事由

11 / 100

费用明细

合计（2 笔）¥ 1,720.00壹仟柒佰贰拾元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

payload 完整结构外抛：单据头 / 明细（含类型文案）/ 合计大写 / 发票夹 / 附件。

<script setup lang="ts">
/** 提交载荷：payload 结构完整外抛（单据头 / 明细含类型文案 / 合计大写 / 发票夹 / 附件） */
import { ref } from 'vue'
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import type { BizExpenseClaimPayload, BizExpenseClaimSnapshot } from 'vue3-ep-biz-lib'

const lastPayload = ref<BizExpenseClaimPayload | null>(null)

const snapshot: BizExpenseClaimSnapshot = {
  reason: '项目组深圳驻场补贴申领',
  details: [
    { id: 'd1', type: 'travel-hotel', date: '2026-10-11', amount: 860, invoiceNo: '11002233', note: '驻场第 1 周' },
    { id: 'd2', type: 'travel-hotel', date: '2026-10-18', amount: 860, invoiceNo: '11002234', note: '驻场第 2 周' },
  ],
  invoices: [
    { id: 'i1', code: '044031900111', no: '11002233', amount: 860, date: '2026-10-12', verified: true },
    { id: 'i2', code: '044031900111', no: '11002234', amount: 860, date: '2026-10-19', verified: false },
  ],
}

const onSubmit = (payload: BizExpenseClaimPayload): void => {
  lastPayload.value = payload
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim :model-value="snapshot" applicant="陈晨" :departments="['交付部']" @submit="onSubmit" />
    <el-divider v-if="lastPayload" style="margin: 16px 0 8px" />
    <pre v-if="lastPayload" style="margin: 0; padding: 10px; background: var(--el-fill-color-light); border-radius: 6px; font-size: 12px; overflow: auto">{{ JSON.stringify(lastPayload, null, 2) }}</pre>
  </div>
</template>

显示代码

提交失败停留

单号BX20261026-488报销人测试账号

报销事由

0 / 100

费用明细

合计（1 笔）¥ 0.00零元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

事由填写「模拟失败」提交可看到：错误提示 + 表单停留（数据不丢）；改为其他事由即可提交成功进入成功页。

submitRequest reject 时提示错误并停留表单，修正后重试。

<script setup lang="ts">
/** 提交失败停留：submitRequest reject 时提示错误并停留表单，修正后可重试 */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import type { BizExpenseClaimPayload } from 'vue3-ep-biz-lib'

const submitRequest = (payload: BizExpenseClaimPayload): Promise<void> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (payload.reason.includes('失败')) {
        reject(new Error('演示：事由含「失败」时模拟服务端驳回'))
        return
      }
      resolve()
    }, 600)
  })
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim applicant="测试账号" :submit-request="submitRequest" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      事由填写「模拟失败」提交可看到：错误提示 + 表单停留（数据不丢）；改为其他事由即可提交成功进入成功页。
    </p>
  </div>
</template>

显示代码

只读审查（审批快照）

单据编号BX20261018-366

报销人 / 部门周雯 · 市场部

报销事由Q4 品牌发布会物料与招待费用

费用明细（2 笔）

合计¥ 4,860.50肆仟捌佰陆拾元伍角

发票夹（2 张）

附件（2）

invoice-33010055.pdfinvoice-33010056.pdf

readonly 下渲染审批快照：明细 / 发票夹 / 附件均为纯展示，合计与大写随快照计算，适合审批流详情页。

modelValue 快照 + readonly 纯展示，合计与大写随快照计算。

<script setup lang="ts">
/** 只读审查：modelValue 审批快照 + readonly，纯展示不可编辑（审批详情页嵌入场景） */
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import type { BizExpenseClaimSnapshot } from 'vue3-ep-biz-lib'

const snapshot: BizExpenseClaimSnapshot = {
  code: 'BX20261018-366',
  applicant: '周雯',
  department: '市场部',
  reason: 'Q4 品牌发布会物料与招待费用',
  details: [
    { id: 'd1', type: 'office', date: '2026-10-16', amount: 3280, invoiceNo: '33010055', note: '易拉宝 / 手提袋印刷' },
    { id: 'd2', type: 'entertain', date: '2026-10-17', amount: 1580.5, invoiceNo: '33010056', note: '媒体记者茶歇' },
  ],
  invoices: [
    { id: 'i1', code: '133012090011', no: '33010055', amount: 3280, date: '2026-10-16', verified: true },
    { id: 'i2', code: '133012090011', no: '33010056', amount: 1580.5, date: '2026-10-17', verified: false },
  ],
  attachments: ['https://cdn.demo-local.com/receipts/invoice-33010055.pdf', 'https://cdn.demo-local.com/receipts/invoice-33010056.pdf'],
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim :model-value="snapshot" readonly />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      readonly 下渲染审批快照：明细 / 发票夹 / 附件均为纯展示，合计与大写随快照计算，适合审批流详情页。
    </p>
  </div>
</template>

显示代码

插槽扩展

单号BX20261026-196报销人吴迪 部门

部门月度预算余量：¥ 12000

报销事由

0 / 100

费用明细

合计（1 笔）¥ 0.00零元整

发票夹

发票代码

发票号码

金额（元）

¥

开票日期

同「发票代码 + 号码」重复登记会被拦截（防重复报销）；登记后可标记查验状态随单提交。

header-extra 作用域提供实时合计 total；footer 作用域提供当前 payload，可挂自定义动作。

header-extra（作用域 total）预算余量提示；footer（作用域 payload）自定义动作。

<script setup lang="ts">
/** 插槽扩展：header-extra 注入预算余量提示，footer 注入自定义动作 */
import { ref } from 'vue'
import { BizExpenseClaim } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizExpenseClaimPayload } from 'vue3-ep-biz-lib'

const budgetLeft = ref(12000)

const onExport = (payload: BizExpenseClaimPayload): void => {
  ElMessage.success(`（演示）已按当前表单生成报销单文件：${payload.code}，合计 ${payload.totalAmount} 元`)
}
</script>

<template>
  <div style="max-width: 860px">
    <BizExpenseClaim applicant="吴迪" :departments="['采购部']">
      <template #header-extra="{ total }">
        <span style="font-size: 13px; color: var(--el-text-color-warning)">
          部门月度预算余量：¥ {{ budgetLeft - total }}
        </span>
      </template>
      <template #footer="{ payload }">
        <ElButton size="small" @click="onExport(payload)">导出报销单（PDF）</ElButton>
      </template>
    </BizExpenseClaim>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      header-extra 作用域提供实时合计 total；footer 作用域提供当前 payload，可挂自定义动作。
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
code-prefix	string	'BX'	单据编号前缀（后接日期 + 随机序号）
applicant	string	'当前用户'	报销人（快照可覆盖）
departments	string[]	—	部门候选（传入即渲染部门下拉）
department	string	''	默认选中部门
expense-types	BizExpenseType[]	差旅·交通 / 差旅·住宿 / 业务招待 / 办公用品 / 通讯网络 / 培训会议 / 其他	费用类型口径
reason-required	boolean	true	事由必填
reason-placeholder	string	—	事由占位文案
amount-limit	number	—	单笔金额上限（元）：金额输入失焦回弹 + 提交校验拦截
show-invoices	boolean	true	发票夹区块
invoice-required	boolean	false	提交时至少登记一张发票
upload-request	(file: File) => Promise<string>	—	附件上传实现（复用 BizUploadFile 契约；未注入时隐藏上传入口）
upload-limit	number	9	附件数量上限
submit-request	(payload: BizExpenseClaimPayload) => Promise<void>	—	提交实现：resolve 进入成功页；reject 提示失败停留；不配置时外抛 submit 后直接成功
readonly	boolean	false	只读审查（审批快照）
model-value	BizExpenseClaimSnapshot	—	回显快照（审批快照 / 草稿恢复；submitted: true 直接渲染成功态）
success-text	string	'请留意审批进度通知'	提交成功副文案

Events

事件名	参数	说明
submit	(payload: BizExpenseClaimPayload)	提交审批（先于 submitRequest 抛出）
draft	(payload: BizExpenseClaimPayload)	暂存草稿（不做校验，数据完整外抛）

Slots

插槽名	说明
header-extra	单据头右侧扩展（作用域：total 实时合计）
footer	底部操作区扩展（作用域：payload 当前载荷）

Expose

属性/方法	说明
validate	() => Promise<boolean> 表单校验（明细行 / 上限 / 发票要求数）
getPayload	() => BizExpenseClaimPayload 取当前载荷（不校验）
reset	() => void 重置为空白单据（重新生成编号）

口径说明

• 单据编号：{code-prefix}{YYYYMMDD}-{3 位随机序号}，reset 重新生成；快照携带 code 时以快照为准。
• 合计与大写：合计 = 明细行金额求和（两位精度规整）；大写使用库内 toRmbUppercase（元角分 / 零整 / 跨节零压缩，如 15005000 → 壹仟伍佰万零伍仟元整）。
• 发票重复口径：按「发票代码 + 发票号码」二元组判重，登记入口即时拦截；查验状态为本地标记随 payload 提交（真实查验可基于该字段对接税局接口回写）。
• 明细行至少一行：删除到最后一行时按钮降级为拦截提示。