@ixinwu-spark/bpmn

如何使用

1.安装 @ixinwu-spark/bpmn

$ npm install @ixinwu-spark/bpmn
# or
$ yarn add @ixinwu-spark/bpmn

2.入口文件中引用 @ixinwu-spark/bpmn

// main.js
import store from './store'

import IxinwuSparkSection from '@ixinwu-spark/bpmn'
const app = createApp(App)
app.use(IxinwuSparkSection, { env: import.meta.env.VITE_APP_ESWND_BPM_API, store })

组件库

• Bpmn - 流程操作

Bpmn - 流程操作

💡 完整示例

| 方法 | 备注 | | --------------------------------------------- | ------------------ | | instanceAll | 所有流程 | | instanceDetail | 单个流程详情 | | instanceCreate | 发起流程 | | instanceResubmit | 退回后重新提交 | | instancePass | 审批通过 | | instanceRollback | 审批退回 | | instanceReject | 审批拒绝 | | instanceRollbackList | 当前流程可退回节点 |

• instanceAll - 获取所有流程

  // example
  const requestData = {
    and: [
      { key: 'modelKey', op: '$eq', type: 'string', value: '流程模型的key' },
      { key: 'items.userId', op: '$eq', value: '登录人的id', type: 'string' },
    ],
    page: 1,
    pageSize: 10,
  }
  const { rows: instanceList } = await instanceAll(requestData)

• instanceDetail - 流程详情

  // example
  const detail = await instanceDetail(instanceId)

• instanceCreate - 创建流程

  const requestData = {
    modelKey: '流程模型的key',
    data: {
      // 业务数据，可用于审批端列表的查询参数
    },
    userId: '登录人的id',
  }
  await instanceCreate(requestData)

• instanceResubmit - 退回后重新提交

  const requestData = {
    id: '流程实例id（instanceId）',
    itemId: '当前item的id，可从<instanceDetail>返回的数据中获取currentItemId',
    userId: '登录人的id',
  }
  await instanceResubmit(requestData)

• instancePass - 审批通过

  const requestData = {
    id: '流程实例id（instanceId）',
    itemId: '当前item的id，可从<instanceDetail>返回的数据中获取currentItemId',
    userId: '登录人的id',
    data: {
      // 业务数据，可用于审批端列表的查询参数
    },
    auditPerson: '审批人',
    auditPersonContact: '审批人电话',
    verificationOpinion: '审批人意见',
  }
  await instancePass(requestData)

• instanceRollback - 审批退回

  const requestData = {
    id: '流程实例id（instanceId）',
    itemId: '当前item的id，可从<instanceDetail>返回的数据中获取currentItemId',
    elementId: '要退回到哪个节点的elementId',
    userId: '登录人的id',
    data: {
      // 业务数据，可用于审批端列表的查询参数
    },
    auditPerson: '审批人',
    auditPersonContact: '审批人电话',
    verificationOpinion: '审批人意见',
  }
  await instanceRollback(requestData)

• instanceReject - 审批拒绝

  const requestData = {
    id: '流程实例id（instanceId）',
    itemId: '当前item的id，可从<instanceDetail>返回的数据中获取currentItemId',
    userId: '登录人的id',
    data: {
      // 业务数据，可用于审批端列表的查询参数
    },
    auditPerson: '审批人',
    auditPersonContact: '审批人电话',
    verificationOpinion: '审批人意见',
  }
  await instanceReject(requestData)

• instanceRollbackNodes - 当前流程可退回节点

  const rollbackNodesList = await instanceRollbackNodes(instanceId)

完整示例

// xxx.vue
<script setup>
// 流程方法
import IxinwuSparkSection from '@ixinwu-spark/bpmn'
const { instanceAll, instancePass, instanceRollback, instanceReject, instanceCreate, instanceResubmit, instanceDetail } =
  IxinwuSparkSection.EsBpmnView

const bpmnView = ref() // 流程实例，可以使用 bpmnView.value.refresh 刷新流程图状态
let itemId // 操作流程需要用到的字段

// 流程列表
const getInstanceList = async () => {
  const requestData = {
    and: [
      { key: 'modelKey', op: '$eq', type: 'string', value: '流程模型的key' },
      { key: 'items.userId', op: '$eq', value: '登录人的id', type: 'string' },
    ],
    page: 1,
    pageSize: 10,
  }
  const { rows: instanceList } = await instanceAll(requestData)
}
// 流程详情
const getInstanceList = async () => {
  const detail = await instanceDetail(instanceId)
  itemId = detail.currentItemId
}
// 发起流程
const submit = async () => {
  const requestData = {
    modelKey: 'img-ime',
    data: {
      type: 'A',
      companyName: 'xxx',
      companyId: 'xxx-xxx',
    },
    userId: 'xxxxx-xxx-xxx',
  }
  await instanceCreate(requestData)
}
// 退回后重新提交
const resubmit = async () => {
  const requestData = {
    id: 'xxx-xxx',
    itemId: 'xxx-xxx',
    userId: 'xxxxx-xxx-xxx',
  }
  await instanceResubmit(requestData)
}
// 审批通过
const pass = async () => {
  const requestData = {
    id: 'xxx-xxx',
    itemId: 'xxx-xxx',
    userId: 'xxxxx-xxx-xxx',
    data: {
      type: 'A',
      companyName: 'xxx',
      companyId: 'xxx-xxx',
    },
    auditPerson: '审批人',
    auditPersonContact: '审批人电话',
    verificationOpinion: '审批人意见',
  }
  await instancePass(requestData)
}
// 审批退回
const rollback = async () => {
  const requestData = {
    id: 'xxx-xxx',
    itemId: 'xxx-xxx',
    userId: 'xxxxx-xxx-xxx',
    elementId: 'xxx-xxx',
    data: {
      type: 'A',
      companyName: 'xxx',
      companyId: 'xxx-xxx',
    },
    auditPerson: '审批人',
    auditPersonContact: '审批人电话',
    verificationOpinion: '审批人意见',
  }
  await instanceRollback(requestData)
}
// 审批拒绝
const reject = async () => {
  const requestData = {
    id: 'xxx-xxx',
    itemId: 'xxx-xxx',
    userId: 'xxxxx-xxx-xxx',
    data: {
      type: 'A',
      companyName: 'xxx',
      companyId: 'xxx-xxx',
    },
    auditPerson: '审批人',
    auditPersonContact: '审批人电话',
    verificationOpinion: '审批人意见',
  }
  await instanceReject(requestData)
}
// 当前流程可退回节点
const getInstanceRollbackNodes = async () => {
  const rollbackNodesList = await instanceRollbackNodes(instanceId)
}
</script>

<template>
  <!-- 视图组件 -->
  <EsBpmnView ref="bpmnView" :instanceId="instanceId"></EsBpmnView>

  <a-space>
    <a-button @click="submit">提交</a-button>
    <a-button @click="resubmit">重新提交</a-button>
    <a-button @click="pass">通过</a-button>
    <a-button @click="rollback">退回</a-button>
    <a-button @click="reject">拒绝</a-button>
  </a-space>
</template>

how to publish

• 1 登录：npm login
• 2 创建私有包：npm login --scope=XXX
• 3.1 发布普通包：npm publish
• 3.2 发布私有包：npm publish --access=public
• 4 删除 npm 包：npm unpublish xxx --force