[通用]手寫簽章插件

1.1 版本

1.2 應用場景

庫存巡檢、銀行、保險公司等場景下會有網籤需求，需要手寫簽章。

手寫簽章插件支援手寫簽章，並支援將生成的 PNG 格式簽章圖片提交至資料庫或上傳到指定的磁碟路徑下。

注1：該插件只支援決策報表。

注2：在範本中使用手寫簽章插件時，必須確定使用者已登入FineReport數據決策系統，否則將出現報錯。

2.1 插件安裝

插件下載請點選：手寫簽名

設計器插件安裝方法參見：設計器插件管理

伺服器安裝插件方法參見：伺服器插件管理

2.2 功能入口

插件安裝後，決策報表的元件管理面板新增「手寫簽章」插件，可拖入 body 中使用，如下圖所示：

2.3 功能簡介

2.3.1 屬性

選中右側的「signature0」，點選「屬性」，如下圖所示：

各設定項及說明如下表所示：

2.3.2 行動端

選中右側的「signature0」，點選「行動端」，行動端面板的設定項與 body 是否勾選「手機重佈局」有關，如下圖所示：

各設定項及說明如下表所示：

3.1 建立範本

1）點選菜單欄「檔案>建立其他範本>建立決策報表」，點選「建立空白範本」，點選「確定」，如下圖所示：

2）將上方的按鈕元件和手寫簽章元件拖曳到 body 中，如下圖所示：

3）選中右側的「button0」，點選「屬性」，按鈕名稱設定為「提交」，如下圖所示：

3.2 建立表

在 FRDemo 中建立表「手寫簽章」，資料類型設定為「BLOB」類型，如下圖所示：

3.3 設定提交入庫

1）選中右側的「button0」，點選「事件」，點選「+」按鈕新增「點選」事件。

2）選擇「提交入庫」，資料庫選擇「FRDemo」，表選擇「手寫簽章」，點選「智慧新增欄位」。

3）新增「手寫簽章」列，值選擇公式，為 $signature0 ，$ 表示獲取值，signature0 為手寫簽章元件名，如下圖所示：

注：新增值的方式，只能透過公式來綁定元件，不能透過下圖元件的方式，元件方式識別不出手寫簽章插件。

3.4 設定回呼函式

使用按鈕設定提交入庫時，預設沒有成功和失敗提示。故需設定回呼函式，提示使用者填報成功與否，如下圖所示：

JavaScript 程式碼如下：

注：success 只表示後台程式執行沒有異常，最終入庫結果會受到設定的影響，可能和預期的不一致。

if (fr_submitinfo.success) {
	FR.Msg.toast('提交成功');
} else {
	FR.Msg.toast('提交失敗，錯誤資訊為：' + fr_submitinfo.failinfo);
}

3.5 效果預覽

行動端預覽，以 App 為例，點選「新增簽章」，在編輯區手寫簽章後，點選「確定」，再點選「提交」，生成的簽章圖片即可入庫，如下圖所示：

簽章圖片以 base64 編碼的形式儲存到資料庫表欄位下，如下圖所示：

注：上傳下載檔案插件的使用，詳情參見：上傳下載檔案插件 。

4.1 建立範本

同 3.1 節。

4.2 設定檔案上傳

1）選中右側的「button0」，點選「事件」，點選「+」按鈕新增「點選」事件。

2）選擇「檔案上傳」，選擇類型為「上傳至伺服器」。

3）磁碟路徑、檔案、檔案名稱請參照下圖的寫法，如下圖所示：

注1：磁碟路徑為檔案儲存位置，請勿丟棄雙引號。

注2：檔案透過公式綁定手寫簽章元件，$ 表示獲取值，signature0 為手寫簽章元件名。

注3：檔案名稱支援自訂或者使用公式生成檔案名稱，支援為空。檔案名稱自訂時，請勿丟棄雙引號。

4.3 效果預覽

行動端預覽，以 App 為例，點選「新增簽章」，在編輯區手寫簽章後，點選「確定」，再點選「提交」，生成的簽章圖片即可上傳至設定的磁碟路徑，如下圖所示：

簽章圖片上傳至設定的磁碟路徑下，如下圖所示：