BizWorkOrder 工单中心

服务请求全生命周期容器：提交 → 受理分派 → 处理（对外回复 / 内部备注）→ 提交结果待确认 → 评价关单 → 重新打开；SLA 按紧急程度时限倒计时（临期橙标 / 超期红标）。与 BizTodoCenter（我收到的待办）、BizFeedbackPanel（单向意见反馈）互补，面向 IT 服务台 / 行政报修 / 客服 / 运维事件单等「服务请求」场景。

零接口可用：本地 data 注入即可跑通全流程；列表与动作级 request 按需注入。

基础用法

工单中心

4全部

1待受理

1处理中

1待确认

1已关单

请选择

零接口即可跑通全流程：点「详情」进入工单，按状态执行 受理分派 / 回复 / 提交结果 / 评价关单 / 重新打开。

本地数据全流程流转：新建 → 受理分派 → 回复 / 内部备注 → 提交结果 → 评价关单 → 重新打开。

<script setup lang="ts">
/** 基础用法：本地数据全流程可点——新建 → 受理分派 → 回复/内部备注 → 提交结果 → 评价关单 → 重新打开 */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord, BizWorkOrderUser } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const HOUR = 3600_000
const zhang: BizWorkOrderUser = { id: 'u1', name: '张工' }
const li: BizWorkOrderUser = { id: 'u2', name: '李敏' }
const assignees: BizWorkOrderUser[] = [zhang, li, { id: 'u3', name: '王运维' }]

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'WO-20261023-101',
    title: '三楼打印机卡纸无法打印',
    category: 'fault',
    urgency: 'normal',
    status: 'pending',
    description: '财务三楼东侧打印机进纸器卡纸，重启后仍报 E3 错误，影响下午的对账单打印。',
    creator: { id: 'u9', name: '陈晓' },
    createdAt: Date.now() - 2 * HOUR,
    comments: [{ id: 'c0', author: { id: 'u9', name: '陈晓' }, content: '工单已提交，等待受理', system: true, createdAt: Date.now() - 2 * HOUR }],
  },
  {
    id: 'wo-2',
    code: 'WO-20261023-088',
    title: 'VPN 连接频繁掉线',
    category: 'fault',
    urgency: 'urgent',
    status: 'processing',
    description: '近两小时 VPN 每 10 分钟掉线一次，重连后可恢复，影响远程办公。',
    creator: { id: 'u10', name: '刘洋' },
    assignee: zhang,
    createdAt: Date.now() - 6 * HOUR,
    comments: [
      { id: 'c1', author: { ...zhang }, content: '已受理，分派给 张工', system: true, createdAt: Date.now() - 5 * HOUR },
      { id: 'c2', author: { ...zhang }, content: '初步定位为网关负载过高，正在调整路由策略。', type: 'external', createdAt: Date.now() - 3 * HOUR },
      { id: 'c3', author: { ...zhang }, content: '内部备注：网关 2 号节点内存占用 92%，已联系机房。', type: 'internal', createdAt: Date.now() - 2 * HOUR },
    ],
  },
  {
    id: 'wo-3',
    code: 'WO-20261022-076',
    title: '申请调高报销系统单月限额',
    category: 'demand',
    urgency: 'normal',
    status: 'confirming',
    description: '市场部月度活动费用上升，申请将人均单月报销限额由 5000 元调至 8000 元。',
    creator: { id: 'u11', name: '赵倩' },
    assignee: li,
    createdAt: Date.now() - 26 * HOUR,
    comments: [
      { id: 'c4', author: { ...li }, content: '已受理，分派给 李敏', system: true, createdAt: Date.now() - 24 * HOUR },
      { id: 'c5', author: { ...li }, content: '已在系统后台将市场部模板限额调整为 8000 元/人/月，请确认。', type: 'external', createdAt: Date.now() - HOUR },
      { id: 'c6', author: { ...li }, content: '已提交处理结果，等待请求人确认', system: true, createdAt: Date.now() - HOUR },
    ],
  },
  {
    id: 'wo-4',
    code: 'WO-20261021-052',
    title: '入职邮箱密码重置',
    category: 'consult',
    urgency: 'low',
    status: 'closed',
    description: '入职邮箱首次登录提示密码过期，申请重置。',
    creator: { id: 'u12', name: '孙立' },
    assignee: zhang,
    createdAt: Date.now() - 70 * HOUR,
    slaHours: 48,
    rating: { rating: 5, tags: ['响应及时', '一次解决'], comment: '十分钟就搞定了' },
    comments: [
      { id: 'c7', author: { ...zhang }, content: '已受理，分派给 张工', system: true, createdAt: Date.now() - 69 * HOUR },
      { id: 'c8', author: { ...zhang }, content: '已重置并发送初始密码至手机短信，请首次登录后修改。', type: 'external', createdAt: Date.now() - 68 * HOUR },
      { id: 'c9', author: { ...zhang }, content: '工单已确认关单，满意度 5 星', system: true, createdAt: Date.now() - 67 * HOUR },
    ],
  },
]
</script>

