BizVisitorPass 访客预约通行

访客全流程组件：邀访登记（姓名 / 手机号强校验 / 单位 / 被访人 / 事由 / 时段 / 随行人数 / 车牌）→ 生成二维码通行证（复用 BizCode，弹窗出示）→ 前台状态流转（待来访 → 已到访 → 已离场，可作废，作废后二维码失效）→ 邀访统计（待来访 / 在访中 / 今日到访 / 本周邀访）。适用于智慧园区、写字楼、工厂报备、展会嘉宾与学校来访登记等场景，与 BizWorkOrder（对内服务请求）互补，本组件面向对外来访人员管理。

基础用法

访客预约

2待来访

1在访中

1今日到访

3本周邀访

新增邀访生成记录，「通行证」打开二维码弹窗；到访登记 → 在访中 → 离场完成闭环。

<script setup lang="ts">
/** 基础用法：新增邀访（手机号校验）→ 生成通行证（二维码）→ 到访登记 → 离场 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 'v1', name: '王倩', phone: '13812345678', company: '合作方·蓝石科技', host: '当前用户', purpose: '商务洽谈', date: dayStr(), start: '10:00', end: '11:30', visitors: 2, status: 'pending', mine: true },
  { id: 'v2', name: '赵磊', phone: '15987654321', company: '设备供应商', host: '李工', purpose: '设备维修', date: dayStr(), start: '14:00', end: '16:00', plateNo: '苏A·8H3L2', status: 'arrived', mine: false },
  { id: 'v3', name: '孙悦', phone: '18611112222', host: '张主管', purpose: '面试', date: dayStr(1), status: 'pending', mine: false },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass
      :hosts="['当前用户', '李工', '张主管', '刘经理']"
      :invites="invites"
    />
  </div>
</template>

显示代码

邀访统计

访客预约

2待来访

1在访中

2今日到访

4本周邀访

四个统计指标随状态实时联动：作废记录不参与统计口径。

<script setup lang="ts">
/** 邀访统计：待来访 / 在访中 / 今日到访 / 本周邀访四指标随状态实时联动 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 's1', name: '陈晨', phone: '13700001111', host: '当前用户', date: dayStr(), start: '09:00', end: '10:00', status: 'left', mine: true },
  { id: 's2', name: '周奇', phone: '13700002222', host: '当前用户', date: dayStr(), start: '11:00', end: '12:00', status: 'arrived', mine: true },
  { id: 's3', name: '吴彤', phone: '13700003333', host: '李工', date: dayStr(), start: '15:00', end: '16:00', status: 'pending', mine: false },
  { id: 's4', name: '郑爽', phone: '13700004444', host: '张主管', date: dayStr(2), status: 'pending', mine: false },
  { id: 's5', name: '冯凯', phone: '13700005555', host: '刘经理', date: dayStr(-1), status: 'left', mine: false },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass :hosts="['当前用户', '李工', '张主管', '刘经理']" :invites="invites" />
  </div>
</template>

显示代码

作废流程

访客预约

1待来访

0在访中

0今日到访

1本周邀访

作废需二次确认；再打开通行证时二维码区域显示「邀请已作废」。

待来访邀请可作废（默认二次确认）；作废后通行证区显示失效提示，不再渲染二维码。

<script setup lang="ts">
/** 作废流程：待来访的邀请可作废（二次确认），作废后通行证二维码失效为提示文案 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 'w1', name: '何鑫', phone: '13611112222', host: '当前用户', purpose: '临时取消的拜访', date: dayStr(), start: '10:00', status: 'pending', mine: true },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass :hosts="['当前用户']" :invites="invites" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      作废需二次确认；再打开通行证时二维码区域显示「邀请已作废」。
    </p>
  </div>
</template>

显示代码

远程模式（三接口）

访客预约

0待来访

0在访中

0今日到访

0本周邀访

暂无邀访记录

request 拉取、submit-request 新增、status-request 状态变更；事件流水实时回显。

<script setup lang="ts">
/** 远程模式：request 拉取 / submitRequest 新增 / statusRequest 状态变更，事件流水回显 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite, BizVisitorPayload } from 'vue3-ep-biz-lib'

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

const server: BizVisitorInvite[] = [
  { id: 'r1', name: '远程访客 A', phone: '13511112222', host: '当前用户', date: dayStr(), start: '10:00', end: '11:00', status: 'pending', mine: true },
]

const request = () =>
  new Promise<BizVisitorInvite[]>((resolve) => setTimeout(() => resolve(server.map((r) => ({ ...r }))), 500))

const submitRequest = (payload: BizVisitorPayload) =>
  new Promise<void>((resolve) => {
    setTimeout(() => {
      server.push({ id: `r-${server.length + 1}`, ...payload, status: 'pending', createdAt: Date.now(), mine: true })
      resolve()
    }, 500)
  })

const statusRequest = (id: string, status: BizVisitorInvite['status']) =>
  new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      const hit = server.find((r) => r.id === id)
      if (!hit) reject(new Error('missing'))
      else {
        hit.status = status
        resolve()
      }
    }, 400)
  })

const log = ref<string[]>([])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass
      :hosts="['当前用户', '前台']"
      :request="request"
      :submit-request="submitRequest"
      :status-request="statusRequest"
      @invite="(p) => log.push(`invite ${p.name}`)"
      @status="(i, s) => log.push(`status ${i.name} → ${s}`)"
    />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      事件流水：{{ log.join(' ｜ ') }}
    </p>
  </div>
</template>

显示代码

被访人候选

园区访客预约（员工自助）

0待来访

0在访中

0今日到访

0本周邀访

暂无邀访记录

新增邀访时被访人默认当前用户，可改选通讯录候选；空列表也能直接发起首条邀访。

hosts 注入被访人下拉，current-host 为表单默认值；空列表可直接发起首条邀访。

<script setup lang="ts">
/** 被访人候选：hosts 注入下拉，current-user 为表单默认被访人 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

const invites = ref<BizVisitorInvite[]>([])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass
      title="园区访客预约（员工自助）"
      current-host="张三"
      :hosts="['张三', '王芳', '李强', '刘洋', '陈静', '赵敏']"
      :invites="invites"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      新增邀访时被访人默认当前用户，可改选通讯录候选；空列表也能直接发起首条邀访。
    </p>
  </div>
</template>

显示代码

表单校验

校验演示（试着提交非法值）

0待来访

0在访中

0今日到访

0本周邀访

暂无邀访记录

姓名 / 被访人 / 日期缺失、手机号非 1[3-9] 开头或位数不足、结束早于开始、随行 0 人，均在提交前被即时提示。

姓名 / 被访人 / 日期必填，手机号 1[3-9] 开头 11 位，结束晚于开始，随行至少 1 人。

<script setup lang="ts">
/** 表单校验：姓名必填、11 位手机号（1[3-9] 开头）、时段先后、随行人数下限 */
import { BizVisitorPass } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass title="校验演示（试着提交非法值）" :hosts="['当前用户']" :invites="[]" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      姓名 / 被访人 / 日期缺失、手机号非 1[3-9] 开头或位数不足、结束早于开始、随行 0 人，均在提交前被即时提示。
    </p>
  </div>
