BizContractLedger 合同台账

合同实体台账：登记（编号生成 / 校验 / 扫描件附件）· 到期预警（warnDays 阈值 + 窗口筛选 + 汇总条 + CSV 预警清单导出）· 履约节点维护（付款 / 交付计划三档状态）· 回款计划（分期应收 / 部分回款多次核销 / 逾期天数红警 / 回款进度条）· 续签带出（生效日 = 原失效日 + 1）· 归档留痕。与 BizCertUpload（资质证照文件完备性）互补，本组件管理「履约实体台账」。

基础用法

合同台账

到期预警：临期（≤30 天）1 份 · 已到期 1 份

请选择

状态由「失效日 + 归档标记」推导：≤30 天临期橙标、已过期红标、归档灰标；金额列同屏展示大写。零接口即可登记 / 续签 / 节点维护。

状态由「失效日 + 归档标记」推导；金额列同屏大写；零接口可登记 / 续签 / 节点维护 / 归档。

<script setup lang="ts">
/** 基础用法：四类状态（履行中/即将到期/已到期/已归档）本地台账，点击名称进详情 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-1',
    code: 'CT20260315-101',
    name: '2026 年度办公设备采购合同',
    type: 'purchase',
    partyA: '某某科技有限公司',
    partyB: '联想（上海）电子科技有限公司',
    amount: 368000,
    signedDate: '2026-03-18',
    startDate: '2026-04-01',
    endDate: '2026-11-10',
    owner: '采购部·刘芳',
    attachments: ['https://cdn.demo-local.com/contracts/ct-1-scan.pdf'],
    nodes: [
      { id: 'n1', name: '预付款 30%', date: '2026-04-10', amount: 110400, status: 'done' },
      { id: 'n2', name: '到货验收 60%', date: '2026-10-30', amount: 220800, status: 'pending' },
    ],
  },
  {
    id: 'ct-2',
    code: 'CT20260120-088',
    name: '云计算资源服务合同',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '阿里云计算有限公司',
    amount: 1200000,
    signedDate: '2026-01-22',
    startDate: '2026-02-01',
    endDate: '2027-01-31',
    owner: '技术部·张伟',
  },
  {
    id: 'ct-3',
    code: 'CT20250801-066',
    name: '园区绿植租摆服务合同',
    type: 'lease',
    partyA: '某某科技有限公司',
    partyB: '花之城园艺有限公司',
    amount: 86400,
    signedDate: '2025-08-05',
    startDate: '2025-09-01',
    endDate: '2026-09-30',
    owner: '行政部·王静',
  },
  {
    id: 'ct-4',
    code: 'CT20241210-052',
    name: '厂房租赁合同（一期）',
    type: 'lease',
    partyA: '某某科技有限公司',
    partyB: '恒基产业园开发有限公司',
    amount: 980000,
    signedDate: '2024-12-15',
    startDate: '2025-01-01',
    endDate: '2027-12-31',
    owner: '行政部·王静',
    archived: true,
    remark: '一期已并轨至二期总租约，本合同归档留痕',
  },
]
</script>

<template>
  <div>
    <BizContractLedger :data="data" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      状态由「失效日 + 归档标记」推导：≤30 天临期橙标、已过期红标、归档灰标；金额列同屏展示大写。零接口即可登记 / 续签 / 节点维护。
    </p>
  </div>
</template>

显示代码

登记表单校验

登记校验

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

暂无数据

点「登记合同」直接提交：名称 / 类型 / 双方主体 / 金额 / 生效日 / 失效日逐项标红；把失效日选成早于生效日可看到区间校验拦截；编号留空则自动生成。

必填项、金额 > 0、失效日晚于生效日；编号留空自动生成。

<script setup lang="ts">
/** 登记表单校验：必填项、金额>0、失效日需晚于生效日 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <BizContractLedger title="登记校验" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点「登记合同」直接提交：名称 / 类型 / 双方主体 / 金额 / 生效日 / 失效日逐项标红；把失效日选成早于生效日可看到区间校验拦截；编号留空则自动生成。
    </p>
  </div>
</template>

显示代码

到期预警

到期预警（阈值 60 天）

到期预警：临期（≤60 天）2 份 · 已到期 1 份

请选择

warn-days=60：11-05 与 12-15 到期的两份均转「即将到期」；窗口下拉可按 15/30/60/90 天（含已到期）过滤；汇总条右侧一键导出预警清单 CSV（BOM + 公式注入防护）。

warn-days 收紧阈值、expiry-windows 自定义窗口、汇总条与 CSV 导出。

<script setup lang="ts">
/** 到期预警：阈值收紧 60 天 + 自定义窗口候选 + 汇总条 + 一键导出预警清单 CSV */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-1', code: 'CT20260801-201', name: '安全运维驻场服务合同', type: 'service',
    partyA: '某某科技有限公司', partyB: '安信安全服务有限公司', amount: 456000,
    signedDate: '2026-08-03', startDate: '2026-08-15', endDate: '2026-11-05', owner: '技术部·张伟',
  },
  {
    id: 'ct-2', code: 'CT20260210-188', name: '客服外包劳务合同', type: 'labor',
    partyA: '某某科技有限公司', partyB: '云途人力资源有限公司', amount: 264000,
    signedDate: '2026-02-12', startDate: '2026-03-01', endDate: '2026-12-15', owner: '客服部·李娜',
  },
  {
    id: 'ct-3', code: 'CT20250905-155', name: '财务审计服务合同', type: 'service',
    partyA: '某某科技有限公司', partyB: '中正会计师事务所', amount: 98000,
    signedDate: '2025-09-08', startDate: '2025-10-01', endDate: '2026-10-20', owner: '财务部·周敏',
  },
  {
    id: 'ct-4', code: 'CT20260401-176', name: '差旅服务框架协议', type: 'other',
    partyA: '某某科技有限公司', partyB: '携程商旅信息服务有限公司', amount: 500000,
    signedDate: '2026-04-02', startDate: '2026-05-01', endDate: '2027-04-30', owner: '行政部·王静',
  },
]
</script>