<template>
  <div>
    <BizWorkOrder
      :data="data"
      :assignees="assignees"
      @create="(p) => ElMessage.info(`create 事件：${p.title}`)"
      @dispatch="(id, u) => ElMessage.info(`dispatch 事件：${id} → ${u.name}`)"
      @resolve="(id) => ElMessage.info(`resolve 事件：${id}`)"
      @confirm="(id, r) => ElMessage.success(`confirm 事件：${id}，${r ? `${r.rating} 星` : '未评价'}`)"
      @reopen="(id) => ElMessage.info(`reopen 事件：${id}`)"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      零接口即可跑通全流程：点「详情」进入工单，按状态执行 受理分派 / 回复 / 提交结果 / 评价关单 / 重新打开。
    </p>
  </div>
</template>

显示代码

分类 / 紧急程度 / SLA 定制

IT 服务台

2全部

1待受理

1处理中

0待确认

0已关单

请选择

categories 自定义分类与标签色；urgencies 覆盖文案；sla-hours 按紧急程度收紧时限（urgent 4 小时 → 1 小时前提交的投屏工单已进入临期橙标）。

categories 自定义分类与标签色、urgencies 覆盖紧急文案、sla-hours 收紧时限映射。

<script setup lang="ts">
/** 分类与紧急程度定制：IT 服务台四级分类 + 自定义紧急文案 + 更严的 SLA 时限映射 */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderCategory, BizWorkOrderRecord } from 'vue3-ep-biz-lib'

const HOUR = 3600_000

const categories: BizWorkOrderCategory[] = [
  { value: 'hardware', label: '硬件终端', tagType: 'danger' },
  { value: 'software', label: '软件系统', tagType: 'primary' },
  { value: 'network', label: '网络链路', tagType: 'warning' },
  { value: 'account', label: '账号权限', tagType: 'info' },
]

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'IT-20261023-201',
    title: '会议室无线投屏失败',
    category: 'hardware',
    urgency: 'urgent',
    status: 'pending',
    description: 'A301 会议室投屏盒子无法发现设备，下午高层会议受影响。',
    creator: { id: 'u1', name: '会务组' },
    createdAt: Date.now() - HOUR,
    comments: [{ id: 'c1', author: { id: 'u1', name: '会务组' }, content: '工单已提交，等待受理', system: true, createdAt: Date.now() - HOUR }],
  },
  {
    id: 'wo-2',
    code: 'IT-20261023-198',
    title: '新同事 OA 账号开通',
    category: 'account',
    urgency: 'low',
    status: 'processing',
    description: '下周入职的 3 位同事需要开通 OA 与邮箱账号。',
    creator: { id: 'u2', name: '人事部' },
    assignee: { id: 's1', name: 'IT 服务台' },
    createdAt: Date.now() - 20 * HOUR,
    comments: [{ id: 'c2', author: { id: 's1', name: 'IT 服务台' }, content: '已受理，分派给 IT 服务台', system: true, createdAt: Date.now() - 19 * HOUR }],
  },
]
</script>

