BizCertUpload 资质证照管理

资质证照管理：类型清单配置驱动（必传 / 数量上限 / 接受格式 / 到期口径 / 长期有效），上传即建卡（复用 BizUploadFile 契约），行内登记发证 / 到期日期，到期预警（临期黄标含剩余天数 / 过期红标 / 长期有效），审核状态与驳回原因展示，只读审查模式、完备性校验（validate / getCompleteness）与本地 CSV 清单导出（含公式注入防护）、变更记录时间线。供应商准入、承包商资质审查、企业信息年审归档场景。组件零接口：上传实现由 upload-request 注入。

基础用法

营业执照必传三证合一后的统一社会信用代码证0/1

经营许可证0/1

其他资质荣誉资质、行业认证等，最多 3 份0/3

必传 1 项 · 已传 0 项 缺 营业执照

已登记 0 份证照；点击缩略图预览图片，PDF 等其他格式经 preview 事件交业务处理

types 配置驱动整个面板：营业执照必传、许可证限格式、其他资质 max-count: 3；上传成功即建卡并回写 v-model。

<script setup lang="ts">
/** 基础用法：类型清单驱动（营业执照必传），上传即建卡，行内登记发证 / 到期日期与长期有效 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true, desc: '三证合一后的统一社会信用代码证' },
  { value: 'permit', label: '经营许可证', accept: 'image/*,.pdf' },
  { value: 'other', label: '其他资质', maxCount: 3, desc: '荣誉资质、行业认证等，最多 3 份' },
]

const items = ref<BizCertItem[]>([])

/** 模拟上传接口：resolve 文件地址 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`)
    }, 500)
  })
}
</script>

<template>
  <div>
    <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      已登记 {{ items.length }} 份证照；点击缩略图预览图片，PDF 等其他格式经 preview 事件交业务处理
    </p>
  </div>
</template>

显示代码

到期预警

营业执照必传1/1

营业执照.jpg

长期

已过期

安全生产许可证必传1/1

安全生产许可证.pdf

长期

临期（20 天后到期）

荣誉资质1/3

守合同重信用.png

长期

长期有效

必传 2 项 · 已传 2 项过期 1临期 1

warning-days 临期阈值（默认 30）：已过期红标 / 阈值内黄标（含剩余天数）/ 长期有效绿标；汇总条实时统计缺失 / 临期 / 过期。

<script setup lang="ts">
/** 到期预警：已过期（红）/ 临期（黄，阈值内）/ 长期有效三态回显，汇总条实时统计 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'safety', label: '安全生产许可证', required: true },
  { value: 'honor', label: '荣誉资质', maxCount: 3 },
]

/** 相对今天构造日期，保证演示长期有效：-30 天已过期 / +20 天临期（阈值 60）/ 长期 */
const offsetDate = (days: number): string => {
  const date = new Date()
  date.setDate(date.getDate() + days)
  const y = date.getFullYear()
  const m = `${date.getMonth() + 1}`.padStart(2, '0')
  const d = `${date.getDate()}`.padStart(2, '0')
  return `${y}-${m}-${d}`
}

const items = ref<BizCertItem[]>([
  {
    id: 'demo-1',
    typeCode: 'license',
    files: [{ name: '营业执照.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: offsetDate(-1095),
    expiryDate: offsetDate(-30),
  },
  {
    id: 'demo-2',
    typeCode: 'safety',
    files: [{ name: '安全生产许可证.pdf', url: 'https://cdn.example.com/cert/safety-permit.pdf' }],
    issueDate: offsetDate(-300),
    expiryDate: offsetDate(20),
  },
  {
    id: 'demo-3',
    typeCode: 'honor',
    files: [{ name: '守合同重信用.png', url: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=200&h=140&fit=crop' }],
    issueDate: offsetDate(-200),
    permanent: true,
  },
])

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`), 500)
  })
}
</script>

<template>
  <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" :warning-days="60" />
</template>

显示代码

审核驳回

营业执照必传1/1

营业执照-模糊.jpg

长期

生效中已通过

经营许可证必传1/1

许可证-过期版本.pdf

长期

已过期已驳回

驳回原因：上传版本已过期，请上传 2026 年新版许可证（盖章页需完整清晰）

必传 2 项 · 已传 2 项过期 1

status: 'rejected' + rejectReason 展示驳回原因；删除被驳回文件重新上传即完成重报（同一条目链路）。

<script setup lang="ts">
/** 审核驳回：rejected 状态 + 驳回原因展示，删除原文件重新上传走同一条目链路 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'permit', label: '经营许可证', required: true },
]

const items = ref<BizCertItem[]>([
  {
    id: 'demo-reject-1',
    typeCode: 'license',
    files: [{ name: '营业执照-模糊.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: '2024-05-10',
    expiryDate: '2029-05-09',
    status: 'approved',
  },
  {
    id: 'demo-reject-2',
    typeCode: 'permit',
    files: [{ name: '许可证-过期版本.pdf', url: 'https://cdn.example.com/cert/permit-old.pdf' }],
    issueDate: '2023-01-01',
    expiryDate: '2025-01-01',
    status: 'rejected',
    rejectReason: '上传版本已过期，请上传 2026 年新版许可证（盖章页需完整清晰）',
  },
])

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`), 500)
  })
}
</script>

