以若依移动端版为基础，实现uniapp的flowable流程管理

1.前言

此代码是若依移动端版为基础，实现flowable流程管理，支持H5、APP和微信小程序三端。其中，APP是在安卓在雷电模拟器环境下完成的，其他环境未测试，此文章中所提及的APP均指上述环境。移动端是需要配合若依前后端分离的Flowable版本使用，流程图绘制和表单配置等内容均需要在PC端进行配置，移动端包含任务管理中所有内容，功能和PC端一致，两者共用一个后端代码。

PC端内容可以查看我的主页文章《以若依Flowable工作流版本（RuoYi-Vue-Flowable）为基础，进行二次开发》，此资源获取需要收费。资源需要移动端和PC端资源需要分别付费获取，具体收费方式请看文章最后“总结和代码获取方式”。

2.功能介绍

1.首页

1.功能介绍

首页是引入了秋云ucharts组件，引入了五个常用图表，分别是地图统计、折线图统计、柱状图统计、饼状图统计和进度条统计。不用担心使用问题，每个图表都给出了使用案例，并且在配置参数上指明了官网配置说明地址，具体使用方式，后面会介绍。

2.H5端

3.APP端

4.微信小程序端

2.工作台

1.功能介绍

PC端的已发任务功能中的新增流程功能单独拿了出来，新增流程功能没有权限控制，任何人都显示功能。但是，已发任务、待办任务、已办任务和全部任务四个功能，会根据PC端配置的权限进行动态显示。

2.H5端

3.APP端

4.微信小程序端

3.新增流程

1.功能介绍

会自动屏幕大小分配成两个区域，搜索框区域和数据显示区域。搜索框区域固定，数据区域会根据内容多少增加滚动条，滑动时，搜索框位置不会被隐藏。同时，数据区域采用点击“加载更多”按钮的方式进行分页，每次增加10条数据，直至加载所有数据。全局使用此种方式显示和加载多条数据，后面就不介绍这方面功能，只介绍特殊功能。

2.H5端

3.APP端

4.微信小程序端

4.发起流程

1.功能介绍

显示表单信息和流程图信息，表单包括保存、发起和重置功能。保存功能是将流程保存到代办任务中，可以再次打开流程就行修改；发起功能是直接发起流程；重置功能是重置填写的表单信息。并且，默认绑定了一个测试表单，这个表单包含element-ui中表单中的所有组件，给出了相应的uniapp解决方式。uniapp的test.vue和Vue的test.vue内容相互对应的，能够实现两端的联动。如果想实现各端功能，一定要参照这两个表单。

流程图显示在H5端和APP端使用的bpmn-js显示，而微信小程序端拆分成树进行显示。对于显示内容，可以查看我主页文章《uniapp二次封装组件（py组件）》的py-bpmn-viewer组件。

2.H5端

3.APP端

4.微信小程序端

5.已发任务

1.功能介绍

基本功能与3.1功能介绍相同，显示自己发送任务。显示流程名称、流程编号、流程状态和提交时间四个重要信息，通过左滑的方式选择查看和详细两个功能。查看功能通过弹窗的方式显示流程的基本信息，内容过多会自动添加滚动；详细功能查看表单信息和流程图信息。

2.H5端

3.APP端

4.微信小程序端

6.流程详情

1.功能介绍

此功能用于已发任务、已办任务全部任务的详细功能显示，显示表单信息、流转记录和流程图。只能查看这些信息，不能进行操作。对于只读状态下，测试表单功能可以查看我主页文章《uniapp二次封装组件（py组件）》，测试表单使用了里面大量组件。

2.H5端

3.APP端

4.微信小程序端

7.待办任务

1.功能介绍

基本功能与6.1功能介绍类似，只是不显示当前流程流程状态了，因为待办任务肯定都是进行中的流程。左滑操作变成了查看和处理功能。

2.H5端

3.APP端

4.微信小程序端

8.流程处理

1.功能介绍

基本功能和7.1功能介绍类似，但是会根据不同情况分配不同功能。如果当前节点是填报节点，并且登录账号为流程申请人账号，显示功能为保存和发起。保存功能将流程信息保存，还能再次在待办任务中修改；发起功能将流程启动。如果满足上述条件，就显示审批、选择退回、退回上级和退回初始功能。这四个功能和PC端对应，审批功能是同意流程；选择退回功能是选择退回节点进行退回；退回上级功能是退回到流程的上一节点；退回初始功能是指退回的流程的初始节点。由于流转记录与流程图和7待办任务中类似，下面那些功能对这两个页面不进行截图了，只截图特殊功能。

2.H5端

3.APP端

4.微信小程序端

9.已办任务

1.功能介绍

基本功能和5.已发任务类似，已办任务显示自己办理的任务。左滑功能也和已发任务一样，为查看和详细。详细功能页面和6.流程详情一样，就不介绍和截图了。

2.H5端

2.APP端

3.微信小程序端

10.全部任务

1.功能介绍

基本功能和5.已发任务类似，全部任务显示所有的任务。左滑功能也和已发任务一样，为查看和详细。详细功能页面和6.流程详情一样，就不介绍和截图了。

2.H5端

3.APP端

4.微信小程序端

11.测试表单

1.功能介绍

并非有个功能模块叫做测试表单，而是上面各个模块中都有表单信息这个功能。测试表单会根据传来的值，判断是否有初值和是否为只读状态。如果有初值，将初值赋值给表单。如果只读状态，将所有表单组件设置为只读状态。但是，颜色选择和图片上传可以点击，只能点击查看，不能修改值。由于前面截图没有完整表单截图，所以才又增加这个模块介绍。表单组件很多都是使用的py组件，具体可以查看我主页文章《uniapp二次封装组件（py组件）》。

2.H5端

3.APP端

4.微信小程序端

3.流程开发

1.程序启动

1.启动后端

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

2.配置后端

打开config.js文件，将后端启动信息配置在baseUrl上，一定要使用ip访问的方式，不要设置为localhost。如果设置为localhost，在模拟器调试时无法访问后端。

3.配置小程序

用HBuilderX打开manifest.json文件，选择“微信小程序配置”，配置自己的微信小程序AppID。如果配置的AppID，与当前登录微信开发者工具的AppID不同是无法启动的。

1.秋云ucharts

1.引入方式

1.全局引入：在main.js文件中引入，已经写好了代码，去掉注释即可。因为我只在首页中使用了此组件，所以采用了局部引入的方式。

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

2.组件使用

不用担心使用问题，每个组件配置信息，都标注了详细的地址和配置信息位置。对于地图统计，标注了地图json获取地址，并有显示数量的例子。具体可以查看index.vue文件。

3.表单导入

1.导入规则

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中增加表单页面。

2.在usingComponents增加test页面。

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.表单设计

1.接收参数

需要接收两个参数，一个是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.总结和代码获取方式

1.总结

这次流程管理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端流程管理相关资源，可以查看我的主页文章。最后，谢谢大家的支持。