ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题

news2024/9/22 4:06:07

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

gitee源代码地址

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

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

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

gitee源代码地址

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

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

1、后端增加一个接口

 
    /**
     * 查询用户列表,用于用户选择场景
     */
    @SaCheckLogin
    @GetMapping("/selectUser")
    public TableDataInfo<SysUserVo> selectUser(SysUserBo user, PageQuery pageQuery) {
        return userService.selectPageUserList(user, pageQuery);
    }

2、WfIdentityMapper.xml最后增加一个d,否则多租户情况下会报错

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.nbcio.workflow.mapper.WfIdentityMapper">

    <select id="selectPageUserList" resultType="java.util.Map">
        select user_id as userId, user_name as userName, nick_name as nickName, phonenumber as phonenumber
        from sys_user
        <where>
            <if test="deptId != null">
                and dept_id = #{deptId}
            </if>
        </where>
    </select>

    <select id="selectDeptList" resultType="java.util.Map">
        select dept_id as deptId, parent_id as parentId, dept_name as deptName, order_num as orderNum
        from sys_dept d
    </select>
</mapper>

3、跳转前端对话框代码修改如下

<!--跳转流程-->
        <el-dialog :z-index="100" :title="jumpTitle" @cancel="jumpOpen = false"
                 v-model="jumpOpen" :width="'40%'" append-to-body>
          <template #header>
            <span>跳转节点</span>
          </template>
          <el-form ref="jumpForm" :model="jumpForm" label-width="160px">
            <el-form-item label="跳转节点" prop="jumpType" :rules="[{ required: true, message: '请选择跳转节点', trigger: 'blur' }]">
              <a-table
                size="middle"
                :columns="jumpNodeColumns"
                :loading="jumpNodeLoading"
                :pagination="false"
                :dataSource="jumpNodeData"
                :rowKey="(record) => record.id"
                :rowSelection="rowSelection"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <a-button type="primary" @click="jumpOpen = false">取 消</a-button>
              <a-button type="primary" @click="jumpComplete(true)">确 定</a-button>
            </span>
          </template>
        </el-dialog>

实际上就是变量重新命名了,其它也没什么变selectedJumpRows,同时//selectedRowKeys: selectedRowKeys,这个部分注释掉