<template>
  <div>
    <BizContractLedger
      :data="data"
      title="到期预警（阈值 60 天）"
      :warn-days="60"
      :expiry-windows="[15, 30, 60, 90]"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      warn-days=60：11-05 与 12-15 到期的两份均转「即将到期」；窗口下拉可按 15/30/60/90 天（含已到期）过滤；汇总条右侧一键导出预警清单 CSV（BOM + 公式注入防护）。
    </p>
  </div>
</template>

显示代码

履约节点维护

履约节点

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

打开「智慧园区平台建设项目合同」详情：顶部输入区添加付款 / 交付节点；节点状态 未开始 → 已完成 → 已逾期 循环流转；最近变更：（尚未变更）。

详情内添加 / 删除节点，状态 未开始 → 已完成 → 已逾期 循环流转，node-change 外抛。

<script setup lang="ts">
/** 履约节点维护：详情内添加/删除节点、状态三档流转，node-change 事件外抛 */
import { ref } from 'vue'
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractNode, BizContractRecord } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const data: BizContractRecord[] = [
  {
    id: 'ct-1',
    code: 'CT20260510-166',
    name: '智慧园区平台建设项目合同',
    type: 'sales',
    partyA: '某某科技有限公司',
    partyB: '市高新产业园区管委会',
    amount: 2860000,
    signedDate: '2026-05-12',
    startDate: '2026-06-01',
    endDate: '2027-03-31',
    owner: '交付部·陈刚',
    nodes: [
      { id: 'n1', name: '需求调研启动款 20%', date: '2026-06-15', amount: 572000, status: 'done' },
      { id: 'n2', name: '平台上线验收 50%', date: '2026-12-20', amount: 1430000, status: 'pending' },
      { id: 'n3', name: '终验尾款 30%', date: '2027-03-15', amount: 858000, status: 'overdue' },
    ],
  },
]

