ddy-process-pc-vue3

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

按钮 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()

用户取消时 Promise reject。

reactivate — 重新发起选人

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

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

ProcessAPI

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 客户端渲染；否则回退跟踪图。