ddy-process-pc-vue3

PC 端流程组件，仅支持 Vue 3。基于 Blade Workflow v2，提供流程发起、审批办理、BPMN 流程图与审批时间线等能力。

版本：1.0.1-rc.3.363

安装

npm install ddy-process-pc-vue3

import Process, {
  ProcessDialog,
  beforeCreate,
  reactivate,
  ProcessAPI,
  ProcessEnums,
} from 'ddy-process-pc-vue3'
import 'ddy-process-pc-vue3/style.css'

依赖： Vue 3、Element Plus、checked-pick-pc

初始化请求（必做）

ProcessAPI.setAjax(({ url, param, type }) => {
  if (type === 'get') {
    return request.get(url, { params: param })
  }
  return request.post(url, param)
})

• 入参：{ url, param, type: 'get'|'post' }
• 返回：Promise<{ code, data, msg }>，成功码 200
• 需代理：/bladex/blade-workflow（主）、/aws（兼容）、/auth（组织/审批人）

Process — 流程详情 / 审批

<Process
  :process-id="processId"
  :task-id="taskId"
  :user-id="userId"
  :get-vars="getVars"
  :before="beforeComplete"
  :db-tab="dbTab"
  @Complete="onComplete"
  @get-process-data="onProcessData"
>
  <template #default="{ taskNode, processData, currentProcess }">
    <BusinessForm
      :task-node="taskNode"
      :process-data="processData"
      :current-process="currentProcess"
    />
  </template>
</Process>

主要 Props

| 属性 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | processId | String | 'q' | 流程实例 ID | | taskId | String | Boolean | false | 任务实例 ID | | userId | String | '' | 当前用户 | | dbTab | String | Boolean | 'show' | 'notice' / 'history' / 'copy' 隐藏按钮 | | showBtns | Boolean | true | 显示底部按钮 | | isView | Boolean | false | 纯查看 | | getVars | Function | — | 流程变量；返回 false 中断 | | before | Function | — | 办理前钩子，返回 Promise | | excludeBtn | String | '' | 排除按钮 key | | commentMsgRequired | Boolean | true | 意见必填 | | customBtn | Function | — | 自定义按钮列表 | | tabs | Array | 基本信息/流程图/审批记录 | Tab 配置 | | personType / personEntity | — | — | 选人参数 |

按钮 key 示例：complete / refuse / sign / delegate / cc / self；后端常见 wf_pass、wf_reject、wf_rollback 等。

事件

Complete · get-process-data · getStatus · clickTab · clickCustomButton · show-modal

插槽

default（{ taskNode, processData, currentProcess }）· 具名 Tab · myBtn · btn · btnAppend

ProcessDialog — 弹窗模式

<ProcessDialog
  v-model:value="visible"
  :process-id="processId"
  :task-id="taskId"
  :user-id="userId"
  width="60%"
  @Complete="onComplete"
>
  <BusinessForm />
</ProcessDialog>

属性透传给内部 Process。事件：update:value · Complete · close · clickTab · clickCustomButton · getStatus。

beforeCreate — 发起 / 复活

// 按应用选流程（推荐）
const start = await this.$refs.beforeCreate.selectShow({
  appId: 'your.app.id',
  businessCode: '',
  businessDeptId: '',
  userInfo: { deptId: '', subjectId: '' },
  formData: {},
})
await start({ title: '申请单', processBusinessKey: 'biz-001' })

// 指定流程定义
const start = await this.$refs.beforeCreate.Show(processDefId, appId)

// 外部定义列表
await this.$refs.beforeCreate.listShow(defList)

// 流程复活
const revivalFlow = await this.$refs.beforeCreate.revivalShow({
  processInstId: 'xxx',
  businessId: 'yyy',
  formData: {},
})
await revivalFlow()

| Props | 说明 | | --- | --- | | other | 是否展示其他处理节点，默认 true | | showFlowForecast | 显示流程预测 | | flowForecastFunction | 自定义预测变量获取 | | beforeFunction | 自定义确定钩子 | | personType / personEntity | 选人参数 |

用户取消时 Promise reject。

reactivate — 重新发起选人

const data = await this.$refs.reactivate.Show(processDefId)
// { commentMsg, multiNodeParticipant?, vars? }

按流程定义打开首节点选人；无需选人时直接 resolve。

ProcessAPI

| 模块 | 用途 | | --- | --- | | pis | 创建启动、复活、预测、状态 | | tis | 任务详情、办理、转办、退回、加签、抄送、催办、撤销 | | repository | 流程定义、节点、BPMN XML | | user / org / common | 审批人、组织树等 |

ProcessAPI.tis.getTaskModelDetail({ processInstId, taskId })
ProcessAPI.pis.createAndStart(param)
ProcessAPI.repository.getProcessDefListNew(param)

ProcessEnums

ProcessEnums.apiCode.success // 200
ProcessEnums.TaskState.待处理 // 1
ProcessEnums.SourceType.电脑端 // 'pc'

注意事项

1. 仅支持 Vue 3，请配合 Element Plus。
2. 使用前必须 ProcessAPI.setAjax。
3. 主接口前缀为 /bladex/blade-workflow。
4. 安装 checked-pick-pc 以支持选人。
5. 有流程 XML 时使用 BPMN 客户端渲染；否则回退跟踪图。