ruoyi-nbcio-plus基于ruoyi vue3的flowable前端支持自定义表单组件的自动获取方法_若依 自定义表单组件 适配vue3

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://218.75.87.38:9888

1、基于vue3 vite的ruoyi-nbcio-plus的动态组件加载跟原先vue2的还是有些区别，原先vue2的代码运行会出现下面的错误

Reason: Error: Cannot find module '@/views/workflow/demo/wf.vue'

类似就是找不到这样的模块，但实际上这个页面就是上面的路径，原因不知道，可能vite解析问题吧。

2、所以useFlowable.ts修改代码如下：
 

import { listCustomForm } from "@/api/workflow/customForm";
 
export const useFlowable = () => {
  const customformList = ref<any>([]);
  const formQueryParams = reactive<any>({
    pageNum: 1,
    pageSize: 1000
  });
 
  const allFormComponent = computed(() => {
    return customformList.value;
  })
  /* 挂载自定义业务表单列表 */
   const ListCustomForForm = async () => {
    listCustomForm(formQueryParams).then(res => {
      let  cfList = res.rows;
        cfList.forEach((item, index) => {
          let cms = {
              text:item.flowName,
              routeName:item.routeName,
              component: markRaw(defineAsyncComponent( () => import(/* @vite-ignore */`../../${item.routeName}.vue`))),
              businessTable:'wf_demo'
          }
          customformList.value.push(cms);
        })
    })
  }
  const getFormComponent = (routeName) => {
    return allFormComponent.value.find((item) => item.routeName === routeName) || {}
  }
 
  onMounted(() => {
    ListCustomForForm();
  });
 
  return {
    allFormComponent,
    getFormComponent
  }
}

主要修改动态组件的目录与名称

3、这样调整后，就可以正常显示了