基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(六)

这篇具有很好参考价值的文章主要介绍了基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(六)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

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

      这节主要讲条件节点与并发节点的有效性检查,主要是增加这两个节点的子节点检查,因为这两个节点需要增加审批人的子节点才能有效,否则检查通不过。

   1、首先增加一个子节点的有效性检查函数

/**
   * 校验子节点必填项完整性,目前主要是针对条件节点与并发节点
   * @param {Node} node - 节点数据
   */
  static checkChildNode ( node, parent ) {
    let valid = false
    if ( this.isConditionNode( node ) ) {
         if (!isEmpty(node.childNode)) {
           valid = true
         }
    }
    if ( this.isConcurrentNode( node ) ) {
        if (!isEmpty(node.childNode)) {
          valid = true
        }
    }
    return valid
  }

2、检查所有节点的时候也增加并发节点检查过程

/**
   * 判断所有节点是否信息完整
   * @param {Node} processData - 整个流程图数据
   * @returns {Boolean}
   */
  static checkAllNode ( processData ) {
    let valid = true
    const loop = ( node, callback, parent ) => {
     
      !this.checkNode( node, parent ) && callback()
      if ( node.childNode ) loop( node.childNode, callback, parent )
      if ( !isEmptyArray( node.conditionNodes ) ) {
        node.conditionNodes.forEach( n => loop( n, callback, node ) )
      }
      if ( !isEmptyArray( node.concurrentNodes ) ) {
        console.log("node.concurrentNodes ", node.concurrentNodes)
        node.concurrentNodes.forEach( n => loop( n, callback, node ) )
      }
    }
    loop( processData, () => valid = false )
    return valid
  }
}

3、单个检查节点修改如下,特别是条件节点与并发节点的修改

/**
   * 校验单个节点必填项完整性
   * @param {Node} node - 节点数据
   */
  static checkNode ( node, parent ) {
    // 抄送人应该可以默认自选
    let valid = true
    const props = node.properties
    this.isStartNode( node )
      && !props.initiator
      && ( valid = false )

    this.isConditionNode( node )
      && !props.isDefault
      && !props.initiator
      && isEmptyArray( props.conditions )
      && !this.checkChildNode ( node, parent )
      && ( valid = false )

    const customSettings = ['myself', 'optional', 'director']
    this.isApproverNode( node )
      && !customSettings.includes( props.assigneeType )
      && isEmptyArray( props.approvers )
      && ( valid = false )


    return valid
  }

4、构造节点增加条件与并发的出错处理

/* 构造节点
    modify by nbacheng 2023-11-02
*/
function NodeFactory(ctx, data, h) {
  if (!data) return
  console.log("NodeFactory data",data)
  const showErrorTip = ctx.verifyMode && NodeUtils.checkNode(data) === false
  const showChildErrorTip = ctx.verifyMode && (NodeUtils.isConditionNode(data) || NodeUtils.isConcurrentNode(data)) && NodeUtils.checkChildNode(data) === false
  let res = [], branchNode = "", selfNode = null ;
    if (showErrorTip) { //通用节点的错误检查做特殊处理
    selfNode = (
      <div class="node-wrap">
        <div class={`node-wrap-box ${data.type} ${ showErrorTip ? 'error' : ''}` }>
          <el-tooltip content="未设置条件" placement="top" effect="dark">
            <div class="error-tip" onClick={this.eventLancher.bind(ctx, "edit", data)}>!!!</div>
          </el-tooltip>
          {nodes[data.type].call(ctx, ctx, data, h)}
          {addNodeButton.call(ctx, ctx, data, h)}
        </div>
      </div>
    );
    } else if (showChildErrorTip) { //对并发与条件节点的错误检查做特殊处理
    selfNode = (
        <div class="node-wrap">
          <div class={`node-wrap-box ${data.type} ${ showChildErrorTip  ? 'error' : ''}` }>
            <el-tooltip content="未设置审批人员节点" placement="top" effect="dark">
              <div class="error-tip" onClick={this.eventLancher.bind(ctx, "edit", data)}>!!!</div>
            </el-tooltip>
            {nodes[data.type].call(ctx, ctx, data, h)}
            {addNodeButton.call(ctx, ctx, data, h)}
          </div>
        </div>
      );
    } else { //正常节点的显示
      selfNode = (
          <div class="node-wrap">
            <div class={`node-wrap-box ${data.type} ${''}` }>
              {nodes[data.type].call(ctx, ctx, data, h)}
              {addNodeButton.call(ctx, ctx, data, h)}
            </div>
          </div>
        );
    }

5、效果图如下:

基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(六),flowable,ruoyi-nbcio,若依,ruoyi-nbcio,flowable,若依,仿钉钉文章来源地址https://www.toymoban.com/news/detail-742980.html

到了这里,关于基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(六)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月24日
    浏览(51)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(一)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月20日
    浏览(47)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(二)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月25日
    浏览(53)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(三)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月24日
    浏览(66)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(四)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月23日
    浏览(55)
  • 基于若依的ruoyi-nbcio的flowable流程管理系统增加服务任务和我的抄送功能

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 1、增加一个状态字段 wf_copy增加下面两个字段 就用未读已读来区分 2、前端 api接口增加如下: 上面是我的抄送,主要是接口不一样。 抄送点击详情

    2024年02月04日
    浏览(42)
  • 基于若依ruoyi-nbcio支持flowable流程增加自定义业务表单(二)

     更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 之前讲了自定义业务表单,现在讲如何与流程进行关联 1、后端部分 WfCustomFormMapper.xml WfCustomFormMapper.java control接口 CustomFormVo.java 2、前端部分 custo

    2024年02月07日
    浏览(40)
  • 基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(二)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统      之前讲到了流程保存的时候还要看是否是自定义业务流程应用类型,若是保存的时候不再检查是否有关联表单。       那接下来就需要一个自

    2024年02月07日
    浏览(44)
  • nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(一)

    nbcio-boot项目移植到ruoyi-nbcio项目中, 今天主要讲formdesigner的移植 1、把formdesigner的源代码拷贝到component里,并修改成formdesigner,如下: 2、form下的index.vue修改如下: 主要是修改新增,修改按钮的路由到新的formdesigner,还有详情的修改,同时引入preview组件。 3、界面如下:

    2024年02月09日
    浏览(49)
  • RuoYi若依管理系统最新版 基于SpringBoot的权限管理系统

    RuoYi是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。 本地版本为截止2023-9-10最新版本V4.7.7 完全响应式布局(支持电脑、平板、手机等所

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包