<template>
  <div>
    <BizWorkOrder
      title="IT 服务台"
      :data="data"
      :categories="categories"
      :urgencies="[
        { value: 'low', label: 'P4 低' },
        { value: 'normal', label: 'P3 一般' },
        { value: 'urgent', label: 'P2 高' },
        { value: 'critical', label: 'P1 特急' },
      ]"
      :sla-hours="{ low: 72, normal: 24, urgent: 4, critical: 1 }"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      categories 自定义分类与标签色；urgencies 覆盖文案；sla-hours 按紧急程度收紧时限（urgent 4 小时 → 1 小时前提交的投屏工单已进入临期橙标）。
    </p>
  </div>
</template>

显示代码

受理分派与转派

分派与转派

2全部

1待受理

1处理中

0待确认

0已关单

请选择

待受理工单点「受理并分派」、处理中工单在详情里点「转派」，均弹出可搜索的候选人（带头像）；dispatchRequest 注入后走服务端确认，失败会拦截本地流转。

候选人带头像可搜索；dispatchRequest 注入后服务端确认成功才落地本地流转。

<script setup lang="ts">
/** 受理分派与转派：候选人带头像可搜索，dispatchRequest 注入模拟服务端 */
import { ref } from 'vue'
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord, BizWorkOrderUser } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const HOUR = 3600_000

const assignees: BizWorkOrderUser[] = [
  { id: 'u1', name: '张工（网络组）', avatar: 'https://i.pravatar.cc/64?img=12' },
  { id: 'u2', name: '李敏（系统组）', avatar: 'https://i.pravatar.cc/64?img=32' },
  { id: 'u3', name: '王运维（机房）', avatar: 'https://i.pravatar.cc/64?img=56' },
]

const data = ref<BizWorkOrderRecord[]>([
  {
    id: 'wo-1',
    code: 'WO-20261023-301',
    title: '核心交换机端口异常',
    category: 'fault',
    urgency: 'critical',
    status: 'pending',
    description: '核心交换机 G0/24 端口指示灯异常，下游两个部门网络间歇性中断。',
    creator: { id: 'u9', name: '监控告警' },
    createdAt: Date.now() - 30 * 60_000,
    comments: [{ id: 'c1', author: { id: 'u9', name: '监控告警' }, content: '工单已提交，等待受理', system: true, createdAt: Date.now() - 30 * 60_000 }],
  },
  {
    id: 'wo-2',
    code: 'WO-20261023-297',
    title: '报表系统导出超时',
    category: 'fault',
    urgency: 'normal',
    status: 'processing',
    description: '月度报表导出超过 5 分钟无响应。',
    creator: { id: 'u10', name: '刘洋' },
    assignee: assignees[1],
    createdAt: Date.now() - 5 * HOUR,
    comments: [
      { id: 'c2', author: { ...assignees[1] }, content: '已受理，分派给 李敏（系统组）', system: true, createdAt: Date.now() - 4 * HOUR },
      { id: 'c3', author: { ...assignees[1] }, content: '排查发现是数据库慢查询，非系统组职责范围。', type: 'internal', createdAt: Date.now() - HOUR },
    ],
  },
])

/** 模拟服务端分派：600ms 延迟，成功后由组件刷新本地状态 */
const dispatchRequest = (id: string, assignee: BizWorkOrderUser): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.success(`（演示）服务端已记录分派：${id} → ${assignee.name}`)
      resolve()
    }, 600)
  })
}
</script>

<template>
  <div>
    <BizWorkOrder :data="data" :assignees="assignees" :dispatch-request="dispatchRequest" title="分派与转派" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      待受理工单点「受理并分派」、处理中工单在详情里点「转派」，均弹出可搜索的候选人（带头像）；dispatchRequest 注入后走服务端确认，失败会拦截本地流转。
    </p>
  </div>
</template>

显示代码

处理记录双通道

处理记录

1全部

0待受理

1处理中

0待确认

0已关单

请选择

打开详情在输入区切换「对外回复 / 内部备注」发送——对外内容面向请求人，内部备注带警示色徽标沉淀排查线索；系统流转节点灰字穿插其间。

