—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;
}
—–from表单控制部分
—–通过cookie传递的节点名称控制from表单字、及是否必填
var _self=this
_self.disableForm()
var cookie=document.cookie
console.log(cookie)
var result=cookie.split(“nodeFrom=”)[1].split(“;”)[0]
var nodeName=decodeURIComponent(result)
console.log(nodeName)
var start_node=[“文件名称”,”主送单位”,”reportType”,”说明”]
var second_node=[“主办科室”]
var third_node=[“项目负责人”]
var fourth_node=[“环评单位”,”行业类别”,”会议日期”,”时限要求”,”时限小结”,”审批人员联系方式”,”环评单位联系方式”,”是否退稿”,”退稿日期”]
var hytzqp_node=[]
var zzpg_node=[“科室内审人员”,”是否复核”,”复核日期”,”专家打分”,”综合打分”]
var ksns_node=[“总工”]
var zgsh_node=[“审核日期”]
var sd_node=[]
var yfgd_node=[]
var gdqr_node=[“是否归档”,”归档日期”]
var dataMap={“开始”:start_node,”总经理分发”:second_node,”科室分发”:third_node,”项目负责人会议安排”:fourth_node,
“会议通知签批”:hytzqp_node,”组织评审”:zzpg_node,
“科室内审”:ksns_node,”总工审核”:zgsh_node,”审定”:sd_node,”印发归档”:yfgd_node,”归档确认”:gdqr_node}
for(var key in dataMap){
var value = dataMap[ key ];
if(nodeName==key){
_self.enableWidgets(value)
for (var prop in value) {
console.log(value[prop])
var someRef = _self.getWidgetRef(value[prop])
console.log(someRef)
someRef.setRequired(true)
}
}
}
—————–下拉
let allCookies = document.cookie
let token=allCookies.split(“Admin-Token=”)[1].split(“;”)[0]
console.log(token)
var _self=this
axios.post(“/workflow_backend/ark/choice/unitList”,{},{
headers:{
‘Authorization’:token
}}).then(function(res){
var add=_self.getWidgetRef(“select42080”)
console.log(res.data.data)
add.loadOptions(res.data.data)
add.setValue()
console.log(res.data)
}).catch(function(error){
console.log(error)
})
———-级联–后端获取的是id
let allCookies = document.cookie
let token=allCookies.split(“Admin-Token=”)[1].split(“;”)[0]
var result=cookie.split(“nodeFrom=”)[1].split(“;”)[0]
var nodeName=decodeURIComponent(result)
var _self=this
axios.post(“/workflow_backend/ark/choice/dept”,{},{
headers:{
‘Authorization’:’Bearer ‘+token
}}).then(function(res){
console.log(res.data.data)
var add=_self.getWidgetRef(“项目”)
add.loadOptions(res.data.data)
add.setValue()
}).catch(function(error){
console.log(error)
})
—设置是否必填
let someRef = this.getWidgetRef(‘组件唯一名称’)
someRef.setRequired(ture)