|
---Ruoyi-flowable集成vfrom
引入插件
npm i vform-builds
--------main.js引入部分
//VForm库
import 'element-ui/lib/theme-chalk/index.css' ?//引入element-ui样式
import 'vform-builds/dist/VFormDesigner.css' ?//引入VForm样式
import VForm from 'vform-builds' ?//引入VForm库
Vue.use(Element) ?//全局注册element-ui
Vue.use(VForm) ?//全局注册VForm(同时注册了v-form-designe、v-form-render等组件)
/* 注意：如果你的项目中有使用axios，请用下面一行代码将全局axios复位为你的axios！！ */
window.axios = axios
//VForm库
---自动插槽 保存字样被遮掩加入属性：toolbarMaxWidth: 490,
---表单设计界面
<template>
? <div id="app">
? ? <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
? ? ? ? ? ? ? ? ? ? ?:designer-config="designerConfig">
? ? ? <!-- 自定义按钮插槽演示 -->
? ? ? <template #customToolButtons>
? ? ? ? <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
? ? ? </template>
? ? </v-form-designer>
? </div>
</template>
<script>
export default {
? name: 'App',
? data() {
? ? return {
? ? ? fieldListApi: {
? ? ? ? URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
? ? ? ? labelKey: 'fieldLabel',
? ? ? ? nameKey: 'fieldName'
? ? ? },
? ? ? testBanned: [
? ? ? ? //'sub-form',
? ? ? ? //'alert',
? ? ? ],
? ? ? designerConfig: {
? ? ? ? languageMenu: true,
? ? ? ? toolbarMaxWidth: 490,
? ? ? ? //externalLink: false,
? ? ? ? //formTemplates: false,
? ? ? ? //eventCollapse: false,
? ? ? ? //clearDesignerButton: false,
? ? ? ? //previewFormButton: false,
? ? ? ? //presetCssCode: '.abc { font-size: 16px; }',
? ? ? }
? ? }
? },
? methods: {
? ? saveFormJson() {
? ? ? let formJson = this.$refs.vfDesigner.getFormJson()
? ? ? //TODO: 将formJson提交给后端保存接口，需自行实现！！
? ? ? this.$message.success('表单已保存！')
? ? },
? }
}
</script>
<style lang="scss">
#app {
? height: 100%;
}
</style>
--------------前端渲染数据-----------------------
---HTML
<v-form-render :form-json="formJson" :form-data="historyTaskList" :option-data="optionData" ref="vFormRef">
</v-form-render>
--JS
?//查看节点、查看流程图
this.historyTaskList = data.historyTaskList;
//表单
console.log(this.$refs.vFormRef)
this.$refs.vFormRef.setFormJson(data.taskFormData)
//回显数据
this.$nextTick(() => {
? this.$refs.vFormRef.setFormData(this.processFormList)
})
----------后台返回
public R detail(String procInsId, String deployId, String taskId) {
?? ?return R.ok(processService.queryProcessDetail_vfrom(procInsId, deployId, taskId));
}
-----前端存储核心
let formJson = this.$refs.vfDesigner.getFormJson()
this.form.content = JSON.stringify(formJson);
---------后端表单返回前端核心--
JsonUtils.parseObject(formService.queryById(formId).getContent(), Map.class)
---总结vfrom常用方法：
from-data、from-json、getFieldWidgets()获取表单所有字段组件、getContainerWidgets()获取表单所有容器组件
this.$refs.vFormRef.setFormData(this.processFormList)
this.$refs.vFormRef.setFormJson(data.taskFormData)
----后端组装（测试用例）
public WfDetailVo_vfrom queryProcessDetail_vfrom(String procInsId, String deployId, String taskId) {
? ? ? ? WfDetailVo_vfrom detailVo = new WfDetailVo_vfrom();
? ? ? ??
?? ??? ?HistoricTaskInstance taskIns = historyService.createHistoricTaskInstanceQuery()
? ? ? ? ? ? ? ? .taskId(taskId)
? ? ? ? ? ? ? ? .includeIdentityLinks()
? ? ? ? ? ? ? ? .includeProcessVariables()
? ? ? ? ? ? ? ? .includeTaskLocalVariables()
? ? ? ? ? ? ? ? .singleResult();
? ? ? ? if (taskIns == null) {
? ? ? ? ? ? throw new ServiceException("没有可办理的任务！");
? ? ? ? }
?? ??? ?
? ? ? ? HistoricProcessInstance historicProcIns = historyService.createHistoricProcessInstanceQuery().processInstanceId(procInsId).includeProcessVariables().singleResult();
?? ??? ?
? ? ? ? HistoricActivityInstance startInstance = historyService.createHistoricActivityInstanceQuery()
? ? ? ? ? ? ? ? .processInstanceId(historicProcIns.getId())
? ? ? ? ? ? ? ? .activityId(historicProcIns.getStartActivityId())
? ? ? ? ? ? ? ? .singleResult();
?? ??? ??? ??? ?
? ? ? ? Process process = repositoryService.getBpmnModel(historicProcIns.getProcessDefinitionId()).getMainProcess();
?? ??? ?
? ? ? ? StartEvent startEvent = (StartEvent) process.getFlowElement(startInstance.getActivityId());
?? ??? ?
? ? ? ? WfDeployFormVo deployFormVo= deployFormMapper.selectVoOne(new LambdaQueryWrapper<WfDeployForm>()
? ? ? ? ? ? ? ? .eq(WfDeployForm::getDeployId, deployId)
? ? ? ? ? ? ? ? .eq(WfDeployForm::getFormKey, startEvent.getFormKey())
? ? ? ? ? ? ? ? .eq(WfDeployForm::getNodeKey, startEvent.getId()));
?? ??? ??? ??? ?
? ? ? ? System.out.println(deployFormVo);
? ? ? ? System.out.println(deployFormVo.getContent());
?? ??? ?
? ? ? ? //代办事项里的当前表单记录
? ? ? ? detailVo.setTaskFormData(JsonUtils.parseObject(deployFormVo.getContent(), Map.class));
? ? ? ? //已办事项里的流转记录
? ? ? ? detailVo.setHistoryTaskList(historyTaskList(procInsId));
? ? ? ? //已办事项里的历史表单记录
? ? ? ? detailVo.setProcessFormList(historicProcIns.getProcessVariables());
?? ??? ?
? ? ? ? System.out.println(detailVo);
? ? ? ? return detailVo;
? ? }
借鉴文档：https://www.vform666.com/document.html
|