对外回复面向请求人，内部备注带警示徽标沉淀排查线索，系统流转节点灰字穿插；切换工单时评论框重置为「对外回复」，避免上一单的内部备注口径误带到下一单。

<script setup lang="ts">
/** 处理记录双通道：对外回复（请求人可见）与内部备注（仅处理侧可见）同流展示、分开发送 */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord } from 'vue3-ep-biz-lib'

const HOUR = 3600_000
const handler = { id: 'u1', name: '张工' }

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'WO-20261023-401',
    title: 'ERP 审批流卡在部门节点',
    category: 'demand',
    urgency: 'normal',
    status: 'processing',
    description: '采购申请单流转到部门审批节点后 6 小时未推进，节点显示「处理中」。',
    creator: { id: 'u9', name: '采购部·陈晓' },
    assignee: handler,
    createdAt: Date.now() - 8 * HOUR,
    comments: [
      { id: 'c1', author: { ...handler }, content: '已受理，分派给 张工', system: true, createdAt: Date.now() - 7 * HOUR },
      { id: 'c2', author: { ...handler }, content: '已收到，正在核查该节点的审批人配置。', type: 'external', createdAt: Date.now() - 6 * HOUR },
      { id: 'c3', author: { ...handler }, content: '内部备注：该部门 3 天前调整过组织架构，审批人映射表未同步。', type: 'internal', createdAt: Date.now() - 5 * HOUR },
      { id: 'c4', author: { ...handler }, content: '内部备注：已让 BPM 管理员重跑映射同步任务，预计 30 分钟生效。', type: 'internal', createdAt: Date.now() - 2 * HOUR },
      { id: 'c5', author: { ...handler }, content: '映射已同步，您的单据已恢复流转，请留意下一步审批。', type: 'external', createdAt: Date.now() - HOUR },
    ],
  },
]
</script>

<template>
  <div>
    <BizWorkOrder :data="data" title="处理记录" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      打开详情在输入区切换「对外回复 / 内部备注」发送——对外内容面向请求人，内部备注带警示色徽标沉淀排查线索；系统流转节点灰字穿插其间。
    </p>
  </div>
</template>

显示代码

SLA 倒计时三态

SLA 监控

请选择

时限优先级：工单级 slaHours > sla-hours 映射 > 默认表；已关单工单 SLA 显示「—」。倒计时每 30 秒自动刷新。

正常灰 / 临期橙（剩余不足时限 25%）/ 超期红加粗；已关单显示「—」，30 秒自动刷新。

<script setup lang="ts">
/** SLA 倒计时：正常（灰）/ 临期（橙，剩余不足时限 25%）/ 超期（红加粗）三态，30 秒自动刷新 */
import { computed } from 'vue'
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord } from 'vue3-ep-biz-lib'

const HOUR = 3600_000
const handler = { id: 'u1', name: '张工' }

const data = computed<BizWorkOrderRecord[]>(() => [
  {
    id: 'wo-1',
    code: 'WO-20261023-501',
    title: '常规：门户 banner 更新',
    category: 'demand',
    urgency: 'normal',
    status: 'processing',
    description: '按运营排期更换首页活动 banner。SLA 48 小时，剩余约 38 小时 → 正常灰。',
    creator: { id: 'u9', name: '运营部' },
    assignee: handler,
    createdAt: Date.now() - 10 * HOUR,
    comments: [],
  },
  {
    id: 'wo-2',
    code: 'WO-20261023-502',
    title: '临期：线上支付回调延迟',
    category: 'fault',
    urgency: 'urgent',
    status: 'processing',
    description: 'SLA 8 小时，已耗时 7 小时，剩余不足 25% → 临期橙标。',
    creator: { id: 'u10', name: '风控组' },
    assignee: handler,
    createdAt: Date.now() - 7 * HOUR,
    comments: [],
  },
  {
    id: 'wo-3',
    code: 'WO-20261022-503',
    title: '超期：门禁系统夜间失灵',
    category: 'fault',
    urgency: 'normal',
    status: 'processing',
    description: 'SLA 48 小时，已耗时 60 小时 → 超期红标加粗。',
    creator: { id: 'u11', name: '行政部' },
    assignee: handler,
    createdAt: Date.now() - 60 * HOUR,
    comments: [],
  },
])
</script>