const lastChange = ref('（尚未变更）')

const onNodeChange = (id: string, nodes: BizContractNode[]): void => {
  lastChange.value = `合同 ${id} · 现有 ${nodes.length} 个节点`
  ElMessage.info(`node-change：${nodes.length} 个节点`)
}
</script>

<template>
  <div>
    <BizContractLedger :data="data" title="履约节点" @node-change="onNodeChange" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      打开「智慧园区平台建设项目合同」详情：顶部输入区添加付款 / 交付节点；节点状态 未开始 → 已完成 → 已逾期 循环流转；最近变更：{{ lastChange }}。
    </p>
  </div>
</template>

显示代码

回款计划

合同台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

详情内分期应收（首付款 / 二期款 / 质保金…），登记实收核销后进度条与四态汇总即时刷新。

<script setup lang="ts">
/** 回款计划基础：分期应收 + 登记实收核销，回款进度条与四态汇总即时刷新 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-pay-1',
    code: 'CT20260401-201',
    name: '门店 SaaS 年度服务合同',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '云链信息技术有限公司',
    amount: 480000,
    signedDate: '2026-04-02',
    startDate: '2026-04-10',
    endDate: '2027-04-09',
    owner: '销售部·王敏',
    payments: [
      { id: 'p1', title: '首付款 40%', dueDate: '2026-04-15', amount: 192000, receivedDate: '2026-04-14', receivedAmount: 192000 },
      { id: 'p2', title: '二期款 30%', dueDate: '2026-08-15', amount: 144000, receivedDate: '2026-08-18', receivedAmount: 144000 },
      { id: 'p3', title: '三期款 20%', dueDate: '2026-12-15', amount: 96000 },
      { id: 'p4', title: '质保金 10%', dueDate: '2027-04-05', amount: 48000 },
    ],
  },
]
</script>

<template>
  <BizContractLedger :data="data" />
</template>

显示代码

回款逾期预警

合同台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

应收日期已过且未收的分期标「已逾期 N 天」，汇总条红色角标提醒催收。

<script setup lang="ts">
/** 回款逾期预警：应收日期已过且未收的分期标「已逾期 N 天」，汇总条红色角标提醒催收 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-pay-2',
    code: 'CT20260610-166',
    name: '设备租赁合同（含逾期分期）',
    type: 'lease',
    partyA: '某某科技有限公司',
    partyB: '宏远机械设备有限公司',
    amount: 260000,
    signedDate: '2026-06-12',
    startDate: '2026-07-01',
    endDate: '2027-06-30',
    owner: '资产部·赵强',
    payments: [
      { id: 'p1', title: '首期租金', dueDate: '2026-07-05', amount: 60000, receivedDate: '2026-07-03', receivedAmount: 60000 },
      { id: 'p2', title: '第二期租金', dueDate: '2026-09-05', amount: 60000, receivedDate: '2026-10-12', receivedAmount: 60000, remark: '逾期 37 天后到账' },
      { id: 'p3', title: '第三期租金', dueDate: '2026-10-05', amount: 60000 },
      { id: 'p4', title: '第四期租金', dueDate: '2026-11-05', amount: 60000 },
    ],
  },
]
</script>

<template>
  <BizContractLedger :data="data" />
</template>

显示代码

部分回款

合同台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

一笔分期支持多次到账累计（部分回款 → 已收），本次实收不可超过剩余应收。

<script setup lang="ts">
/** 部分回款：一笔分期多次到账累计（部分回款 → 已收），实收金额不可超过剩余应收 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-pay-3',
    code: 'CT20260520-188',
    name: '系统集成项目合同',
    type: 'purchase',
    partyA: '某某科技有限公司',
    partyB: '中科智联股份有限公司',
    amount: 800000,
    signedDate: '2026-05-22',
    startDate: '2026-06-01',
    endDate: '2026-12-31',
    owner: '项目部·陈晨',
    payments: [
      { id: 'p1', title: '里程碑一 50%', dueDate: '2026-09-30', amount: 400000, receivedDate: '2026-09-28', receivedAmount: 250000, remark: '首笔到账 25 万' },
      { id: 'p2', title: '里程碑二 40%', dueDate: '2026-12-20', amount: 320000 },
      { id: 'p3', title: '验收尾款 10%', dueDate: '2026-12-28', amount: 80000 },
    ],
  },
]
</script>

<template>
  <BizContractLedger :data="data" />
</template>

显示代码

回款全流程

合同台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

从零维护分期：添加 → 部分核销 → 全额到账，进度条走到 100%。

<script setup lang="ts">
/** 回款全流程：从零维护分期（添加 → 部分核销 → 全额到账），进度条走到 100% */
import { ref } from 'vue'
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data = ref<BizContractRecord[]>([
  {
    id: 'ct-flow-1',
    code: 'CT20261018-321',
    name: '新签软件定制合同（分期从零维护）',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '华信银行股份有限公司',
    amount: 200000,
    signedDate: '2026-10-19',
    startDate: '2026-11-01',
    endDate: '2027-10-31',
    owner: '交付部·周涛',
    payments: [],
  },
])
</script>