<template>
  <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" />
</template>

显示代码

只读审查

营业执照必传1/1

营业执照.jpg

2022-06-012027-05-31

生效中已通过

安全生产许可证必传1/1

安全生产许可证.pdf

2024-03-152026-11-10

临期（15 天后到期）待审核

荣誉资质1/3

AAA 信用企业.png

2023-12-01长期有效

长期有效已通过

必传 2 项 · 已传 2 项临期 1

readonly 审查模式：隐藏上传 / 删除 / 日期编辑，保留预警、审核状态与图片预览，供应商准入审查场景。

<script setup lang="ts">
/** 只读审查模式：隐藏上传 / 删除 / 日期编辑，保留预警、审核状态与预览，供应商准入审查场景 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'safety', label: '安全生产许可证', required: true },
  { value: 'honor', label: '荣誉资质', maxCount: 3 },
]

const items = ref<BizCertItem[]>([
  {
    id: 'ro-1',
    typeCode: 'license',
    files: [{ name: '营业执照.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: '2022-06-01',
    expiryDate: '2027-05-31',
    status: 'approved',
  },
  {
    id: 'ro-2',
    typeCode: 'safety',
    files: [{ name: '安全生产许可证.pdf', url: 'https://cdn.example.com/cert/safety.pdf' }],
    issueDate: '2024-03-15',
    expiryDate: '2026-11-10',
    status: 'pending',
  },
  {
    id: 'ro-3',
    typeCode: 'honor',
    files: [{ name: 'AAA 信用企业.png', url: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=200&h=140&fit=crop' }],
    issueDate: '2023-12-01',
    permanent: true,
    status: 'approved',
  },
])
</script>

<template>
  <BizCertUpload v-model="items" :types="types" readonly :warning-days="45" />
</template>

显示代码

供应商准入场景

营业执照必传需在有效期内0/1

开户许可证必传0/1

质量体系认证ISO9001 等0/2

授权委托书法人授权经办人办理0/1

荣誉资质选填0/3

必传 2 项 · 已传 0 项 缺 营业执照 缺 开户许可证

五类证照动态注入；need-expiry: false 的类型（授权委托书）不参与到期口径校验。

<script setup lang="ts">
/** 供应商准入场景：五类证照动态注入，needExpiry 关闭「授权委托书」到期口径 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true, desc: '需在有效期内' },
  { value: 'open-account', label: '开户许可证', required: true },
  { value: 'quality', label: '质量体系认证', desc: 'ISO9001 等', maxCount: 2 },
  { value: 'authorize', label: '授权委托书', desc: '法人授权经办人办理', needExpiry: false },
  { value: 'honor', label: '荣誉资质', desc: '选填', maxCount: 3 },
]

const items = ref<BizCertItem[]>([])

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/supplier/${encodeURIComponent(file.name)}`), 500)
  })
}
</script>

<template>
  <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" />
</template>

显示代码

完备性校验

营业执照必传1/1

营业执照.jpg

长期

安全生产许可证必传0/1

荣誉资质0/3

必传 2 项 · 已传 1 项 缺 安全生产许可证

expose validate()：必传类型缺失或到期口径不全时弹出具体缺失项并返回 false；getCompleteness() 返回缺失 / 临期 / 过期明细。

<script setup lang="ts">
/** 完备性校验：expose validate()（必传缺失 / 到期口径拦截）与 getCompleteness() 统计 */
import { computed, ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType, BizCertUploadInstance } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'safety', label: '安全生产许可证', required: true },
  { value: 'honor', label: '荣誉资质', maxCount: 3 },
]