<template>
  <div>
    <BizWorkOrder :data="data" title="SLA 监控" :show-stats="false" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      时限优先级：工单级 slaHours &gt; sla-hours 映射 &gt; 默认表；已关单工单 SLA 显示「—」。倒计时每 30 秒自动刷新。
    </p>
  </div>
</template>

显示代码

确认关单与重新打开

关单与重开

1全部

0待受理

0处理中

1待确认

0已关单

请选择

打开详情：选星级 → 点「确认关单并提交评价」进入已关单（评价回显）；若问题复现，点「重新打开」填写原因，工单回到处理中并追加灰字流转记录。

提交评价关单后可填写原因重开，工单回到处理中并清空既有评价。

<script setup lang="ts">
/** 确认关单与重新打开：提交评价关单后可填写原因重开，工单回到处理中并清空评价 */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord } from 'vue3-ep-biz-lib'

const HOUR = 3600_000
const handler = { id: 'u1', name: '张工' }

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'WO-20261023-601',
    title: '会议室预约冲突校验失效',
    category: 'fault',
    urgency: 'normal',
    status: 'confirming',
    description: '同一时段可被两个部门同时预约，冲突校验未生效。',
    creator: { id: 'u9', name: '行政部·周洁' },
    assignee: handler,
    createdAt: Date.now() - 30 * HOUR,
    comments: [
      { id: 'c1', author: { ...handler }, content: '已受理，分派给 张工', system: true, createdAt: Date.now() - 29 * HOUR },
      { id: 'c2', author: { ...handler }, content: '已修复冲突校验逻辑并补齐历史脏数据，请验证今日预约。', type: 'external', createdAt: Date.now() - 2 * HOUR },
      { id: 'c3', author: { ...handler }, content: '已提交处理结果，等待请求人确认', system: true, createdAt: Date.now() - 2 * HOUR },
    ],
  },
]
</script>

<template>
  <div>
    <BizWorkOrder :data="data" title="关单与重开" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      打开详情：选星级 → 点「确认关单并提交评价」进入已关单（评价回显）；若问题复现，点「重新打开」填写原因，工单回到处理中并追加灰字流转记录。
    </p>
  </div>
</template>

显示代码

满意度评价定制

满意度评价

1全部

0待受理

0处理中

1待确认

0已关单

请选择

rating-tags 自定义评价标签（可多选）；星级为必选校验；allow-reopen 关闭后已关单工单不再提供重开入口。

rating-tags 自定义评价标签；星级必选；allow-reopen 关闭重开入口。

<script setup lang="ts">
/** 满意度评价定制：自定义标签候选、关闭重开入口（仅评价关单） */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord } from 'vue3-ep-biz-lib'

const HOUR = 3600_000
const handler = { id: 'u2', name: '李敏' }

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'WO-20261023-701',
    title: '客服系统快捷回复模板调整',
    category: 'consult',
    urgency: 'low',
    status: 'confirming',
    description: '按新话术规范调整 12 条快捷回复模板并验证变量替换。',
    creator: { id: 'u9', name: '客服一组' },
    assignee: handler,
    createdAt: Date.now() - 20 * HOUR,
    comments: [
      { id: 'c1', author: { ...handler }, content: '已受理，分派给 李敏', system: true, createdAt: Date.now() - 19 * HOUR },
      { id: 'c2', author: { ...handler }, content: '12 条模板已全部更新，变量替换实测通过，请确认。', type: 'external', createdAt: Date.now() - HOUR },
    ],
  },
]
</script>

<template>
  <div>
    <BizWorkOrder
      :data="data"
      title="满意度评价"
      :rating-tags="['服务态度好', '解决速度快', '专业程度高', '讲解很清晰']"
      :allow-reopen="false"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      rating-tags 自定义评价标签（可多选）；星级为必选校验；allow-reopen 关闭后已关单工单不再提供重开入口。
    </p>
  </div>
</template>

显示代码

request 远程列表

远程工单列表

0全部

0待受理

0处理中

0待确认

0已关单

