seo网站推广建站服务商,赣州人才招聘网,企业网站设计欣赏,房价必涨的十大城市因为这个项目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、效果图