const certRef = ref<BizCertUploadInstance>()
const items = ref<BizCertItem[]>([
  {
    id: 'v-1',
    typeCode: 'license',
    files: [{ name: '营业执照.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: '2024-01-01',
    /** 故意不填到期日：演示到期口径校验 */
  },
])

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`), 500)
  })
}

const summary = computed(() => {
  const c = certRef.value?.getCompleteness()
  if (c === undefined) return ''
  return `必传 ${c.fulfilled}/${c.required} · 缺失 ${c.missing.length} · 临期 ${c.expiring.length} · 过期 ${c.expired.length}`
})

const onValidate = (): void => {
  void certRef.value?.validate().then((valid) => {
    if (valid) ElMessage.success('校验通过，可提交准入')
  })
}
</script>

<template>
  <div>
    <BizCertUpload ref="certRef" v-model="items" :types="types" :upload-request="uploadRequest" />
    <div style="margin-top: 12px; display: flex; align-items: center; gap: 12px">
      <el-button type="primary" @click="onValidate">提交准入（validate）</el-button>
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">{{ summary }}</span>
    </div>
  </div>
</template>

显示代码

清单导出

营业执照必传1/1

营业执照.jpg

长期

生效中已通过

安全生产许可证必传0/1

荣誉资质1/3

AAA 信用.png

长期

长期有效

必传 2 项 · 已传 1 项 缺 安全生产许可证

show-export 开启汇总条「导出清单」按钮：本地 CSV（类型 / 日期 / 状态 / 预警 / 备注），= + - @ 开头内容自动加 ' 前缀防公式注入。

<script setup lang="ts">
/** 清单导出：showExport 开启汇总条「导出清单」，本地 CSV（含公式注入防护），也可 expose 调用 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'safety', label: '安全生产许可证', required: true },
  { value: 'honor', label: '荣誉资质', maxCount: 3 },
]

const items = ref<BizCertItem[]>([
  {
    id: 'e-1',
    typeCode: 'license',
    files: [{ name: '营业执照.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: '2023-08-01',
    expiryDate: '2026-12-31',
    status: 'approved',
    remark: '=SUM(1+1) 开头内容演示公式注入防护',
  },
  {
    id: 'e-2',
    typeCode: 'honor',
    files: [{ name: 'AAA 信用.png', url: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=200&h=140&fit=crop' }],
    issueDate: '2024-02-01',
    permanent: true,
  },
])
</script>

<template>
  <BizCertUpload v-model="items" :types="types" show-export export-filename="供应商证照清单-2026Q4" />
</template>

显示代码

变更记录

营业执照必传1/1

营业执照-新证.jpg

长期

生效中已通过

安全生产许可证0/1

必传 1 项 · 已传 1 项

变更记录

• 营业执照换新证，旧证（2021 版）作废归档（王经理）

  2026-10-20 09:12
• 审查通过：新版营业执照（风控组-李明）

  2026-10-20 14:35
• 驳回：旧版证照模糊，要求补传盖章页（风控组-李明）

  2026-10-18 11:02
• 首次提交准入材料（营业执照 / 安全生产许可证）（王经理）

  2026-10-15 16:40

logs 注入后底部渲染变更时间线（补传 / 换证 / 审核流转留痕）。

<script setup lang="ts">
/** 变更记录：logs 注入后底部时间线展示补传 / 换证 / 审核流转留痕 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertLog, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'safety', label: '安全生产许可证' },
]

const items = ref<BizCertItem[]>([
  {
    id: 'log-1',
    typeCode: 'license',
    files: [{ name: '营业执照-新证.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: '2026-01-01',
    expiryDate: '2031-12-31',
    status: 'approved',
  },
])

const logs: BizCertLog[] = [
  { id: 'log-a', time: '2026-10-20 09:12', content: '营业执照换新证，旧证（2021 版）作废归档', operator: '王经理' },
  { id: 'log-b', time: '2026-10-20 14:35', content: '审查通过：新版营业执照', operator: '风控组-李明' },
  { id: 'log-c', time: '2026-10-18 11:02', content: '驳回：旧版证照模糊，要求补传盖章页', operator: '风控组-李明' },
  { id: 'log-d', time: '2026-10-15 16:40', content: '首次提交准入材料（营业执照 / 安全生产许可证）', operator: '王经理' },
]

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`), 500)
  })
}
</script>

<template>
  <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" :logs="logs" />
</template>

显示代码

自定义预览

营业执照必传1/1

营业执照.jpg

长期

生效中

经营许可证1/1

经营许可证.pdf

长期

长期有效

必传 1 项 · 已传 1 项

图片点击走内置大图查看器；PDF 等其他格式经 preview 事件交业务侧打开（内嵌预览 / 新窗口）。

