基于jeecgboot-vue3的Flowable流程-自定义业务表单处理（二）-挂接自定义业务表单_flowable绑定自定义表单

因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

1、增加一个根据服务名称动态寻找对应自定义表单组件的hooks

import { ref, reactive, computed, markRaw, onMounted, defineAsyncComponent } from 'vue';
import { listCustomForm } from "/@/views/flowable/api/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 => {
        console.log("listCustomForm res = ",res)
        let  cfList = res.result.records;
          cfList.forEach((item, index) => {
            let cms = {
                text:item.flowName,
                routeName:item.routeName,
                component: markRaw(defineAsyncComponent( () => import(/* @vite-ignore */`../../${item.routeName}.vue`))),
                businessTable:'test_demo'
            }
            customformList.value.push(cms);
          })
      })
    }
    const getFormComponent = (routeName) => {
      return allFormComponent.value.find((item) => item.routeName === routeName) || {}
    }
  
    onMounted(() => {
      ListCustomForForm();
    });
  
  return {
    allFormComponent,
    getFormComponent
  }
}

2、对应处理流程的界面上挂上自定义业务表单

<!--初始化流程加载自定义表单信息-->
      <el-col :span="16" :offset="4" v-if="customForm.visible">
        <div>
          <component
            ref="refCustomForm"
            :formDisabled="customForm.disabled"
            :is="customForm.formComponent"
            v-model:value="customForm.model"
            :formData="customForm.customFormData"
            :isNew="customForm.isNew"
          />
        </div>

3、同时在启动初始化的表单里增加显示需要初始参数，需要的话也可以在流程里进行修改

if (businessKey == 'newkey') {
      customForm.formId = route.query && route.query.formId;
      getCustomForm(customForm.formId).then((res) => {
        console.log('newkey res=', res);
        customForm.disabled = false;
        customForm.isNew = true;
        customForm.visible = true;
        customForm.disableSubmit = false;
        customForm.formComponent = getFormComponent(res.result.routeName).component;
        formConfOpen.value = true;
      });

4、需要的话也可以在提交表单的时候进行自定义业务表单的保存

if (startUserForm.isStartUserNode && startUserForm.editFormType === 'ZDYYW') {
      createMessage.error("目前还不支持自定义表单的编辑修改功能！！！");
      refCustomForm.value.submitForm();
    }

5、效果图