房产网站推广,手机网站页面如何制作软件,wordpress 图片默认居中,东莞网站建设平台因为这个项目license问题无法开源#xff0c;更多技术支持与服务请加入我的知识星球。 1、增加一个根据服务名称动态寻找对应自定义表单组件的hooks
import { ref, reactive, computed, markRaw, onMounted, defineAsyncComponent } from vue;
import { listCustomForm } fro…因为这个项目license问题无法开源更多技术支持与服务请加入我的知识星球。 1、增加一个根据服务名称动态寻找对应自定义表单组件的hooks
import { ref, reactive, computed, markRaw, onMounted, defineAsyncComponent } from vue;
import { listCustomForm } from //views/flowable/api/customForm;export const useFlowable () {const customformList refany([]);const formQueryParams reactiveany({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 :span16 :offset4 v-ifcustomForm.visibledivcomponentrefrefCustomForm:formDisabledcustomForm.disabled:iscustomForm.formComponentv-model:valuecustomForm.model:formDatacustomForm.customFormData:isNewcustomForm.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、效果图