<template>
  <BizContractLedger :data="data" />
</template>

显示代码

远程回款维护

合同台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

暂无数据

request 模式下拉取带回款计划的台账，payment-change 回抛最新分期全集供服务端落库。

<script setup lang="ts">
/** 远程模式：request 拉取带回款计划的台账，payment-change 回抛最新分期全集供服务端落库 */
import { ref } from 'vue'
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractQuery, BizContractRecord } from 'vue3-ep-biz-lib'

const remote: BizContractRecord[] = [
  {
    id: 'ct-r1',
    code: 'CT20261001-309',
    name: '云资源续费合同（远程）',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '阿里云计算有限公司',
    amount: 300000,
    signedDate: '2026-10-02',
    startDate: '2026-10-15',
    endDate: '2027-10-14',
    owner: '技术部·张伟',
    payments: [
      { id: 'rp1', title: '预付款 50%', dueDate: '2026-10-20', amount: 150000 },
      { id: 'rp2', title: '尾款 50%', dueDate: '2027-03-20', amount: 150000 },
    ],
  },
]

const request = (query: BizContractQuery) =>
  new Promise<{ list: BizContractRecord[]; total: number }>((resolve) => {
    setTimeout(() => {
      const kw = (query.keyword ?? '').toLowerCase()
      const list = remote.filter((r) => !kw || r.name.toLowerCase().includes(kw) || r.code.toLowerCase().includes(kw))
      resolve({ list: JSON.parse(JSON.stringify(list)), total: list.length })
    }, 300)
  })

const logs = ref<string[]>([])
const onPaymentChange = (id: string, payments: BizContractRecord['payments']): void => {
  const got = (payments ?? []).reduce((s, p) => s + (p.receivedAmount ?? 0), 0)
  logs.value = [`[${new Date().toLocaleTimeString()}] 合同 ${id} 分期变更：${payments?.length ?? 0} 期 · 累计实收 ¥${got}`, ...logs.value].slice(0, 5)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <BizContractLedger :request="request" @payment-change="onPaymentChange" />
    <p v-if="logs.length" style="margin: 0; font-size: 12px; color: var(--el-text-color-secondary)">
      payment-change 事件日志（最新在前）：
    </p>
    <p v-for="l in logs" :key="l" style="margin: 0; font-size: 12px; color: var(--el-text-color-secondary)">{{ l }}</p>
  </div>
</template>

显示代码

只读回款查阅

合同台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

readonly 下分期与核销留痕可查，隐藏添加分期 / 登记实收 / 删除操作（法务 / 审计视角）。

<script setup lang="ts">
/** 只读审查：分期与核销留痕可查，隐藏添加分期 / 登记实收 / 删除操作（法务 / 审计视角） */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-pay-4',
    code: 'CT20260215-120',
    name: '年度广告投放框架合同',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '星光传媒有限公司',
    amount: 1500000,
    signedDate: '2026-02-16',
    startDate: '2026-03-01',
    endDate: '2026-12-31',
    owner: '市场部·林悦',
    payments: [
      { id: 'p1', title: 'Q1 投放费', dueDate: '2026-03-10', amount: 375000, receivedDate: '2026-03-09', receivedAmount: 375000 },
      { id: 'p2', title: 'Q2 投放费', dueDate: '2026-06-10', amount: 375000, receivedDate: '2026-06-11', receivedAmount: 375000 },
      { id: 'p3', title: 'Q3 投放费', dueDate: '2026-09-10', amount: 375000, receivedDate: '2026-09-10', receivedAmount: 200000, remark: '分两笔到账，第二笔在途' },
      { id: 'p4', title: 'Q4 投放费', dueDate: '2026-12-10', amount: 375000 },
    ],
  },
]
</script>

