npm package: @ixinwu-spark/section
Description: ## 如何使用
Author: ixinwu
Latest version: 0.0.5

# @ixinwu-spark/section

## 如何使用

1.安装 @ixinwu-spark/section

```bash
$ npm install @ixinwu-spark/section
# or
$ yarn add @ixinwu-spark/section
```

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

```js
// 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) - 流程操作

### <span id="bpmn">Bpmn - 流程操作</span>

##### 💡 [完整示例](#example)

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

- <span id="instanceAll">instanceAll - 获取所有流程</span>

  ```js
  // 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)
  ```

- <span id="instanceDetail">instanceDetail - 流程详情</span>

  ```js
  // example
  const detail = await instanceDetail(instanceId)
  ```

- <span id="instanceCreate">instanceCreate - 创建流程</span>

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

- <span id="instanceResubmit">instanceResubmit - 退回后重新提交</span>

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

- <span id="instancePass">instancePass - 审批通过</span>

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

- <span id="instanceRollback">instanceRollback - 审批退回</span>

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

- <span id="instanceReject">instanceReject - 审批拒绝</span>

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

- <span id="instanceRollbackNodes">instanceRollbackNodes - 当前流程可退回节点</span>

  ```js
  const rollbackNodesList = await instanceRollbackNodes(instanceId)
  ```

<span id="example">完整示例</span>

```vue
// 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