前言
事情是這樣的,熟悉我們的朋友都知道,我司有一個為廣大開發者朋友們提供學習幫助的地方,叫做新手訓練營,具體的內容就是會針對初次接觸葡萄城產品和技術的使用者,透過 2-3 天的集中學習,採用直播授課的方式幫助使用者快速上手產品,課後講師會根據講課內容佈置相應的作業,對於所有提交作業的同學會頒發結業證書,同時對於作業優秀的同學還會頒發優秀學員證書,如下圖所示:
但是隨著新手訓練營的日益火爆,參加學習的人也越來越多,證書的數量也就越來越多。而我們這邊負責運營新手訓練營的同事就遇見了這麼一個問題:由於新手訓練營的證書是手動製作的,每次在頒發證書的時候都要一個一個填每個人的姓名、訓練營的期數和授課日期的時間,這樣一來隨著報名的人越來越多,證書的數量也就越來越多,手動one by one的製作工作量越來越大,耗時長,效率低。
為了解決這個問題,小編用我司的企業級低程式碼開發平臺活字格做一個新手訓練營證書列印系統。下面是這個系統的整體功能流程圖:
系統整體功能流程圖
表設計
在設計完初始的系統功能流程之後,小編首先開始進行資料庫的表設計,因為新手訓練營分為四個產品(Wyn、SpreadJS、ActiveReportsJS和活字格),所以按照產品的分類設計四張表,表明也分別是產品名,欄位按照Excel中的欄位分別設定為姓名、期數和日期。
介面設計
在設計完表之後,小編開始設計系統的介面,如下圖所示,左側是按照四個產品實現導航欄,點選之後就會跳轉到相應的右邊的詳細介面。在詳細介面中,中間部分的表格用來顯示訓練營的學員資訊資料,表格的最左側是選中行,在表格的上方有四個按鈕,分別是查詢、新增、刪除和匯入Excel四個按鈕。在表格的下方是匯出結業證書和匯出優秀學員兩個按鈕。這兩個按鈕是用來分別匯出選中行對應的證書,最下面是分頁欄,當表中的資訊過多時可以分頁顯示。
功能設計
匯入Excel:將新手訓練營的證書發放人員資訊Excel表中的資料匯入到系統中。
批次證書列印:可以指定任意的資料進行批次列印PDF證書,並儲存在壓縮包(壓縮包名稱為期數名稱)中從瀏覽器上下載下來。
新增/查詢/修改/刪除資料:除了用Excel匯入檔案資料之外,還可以直接在系統中手動新增和修改資料,並批次刪除選中的資料。除此之外,當表中的資料過多時,還可以根據姓名和期數進行模糊查詢。
分頁:規定每頁顯示的資料條數,超過後自動分頁。
具體實現過程
下面小編將為大家介紹一下如何使用我司的低程式碼產品活字格實現,分為前端頁面和後端邏輯兩部分。
前端頁面:
在介面設計章節中,小編已經設計好了整個系統的大致前端介面關係,接下來只需要實現即可。和傳統程式碼開發不同的是,活字格在前端的設計是完全視覺化的,和Excel類似,使用者只需要在活字格設計器中拖拽設計即可。
1)導航欄設計
首先設計頁面中的導航欄,它用於幫助使用者快速導航和瀏覽系統的不同功能和頁面,相當於是整個系統中的”地圖“。
下圖是活字格設計中的導航欄設定頁面,左側的一級選單中,分別包含四個二級選單欄分別對應四個產品資訊。
導航欄跳轉:雙擊【一級選單】->選擇任意一個產品->點選【編輯命令】。
頁面跳轉命令:選擇【編輯命令】後跳轉到該介面,選擇【新建命令】->【頁面跳轉】並選擇要跳轉到的頁面,四個二級選單的操作方式均一樣(由於此時還沒有建立跳轉到的頁面,所以選擇頁面這一步可以空著,等後面頁面建立完之後再回來選擇)。
2)詳細頁面設計
設計完導航頁面之後,接下來就是設計跳轉之後的詳細介面。以Wyn新手訓練營證書為例,在已經設計好的Wyn表中右鍵選擇【從錶快速生成頁面】,就會自動生成下面兩個頁面,第一個頁面是顯示介面,第二個頁面是詳細介面,然後按照介面設計中的模板將剩餘的按鈕(查詢、刪除、匯入Excel、匯出結業證書和匯出優秀學員)和分頁補全即可,其他三個產品的操作方式和Wyn一樣,在此不做過多贅述。
後端邏輯:
設計完前端頁面後,小編現在按照功能設計模組中的需求一步一步實現具體每個小功能:
1)匯入Excel
首先實現匯入Excel這一功能,下圖是從新手訓練營系統中匯出的一份獲得優秀學員和結業證書的名單模板,需要將這份Excel中的資料匯入到系統中。(1和0分別代表獲得和未獲得)
下面是使用活字格實現匯入Excel邏輯的全過程:
(1)選擇前端頁面設計的【匯入Excel】按鈕並選擇【編輯命令】。
(2)在命令視窗中選擇【新建命令】,然後選擇【匯入Excel資料到表格】命令,表格名選擇對應的資料庫表,匯入模式選擇追加(追加:只追加資料;合併:追加新增資料,更新已有資料,不刪除已有資料;替換:追加新增資料,更新和刪除已有資料),匯入到Excel的工作表名選擇對應的Excel中的sheet列名,跳過行數選擇匯入Excel按鈕後面的文字框,表格中的列選擇頁面中對應的列即可。
2)查詢/新增/修改/刪除
1.查詢:選擇【查詢】按鈕中的【編輯命令】-\>【查詢】命令,欄位選擇頁面中的欄位,值選擇查詢按鈕前的查詢框。
2.新增資料:選擇【新增資料按鈕】-\>【資料庫操作】-\>【新增】,欄位選擇頁面中的欄位,值選擇欄位對應的單元格。
3.修改資料:在顯示介面中開啟【更改】的編輯命令,選擇【頁面跳轉】,跳轉頁面選擇詳情介面,目標單元格選擇詳情頁面中的更新按鈕。
在詳情頁面的單元格中,開啟命令視窗,並判斷傳值,如果傳過來的是【更改】資訊則更新資料,如果傳來的是【新增】則為新增資料。
4.刪除資料:開啟【刪除】按鈕的編輯命令,選擇【資料表操作】-\>【刪除】,操作記錄選擇選擇行。
3)批次證書列印
相較於前面幾個命令,批次列印證書的命令操作方式比較複雜,需要用到服務端命令,為了讓大家更好地理解,在設計前小編先給大家簡單的介紹一下列印邏輯:
首先是根據表格中的選擇行(引數為姓名、期數和日期)迴圈批次生成所有的PDF檔案,並按照訓練營期數分到不同的資料夾裡面。然後第二步是將迴圈一中所有的期數資料夾壓縮為zip檔案(檔名為期數),這裡需要注意的是需要將期數進行去重,因為一期裡面有很多人,如果不去重,會生成很多重複的期數zip檔案。第三步是將迴圈二中生成的所有zip檔案刪除掉,原因是如果不刪除,再次生成和下載相同的期數zip檔案時會報”檔名重複“的報錯。
邏輯理清楚後,緊接著小編開始用活字格實現:
(1)建立一個服務端命令,引數選擇對應表中的欄位(ID,姓名和期數)
(2)緊接著是編輯對應的命令邏輯,第一個迴圈是列印所有的PDF檔案,報表選擇Wyn的結業證書,檔案路徑使用引數拼接,報表引數傳遞為表id,原因是id是唯一的,不會重複。
報表頁面:期數、姓名和日期用引數替代,引數資料來源選擇表id,查詢條件為id,列印時會將對應id的姓名、期數和日期填充到報表中。
(3)第一步迴圈中將所有PDF列印出來後,第二個迴圈是按照期數將資料夾壓縮為zip包,然後將zip包從瀏覽器中下載下來(注意需要去對期數去重)
(3)第三步迴圈中將第二步所生成的zip檔案刪掉,需要注意的是迴圈陣列仍然是以去重的期數為變數。
(4)最後一步是將服務端命令放到匯出結業證書按鈕的命令中,具體操作如下圖所示:
4)分頁
選擇分頁元件,在單元格設定中編輯和修改分頁行數。
以上是以Wyn新手訓練營為例的服務端功能命令操作,其餘頁面的服務端命令和Wyn操作方法一致,在這不做過多贅述。
釋出
等到所有的頁面都設計完成之後,需要將系統釋出到雲伺服器上,可以使用阿里雲、騰訊雲等伺服器,也可以使用活字格雲伺服器,小編以活字格雲伺服器為例,介紹如何將系統釋出到雲上:
選擇【釋出】-\>【伺服器】-\>【管理釋出設定】-\>【新建】,填寫使用者名稱和密碼之後選擇【下一步】,然後選擇【釋出】即可。
最後附上完整檔案工程的Gitee地址:
https://gitee.com/GrapeCity/batch-certificate-printing
拉取方式:
系統的價值:在使用了這個系統之後,製作證書的時間由以前的2小時縮短到現在的5分鐘,大大提升了正式製作的工作效率。使用者在參加完訓練營後,也能更快拿到製作好的證書啦。
總結
以上就是新手訓練營實現一個批次列印PDF的全過程,如果您想了解更多有關於活字格的資訊,歡迎點選這裡檢視。
擴充套件連結: