@ixinwu-spark/section
v0.0.5
Published
## 如何使用
Downloads
1
Readme
@ixinwu-spark/section
如何使用
1.安装 @ixinwu-spark/section
$ npm install @ixinwu-spark/section
# or
$ yarn add @ixinwu-spark/section
2.入口文件中引用 @ixinwu-spark/section
// main.js
import store from './store'
import IxinwuSparkSection from '@ixinwu-spark/section'
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/section'
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