。

其中#xff0c;APP是在安卓在雷电模拟器环境下完成的#xff0c;其他环境未测试#xff0c;此文章中所提及的APP均指上述环境。

移动端是需要配合若依前后端分…1.前言

此代码是若依移动端版为基础实现flowable流程管理支持H5、APP和微信小程序三端。

其中APP是在安卓在雷电模拟器环境下完成的其他环境未测试此文章中所提及的APP均指上述环境。

移动端是需要配合若依前后端分离的Flowable版本使用流程图绘制和表单配置等内容均需要在PC端进行配置移动端包含任务管理中所有内容功能和PC端一致两者共用一个后端代码。

PC端内容可以查看我的主页文章《以若依Flowable工作流版本RuoYi-Vue-Flowable为基础进行二次开发》此资源获取需要收费。

资源需要移动端和PC端资源需要分别付费获取具体收费方式请看文章最后“总结和代码获取方式”。

2.功能介绍

首页是引入了秋云ucharts组件引入了五个常用图表分别是地图统计、折线图统计、柱状图统计、饼状图统计和进度条统计。

不用担心使用问题每个图表都给出了使用案例并且在配置参数上指明了官网配置说明地址具体使用方式后面会介绍。

2.H5端

PC端的已发任务功能中的新增流程功能单独拿了出来新增流程功能没有权限控制任何人都显示功能。

但是已发任务、待办任务、已办任务和全部任务四个功能会根据PC端配置的权限进行动态显示。

2.H5端

会自动屏幕大小分配成两个区域搜索框区域和数据显示区域。

搜索框区域固定数据区域会根据内容多少增加滚动条滑动时搜索框位置不会被隐藏。

同时数据区域采用点击“加载更多”按钮的方式进行分页每次增加10条数据直至加载所有数据。

全局使用此种方式显示和加载多条数据后面就不介绍这方面功能只介绍特殊功能。

2.H5端

显示表单信息和流程图信息表单包括保存、发起和重置功能。

保存功能是将流程保存到代办任务中可以再次打开流程就行修改发起功能是直接发起流程重置功能是重置填写的表单信息。

并且默认绑定了一个测试表单这个表单包含element-ui中表单中的所有组件给出了相应的uniapp解决方式。

uniapp的test.vue和Vue的test.vue内容相互对应的能够实现两端的联动。

如果想实现各端功能一定要参照这两个表单。

流程图显示在H5端和APP端使用的bpmn-js显示而微信小程序端拆分成树进行显示。

对于显示内容可以查看我主页文章《uniapp二次封装组件py组件》的py-bpmn-viewer组件。

2.H5端

基本功能与3.1功能介绍相同显示自己发送任务。

显示流程名称、流程编号、流程状态和提交时间四个重要信息通过左滑的方式选择查看和详细两个功能。

查看功能通过弹窗的方式显示流程的基本信息内容过多会自动添加滚动详细功能查看表单信息和流程图信息。

2.H5端

此功能用于已发任务、已办任务全部任务的详细功能显示显示表单信息、流转记录和流程图。

只能查看这些信息不能进行操作。

对于只读状态下测试表单功能可以查看我主页文章《uniapp二次封装组件py组件》测试表单使用了里面大量组件。

2.H5端

基本功能与6.1功能介绍类似只是不显示当前流程流程状态了因为待办任务肯定都是进行中的流程。

左滑操作变成了查看和处理功能。

2.H5端

基本功能和7.1功能介绍类似但是会根据不同情况分配不同功能。

如果当前节点是填报节点并且登录账号为流程申请人账号显示功能为保存和发起。

保存功能将流程信息保存还能再次在待办任务中修改发起功能将流程启动。

如果满足上述条件就显示审批、选择退回、退回上级和退回初始功能。

这四个功能和PC端对应审批功能是同意流程选择退回功能是选择退回节点进行退回退回上级功能是退回到流程的上一节点退回初始功能是指退回的流程的初始节点。

由于流转记录与流程图和7待办任务中类似下面那些功能对这两个页面不进行截图了只截图特殊功能。

2.H5端

基本功能和5.已发任务类似已办任务显示自己办理的任务。

左滑功能也和已发任务一样为查看和详细。

详细功能页面和6.流程详情一样就不介绍和截图了。

2.H5端

基本功能和5.已发任务类似全部任务显示所有的任务。

左滑功能也和已发任务一样为查看和详细。

