一、前端，业务列表里主要增加流程相关的按钮

比如demo的单表流程

增加六个按钮操作，对于TestDemoList.vue 就是增加下面部分代码

<a-divider type="vertical" ></a-divider>
          <!--<a @click="relationAct(record)">关联流程</a> -->
          <act-apply-btn @success="loadData" :data-id="record.id" :serviceName="serviceName" :variables="{}"></act-apply-btn>
          <act-handle-btn @success="loadData" :data-id="record.id" :type="0" text="通过"></act-handle-btn>
          <act-handle-btn @success="loadData" :data-id="record.id" :type="1" text="驳回"></act-handle-btn>
          <act-handle-btn @success="loadData" :data-id="record.id" :type="2" text="退回"></act-handle-btn>
          <act-cancel-btn @success="loadData" :data-id="record.id"></act-cancel-btn>
          <act-historic-detail-btn :data-id="record.id"></act-historic-detail-btn>
          <a-divider type="vertical" />

其中上面都是按钮组件，同时引入上面的组件

二、后端需要插入这个表单加入对应的内容

 这里包括自己定义的业务服务名称，前端的一些地址，同时还可以关联流程，这里关联流程后就可以提交流程申请了如下图操作

对应的表如下：

当然也可以在下面的流程模型里管理自定义业务表单，这样也可以进行提交申请 

附：下面是一些调用自定义业务的流程调用过程

1、提交申请就是调用这个接口

 2、后台就是下面这个接口

 3、后端就是这个服务了

 首先检查服务名称，前端就要传入，同时检查这个表是否已经维护好，这个是系统自定义表单与服务名称的关联信息，同时这个表还可以关联流程定义，有定义的话就直接进行流程启动了

 要是没有，看看系统发布流程定义里有没有

4、前端flowableMixin.vue要维护进去需要的组件

allFormComponent:function(){
      //return this.customformList;
      return [
          {
            text:'单表示例',
            routeName:'@/views/flowable/demo/modules/TestDemoForm',
            component:() => import(`@/views/flowable/demo/modules/TestDemoForm`),
            businessTable:'test_demo'
          },
          {
            text:'主子表示例',
            routeName:'@/views/flowable/demo/modules/CesOrderMainForm',
            component:() => import(`@/views/flowable/demo/modules/CesOrderMainForm`),
            businessTable:'ces_order_main'
          }
      ]

附图（网友提供）：