</template>

显示代码

仅我的邀请

访客预约

2待来访

0在访中

0今日到访

2本周邀访

my-only 过滤 mine 记录，员工侧只看自己发出的邀访。

<script setup lang="ts">
/** 仅我的邀请：my-only 过滤 mine 记录，他人邀访不进入列表与统计视图 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 'm1', name: '我的访客·周舟', phone: '13811110000', host: '当前用户', date: dayStr(), start: '10:00', status: 'pending', mine: true },
  { id: 'o1', name: '他人访客·吴昊', phone: '13811112222', host: '李工', date: dayStr(), status: 'pending', mine: false },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass my-only :hosts="['当前用户', '李工']" :invites="invites" />
  </div>
</template>

显示代码

前台登记台

前台登记台

2待来访

1在访中

1今日到访

3本周邀访

confirm-text 关闭二次确认，到访 / 离场一键即达，适配前台高频核验。

<script setup lang="ts">
/** 前台登记台：confirm-text 关闭二次确认弹窗，到访/离场一键即达，适合高频扫码核验 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 'f1', name: '访客一', phone: '13800000001', host: '王芳', date: dayStr(), start: '09:30', status: 'pending', mine: false },
  { id: 'f2', name: '访客二', phone: '13800000002', host: '李强', date: dayStr(), start: '10:30', status: 'arrived', mine: false },
  { id: 'f3', name: '访客三', phone: '13800000003', host: '王芳', date: dayStr(), start: '13:00', status: 'pending', mine: false },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass title="前台登记台" :confirm-text="false" :hosts="['王芳', '李强']" :invites="invites" />
  </div>
</template>

显示代码

插槽

访客预约

1待来访

0在访中

0今日到访

1本周邀访

访客车位余量 6 · 当前待来访 1

stats-extra 在统计条右侧追加自定义指标（车位余量等）。

<script setup lang="ts">
/** 插槽：stats-extra 在统计条右侧追加自定义指标（如车位余量） */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 'x1', name: '郑楠', phone: '13911112222', host: '当前用户', date: dayStr(), start: '10:00', plateNo: '苏A·9F2K8', status: 'pending', mine: true },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass :hosts="['当前用户']" :invites="invites">
      <template #stats-extra="{ stats }">
        <span style="margin-left: auto; font-size: 12px; color: var(--el-text-color-secondary)">
          访客车位余量 6 · 当前待来访 {{ stats.pendingToday }}
        </span>
      </template>
    </BizVisitorPass>
  </div>
