Ruoyi-flowable集成vfrom

天空之外136

已于 2022-10-19 13:45:34 修改

阅读量2.1k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-10-12 16:32:59 首次发布

本文链接：https://blog.youkuaiyun.com/my_futrue/article/details/127285542

版权

---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>

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>

--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)
})