详细功能页面和6.流程详情一样就不介绍和截图了。

2.H5端

并非有个功能模块叫做测试表单而是上面各个模块中都有表单信息这个功能。

测试表单会根据传来的值判断是否有初值和是否为只读状态。

如果有初值将初值赋值给表单。

如果只读状态将所有表单组件设置为只读状态。

但是颜色选择和图片上传可以点击只能点击查看不能修改值。

由于前面截图没有完整表单截图所以才又增加这个模块介绍。

表单组件很多都是使用的py组件具体可以查看我主页文章《uniapp二次封装组件py组件》。

2.H5端

具体如何启动可以查看我的主页文章《以若依Flowable工作流版本RuoYi-Vue-Flowable为基础进行二次开发》因为两者共用一个后端。

2.配置后端

打开config.js文件将后端启动信息配置在baseUrl上一定要使用ip访问的方式不要设置为localhost。

如果设置为localhost在模拟器调试时无法访问后端。

3.配置小程序

用HBuilderX打开manifest.json文件选择“微信小程序配置”配置自己的微信小程序AppID。

如果配置的AppID与当前登录微信开发者工具的AppID不同是无法启动的。

1.秋云ucharts

1.全局引入在main.js文件中引入已经写好了代码去掉注释即可。

因为我只在首页中使用了此组件所以采用了局部引入的方式。

2.局部引入如果使用组件的页面页面不多可以采用局部引入的方式。

2.组件使用

不用担心使用问题每个组件配置信息都标注了详细的地址和配置信息位置。

对于地图统计标注了地图json获取地址并有显示数量的例子。

具体可以查看index.vue文件。

3.表单导入

PC端配置表单路径例子为/views/py/test.vue到了uniapp端会自动将views路径转换为pages。

因此在PC端配置路径为/views/py/test.vue的表单到了uniapp端要将表单放在/pages/py/test.vue上。

如果放置位置不准确是无法绑定的。

2.H5端导入方式

H5端支持动态组件的方式导入方式和PC端动态导入方式类似因此哪怕增加新表单也不用增加代码。

3.APP端导入方式

1.由于APP不支持动态导入组件每次新增表单页面都需要在main.js文件中手动导入。

4.微信小程序端导入方式

1.所有操作都在pages.json文件中在pages中增加表单页面。

5.APP端和微信小程序端

1.在myProcess/detail/index.vue、myProcess/send/index.vue和todo/detail/index.vue三个页面中分别按照如下格式写入。

2.在myProcess/detail/index.vue按照如下格式修改。

每新增一个页面就写一个v-else-if格式和下面格式类似同时修改组件名称其他内容不要修改。

3.在myProcess/send/index.vue按照如下格式修改。

每新增一个页面就写一个v-else-if格式和下面格式类似同时修改组件名称其他内容不要修改。

4.在todo/detail/index.vue按照如下格式修改。

每新增一个页面就写一个v-else-if格式和下面格式类似同时修改组件名称其他内容不要修改。

6.补充说明

上述导入页面的方式已经是目前我能想到最好的方式了不要尝试其他方式了很有可能浪费时间。

我也在这浪费了很多时间很多方式在APP和微信小程序不支持这是没办法的事情。

也不要尝试将三个页面导入组件部分写成一个组件然后导入这个组件新增表单只需要修改这个地方。

上述方法我也考虑到了出于功能和使用方面感觉都不是太好。

每次新增流程都需要新增页面增加这一部分内容也不会有太大问题。

不要和我一样因为纠结这个问题而浪费了大量时间。

4.表单设计

需要接收两个参数一个是readOnly另一个是formData。

readOnly表单是否为只读状态formData表单数据。

并且判断下formData是否有值有值的话复制给表单。

2.只读状态

1.由于表单只读状态没有Vue那么方便为了减少代码表单只读状态是通过禁用事件来完成的。

只读状态是通过类py-form-disabled实现的只需要在表单外层嵌套个view并通过下面方式设置即可。

2.如果表单下某个组件需要事件可以组件加上类clickable-item。

由于文件需要点击放大颜色选择器可以点击查看颜色哪怕是只读状态也需要点击事件可以如下面方式设置。

3.表单规则

u--form已经明确表示设置表单规则时为了兼容微信小程序除了在表单上设置规则外还需要手动设置规则。

4.组件交互

