0
点赞
收藏
分享

微信扫一扫

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


      为了满足在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进行访问,后续再进行解决

  四、效果图

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

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

 

    

举报

相关推荐

0 条评论