<template>
  <BizContractLedger :data="data" readonly />
</template>

显示代码

续签带出

续签登记

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

点行内「续签」或详情内「续签登记」：双方主体 / 类型 / 金额 / 经办人自动带出，生效日预填为原失效日次日，备注标记「续签自 CT…」；提交后原合同可在详情中归档。

双方主体 / 金额自动带出，生效日预填原失效日次日，payload.renewFromCode 溯源。

<script setup lang="ts">
/** 续签带出：从原合同一键预填（生效日 = 原失效日 + 1），payload.renewFromCode 溯源 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord, BizContractRegisterPayload } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const data: BizContractRecord[] = [
  {
    id: 'ct-1',
    code: 'CT20251101-120',
    name: '企业邮箱服务年度合同',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '网易（杭州）网络有限公司',
    amount: 78000,
    signedDate: '2025-11-02',
    startDate: '2025-12-01',
    endDate: '2026-11-30',
    owner: '技术部·张伟',
  },
]

const onRenew = (fromId: string, payload: BizContractRegisterPayload): void => {
  ElMessage.success(`renew 事件：源自 ${fromId.slice(0, 8)}…（${payload.renewFromCode}），新履约期 ${payload.startDate} ~ ${payload.endDate}`)
}
</script>

<template>
  <div>
    <BizContractLedger :data="data" title="续签登记" @renew="onRenew" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点行内「续签」或详情内「续签登记」：双方主体 / 类型 / 金额 / 经办人自动带出，生效日预填为原失效日次日，备注标记「续签自 CT…」；提交后原合同可在详情中归档。
    </p>
  </div>
</template>

显示代码

组合筛选

组合筛选

到期预警：临期（≤30 天）4 份 · 已到期 2 份

请选择

共 10 条

• 1
• 2

关键字（编号 / 名称 / 主体 / 经办人）与状态、到期窗口可叠加；如「30 天内 + 即将到期」快速圈出应续签清单。

关键字 × 状态 × 到期窗口三通道叠加。

<script setup lang="ts">
/** 组合筛选：关键字 × 状态 × 到期窗口三通道（本地即时过滤） */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = Array.from({ length: 10 }, (_, i) => ({
  id: `ct-${i + 1}`,
  code: `CT2026${String(1000 + i * 7).padStart(4, '0')}`,
  name: `${['采购', '销售', '服务', '租赁'][i % 4]}合同 №${i + 1}`,
  type: ['purchase', 'sales', 'service', 'lease'][i % 4],
  partyA: '某某科技有限公司',
  partyB: `合作乙方 ${String.fromCharCode(65 + (i % 6))} 公司`,
  amount: 50000 * (i + 1),
  signedDate: '2026-01-15',
  startDate: '2026-02-01',
  endDate: ['2026-10-30', '2026-11-20', '2026-12-31', '2027-06-30', '2026-09-15'][i % 5],
  owner: `经办人${(i % 3) + 1}`,
}))
</script>

<template>
  <div>
    <BizContractLedger :data="data" title="组合筛选" :page-size="5" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      关键字（编号 / 名称 / 主体 / 经办人）与状态、到期窗口可叠加；如「30 天内 + 即将到期」快速圈出应续签清单。
    </p>
  </div>
