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端流程管理相關資源，可以查看我的主頁文章。最后，謝謝大家的支持。