BizSalarySlip 工资条

员工自助查薪组件：期间导航（上一期 / 下一期 / 月份直选）→ 员工信息（发薪账户尾号脱敏）→ 应发 / 扣减明细 → 合计与实发大字。敏感金额默认脱敏（﹡﹡﹡﹡﹡），点击「明示查看」显性化并提示注意周边环境，期间切换自动复位；薪资异议反馈（说明 ≥5 字必填）；年度汇总卡（各期净额 CSS 条形图）；复制摘要到剪贴板；readonly 审计模式保持脱敏并叠加「内部资料」水印。适用于 HR 系统员工自助查薪、财务发薪通知、薪酬保密合规审计等场景。

基础用法

我的工资条

员工张三

部门 / 岗位研发中心 · 高级前端工程师

发薪账户**** **** **** 2233

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

岗位津贴 ¥ ﹡﹡﹡﹡﹡

绩效奖金 Q3 · A 档¥ ﹡﹡﹡﹡﹡

餐补 ¥ ﹡﹡﹡﹡﹡

扣减项目

养老保险 -¥ ﹡﹡﹡﹡﹡

医疗保险 -¥ ﹡﹡﹡﹡﹡

住房公积金 -¥ ﹡﹡﹡﹡﹡

个人所得税 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

本期绩效含季度考核系数 1.15；公积金基数按上年月均工资核定。

2026 年度汇总（1 期）累计实发 ¥ ﹡﹡﹡﹡﹡

10月

敏感金额默认脱敏；「明示查看」显性化，再次点击恢复隐藏；银行卡仅显尾号。