</template>

显示代码

request 远程台账

远程台账

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

暂无数据

request 入参含 keyword / status / expiringWithin，服务端需按「失效日 + 归档」同口径推导状态；400ms 模拟延迟。

分页 / 关键字 / 状态由服务端按同口径过滤返回。

<script setup lang="ts">
/** request 远程模式：分页 / 关键字 / 状态 / 到期窗口由服务端按同口径过滤 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractListResult, BizContractQuery, BizContractRecord } from 'vue3-ep-biz-lib'

const DAY = 86400_000

/** 模拟服务端：状态按失效日 + 归档推导（与组件口径一致） */
const store: BizContractRecord[] = Array.from({ length: 15 }, (_, i) => ({
  id: `srv-${i + 1}`,
  code: `CT-SRV-${String(i + 1).padStart(3, '0')}`,
  name: `服务端合同 №${i + 1}`,
  type: ['purchase', 'sales', 'service'][i % 3],
  partyA: '某某科技有限公司',
  partyB: `乙方 ${i + 1} 号`,
  amount: 100000 + i * 10000,
  signedDate: '2026-01-10',
  startDate: '2026-02-01',
  endDate: new Date(Date.now() + (i - 4) * 15 * DAY).toISOString().slice(0, 10),
  owner: `经办人${(i % 3) + 1}`,
  archived: i === 14,
}))

const statusOf = (r: BizContractRecord): string => {
  if (r.archived) return 'archived'
  const days = Math.ceil((new Date(r.endDate).getTime() - Date.now()) / DAY)
  if (days < 0) return 'expired'
  if (days <= 30) return 'expiring'
  return 'active'
}

const request = (query: BizContractQuery): Promise<BizContractListResult> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const kw = (query.keyword ?? '').toLowerCase()
      const hit = store.filter(
        (r) =>
          (!kw || r.name.toLowerCase().includes(kw) || r.code.toLowerCase().includes(kw)) &&
          (!query.status || statusOf(r) === query.status),
      )
      const start = (query.page - 1) * query.pageSize
      resolve({ list: hit.slice(start, start + query.pageSize), total: hit.length })
    }, 400)
  })
}
</script>

<template>
  <div>
    <BizContractLedger title="远程台账" :request="request" :page-size="5" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      request 入参含 keyword / status / expiringWithin，服务端需按「失效日 + 归档」同口径推导状态；400ms 模拟延迟。
    </p>
  </div>
</template>

显示代码

CSV 预警清单导出

预警清单导出

到期预警：临期（≤30 天）1 份 · 已到期 1 份

请选择

导出内容为当前筛选口径下的「临期 + 已到期」合同：编号 / 名称 / 类型 / 对方主体 / 金额 / 失效日 / 剩余天数 / 状态；文件带 UTF-8 BOM（Excel 直开不乱码），字段含 = + - @ 开头时加 ' 前缀防公式注入。

汇总条内置按钮 + expose.exportCsv() 双入口；BOM + 公式注入防护。

<script setup lang="ts">
/** CSV 预警清单导出：汇总条内置按钮 + expose.exportCsv() 自定义入口双通道 */
import { ref } from 'vue'
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractLedgerInstance, BizContractRecord } from 'vue3-ep-biz-lib'

const ledgerRef = ref<BizContractLedgerInstance>()

const data: BizContractRecord[] = [
  {
    id: 'ct-1', code: 'CT20260901-210', name: '域名与 SSL 证书服务', type: 'service',
    partyA: '某某科技有限公司', partyB: '西部数码', amount: 12600,
    signedDate: '2026-09-02', startDate: '2026-09-15', endDate: '2026-11-01', owner: '技术部·张伟',
  },
  {
    id: 'ct-2', code: 'CT20260310-190', name: '办公宽带年度合约', type: 'service',
    partyA: '某某科技有限公司', partyB: '中国电信分公司', amount: 28800,
    signedDate: '2026-03-12', startDate: '2026-04-01', endDate: '2026-10-05', owner: '行政部·王静',
  },
  {
    id: 'ct-3', code: 'CT20260620-199', name: '背景调查服务合同', type: 'service',
    partyA: '某某科技有限公司', partyB: '人人背调', amount: 36000,
    signedDate: '2026-06-22', startDate: '2026-07-01', endDate: '2027-06-30', owner: '人事部·刘洋',
  },
]
</script>