<script setup lang="ts">
/** 自定义预览：图片走内置大图查看器；PDF 等其他格式经 preview 事件交业务侧打开 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true, accept: 'image/*,.pdf' },
  { value: 'permit', label: '经营许可证', accept: '.pdf' },
]

const items = ref<BizCertItem[]>([
  {
    id: 'p-1',
    typeCode: 'license',
    files: [{ name: '营业执照.jpg', url: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200&h=140&fit=crop' }],
    issueDate: '2025-03-01',
    expiryDate: '2028-02-28',
  },
  {
    id: 'p-2',
    typeCode: 'permit',
    files: [{ name: '经营许可证.pdf', url: 'https://cdn.example.com/cert/permit-2026.pdf' }],
    issueDate: '2026-01-10',
    permanent: true,
  },
])

const onPreview = ({ url }: { item: BizCertItem; url: string }): void => {
  ElMessage.info(`（演示）业务侧打开文件：${url}，可接入内嵌 PDF 预览或新窗口`)
}

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`), 500)
  })
}
</script>

<template>
  <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" @preview="onPreview" />
</template>

显示代码

同类型多份

营业执照必传0/1

荣誉资质最多 3 份2/3

守合同重信用.png

长期

生效中

高新技术企业.jpg

长期

长期有效

必传 1 项 · 已传 0 项 缺 营业执照

max-count > 1 的类型可多次上传（荣誉资质 3 份），达到上限自动隐藏上传入口。

<script setup lang="ts">
/** 同类型多份：maxCount 上限内多次上传（荣誉资质 3 份），超出自动隐藏上传入口 */
import { ref } from 'vue'
import { BizCertUpload } from 'vue3-ep-biz-lib'
import type { BizCertItem, BizCertType } from 'vue3-ep-biz-lib'

const types: BizCertType[] = [
  { value: 'license', label: '营业执照', required: true },
  { value: 'honor', label: '荣誉资质', maxCount: 3, desc: '最多 3 份' },
]

const items = ref<BizCertItem[]>([
  {
    id: 'm-1',
    typeCode: 'honor',
    files: [{ name: '守合同重信用.png', url: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=200&h=140&fit=crop' }],
    issueDate: '2024-06-01',
    expiryDate: '2027-05-31',
  },
  {
    id: 'm-2',
    typeCode: 'honor',
    files: [{ name: '高新技术企业.jpg', url: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200&h=140&fit=crop' }],
    issueDate: '2025-09-01',
    permanent: true,
  },
])

/** 模拟上传接口 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`https://cdn.example.com/cert/${encodeURIComponent(file.name)}`), 500)
  })
}
</script>

<template>
  <BizCertUpload v-model="items" :types="types" :upload-request="uploadRequest" />
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	BizCertItem[]	[]	证照条目（上传 / 删除 / 日期编辑即时回写）
types	BizCertType[]	[]	证照类型清单（面板结构由该配置驱动）
upload-request	(file: File) => Promise<string>	—	上传实现（BizUploadFile 契约；未注入时隐藏上传入口仅作展示）
warning-days	number	30	临期预警阈值（天）
readonly	boolean	false	只读审查模式（隐藏上传 / 删除 / 日期编辑）
disabled	boolean	false	禁用全部交互
logs	BizCertLog[]	—	变更记录（传入后底部时间线展示）
show-export	boolean	false	展示「导出清单」按钮（本地 CSV）
export-filename	string	'资质证照清单'	导出文件名（自动补 .csv）

BizCertType

属性	类型	说明
value	string	类型标识（唯一）
label	string	类型名称
required	boolean	必传类型（完备性统计与校验）
max-count	number	条目数上限，默认 1
accept	string	接受的文件类型，默认 'image/*,.pdf'
need-expiry	boolean	是否需要到期口径，默认 true（到期日与长期有效二选一必填）
allow-permanent	boolean	是否允许「长期有效」，默认 true
desc	string	类型说明

BizCertItem

属性	类型	说明
id	string	条目 id（组件创建格式 ${typeCode}-${timestamp}，业务可自带）
typeCode	string	所属类型（对应 BizCertType.value）
name	string	证照名称（缺省展示文件名 / 类型 label）
files	BizCertFile[]	证照文件（单条目一份：{ name, url, size? }）
issue-date / expiry-date	string	发证 / 到期日期（YYYY-MM-DD）
permanent	boolean	长期有效（到期日不参与校验与预警）
status	'pending' | 'approved' | 'rejected'	审核状态
reject-reason	string	驳回原因（rejected 时展示）
remark	string	备注

BizCertLog

属性	类型	说明
id	string	记录 id
time	string	发生时间（展示字符串）
content	string	变更内容
operator	string	操作人

Events

事件名	参数	说明
update:model-value	(items: BizCertItem[])	条目集合回写
change	(items: BizCertItem[])	上传 / 删除 / 日期编辑引起的条目变化
preview	(payload: { item, url })	非图片文件点击预览（图片走内置查看器）

Slots

插槽名	说明
type-extra	类型分组头补充位，scope：{ type }
item-extra	条目操作区补充位，scope：{ item }

Expose

名称	说明
validate()	完备性校验（必传齐 + 到期口径完整），失败弹出具体缺失项，resolve 是否通过
getCompleteness()	完备性统计：{ required, fulfilled, missing, expiring, expired }
exportList()	本地导出清单 CSV（与内置按钮等价）