Ruoyi-flowable集成vfrom

---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,
---表单设计界面

--------------前端渲染数据-----------------------
---HTML

--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()
                .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)

借鉴文档：https://www.vform666.com/document.html