首页 > 其他分享 >基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(二)

基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(二)

时间:2023-10-25 18:02:17浏览次数:73  
标签:processFormList return 自定义 Flowable res RuoYi taskId customForm data


更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

演示地址:RuoYi-Nbcio后台管理系统

     之前讲到了流程保存的时候还要看是否是自定义业务流程应用类型,若是保存的时候不再检查是否有关联表单。  

    那接下来就需要一个自己进行自定义表的流程关联工作了。

1、见下图,在流程管理里增加一个业务表单,就是进行自定义业务表单与流程的关联

基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(二)_ruoyi-nbcio

具体相关内容可以看我的另外一个nbcio-boot项目,基本上是一样的。

1、前端增加一个mixins  flowableMixin 

import Vue from 'vue'

export const flowableMixin = {
  components: {
  },
  data(){
    return {
      customformList: [],
      formQueryParams:{
        pageNum: 1,
        pageSize: 1000,
      },
    }
  },
  created() {
  },
  computed:{
    /*所有的自定义业务流程表单,组件化注册,在此维护*/
    allFormComponent:function(){
      return [
          {
            text:'单表示例',
            routeName: '@/views/workflow/demo/wf',
            component: () => import('@/views/workflow/demo/wf'),
            businessTable:'wf_demo'
          },
          /*{
            text:'主子表示例',
            routeName:'@/views/workflow/demo/modules/CesOrderMainForm',
            component:() => import(`@/views/workflow/demo/modules/CesOrderMainForm`),
            businessTable:'ces_order_main'
          }*/
      ]
    }
  },
  methods:{
    getFormComponent(routeName){
      return _.find(this.allFormComponent,{routeName:routeName})||{};
    },

    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      // this.loadData();
    },
    millsToTime(mills) {
      if (!mills) {
        return "";
      }
      let s = mills / 1000;
      if (s < 60) {
        return s.toFixed(0) + " 秒"
      }
      let m = s / 60;
      if (m < 60) {
        return m.toFixed(0) + " 分钟"
      }
      let h = m / 60;
      if (h < 24) {
        return h.toFixed(0) + " 小时"
      }
      let d = h / 24;
      if (d < 30) {
        return d.toFixed(0) + " 天"
      }
      let month = d / 30
      if (month < 12) {
        return month.toFixed(0) + " 个月"
      }
      let year = month / 12
      return year.toFixed(0) + " 年"

    },
  }

}

2、detail里增加下面内容

<div v-if="customForm.visible"> <!-- 自定义表单 -->
            <!--<component ref="refCustomForm" :disabled="customForm.disabled" v-bind:is="customForm.formComponent" :model="customForm.model"
                        :customFormData="customForm.customFormData" :isNew = "customForm.isNew"></component> -->
            <component ref="refCustomForm" :disabled="customForm.disabled" v-bind:is="customForm.formComponent" :model="customForm.model"
                        :customFormData="customForm.customFormData" :isNew = "customForm.isNew"></component>
        </div>
        <div v-if="formOpen"> <!-- formdesigner表单 -->
/** 获取流程变量内容 */
    processVariables(taskId) {
      console.log("processVariables taskId",taskId);
      if (taskId) {
        getProcessVariables(taskId).then(res => {
          console.log("getProcessVariables res=",res);
          if(res.code == 200) {
            if(res.data.hasOwnProperty('dataId') && res.data.dataId) {
              this.customForm.formId = res.data.dataId;
              // 流程任务重获取变量表单
              this.getProcessDetails(this.taskForm.procInsId, this.taskForm.taskId, res.data.dataId);
              this.loadIndex = this.taskForm.procInsId;
              if(this.processed) {
                this.activeName = "approval";
              }
              else {
                this.activeName = "form";
              }
            }
            else {
              // 流程任务重获取变量表单
              this.getProcessDetails(this.taskForm.procInsId, this.taskForm.taskId, "");
              this.loadIndex = this.taskForm.procInsId;
              if(this.processed) {
                this.activeName = "approval";
              }
              else {
                this.activeName = "form";
                // 回填数据,这里主要是处理文件列表显示,临时解决,以后应该在formdesigner里完成
                this.processFormList.forEach((item, i) => {
                  if (item.hasOwnProperty('list')) {
                    this.fillFormData(item.list, item)
                    // 更新表单
                    this.key = +new Date().getTime()
                  }
                });
              }
            }
          }
        });
      }
    },
    getProcessDetails(procInsId, taskId, dataId) {
      const params = {procInsId: procInsId, taskId: taskId, dataId: dataId}
      detailProcess(params).then(res => {
        console.log("detailProcess res=",res);
        const data = res.data;
        this.xmlData = data.bpmnXml;
        this.processFormList = data.processFormList;
        if(this.processFormList.length == 1 &&
           this.processFormList[0].formValues.hasOwnProperty('routeName')) {
           this.customForm.disabled = true;
           this.customForm.visible = true;
           this.customForm.formComponent = this.getFormComponent(this.processFormList[0].formValues.routeName).component;
           this.customForm.model = this.processFormList[0].formValues.formData;
           this.customForm.customFormData = this.processFormList[0].formValues.formData;
           console.log("detailProcess customForm",this.customForm);
        }
        else {
          this.processFormList.forEach((item, index) => {
            this.formVal[index] = JSON.stringify(item.formValues);
            this.formViewData[index] = JSON.stringify(item);
          });
          this.taskFormOpen = data.existTaskForm;
          if (this.taskFormOpen) {
            this.taskFormData = data.taskFormData;
          }
          this.formOpen = true
        }
        this.historyProcNodeList = data.historyProcNodeList;
        this.finishedInfo = data.flowViewer;
      })
    },