1.表单重置方法名称必须为reset因为父组件会调用这个方法如果不是这个名称会导致表单重置失效。

表单重置最好和我一样先手动设置再调用重置方式防止重置失败。

2.表单保存方法名称必须为submitForm因为父组件会调用这个方法如果不是这个名称会导致表单保存失效。

由于不设置规则时调用validate报错可以使用下面这种方式判断下这样不会报错。

规则验证完成后一定要调用父组件saveForm方法并将表单值传过去。

如果没有特别需要不用修改submitForm方法。

5.表单值转换

如果表单值保存到数据库或者数据库值转换为表单值出现问题可以自行修改py.js中getVarType方法和getFormData方法。

getVarType方法用于表单值保存到数据过程中获取值的类型。

getFormData方法是数据库值转换为对应类型的数据。

两个转换方法可能随着操作环境改变要做一定修改我从Vue复制过这两个方法后直接uniapp中出现了一点小错误修改了后才能使用的。

6.补充说明

如果细心发现为什么整个表单页面都是使用uview-ui的组件怎么评分使用uni-rate组件。

这是因为u-rate组件时在H5和微信小程序端正常但是在APP端选择后会导致清空。

但是切换tabs后再切换回表单页面就能使用。

这个原因很奇怪又不想修改u-view自带组件因此我使用uni-rate组件。

由于同时写三端的代码很容易出现问题。

如果你发现有些地方很奇怪并且有注释就好好看下注释有可能我提前给你把坑踩了。

5.权限配置

权限功能是使用若依自带的权限并且通过Vue页面保存位置和uniapp页面保存位置进行匹配因此不能修改uniapp中flowable文件夹下的页面位置。

并且权限只控制在了菜单并且仅在任务管理功能下使用了菜单权限控制和PC端一致。

4.总结和代码获取方式

这次流程管理uniapp版本的开发让我真的感到疲倦。

为了开发出兼容三端的功能花了大量时间。

尤其有时候出现的问题让人无法理解有时候两端没有问题但是某一端出现问题就得花大量时间排查。

真的没有用Vue开发时那么轻松如果只是兼容H5的话我感觉最少减少一半开发时间。

基于三端问题我已经花大量时间进行测试了但是我也没自信说代码没问题很可能存在一些bug请大家见谅。

如果出现问题可以csdn私信或QQ私信给我我视情况进行修改。

很久没有发布新作品可能有些小伙伴以为我放弃了。

由于本人不像水文章来表明自己没有放弃和时间原因我发布文章速度可能有些慢但是文章质量不会让大家失望的。

如果大家对若依框架、java、Vue和uniapp等内容感兴趣可以关注我我会不定时发布一些文章。

大家放心绝大部分是免费内容我会根据工作量判断是否需要收费。

写完这个文章我又得考虑下一个要写的内容如果大家有关于上面四个方面内容的建议可以私信给我我会优先考虑的。

如果我不会我可以去学习如果没发学好这部分内容就得搁置了。

2.代码获取方式

在文章开始我就强调代码是收费的请大家见谅不管收益如何有收益也是我坚持写作的动力。

下面会分几个情况介绍收费情况。

每一篇文章需要打赏10才能获取资源的如果你已经有我QQ了代表你已经获取过我收费资源了每篇文章打赏8元就能获取资源这也是对长期支持我的一点福利。

如果没有我QQ好友打赏10元后需要csdn私信给我发打赏截图和QQ号我会根据打赏的文章拉你进相应的资源群。

如果有我好友打赏8元后需要qq私信给我发打赏截图和需要的资源。

特别注意8元红包需要打赏两次6元2元。

根据上面收费情况如果你只想获取当前uniapp流程管理资源如果有我QQ需要打赏8元如果没有QQ需要打赏10元。

如果想同时获取uniapp和PC端的流程管理资源并且没有我QQ需要打赏18元如果想同时获取uniapp和PC端的流程管理资源并且有我QQ需要打赏16元。

对于同时获取uniapp和PC端的流程管理资源具体怎么打赏不限制只要金额对应就可以。

但是有我QQ并且打赏采用每篇打赏8元的方式一定要QQ给我消息。

一个是需要验证另一个是QQ发消息我能更快速的回复。

如果大家对这个文章还算满意就给个赞吧获取到大家的支持就是我最大动力。

如果大家需要文件预览和PC端流程管理相关资源可以查看我的主页文章。

最后谢谢大家的支持。