请选择

暂无工单

400ms 模拟延迟；搜索 / 状态筛选 / 翻页均走 request；新建标题含「失败」可演示 createRequest 报错（ElMessage.error 提示并停留表单）。

分页 / 关键字 / 状态由服务端过滤；createRequest 报错时停留表单可重试。

<script setup lang="ts">
/** request 远程模式：分页 / 关键字 / 状态由服务端过滤，createRequest 提交后自动刷新列表 */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderCreatePayload, BizWorkOrderListResult, BizWorkOrderQuery, BizWorkOrderRecord, BizWorkOrderStatus } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const HOUR = 3600_000
const STATUS_CYCLE: BizWorkOrderStatus[] = ['pending', 'processing', 'confirming', 'closed']
const HANDLERS = [{ id: 'u1', name: '张工' }, { id: 'u2', name: '李敏' }, { id: 'u3', name: '王运维' }]

/** 模拟服务端数据源 */
const store: BizWorkOrderRecord[] = Array.from({ length: 23 }, (_, i) => ({
  id: `srv-${i + 1}`,
  code: `WO-2026${String(100 + i).padStart(4, '0')}`,
  title: `服务端工单 №${i + 1}：${['磁盘告警', '权限申请', '系统咨询', '数据修复'][i % 4]}`,
  category: ['fault', 'demand', 'consult', 'complaint'][i % 4],
  urgency: (['low', 'normal', 'urgent', 'critical'] as const)[i % 4],
  status: STATUS_CYCLE[i % 4],
  description: `这是由 request 通道返回的第 ${i + 1} 条工单数据。`,
  creator: { id: `c-${i}`, name: `请求人${i + 1}号` },
  assignee: i % 4 === 0 ? undefined : HANDLERS[i % 3],
  createdAt: Date.now() - (i + 1) * 6 * HOUR,
  comments: [],
}))

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

const createRequest = (payload: BizWorkOrderCreatePayload): Promise<void> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (payload.title.includes('失败')) {
        reject(new Error('演示：标题含「失败」时模拟服务端报错'))
        return
      }
      store.unshift({
        id: `srv-new-${Date.now()}`,
        code: `WO-NEW-${store.length + 1}`,
        title: payload.title,
        category: payload.category,
        urgency: payload.urgency,
        status: 'pending',
        description: payload.description,
        creator: { id: 'me', name: '当前用户' },
        createdAt: Date.now(),
        comments: [],
      })
      resolve()
    }, 500)
  })
}
</script>

<template>
  <div>
    <BizWorkOrder
      title="远程工单列表"
      :request="request"
      :create-request="createRequest"
      :page-size="5"
      :assignees="HANDLERS"
      @create="(p) => ElMessage.info(`create 事件：${p.title}`)"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      400ms 模拟延迟；搜索 / 状态筛选 / 翻页均走 request；新建标题含「失败」可演示 createRequest 报错（ElMessage.error 提示并停留表单）。
    </p>
  </div>
</template>

显示代码

dialog 详情形态

弹窗详情形态

2全部

1待受理

1处理中

0待确认

0已关单

请选择

detail-variant 默认 drawer 抽屉，改为 dialog 后详情以居中弹窗打开（宽度经 dialog-width 定制）。

detail-variant 默认 drawer，可切换为 dialog 居中弹窗。

<script setup lang="ts">
/** dialog 详情形态：detail-variant="dialog"，弹窗承载详情（窄屏 / 内嵌工作台场景） */
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord } from 'vue3-ep-biz-lib'