</template>

显示代码

只读台账

物业来访台账

0待来访

0在访中

0今日到访

0本周邀访

readonly 隐藏新增与状态操作，物业 / 审计侧只读查看来访记录。

<script setup lang="ts">
/** 只读台账：readonly 隐藏新增与状态操作，物业 / 审计侧查看来访记录 */
import { ref } from 'vue'
import { BizVisitorPass } from 'vue3-ep-biz-lib'
import type { BizVisitorInvite } from 'vue3-ep-biz-lib'

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

const invites = ref<BizVisitorInvite[]>([
  { id: 't1', name: '历史访客·钱进', phone: '13722223333', host: '王芳', date: dayStr(-3), start: '10:00', end: '11:00', status: 'left', mine: false },
  { id: 't2', name: '历史访客·卫红', phone: '13722224444', host: '李强', date: dayStr(-2), status: 'void', mine: false },
])
</script>

<template>
  <div style="max-width: 900px">
    <BizVisitorPass title="物业来访台账" readonly :invites="invites" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'访客预约'	面板标题
invites	BizVisitorInvite[]	[]	邀请列表（本地模式数据源）：{ id, name, phone, company?, host, purpose?, date, start?, end?, visitors?, plateNo?, status, createdAt?, mine? }
hosts	string[]	[]	被访人候选（邀访表单下拉）
current-host	string	'当前用户'	当前用户名（表单默认被访人）
confirm-text	boolean	true	状态变更前二次确认
my-only	boolean	false	仅展示当前用户（mine）发出的邀请
readonly	boolean	false	只读台账模式：隐藏新增与状态操作
request	() => Promise<BizVisitorInvite[]>	—	远端拉取邀请列表
submit-request	(payload) => Promise<void>	—	新增邀访提交（远程模式）
status-request	(inviteId, status) => Promise<void>	—	状态变更（到访 / 离场 / 作废，远程模式）

Events

事件名	参数	说明
invite	(payload: BizVisitorPayload, invite: BizVisitorInvite)	新邀访登记完成（先于 submitRequest 成功后的本地入库外抛）
status	(invite: BizVisitorInvite, status)	状态流转（到访 / 离场 / 作废）

Slots

插槽名	说明
stats-extra	{ stats: BizVisitorStats } 统计条右侧追加内容

Expose

属性/方法	说明
refresh	() => Promise<void> 重新拉取列表（request 注入时）
openInvite	() => void 打开新增邀访弹窗
openPass	(inviteId: string) => void 打开指定邀请的通行证弹窗
getStats	() => BizVisitorStats 当前邀访统计

口径说明

• 状态机：pending → arrived → left 单向流转；pending → void 可作废；已离场 / 已作废为终态，不可再变更。
• 通行证码：VISIT-PASS|邀请id|手机尾号|日期（业务侧可替换为签名串防伪造）；仅 pending 状态渲染二维码。
• 统计口径：作废记录不计入；「本周邀访」按来访日期落在本周（周一为一周之始）；「今日到访」含已离场。
• 列表排序：按来访日期倒序，同日按创建时间倒序。