标签:processFormList,return,自定义,Flowable,res,RuoYi,taskId,customForm,data
From: https://blog.51cto.com/u_15070324/8023627

相关文章

  • 新手教程系类:群晖NAS如何自定义域名?保姆级教程包教包会
    感谢各位亲的大力支持,本店推出一些列新手教程希望能帮到你。对于个性化或者访问速度有着更高要求的用户,往往最后都会想给自己整个自定义域名,毕竟能够拥有一个专属的域名来访问自己的NAS,还是很方便的,今天就来更新一下DSM7版本的保姆级教程01申请公网IP公网IP是一定要有的,......
  • SpringBoot内容协商(Content Negotiation)二 —— 自定义消息转换器(MessageConverter)
    SpringBoot内置的消息转换器SpringBoot没有处理返回yaml格式的数据,这里需要手动添加处理这种返回格式的支持。导入依赖<dependency><groupId>com.fasterxml.jackson.dataformat</groupId><artifactId>jackson-dataformat-yaml</artifactId></dependency>添加配......
  • [linux] 自定义触摸板功能
    现在ubuntu最新版本使用wayland管理输入。而不是x11了,网上有很多教程建议使用的软件都不能用,搞不好还就把原来系统内置的一些东西搞坏了。在x11(xorg)下可以使用touchegg搭配touche使用,但是在wayland下不行。这里发一个目前实测可以用的自定义触摸板功能的软件叫fusumahttps://githu......
  • 如何在iEDA中添加自定义Tcl命令
    注:ScriptEngine和UserShell头文件和实现在iEDA/src/utility/tcl/ScriptEngine.hh路径下1使用ScriptEngine自定义Tcl命令ScriptEngine是Tcl命令解析器,包含命令、命令选项、解析器等一系列工具。用户可以使用ScriptEngine中的接口轻松实现自定义Tcl命令文件结......
  • uniapp 预览pdf app端使用自定义导航时铺满全屏,需要留出导航栏
    1、安装pdf预览插件:hybrid插件(网上资料很多) 2、封装预览vue页面(重点在加粗部分,使用原生导航没有问题,但是使用自定义导航就把状态栏全部盖住了)<template><viewclass="page"><web-view:webview-styles="webviewStyles":src="src"></web-view>&l......
  • 微信小程序--5. 如下图将顶部导航栏的地方改成自定义样式
    5.如下图将顶部导航栏的地方改成自定义样式1)配置app.json{"window":{"navigationStyle":"custom"//增加这行}} 2)、封装顶部导航栏的样式创建组件文件夹及文件miniprogram\components\navigation-bar\index//components/navigation-bar/index.wxml<!......
  • 基于mutation的自定义指令以监听用户使用f12修改dom
    昨天写了功能后,就又封了一个指令,可以直接应用于ui框架的input组件上贴贴:preventChange/index.jsexportconstpreventChange={inserted(el,binding){constelTag=el.tagName.toLowerCase();//获取当前dom下类型为password的input标签constpasswordI......
  • LambdaUpdateWrapper 自定义修改
    当我们想要在原有的数据上添加新的数据的时候,我们需要一个更新操作,但是<Iservice>接口一般是根据ID进行修改当我们需要根据指定的条件设置值时,就需要自己写SQL但是这个办法会出现SQL错误并且很麻烦所以我们可以自定义一个wrapper来进行修改。 这是全部的代码 这是我们要......
  • 【ChatGPT系列】Python自定义打印各种颜色的日志
    如何在控制台和文件中同时输出日志?要将日志同时输出到文件和控制台,可以创建并配置一个额外的StreamHandler,然后将其添加到Logger中。下面是一个示例代码,演示如何将日志同时输出到文件和控制台:importlogging#创建Logger对象logger=logging.getLogger("example_logger")......
  • Java:自定义实现SpringBoot Starter
    (目录)1、自定义Starter1.1、项目结构$tree.├──pom.xml└──src├──main│├──java││└──com││└──example││└──demo││├──ReadingConfiguration.java......