<script setup lang="ts">
/** 基础用法：敏感金额默认脱敏，「明示查看」显性化（提示注意周边环境），再次点击隐藏 */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const slips = ref<Slip[]>([
  {
    period: monthStr(),
    employee: '张三',
    department: '研发中心',
    position: '高级前端工程师',
    bankCard: '6222 0202 0011 2233',
    earnings: [
      { label: '基本工资', amount: 18000 },
      { label: '岗位津贴', amount: 2000 },
      { label: '绩效奖金', amount: 4600, note: 'Q3 · A 档' },
      { label: '餐补', amount: 440 },
    ],
    deductions: [
      { label: '养老保险', amount: 1152 },
      { label: '医疗保险', amount: 288 },
      { label: '住房公积金', amount: 2160 },
      { label: '个人所得税', amount: 642.3 },
    ],
    remark: '本期绩效含季度考核系数 1.15；公积金基数按上年月均工资核定。',
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :slips="slips" />
  </div>
</template>

显示代码

HR 预览（不脱敏）

我的工资条

员工王敏（HR 预览）

部门 / 岗位人力资源部 · 薪酬专员

发薪账户—

应发项目

基本工资 ¥ 12,000.00

绩效奖金 ¥ 3,000.00

扣减项目

养老保险 -¥ 768.00

个人所得税 -¥ 173.40

应发合计¥ 15,000.00

扣减合计-¥ 941.40

实发工资¥ 14,058.60

mask-by-default 关闭后金额直接明示，适配薪酬专员制单核对场景。

<script setup lang="ts">
/** HR 预览模式：mask-by-default 关闭，金额直接明示（薪酬专员制单场景） */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const slips = ref<Slip[]>([
  {
    period: monthStr(),
    employee: '王敏（HR 预览）',
    department: '人力资源部',
    position: '薪酬专员',
    earnings: [
      { label: '基本工资', amount: 12000 },
      { label: '绩效奖金', amount: 3000 },
    ],
    deductions: [
      { label: '养老保险', amount: 768 },
      { label: '个人所得税', amount: 173.4 },
    ],
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :slips="slips" :mask-by-default="false" :show-year-summary="false" />
  </div>
</template>

显示代码

期间导航

我的工资条

员工张三

部门 / 岗位研发中心

发薪账户—

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

绩效奖金 ¥ ﹡﹡﹡﹡﹡

扣减项目

五险一金 -¥ ﹡﹡﹡﹡﹡

个人所得税 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

2026 年度汇总（3 期）累计实发 ¥ ﹡﹡﹡﹡﹡

08月

09月

10月

多期数据上一期 / 下一期切换与月份直选（仅可选有数据的期间）；切换后脱敏状态自动复位。

<script setup lang="ts">
/** 期间导航：多期工资条上一期/下一期与月份直选；期间切换后脱敏状态自动复位 */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const mk = (period: string, base: number): Slip => ({
  period,
  employee: '张三',
  department: '研发中心',
  earnings: [
    { label: '基本工资', amount: 18000 },
    { label: '绩效奖金', amount: base },
  ],
  deductions: [
    { label: '五险一金', amount: 3600 },
    { label: '个人所得税', amount: base > 4000 ? 580 : 420 },
  ],
})

const slips = ref<Slip[]>([mk(monthStr(), 4600), mk(monthStr(-1), 4200), mk(monthStr(-2), 3800)])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :slips="slips" />
  </div>
</template>

显示代码

年度汇总

薪资明细（含年度汇总）

员工张三

部门 / 岗位—

发薪账户—

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

绩效奖金 ¥ ﹡﹡﹡﹡﹡

扣减项目

五险一金 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

2026 年度汇总（4 期）累计实发 ¥ ﹡﹡﹡﹡﹡

07月

08月

09月

10月

show-year-summary 展示累计实发与各期净额条形（CSS 绘制，无图表依赖）；应发合计 = 净额 + 扣减反推。

<script setup lang="ts">
/** 年度汇总：累计实发与各期净额条形图（CSS 绘制，无图表依赖），应发 = 净额 + 扣减反推 */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const mk = (period: string, bonus: number): Slip => ({
  period,
  employee: '张三',
  earnings: [
    { label: '基本工资', amount: 18000 },
    { label: '绩效奖金', amount: bonus },
  ],
  deductions: [{ label: '五险一金', amount: 3600 }],
})

const slips = ref<Slip[]>([
  mk(monthStr(), 5200),
  mk(monthStr(-1), 4600),
  mk(monthStr(-2), 4400),
  mk(monthStr(-3), 5800),
])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip title="薪资明细（含年度汇总）" :slips="slips" />
  </div>
</template>

显示代码

薪资异议

我的工资条

员工张三

部门 / 岗位研发中心

发薪账户—

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

加班餐补 10 月 2 日国庆加班未计入¥ ﹡﹡﹡﹡﹡

扣减项目

五险一金 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

2026 年度汇总（1 期）累计实发 ¥ ﹡﹡﹡﹡﹡

10月

说明必填（≥5 字）；feedback 事件外抛 + feedback-request 远程提交 HR。

<script setup lang="ts">
/** 异议反馈：说明必填（≥5 字），feedback 事件外抛 + feedbackRequest 远程提交 */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalaryFeedback, BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const slips = ref<Slip[]>([
  {
    period: monthStr(),
    employee: '张三',
    department: '研发中心',
    earnings: [
      { label: '基本工资', amount: 18000 },
      { label: '加班餐补', amount: 220, note: '10 月 2 日国庆加班未计入' },
    ],
    deductions: [{ label: '五险一金', amount: 3600 }],
  },
])

const log = ref<string[]>([])
const feedbackRequest = (f: BizSalaryFeedback) =>
  new Promise<void>((resolve) => setTimeout(() => { log.value.push(`${f.period}：${f.message}`); resolve() }, 500))
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :slips="slips" :feedback-request="feedbackRequest" @feedback="(f) => log.push(`事件外抛 ${f.period}`)" />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">HR 收到的异议：{{ log.join('；') }}</p>
  </div>
</template>

显示代码

远程模式

我的工资条

该期间暂无工资条

request(period) 按期间拉取、periods 提供期间清单；已拉取期间本地缓存不重复请求。

<script setup lang="ts">
/** 远程模式：request 按期间拉取（期间清单 periods 提供，懒加载缓存） */
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const periods = [monthStr(), monthStr(-1), monthStr(-2)]

const request = (period: string) =>
  new Promise<Slip>((resolve, reject) => {
    setTimeout(() => {
      if (!periods.includes(period)) {
        reject(new Error('no data'))
        return
      }
      resolve({
        period,
        employee: '张三（云端）',
        department: '研发中心',
        bankCard: '6222 0202 0011 2233',
        earnings: [
          { label: '基本工资', amount: 18000 },
          { label: '绩效奖金', amount: 4000 + periods.indexOf(period) * 600 },
        ],
        deductions: [{ label: '五险一金', amount: 3600 }],
      })
    }, 500)
  })
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :periods="periods" :request="request" @period-change="(p) => console.log('period', p)" />
  </div>
</template>

显示代码

自定义结构

销售薪酬单

员工陈晓（销售一部）

部门 / 岗位销售一部 · 客户经理

发薪账户—

应发项目

底薪 ¥ 4,500.00

签单提成 新签 3 单¥ 12,800.00

续费提成 ¥ 3,200.00

超额激励 完成率 137%¥ 1,500.00

扣减项目

五险一金 -¥ 980.00

迟到扣款 -¥ 60.00

个人所得税 -¥ 1,180.50

应发合计¥ 22,000.00

扣减合计-¥ 2,220.50

实发工资¥ 19,779.50

提成按当月回款口径核算，次月 15 日随薪发放。

明细项完全配置驱动：销售场景低底薪 + 签单 / 续费提成 + 超额激励，扣减含迟到扣款。

<script setup lang="ts">
/** 自定义结构：明细项完全配置驱动（销售提成场景：低底薪 + 高提成 + 扣件） */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const slips = ref<Slip[]>([
  {
    period: monthStr(),
    employee: '陈晓（销售一部）',
    department: '销售一部',
    position: '客户经理',
    earnings: [
      { label: '底薪', amount: 4500 },
      { label: '签单提成', amount: 12800, note: '新签 3 单' },
      { label: '续费提成', amount: 3200 },
      { label: '超额激励', amount: 1500, note: '完成率 137%' },
    ],
    deductions: [
      { label: '五险一金', amount: 980 },
      { label: '迟到扣款', amount: 60 },
      { label: '个人所得税', amount: 1180.5 },
    ],
    remark: '提成按当月回款口径核算，次月 15 日随薪发放。',
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip title="销售薪酬单" :slips="slips" :mask-by-default="false" :show-year-summary="false" />
  </div>
</template>

显示代码

发薪账户口径

我的工资条

员工张三

部门 / 岗位研发中心

发薪账户**** **** **** 2233

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

扣减项目

五险一金 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

发薪账户仅显尾号（默认）

mask-bank-card 默认仅显尾号；关闭后完整卡号（金额脱敏独立生效）。

<script setup lang="ts">
/** 发薪账户：mask-bank-card 默认仅显尾号；关闭后完整卡号（配合脱敏金额仍生效） */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const mk = (period: string, masked: boolean): Slip => ({
  period,
  employee: '张三',
  department: '研发中心',
  bankCard: '6222 0202 0011 2233',
  earnings: [{ label: '基本工资', amount: 18000 }],
  deductions: [{ label: '五险一金', amount: 3600 }],
  remark: masked ? '发薪账户仅显尾号（默认）' : '发薪账户完整展示（mask-bank-card=false）',
})

const slips = ref<Slip[]>([mk(monthStr(), true), mk(monthStr(-1), false)])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :slips="slips" :show-year-summary="false" />
  </div>
</template>

显示代码

插槽

我的工资条

员工张三

部门 / 岗位研发中心

发薪账户—

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

绩效奖金 ¥ ﹡﹡﹡﹡﹡

扣减项目

五险一金 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

actions-extra 追加业务按钮，作用域含当期 slip 与 summary（gross / deduction / net）。

<script setup lang="ts">
/** 插槽：actions-extra 追加「下载电子回单」等业务按钮（作用域含当期 slip 与汇总） */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const slips = ref<Slip[]>([
  {
    period: monthStr(),
    employee: '张三',
    department: '研发中心',
    earnings: [{ label: '基本工资', amount: 18000 }, { label: '绩效奖金', amount: 4200 }],
    deductions: [{ label: '五险一金', amount: 3600 }],
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip :slips="slips" :show-year-summary="false">
      <template #actions-extra="{ slip, summary }">
        <el-button size="small" type="success" plain @click="ElMessage.success(`电子回单 ${slip.period} 已申请（实发 ${summary.net}）`)">
          申请电子回单
        </el-button>
      </template>
    </BizSalarySlip>
  </div>
</template>

显示代码

只读审计

薪酬审计（只读）

员工涉密员工 · 审计视图

部门 / 岗位财务部

发薪账户**** **** **** 8888

应发项目

基本工资 ¥ ﹡﹡﹡﹡﹡

保密津贴 ¥ ﹡﹡﹡﹡﹡

扣减项目

五险一金 -¥ ﹡﹡﹡﹡﹡

个人所得税 -¥ ﹡﹡﹡﹡﹡

应发合计¥ ﹡﹡﹡﹡﹡

扣减合计-¥ ﹡﹡﹡﹡﹡

实发工资¥ ﹡﹡﹡﹡﹡

readonly 强制脱敏、隐藏明示与异议按钮，叠加「内部资料」水印，适配截图留档审计。

<script setup lang="ts">
/** 只读审计：readonly 保持脱敏、禁明示与异议，叠加「内部资料」水印（截图留档场景） */
import { ref } from 'vue'
import { BizSalarySlip } from 'vue3-ep-biz-lib'
import type { BizSalarySlipData as Slip } from 'vue3-ep-biz-lib'

const pad2 = (n: number) => String(n).padStart(2, '0')
const monthStr = (offset = 0) => {
  const d = new Date()
  const dt = new Date(d.getFullYear(), d.getMonth() + offset, 1)
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}`
}

const slips = ref<Slip[]>([
  {
    period: monthStr(),
    employee: '涉密员工 · 审计视图',
    department: '财务部',
    bankCard: '6222 0202 9999 8888',
    earnings: [{ label: '基本工资', amount: 26000 }, { label: '保密津贴', amount: 3000 }],
    deductions: [{ label: '五险一金', amount: 4800 }, { label: '个人所得税', amount: 2110.6 }],
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizSalarySlip title="薪酬审计（只读）" readonly :slips="slips" :show-year-summary="false" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'我的工资条'	面板标题
slips	BizSalarySlip[]	[]	工资条列表（本地模式数据源）：{ period: 'YYYY-MM', employee, department?, position?, bankCard?, earnings[], deductions[], remark? }，明细项 { label, amount, note? }
period	string	最新一期	初始期间（YYYY-MM）
mask-by-default	boolean	true	敏感金额默认脱敏，点击「明示查看」显性化
mask-bank-card	boolean	true	银行卡号仅显示尾号
allow-feedback	boolean	true	异议反馈入口
feedback-request	(feedback) => Promise<void>	—	异议反馈提交（远程模式）
show-year-summary	boolean	true	年度汇总卡（各期净额条形）
request	(period: string) => Promise<BizSalarySlip>	—	按期间拉取（远程模式，优先于 slips）
periods	string[]	近 12 期	可选期间清单（远程模式期间导航依据）
readonly	boolean	false	只读审计：强制脱敏、禁明示 / 反馈、叠加水印

Events

事件名	参数	说明
feedback	(feedback: BizSalaryFeedback)	薪资异议提交（先于 feedbackRequest 外抛）
period-change	(period: string)	期间切换

Slots

插槽名	说明
actions-extra	{ slip, summary } 操作区追加按钮（电子回单等）

Expose

属性/方法	说明
goToPeriod	(period: string) => Promise<void> 切换到指定期间（远程模式自动拉取）
getSummary	() => { gross, deduction, net } 当前期间汇总
isRevealed	() => boolean 当前是否处于明示状态

口径说明

• 金额精度：全部按分（×100 取整）四舍五入后回除，避免浮点累计误差；实发 = 应发 − 扣减。
• 脱敏：readonly 强制脱敏；其余场景为 maskByDefault && !revealed；期间切换后 revealed 复位。
• 年度汇总：仅统计已加载（本地传入或已拉取）期间；grossTotal = netTotal + deductionTotal 反推，保证三项自洽。
• 期间排序：期间池按 YYYY-MM 倒序，「上一期」指向更早期间；月份选择器仅启用有数据的期间。