基于jeecgboot的flowable为uniapp适配的流程页面调整

news2024/10/2 22:20:22

      为了满足在uniapp上也能进行webview的流程页面操作与显示,需要对流程页面,特别是record/index.vue进行修改与适配。

     一、对各个内容的宽带进行调整

主要是样式的调整

<el-col :span="16" :offset="4"   都修改成<el-col :span="24" :offset="2"

对于审批等操作的弹出的对话框里的宽度也要进行调整进行调整

style="width: 85%"  主要是宽度样式进行调整

同时对流程显示的图要能支持水平滚动,所以样式要做调整

.el-loading-mask {//设置流程图上面的一层屏蔽层,否则影响其它窗口操作
    background-color: initial;
    z-index: 200;
    position:relative;  //支持相对
    overflow:auto;   //支持滚动
  }

二、对返回操作进行修改

      因为要适配app,h5与微信小程序,所以需要知道当前是在哪个平台上进行操作,所以需要uniapp进行平台参数的传递。

     同时要引起微信与uni,

     import wx from 'weixin-js-sdk'
     import * as uni  from "@dcloudio/uni-webview-js"

    这边接收到后进行分别处理,代码如下:

/** 返回页面 */
      goBack() {
        // 关闭当前标签页并返回上个页面
        //this.$store.dispatch("tagsView/delView", this.$route);
        	// 关闭当前标签页并返回上个页面
          console.log("goBack types=",this.types);
          console.log("goBack platform=",this.platform);
            if(this.platform === "weixin") {
              setTimeout(() => {
        					if (this.types == 999) {
        						console.log(23232);
        						/*wx.miniProgram.navigateTo({
        							url: "/pages/toDoProcess/toDoProcess"
        						});*/
                    wx.miniProgram.navigateBack();
        					} else if (this.types == 888) {
        						/*wx.miniProgram.navigateTo({ 
        							url: "/pages/toDoProcess/newProcess"
        						});*/
                    wx.miniProgram.navigateBack();
        					} else {
        						wx.miniProgram.navigateBack();
                    //window.close();
        					}
        				}, 500);
            }
            else if (this.platform === "app") {
              setTimeout(() => {
              		if (this.types == 999) {
              			console.log(23232);
                  //  uni.redirectTo({  
              		//		url: "/pages/toDoProcess/toDoProcess"
              		//	});
                    uni.navigateBack({
                                      delta: 1
                                    });
              		} else if (this.types == 888) {
                    //uni.redirectTo({  
              			//	url: "/pages/toDoProcess/newProcess"
              			//});
                    uni.navigateBack({
                                      delta: 1
                                    });
              		} else {
                    uni.navigateBack({
                                      delta: 1
                                    });
              			//window.close();
              		}
              	}, 500);
            }
            else if (this.platform === "h5") {
              this.$router.go(-1);
            }
            else {
              this.$router.go(-1);
            }
            //this.$router.go(-1)
      },

   三、当然目前还剩下一个二次登录问题,因为通过webview进行访问,后续再进行解决

  四、效果图

流程图也可以拖动进行查看

 

    

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

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

相关文章

倾向得分匹配只看这篇就够了

一、倾向得分匹配法说明 倾向得分匹配模型是由Rosenbaum和Rubin在1983年提出的&#xff0c;首次运用在生物医药领域&#xff0c;后来被广泛运用在药物治疗、计量研究、政策实施评价等领域。倾向得分匹配模型主要用来解决非处理因素&#xff08;干扰因素&#xff09;的偏差。 …

协作对象死锁及其解决方案

协作对象死锁及其解决方案 1.前言 在遇到转账等的需要保证线程安全的情况时&#xff0c;我们通常会使用加锁的方式来保证线程安全&#xff0c;但如果无法合理的使用锁&#xff0c;很可能导致死锁。或者有时我们使用线程池来进行资源的使用&#xff0c;如调用数据库&#xff0…

Swagger狂神学习笔记

学习目标&#xff1a; 了解Swagger的概念及作用 掌握在项目中集成Swagger自动生成API文档 前后端分离 前端 -> 前端控制层、视图层 后端 -> 后端控制层、服务层、数据访问层 前后端通过API进行交互 前后端相对独立且松耦合 产生的问题 前后端集成&#xff0c;前端或…

支持U盘数据、误删文件、硬盘数据 、回收站数据恢复的软件

好用的Windows数据恢复软件的标准 在数字和信息经济时代&#xff0c;数据是必不可少的。没有人可以承受由于意外删除、格式化和其他原因导致数据丢失的风险。与其在数据恢复服务上花费大量资金或花费大量时间努力自己取回数据&#xff0c;用户更喜欢使用Windows数据恢复软件…

Ask林曦|来回答,30个你关心的日常问题(一)

在林曦老师的线上书法直播课上&#xff0c;上课前后的聊天时间里&#xff0c;时常有同学向林曦老师提问&#xff0c;这些问题涵盖了日常生活的诸多方面&#xff0c;从身体的保养&#xff0c;到快乐的法门&#xff0c;皆是大家感兴趣的&#xff0c;也都共同关切的。      暄…

破解票房之谜:为何高票房电影绕不过“猫眼们”?

如此火爆的春节档很多&#xff0c;如此毁誉参半的春节档鲜有。2023开年&#xff0c;集齐张艺谋、沈腾的《满江红》&#xff0c;以及有票房前作打底的《流浪地球2》接连两部春节档电影票房进入前十&#xff0c;为有些颓靡的中国电影市场注入了一针“强心剂”。与票房同样热闹起来…

