审批组件

安装

npm i cbim-pes-component

# or
yarn add cbim-pes-component

使用示例

TestPesComponent.vue

<template>
    <!-- 审批组件 -->
    <!-- :isNeedCommentAndAction="true" 可选，回掉函数的返回值会包含审批动作和审批意见 -->
    <PesApproval
        v-model:visible="pesApprovalVisible"
        :pesParam="pesParam"
        @getApprovalResult="getApprovalResult"/>
    <a-button @click="showPesApproval">显示审批组件</a-button>

    <!-- 流程详情-流程图组件 -->
    <PesFlowChart
        v-model:visible="pesFlowChartVisible"
        :pesParam="pesParam"/>
    <a-button @click="showPesFlowChart">显示流程图组件</a-button>

    <!-- 审批历史 -->
    <PesHistory :pesParam="pesParam"></PesHistory>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { PesApproval, PesFlowChart, PesHistory } from 'cbim-pes-component'
// 样式
import 'cbim-pes-component/dist/cbim-pes-component.css'

// 入参，通用
const pesParam = {
    // 流程唯一标识，流程部署ID
    definitionId: string
    // 企业账户ID
    accountId: number
    // 应用标识
    appCode: string
    // 业务标识，审批流实例所属的业务
    businessKey: string
    // 当前用户的标识
    userId: number
    // 任务的标识
    taskId: number
}

// 审批组件
const pesApprovalVisible = ref(false)
const getApprovalResult = (result) => {
    console.log('result:', result) // 待办列表，用来发通知消息
}
const showPesApproval = () => {
    pesApprovalVisible.value = true
}

// 流程详情-流程图组件
const pesFlowChartVisible = ref(false)
const showPesFlowChart = () => {
    pesFlowChartVisible.value = true
}
</script>

依赖

• "vue": "^3.0.0",
• "ant-design-vue": "^2.2.8",
• "@cbim/design-system-antd-adapter": "latest",
• "@cbim/design-system-variable": "latest",

可能的依赖（根据后续功能再正式加入）

• "@ant-design/icons-vue": "^6.0.1",