<template>
  <div>
    <BizContractLedger ref="ledgerRef" :data="data" title="预警清单导出">
      <template #toolbar-extra>
        <el-button size="small" @click="ledgerRef?.exportCsv()">expose 导出</el-button>
      </template>
    </BizContractLedger>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      导出内容为当前筛选口径下的「临期 + 已到期」合同：编号 / 名称 / 类型 / 对方主体 / 金额 / 失效日 / 剩余天数 / 状态；文件带 UTF-8 BOM（Excel 直开不乱码），字段含 = + - @ 开头时加 ' 前缀防公式注入。
    </p>
  </div>
</template>

显示代码

只读审查（法务视角）

法务审查（只读）

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

readonly 下：工具栏无登记按钮、行内无续签、详情无节点编辑与归档动作——适配审批 / 审查场景的纯查阅形态。

隐藏登记 / 续签 / 归档与节点编辑，纯查阅形态。

<script setup lang="ts">
/** 只读审查（法务视角）：隐藏登记 / 续签 / 归档与节点编辑，仅详情查阅 */
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'

const data: BizContractRecord[] = [
  {
    id: 'ct-1',
    code: 'CT20260701-205',
    name: '数据合规审计服务合同',
    type: 'service',
    partyA: '某某科技有限公司',
    partyB: '律衡律师事务所',
    amount: 160000,
    signedDate: '2026-07-03',
    startDate: '2026-07-15',
    endDate: '2027-07-14',
    owner: '法务部·孙悦',
    attachments: ['https://cdn.demo-local.com/contracts/legal-ct-1.pdf'],
    nodes: [
      { id: 'n1', name: '进场审计', date: '2026-08-01', amount: 80000, status: 'done' },
      { id: 'n2', name: '整改复验', date: '2026-12-01', amount: 80000, status: 'pending' },
    ],
    remark: '含保密条款，扫描件仅法务可见',
  },
]
</script>

<template>
  <div>
    <BizContractLedger :data="data" title="法务审查（只读）" readonly />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      readonly 下：工具栏无登记按钮、行内无续签、详情无节点编辑与归档动作——适配审批 / 审查场景的纯查阅形态。
    </p>
  </div>
</template>

显示代码

插槽扩展

插槽扩展

到期预警：临期（≤30 天）0 份 · 已到期 0 份

请选择

法务共享视图

↗

name-cell 接管名称列（可跳转外部档案系统）；最近打开：（尚未打开）。

name-cell / toolbar-extra / detail-header 注入点。

<script setup lang="ts">
/** 插槽扩展：name-cell 名称列接管、toolbar-extra 工具栏、detail-header 详情头 */
import { ref } from 'vue'
import { BizContractLedger } from 'vue3-ep-biz-lib'
import type { BizContractRecord } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const lastOpen = ref('（尚未打开）')

const data: BizContractRecord[] = [
  {
    id: 'ct-1',
    code: 'CT20261001-215',
    name: '年终物料框架采购合同',
    type: 'purchase',
    partyA: '某某科技有限公司',
    partyB: '裕丰印刷有限公司',
    amount: 96000,
    signedDate: '2026-10-08',
    startDate: '2026-10-15',
    endDate: '2027-10-14',
    owner: '采购部·刘芳',
  },
]
</script>

