业务流程工具箱接入

1、通过流程信息初始化

• 业务入口引用流程工具箱FlowBox
• 根据业务与引擎关系创建流程实例
• 根据业务需求判断是否绑定流程与业务（isCreateTask：false时，不创建流程，无需绑定）
• 加载表单方案（isCreateTask：false时，不创建流程，表单方案不执行过滤操作）

示例

<template>
  <FlowBox v-if="flowVisible" ref="FlowBox" @close="closeForm" />
</template>


<script>
import FlowBox from '@/views/workFlow/components/FlowBox';
export default {
  components: { FlowBox },
  data () {
    return {
      flowVisible: false,
    };
  },
  methods: {
    closeForm () {
      this.flowVisible = false;
    },
    onSave () {
      //流程引擎启动参数
      let info = {
        id: '',//流程示例id，非打开实例操作传空
        enCode: '流程引擎code',
        bizFlag: '业务标识，区分同流程不同业务',
        opType: -1,//创建
        isCreateTask: true,//是否创建流程，默认创建
        bizId: ""//业务id，
      };
      this.flowVisible = true;
      this.$nextTick(() => {
        this.$refs.FlowBox.init(info).then((task) => {
          console.log('流程实例数据:', task);
          //FIXME:第一次存储数据到ggsl表,存储的是验证信息
          if (!!task.id) {
            //TODO:保存流程实例id（task.id）到业务中
          }
          //加载表单方案，
          this.$refs.FlowBox.schemeInit();
        });
      });
    },
  },
};
</script>

2、通过流程经办主键初始化

• 业务入口引用流程工具箱FlowBox
• 通过ref调用initById方法进行初始化
• 回调函数：flowInited 当流程工具箱初始化完成回调的函数
• 回调函数：receiveFlowHandleResult 工作流操作按钮执行结果回调的函数

示例2

<template>
  <FlowBox 
    ref="flowBox"  
    @flowInited="flowInited" 
    @receiveFlowHandleResult="receiveFlowHandleResult"/>


</template>


<script>
import FlowBox from '@/views/workFlow/components/FlowBox';
export default {
  components: { FlowBox },
  data () {
    return {
      flowVisible: false,
    };
  },
  methods: {
  function onSave () {
   this.ref.value.initById?.('309cf0df29674b94b75e13df19e7b08d')//工作流经办id
    },
  //接收流程回调处理结果
  function receiveFlowHandleResult (key, res) {
    console.log("receiveFlowHandleResult:", key, res)
  }
  // 触发工作流事件
  function eventReceiver (key, data) {
        console.log(key，data);
  }
  // 工作流初始化结束事件
  //  data{
  //   processId 流程id
  //   id 流程id
  //   fullName 任务标题
  //   state 任务状态 0-草稿、1-待处理、2-通过、3-退回、4-撤销、5-终止
  //   enCode 任务编码
  //   flowCode 流程编码
  //   flowName 流程名称
  //   flowType 流程类型
  //   flowCategory 流程数据源
  //   thisStep 当前步骤
  //   thisStepId 当前步骤Id
  //   flowTemplateJson 流程模板
  //  }
  function flowInited (data) {
    console.log(data);
  }
  }
};
</script>

3、自定义工作流操作按钮（扩展）

• 业务入口引用流程工具箱FlowBox
• 根据业务与引擎关系创建流程实例
• 通过FlowBox的插槽实现工作流操作按钮的自定义
• 通过FlowBox的ref 执行eventReceiver函数来绑定工作流按钮事件

示例3

<template>
  <FlowBox v-if="flowVisible" ref="FlowBox" @close="closeForm">
   //  bizFlowOb:{  //工作流信息
   //           entity:{
    //          btnPermissions:[], //工作流按钮权限,
    //          formInfo:[], //工作流表单信息
    //        }
    //  } 
      <template v-slot:bizView="bizFlowOb">
        <div class="bg-white h-full overflow-hidden">
          <div class="p-2 flex justify-between">
            <div>
              <!-- 工作流按钮 -->
              <e-btn size="default" :group="true" :schema="bizFlowOb.entity.btnPermissions" @cmd="btnCmd" />
            </div>
          </div>
        </div>
      </template>
    </FlowBox>
</template>


<script>
import FlowBox from '@/views/workFlow/components/FlowBox';
export default {
  components: { FlowBox },
  data () {
    return {
      flowVisible: false,
    };
  },
  methods: {
    // 触发工作流事件
    btnCmd (key, data) {
      this.$refs.FlowBox.eventReceiver(key);
    }
  }
};
</script>