const HOUR = 3600_000
const handler = { id: 'u1', name: '张工' }

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'WO-20261023-801',
    title: '档案室温湿度传感器离线',
    category: 'fault',
    urgency: 'urgent',
    status: 'processing',
    description: 'B2 档案室 2 号传感器 3 小时未上报数据。',
    creator: { id: 'u9', name: '资产部' },
    assignee: handler,
    createdAt: Date.now() - 3 * HOUR,
    comments: [
      { id: 'c1', author: { ...handler }, content: '已受理，分派给 张工', system: true, createdAt: Date.now() - 2 * HOUR },
      { id: 'c2', author: { ...handler }, content: '传感器网关掉线，正在现场重启。', type: 'external', createdAt: Date.now() - HOUR },
    ],
  },
  {
    id: 'wo-2',
    code: 'WO-20261023-802',
    title: '申请外发文件加白名单',
    category: 'consult',
    urgency: 'normal',
    status: 'pending',
    description: '与合作方交换标书文件，需将对方域名加入外发白名单。',
    creator: { id: 'u10', name: '投标组' },
    createdAt: Date.now() - 4 * HOUR,
    comments: [],
  },
]
</script>

<template>
  <div>
    <BizWorkOrder :data="data" detail-variant="dialog" title="弹窗详情形态" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      detail-variant 默认 drawer 抽屉，改为 dialog 后详情以居中弹窗打开（宽度经 dialog-width 定制）。
    </p>
  </div>
</template>

显示代码

插槽扩展

插槽扩展

1全部

0待受理

1处理中

0待确认

0已关单

同步于 刚刚

status-cell 接管状态列渲染（透传 record 与 meta）；toolbar-extra / detail-header / comment-extra 分别注入工具栏、详情头部与记录项。

status-cell / toolbar-extra / detail-header / comment-extra 四个注入点。

<script setup lang="ts">
/** 插槽扩展：状态列 / 工具栏 / 详情头部 / 记录项四个注入点 */
import { ref } from 'vue'
import { BizWorkOrder } from 'vue3-ep-biz-lib'
import type { BizWorkOrderRecord } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const HOUR = 3600_000
const handler = { id: 'u1', name: '张工' }
const lastSync = ref('刚刚')

const data: BizWorkOrderRecord[] = [
  {
    id: 'wo-1',
    code: 'WO-20261023-901',
    title: '访客机打印小票乱码',
    category: 'fault',
    urgency: 'normal',
    status: 'processing',
    description: '前厅访客机签到后小票出现乱码，疑似驱动问题。',
    creator: { id: 'u9', name: '前台' },
    assignee: handler,
    createdAt: Date.now() - 9 * HOUR,
    comments: [
      { id: 'c1', author: { ...handler }, content: '已受理，分派给 张工', system: true, createdAt: Date.now() - 8 * HOUR },
      { id: 'c2', author: { ...handler }, content: '内部备注：需带备用热敏纸测试。', type: 'internal', createdAt: Date.now() - 2 * HOUR },
    ],
  },
]

const dotColor = (status: string): string =>
  ({ pending: '#909399', processing: 'var(--el-color-primary)', confirming: 'var(--el-color-warning)', closed: 'var(--el-color-success)' })[status] ?? '#909399'
</script>

<template>
  <div>
    <BizWorkOrder :data="data" title="插槽扩展" :show-status-filter="false">
      <template #toolbar-extra>
        <span style="font-size: 12px; color: var(--el-text-color-placeholder)">同步于 {{ lastSync }}</span>
      </template>
      <template #status-cell="{ record, meta }">
        <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px">
          <span :style="{ width: 8, height: 8, borderRadius: '50%', background: dotColor(record.status), display: 'inline-block' }" />
          {{ meta.label }}（自绘）
        </span>
      </template>
      <template #detail-header="{ record }">
        <el-alert :title="`SLA 提醒：${record.code} 由 ${record.creator.name} 提出`" type="info" :closable="false" style="margin-bottom: 12px" />
      </template>
      <template #comment-extra="{ comment }">
        <span v-if="comment.type === 'internal'" style="font-size: 12px; color: var(--el-color-warning)">⚠ 内部线索，勿外传</span>
      </template>
    </BizWorkOrder>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      status-cell 接管状态列渲染（透传 record 与 meta）；toolbar-extra / detail-header / comment-extra 分别注入工具栏、详情头部与记录项。
    </p>
    <el-button size="small" style="margin-top: 8px" @click="lastSync = '手动'; ElMessage.success('已手动同步')">模拟工具栏联动</el-button>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'工单中心'	面板标题