git实战技巧-本地刚做出的修改、暂存和提交如何进行撤销

1、解决思路工作区和暂存区内容的撤销&#xff0c;直接按照对应命令或者IDEA界面完成操作就行。对于已提交的撤销回滚建议如下&#xff1a;1. 代码如果仅仅是回撤到指定版本&#xff0c;该版本之上的更新是不需要的&#xff0c;选择Hard模式。2. 代码回撤到指定版本时&#xff…

父传子与子传父步骤

父传子&#xff1a; 问题&#xff1a;父页面中引入子组件 把想要传给子页面的值用在子组件中用 &#xff1a;值“值” (用同一个值好区分)来绑定。 在子页面中用props接收 子组件不能改变父组件传过来的值。&#xff08;传多个页面的时候是&#xff0c;比如父传孙的时候我会…

2020蓝桥杯真题门牌制作(填空题) C语言/C++

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小蓝要为一条街的住户制作门牌号。 这条街一共有 2020 位住户&#xff0c;门牌号从 1 到2020 编号。 小蓝制作门牌的方法是先制作 0 到 9 这几个数字字符&#xff…

两款全新模式——代言人、合伙人的玩法分享

近几年来&#xff0c;伴随着技术创新与时代发展趋势&#xff0c;线上消费订单配送服务高效率变得更加高&#xff0c;生活节奏的加快也使人们对于消费及时性越来越注重&#xff0c;及时要求已经大爆发。 用户的消费方式也发生了翻天覆地的变化&#xff0c;消费者跟商家不再是单…

jvm常识

Jvm工作原理学习笔记0126一、JVM的生命周期1.JVM实例对应了一个独立运行的java程序它是进程级别a)启动。启动一个Java程序时&#xff0c;一个JVM实例就产生了&#xff0c;任何一个拥有public static void main(String[] args)函数的class都可以作为JVM实例运行的起点b)运行。ma…

Revit中如何使管道垂直连接及【支管升降】

一、Revit中如何使管道垂直连接 在管道的标高与所要相连的管子相差无几的时候&#xff0c;拉动管道所产生的管道连接方式往往不符合应有的设计思路&#xff0c;如图1所示&#xff1a; 1)相连之后所生成的一个布线方案&#xff0c;但不是我们所想要的布线方案。如图2所示&#x…

PPP点到点协议认证之PAP认证

PPP点到点协议认证之PAP认证 需求 如图配置接口的IP地址将R1配置为认证端&#xff0c;用户名和密码是 huawei/hcie &#xff0c;使用的认证方式是pap确保R1和R2之间可以互相ping通 拓扑图 配置思路 确保接口使用协议是PPP确保接口的IP地址配置正确在R1 的端口上&#xff0c…

【LeetCode】剑指 Offer 14- I. 剪绳子 p96 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/jian-sheng-zi-lcof/ 1. 题目介绍&#xff08;14- I. 剪绳子&#xff09; 给你一根长度为 n 的绳子&#xff0c;请把绳子剪成整数长度的 m 段&#xff08;m、n都是整数&#xff0c;n>1并且m>1&#xff09;&#xff0c…

【Mysql】InnoDB引擎

【Mysql】InnoDB引擎 文章目录【Mysql】InnoDB引擎1. 逻辑存储结构2. 架构2.1 概述2.2 内存结构2.2.1 Buffer Pool(缓冲池)2.2.2 Change Buffer(更改缓冲区)2.2.3 Adptive Hash Index(自适应hash索引)2.2.4 Log Buffer(日志缓冲区)2.3 磁盘结构2.3.1 System Tablespace(系统表空…

图解LeetCode——剑指 Offer 42. 连续子数组的最大和

一、题目 输入一个整型数组&#xff0c;数组中的一个或连续多个整数组成一个子数组。求所有子数组的和的最大值。要求时间复杂度为O(n)。 二、示例 2.1> 示例1: 【输入】 nums [-2,1,-3,4,-1,2,1,-5,4] 【输出】 6 【解释】 连续子数组 [4,-1,2,1] 的和最大&#xff0c;…

鉴源论坛 · 观擎丨民机机载软件中的开发和验证工具

作者 |蔡喁 上海控安可信软件创新研究院副院长 版块 | 鉴源论坛 观擎 01 工具鉴定 现代软件工程中&#xff0c;工具已经出现在软件研制过程中的各个环节中。在常见的软件研制环节中&#xff0c;使用工具包括软件需求工具、软件设计工具、软件架构工具和软件测试工具等。这…

【C++】模板与STL库

STL&#xff08;标准模板库&#xff09; 文章目录模板STL模板 模板是泛型编程的基础&#xff0c;泛型编程以一种独立于任何特定类型的方式编写代码。 模板是创建泛型类或函数的蓝图或公式。库容器&#xff0c;比如迭代器和算法&#xff0c;都是泛型编程的例子&#xff0c;它们…

线性判别分析仅在线性可分数据上能获得理想结果

Q: 线性判别分析仅在线性可分数据上能获得理想结果, 试设计一个改进方法, 使其能较好地用于飞线性可分数据 The same for “Linear discriminant analysis can only obtain ideal results on linearly separable data. Try to design an improved method to make it better us…

Vue3:自定义指令以及简单的后台管理权限封装

目录 前言&#xff1a; 自定义指令介绍&#xff1a; 局部的自定义指令&#xff1a; 全局自定义指令&#xff1a; 讲讲后台管理权限管理&#xff1a; 前言&#xff1a; 说起这个自定义指令的使用场景&#xff0c;我第一反应就是&#xff0c;后台管理的权限管理&#xff0c;要…