ruoyi-nbcio自定义业务表单流程的集成方法与步骤（二）

前面讲完了后端的集成工作，接下来讲解下前端的集成步骤。

一.复制代码

将我们之前生成的前端代码，复制到对应的目录下去

1.view(页面层)

2.api(调用后端接口的)

二、代码修改

这一部分可以仿照项目原作者给的那个Demo案例进行修改。主要就是下面几部分

1.在index.vue的列表部分增加下面代码

     <el-table-column label="流程状态" align="center" prop="actStatus" />
        <el-table-column label="待处理节点" align="center" prop="taskName" />
        <el-table-column label="处理人" align="center" prop="todoUsers" />
        <el-table-column label="操作" align="center" class-name="small-padding  fixed-width">
          <template #default="scope">
              <!-- 根据条件，判断下面的按钮是否禁用 -->
              <ActApplyBtn  @success="getList" :data-id="scope.row.applyId" :serviceName="serviceName" :variables="scope.row"  />
              <!-- <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="0" text="通过"></act-handle-btn> -->
              <!-- <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="1" text="驳回"></act-handle-btn> -->
              <!-- <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="2" text="退回"></act-handle-btn> -->
              <act-cancel-btn @success="getList" :data-id="scope.row.demoId"></act-cancel-btn>
              <ActHistoricDetailBtn :data-id="scope.row.applyId" />
          </template>
        </el-table-column>

2.此外index.vue需要导入相关的组件

import ActHistoricDetailBtn from '../../workflow/components/ActHistoricDetailBtn';
import ActApplyBtn from "../../workflow/components/ActApplyBtn";
import ActCancelBtn from '../../workflow/components/ActCancelBtn';

3.serviceName就是前一篇后端service实现类定义的那个

const serviceName = ref('LeaveApplyService')

4.在同目录下增加wf.vue文件。目的是流程中显示表单数据会用到

5.将新增的这个页面加到\src\views\workflow\hooks\useFlowable.ts文件

import { defineAsyncComponent, markRaw,computed } from 'vue';
export const useFlowable = () => {
  const allFormComponent = computed(() => {
    return [
       
        {
          text:'请假申请',
          routeName: '@/views/office/leaveApply/wf',
          component: markRaw(defineAsyncComponent( () => import('@/views/office/leaveApply/wf'))),
          businessTable:'wf_leave_apply'
        }
    ]
  })
  const getFormComponent = (routeName: string) => {
    return allFormComponent.value.find((item) => item.routeName === routeName) || {}
  }
  return {
    getFormComponent
  }
}

6.修改type.ts文件

至此前端代码修改完成。接下来就是系统上的配置

三、系统配置

1.在流程管理-》业务表单 下增加一条数据（业务主表的id可以到gen_table中去查）

2.定义流程，设计流程时就可以选到对应的自定义业务表单

至此，集成完成，通过以上步骤就可以将自定义的表单挂载到工作流上。