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

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

更多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、效果图如下:


相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
142 2
|
15天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
2月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
18天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
4月前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
170 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
4月前
|
JavaScript 前端开发 API
每个前端开发人员都必须知道的 7 个 Vue3 组件库!
每个前端开发人员都必须知道的 7 个 Vue3 组件库!
|
4月前
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
474 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
|
4月前
|
开发框架 前端开发 JavaScript
【Vue 3】一款开箱即用的中后台前端开发框架,开源且免费!!
【Vue 3】一款开箱即用的中后台前端开发框架,开源且免费!!
|
4月前
|
存储 JavaScript 前端开发
听说在 Vue 3 中实现动态表单很难?作为一个前端开发者,表示一切都是小意思!!
听说在 Vue 3 中实现动态表单很难?作为一个前端开发者,表示一切都是小意思!!
|
4月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
160 0