data	BizWorkOrderRecord[]	—	本地工单数据（与 request 二选一）
request	(query: BizWorkOrderQuery) => Promise<{ list: BizWorkOrderRecord[]; total: number }>	—	远程列表实现，传入即远程模式
categories	BizWorkOrderCategory[]	故障报修 / 需求建议 / 使用咨询 / 投诉反馈	工单分类（label / tagType）
urgencies	{ value: BizWorkOrderUrgency; label: string }[]	低 / 一般 / 紧急 / 特急	紧急程度文案覆盖
sla-hours	Partial<Record<BizWorkOrderUrgency, number>>	{ critical: 2, urgent: 8, normal: 48, low: 120 }	SLA 时限映射（小时）；工单级 slaHours 优先
assignees	BizWorkOrderUser[]	—	候选处理人（受理分派 / 转派弹窗）
current-user	BizWorkOrderUser	{ id: 'me', name: '当前用户' }	当前操作人（本地新建 / 回复作者）
allow-reopen	boolean	true	允许关单后重新打开
allow-rating	boolean	true	待确认关单时采集满意度
rating-tags	string[]	响应及时 / 处理专业 / 态度友好 / 一次解决	满意度标签候选
upload-request	(file: File) => Promise<string>	—	新建工单附件上传（复用 BizUploadFile 契约，支持截图粘贴）
upload-limit	number	6	附件数量上限
create-request	(payload: BizWorkOrderCreatePayload) => Promise<void>	—	新建实现：resolve 后本地入列 / 远程刷新；reject 提示失败停留表单
dispatch-request	(id: string, assignee: BizWorkOrderUser) => Promise<void>	—	受理分派 / 转派实现
comment-request	(id: string, content: string, type: 'external' | 'internal') => Promise<void>	—	回复 / 内部备注实现
resolve-request	(id: string, content: string) => Promise<void>	—	提交处理结果（进入待确认）实现
confirm-request	(id: string, rating?: BizWorkOrderRating) => Promise<void>	—	确认关单实现（含满意度）
reopen-request	(id: string, reason: string) => Promise<void>	—	重新打开实现
page-size	number	10	单页条数（本地分页 / 远程入参）
show-status-filter	boolean	true	状态筛选下拉
show-stats	boolean	true	头部状态统计条（远程模式按当前页统计）
detail-variant	'drawer' | 'dialog'	'drawer'	详情形态
dialog-width	string | number	'min(720px, 94vw)'	dialog 详情宽度
drawer-size	string | number	'640px'	drawer 详情宽度

Events

事件名	参数	说明
create	(payload: BizWorkOrderCreatePayload)	新建提交（先于 createRequest 抛出）
dispatch	(id: string, assignee: BizWorkOrderUser)	受理分派 / 转派
comment	(id: string, content: string, type: 'external' | 'internal')	回复 / 内部备注
resolve	(id: string, content: string)	提交处理结果
confirm	(id: string, rating?: BizWorkOrderRating)	确认关单（allow-rating 关闭时无 rating）
reopen	(id: string, reason: string)	重新打开

Slots

插槽名	说明
toolbar-extra	工具栏右侧扩展区
status-cell	状态列自定义（作用域：record / meta）
detail-header	详情头部（作用域：record）
comment-extra	处理记录项尾部（作用域：comment）

Expose

属性/方法	说明
refresh	重新拉取列表（远程模式）
openCreate	打开新建工单弹窗
openDetail	(id: string) 打开指定工单详情

状态流转与 SLA 口径

• 状态机：pending 待受理 → processing 处理中 → confirming 待确认 → closed 已关单；confirming / closed 均可 重新打开（需原因）回到 processing，重开会清空既有满意度。
• SLA 时限：工单级 record.slaHours > sla-hours[urgency] > 默认表；剩余不足时限 25% 临期橙标，超时红标加粗，已关单显示「—」。倒计时每 30 秒刷新。
• 动作注入约定：所有 *-request 均「resolve 成功才落地本地流转 / 触发远程刷新，reject 则 ElMessage 提示并停留」；未注入时纯本地流转并外抛对应事件。
• 远程模式注意：状态统计按当前页数据统计；动作成功后自动 refresh 当前页。