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