const jumpComplete = () => {
    if ( selectedJumpRows.value.length < 1 ) {
      proxy?.$modal.msgWarning('请选择跳转节点')
      return
    }
    // 流程信息
    jumpForm.taskId = route.query && route.query.taskId as string;;
    jumpForm.procInsId = route.params && route.params.procInsId as string;;
    //对formdesigner后续加签审批的时候需要用到
    jumpForm.comment = taskForm.comment;
    //目标选择的节点信息
    jumpForm.targetActId = selectedJumpRows.value[0].id;
    jumpForm.targetActName = selectedJumpRows.value[0].name;
    console.log("jumpForm=",jumpForm);
    jumpTask(jumpForm).then(res => {
      console.log(" jumpTask",res);
      if (res.code == 200) {
        proxy?.$modal.msgSuccess('跳转成功')
        jumpOpen.value = false;
        goBack();
      } else {
        proxy?.$modal.msgError('跳转失败:' + res.msg)
      }
    });

4、加签前端对话框

<!--加签流程-->
        <el-dialog :z-index="100" title="addSignTitle" @cancel="addSignOpen = false"
                 v-model="addSignOpen" :width="'40%'" append-to-body>
          <template #header>
            <span>{{ addSignTitle }}</span>
          </template>
          <el-form ref="addSignForm" :model="addSignForm" label-width="160px">
            <el-form-item label="加签类型" prop="addSignType" :rules="[{ required: true, message: '请选择加签类型', trigger: 'blur' }]">
              <el-radio-group v-model="addSignType" @change="changeAddSignType">
                  <el-radio :value = "0" >前加签</el-radio>
                  <el-radio :value = "1" >后加签</el-radio>
                  <el-radio :value = "2" >多实例加签</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户选择" prop="copyUserIds" :rules="[{ required: true, message: '请选择用户', trigger: 'blur' }]">
              <el-tag
                :key="index"
                v-for="(item, index) in addSignUser"
                closable
                :disable-transitions="false"
                @close="handleClose('next', item)">
                {{ item.nickName }}
              </el-tag>
              <el-button class="button-new-tag" type="primary" icon="el-icon-plus" size="small" circle @click="onSelectAddSignUsers" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="addSignOpen = false">取 消</el-button>
              <el-button type="primary" @click="addSignComplete(true)">确 定</el-button>
            </span>
          </template>
        </el-dialog>

主要问题也是  const addSignType = ref(0) //加签类型 不单独出来好像vue3操作有问题(vue2版本是放在addSignForm里),其它逻辑也没多大变化

/** 加签 */
  const handleAddSign = () => {
    taskFormRef.value.validate(valid => {
      if (valid) {
        addSignType.value = 0;
        addSignTitle.value = "前加签流程";
        addSignOpen.value = true;
        console.log("handleAddSign addSignForm",addSignForm)
      }
    });
  }
  const changeAddSignType = (val) => {
    addSignType.value = val;
    if(addSignType.value === 0) {
      addSignTitle.value = "前加签流程";
    }
    if(addSignType.value === 1) {
      addSignTitle.value = "后加签流程";
    }
    if(addSignType.value === 2) {
      addSignTitle.value = "多实例加签流程";
    }
  }
  /** 加签任务 */
  const addSignComplete = () => {
    addSignForm.value.addSignUsers = taskForm.addSignUsers;
    addSignForm.value.addSignType = addSignType.value
    if (!addSignForm.value.addSignUsers ) {
        proxy?.$modal.msgError("请选择用户");
        return;
    }
    // 流程信息
    addSignForm.value.taskId = route.query && route.query.taskId as string;;
    addSignForm.value.procInsId = route.params && route.params.procInsId as string;;

    //对VForm3后续加签审批的时候需要用到
    addSignForm.value.comment = taskForm.comment;
    console.log("addSignForm=",addSignForm);

    if(addSignForm.value.addSignType === 2) {
      multiInstanceAddSignTask(addSignForm).then(response => {
      proxy?.$modal.msgSuccess(response.msg);
      addSignOpen.value = false;
      goBack();
      });
    }
    else {
      addSignTask(addSignForm.value).then(response => {
      proxy?.$modal.msgSuccess(response.msg);
      addSignOpen.value = false;
      goBack();
      });
    }
  }

5、效果图如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1631026.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IF 27.5|GWAS+图位克隆法,揭秘水稻调控籽粒性状的关键基因

水稻是全球种植最广泛的作物 拥有超过12万个品种 提高粮食品质是当代水稻育种的首要目标 在现代水稻育种中&#xff0c;不同类型的水稻已经被培育出来&#xff0c;比如食用稻和酿酒稻。这些不同类型的水稻具备不同的籽粒特性&#xff0c;其中包括育种过程中选择的不同等位基因…

应用实战|只需几步,即可享有外卖订餐小程序

本示例是一个简单的外卖查看店铺点菜的外卖微信小程序&#xff0c;小程序后端服务使用了MemFire Cloud&#xff0c;其中使用到的MemFire Cloud功能包括&#xff1a; 其中使用到的MemFire Cloud功能包括&#xff1a; 云数据库&#xff1a;存储外卖微信小程序所有数据表的信息。…

OpenHarmony语言基础类库【@ohos.xml (xml解析与生成)】

将XML文本转换为JavaScript对象、以及XML文件生成和解析的一系列接口。 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import xml from ohos.xml; XmlSerializer XmlSerializer接口…

可审批可审计追溯的单网络导出文件方案,了解一下

在物理隔离状态下&#xff0c;单网络导出文件是一个重要的安全需求&#xff0c;特别是在处理敏感数据时。在这种环境下&#xff0c;数据导出需要采取特殊的安全措施&#xff0c;以确保数据传输的安全性和合规性。需要考虑以下因素&#xff1a; 安全性&#xff1a;确保传输过程加…

代码随想录算法训练营第12天:滑动窗口和前缀和

代码随想录算法训练营第12天&#xff1a;滑动窗口和前缀和 这里我参考了西法的博客&#xff0c; 467. 环绕字符串中唯一的子字符串(中等)795. 区间子数组个数(中等)904. 水果成篮(中等)992. K 个不同整数的子数组&#xff08;困难&#xff09;1109. 航班预订统计(中等) 前四…

netsh int ipv4 show dynamicport tcp动态端口port设置

netsh int ipv4 show dynamicport tcp netsh int ipv4 set dynamicport tcp start4000 num10000

测试下目录显示否

目录 1、安装docker 2、搜索镜像 3、拉取镜像 4、查看镜像列表 5、运行镜像 6、查看运行容器列表 8、命令行连接数据库 1、安装docker 2、搜索镜像 docker search mysql 3、拉取镜像 docker pull mysql 4、查看镜像列表 docker images 5、运行镜像 docker run -p …

#ESP32S3R8N8建立工程(VSCODE)点亮LED

1.参考文档 【立创ESP32S3R8N8】IDF入门手册 - 飞书云文档 (feishu.cn)https://lceda001.feishu.cn/wiki/GOIlwwfbIi1SC3k8594cDeFVn8g 2.建立工程 3.运行效果 4.更改配置 5.插播 之前配置的环境是有问题的&#xff0c;就算有自动检测也要仔细检查&#xff0c;必须严格按照以…

【推荐】程序员的免费羊毛!!!

还剩下最后两天了&#xff0c;最后这两天抽奖命中率特别高&#xff0c;基本中奖99.99% 有大量日历、数码电子产品。 点击链接参与「通义灵码 体验 AI 编码&#xff0c;开 AI 盲盒」 https://developer.aliyun.com/topic/lingma/activities/202403?taskCode14508&recor…

Windows系统中下Oracle 19C数据库超级详细安装、设置教程(自己电脑上安装Oracle学习,保姆级教学,亲测有效)

Oracle 官方提供了一个基于 Java 技术的图形界面安装工具&#xff1a;Oracle Universal Installer&#xff08;Oracle 通用安装器&#xff09;简称 OUI&#xff0c;利用它可以完成在不同操作系统平台上&#xff08;Windows、Linux、UNIX&#xff09;的、不同类型的、不同版本的…

vb.net编写简易计算器(DataTable )

如下图所示界面&#xff1a; 部分代码&#xff1a; Private Sub Button14_Click(sender As Object, e As EventArgs) Handles Button14.Click TextBox1.Text "" End Sub Private Sub Button19_Click(sender As Object, e As EventArgs) Handles Button19.Cli…

手机空号过滤,提高工作效率

手机空号过滤在多个方面都具有重要的作用。 首先&#xff0c;它对于短信群发商和电话营销商来说至关重要。通过空号过滤&#xff0c;他们可以确保手机号码数据库的准确性和有效性。由于每天都有大量人群因各种原因更换手机号码&#xff0c;导致每个号段中的空号率和手机状态都…

AI图书推荐:《企业AI转型:如何在企业中部署ChatGPT?》

Jay R. Enterprise AI in the Cloud. A Practical Guide...ChatGPT Solutions &#xff08;《企业AI转型&#xff1a;如何在企业中部署ChatGPT&#xff1f;》&#xff09;是一本由Rabi Jay撰写、于2024年由John Wiley & Sons出版的书籍&#xff0c;主要为企业提供实施AI转型…

就业班 第三阶段(tomcat) 2401--4.28 day1 tomcat1安装配置及单机多实例

企业 Tomcat 运维 文章目录 企业 Tomcat 运维一、Tomcat 简介1、Tomcat好帮手---JDK2、安装Tomcat & JDK1、系统环境说明2 、安装JDK3、安装Tomcat 二、Tomcat目录介绍1、tomcat主目录介绍2、webapps目录介绍3、Tomcat配置介绍&#xff08;conf&#xff09;4、Tomcat的管理…

C# Onnx yolov8 pig detection

C# Onnx yolov8 pig detection 目录 效果 项目 模型 代码 数据集 下载 效果 项目 模型 Model Properties ------------------------- date&#xff1a;2024-04-28T15:13:10.750689 description&#xff1a;Ultralytics YOLOv8n model trained on C:\Work\yolov8\datas…

手撕红黑树(kv模型模拟)

目录 前言 一、相关概念 二、性质介绍 红黑树平衡说明 三、红黑树模拟&#xff08;kv结构&#xff09; 1、红黑树节点 2、红黑树插入 2、特殊处理情况 声明&#xff1a; 情况一&#xff1a;cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在&#xff0c;且…

高频面试题:解决Spring框架中的循环依赖问题

引言&#xff1a;什么是Spring框架与循环依赖&#xff1f; 在Spring框架中&#xff0c;循环依赖是指两个或多个bean相互依赖对方以完成自己的初始化。这种依赖关系形成了一个闭环&#xff0c;导致无法顺利完成依赖注入。比如&#xff0c;如果Bean A在其构造函数中需要Bean B&a…

【python笔记】datafram的时间动态可视化 pyecharts地图

import pandas as pd# 假设DataFrame是这样的&#xff1a; df pd.DataFrame({ year: [2014, 2015, 2016, 2014, 2015, 2016, 2014, 2015, 2016], province: [广东省, 广东省, 河南省, 湖南省, 北京市, 北京市, 上海市, 新疆维吾尔自治区, 上海市], values: [100, 150, 75…

添加阿里云yum源

添加阿里云yum源 要添加阿里云的 yum 源&#xff0c;可以执行以下步骤&#xff1a; 首先&#xff0c;备份你的现有 yum 源配置文件&#xff0c;以防止意外更改&#xff1a; sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup然后&#xf…

基于OpenMV 双轴机械臂 机器学习

文章目录 一、项目简要二、目标追踪1. 色块识别与最大色块筛选2. PID位置闭环 三、机器学习1. Device12. Device2 四、效果演示 一、项目简要 两套二维云台设备&#xff0c;Device1通过摄像头捕捉目标物块点位进行实时追踪&#xff0c;再将自身点位传到Device2&#xff0c;Dev…