因为这个项目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><componentref="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、效果图