<template>
  <div>
    <BizContractLedger :data="data" title="插槽扩展">
      <template #toolbar-extra>
        <span style="font-size: 12px; color: var(--el-text-color-placeholder)">法务共享视图</span>
      </template>
      <template #name-cell="{ record }">
        <el-link type="primary" @click="lastOpen = record.code; ElMessage.info(`打开 ${record.code}`)">{{ record.name }} ↗</el-link>
      </template>
      <template #detail-header="{ record }">
        <el-alert :title="`归档编号建议：FA-${record.code.slice(2)}（插槽注入的法务提示）`" type="info" :closable="false" style="margin-bottom: 12px" />
      </template>
    </BizContractLedger>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      name-cell 接管名称列（可跳转外部档案系统）；最近打开：{{ lastOpen }}。
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'合同台账'	面板标题
data	BizContractRecord[]	—	本地台账数据（与 request 二选一）
request	(query: BizContractQuery) => Promise<BizContractListResult>	—	远程列表实现（服务端按同口径推导状态）
contract-types	BizContractType[]	采购 / 销售 / 服务 / 租赁 / 劳务 / 其他	合同类型口径
warn-days	number	30	到期预警阈值（天）：失效日距今不足该天数记「即将到期」
expiry-windows	number[]	[30, 60, 90]	到期窗口筛选候选（天，含已到期）
code-prefix	string	'CT'	编号前缀（后接日期 + 随机序号，登记时可改）
register-request	(payload: BizContractRegisterPayload) => Promise<void>	—	登记实现：resolve 后本地入列 / 远程刷新
renew-request	(fromId: string, payload: BizContractRegisterPayload) => Promise<void>	—	续签登记实现（payload.renewFromCode 携带原编号）
upload-request	(file: File) => Promise<string>	—	扫描件上传（复用 BizUploadFile 契约；未注入时隐藏上传入口）
upload-limit	number	6	附件数量上限
page-size	number	10	单页条数
show-summary	boolean	true	到期预警汇总条
readonly	boolean	false	只读审查（隐藏登记 / 续签 / 归档与节点编辑）

Events

事件名	参数	说明
register	(payload: BizContractRegisterPayload)	登记入账（先于 registerRequest 抛出）
renew	(fromId: string, payload: BizContractRegisterPayload)	续签登记
node-change	(id: string, nodes: BizContractNode[])	履约节点增删 / 流转
payment-change	(id: string, payments: BizContractPayment[])	回款分期添加 / 删除 / 核销登记（回抛最新全集）
archive	(id: string, archived: boolean)	归档 / 恢复履行

Slots

插槽名	说明
toolbar-extra	工具栏右侧扩展区
name-cell	合同名称列自定义（作用域：record）
detail-header	详情头部（作用域：record）

Expose

属性/方法	说明
refresh	重新拉取列表（远程模式）
openRegister	(renewFrom?: BizContractRecord) 打开登记弹窗（传入来源即续签模式）
exportCsv	导出当前筛选口径的预警清单 CSV

口径说明

• 状态推导：archived 归档 > 失效日 < 今日 → 已到期 > 剩余 ≤ warnDays → 即将到期 > 履行中；剩余天数为「失效日 − 今天」向上取整。
• 回款分期状态：累计实收 ≥ 应收 → 已收 > 累计实收 > 0 → 部分回款 > 应收日期 < 今日 → 已逾期（附逾期天数） > 待收；核销按「本次实收 ≤ 剩余应收」拦截，多次登记金额累加。
• 回款率：累计实收 ÷ 合同额（进度条封顶 100%）；分期应收合计允许与合同额不同（如含质保金尾差），汇总条单独展示应收合计。
• 预警清单 CSV：仅导出「临期 + 已到期」；表头 编号 / 名称 / 类型 / 对方主体 / 金额 / 失效日 / 剩余天数 / 状态；\uFEFF BOM 保证 Excel 中文不乱码，= + - @ \t 开头字段加 ' 前缀防公式注入。
• 续签：payload 生效日预填为原失效日次日，renewFromCode 记录溯源；提交后原合同默认保持原状，可在详情手动归档。
• 远程模式注意：汇总与 CSV 基于当前页数据；request 入参 expiringWithin 为窗口天数（含已到期），服务端按同口径返回。