[通用]手寫簽名插件

一、概述

1. 10.4.976 版本新增手寫簽名元件，支援在行動裝置上的app和H5頁面上進行手寫簽名操作

2. 簽名完成將生成 PNG 格式圖片，可提交至資料庫或上傳伺服器。

3. 手寫簽名元件支援在決策報表中的任意容器內使用。

4. 手寫簽名支援橫屏下操作、清除重寫以及放大查看。

5. 插件安裝方式，可參考A11-18伺服器-插件管理。

二、屬性設定

1

點選【檔案】→【新增決策報表】，將【手寫簽名】元件拖入畫布。

2

基本-元件名。

1. 可以為畫布中的手寫簽名元件設定元件名。

2. 元件名預設為signature0，也可手動輸入任意名稱。

3. 擁有名稱後，可以通過JavaScript獲取元件，從而修改元件屬性，後續設定簽名提交有需要。

3

基本-可用。

1. 勾選可用時，正常顯示。

2. 不勾選可用時，顏色會被淡化掉。

4

基本-可見。

1. 勾選可見時，可看得到元件。

2. 勾選不可見時，元件會被隱藏起來不顯示。

5

校驗-允許為空。

1. 勾選允許為空時，表示元件可以為空顯示。

2. 不勾選允許為空時，則會多一項錯誤提示，可輸入提示內容。

3. 預覽時當元件為空時，沒輸入任何值，提交則會彈出錯誤提示。

6

組件大小。

1. 當 body 佈局方式設定為絕對佈局時，可自訂組件大小。

三、範例

1

在手寫簽名元件下方再拖入一個按鈕元件，設定按鈕名字為【提交】。

2

設定提交入庫事件。

1. 選中按鈕元件，點擊【事件】→【+】，新增一個【點擊後】事件。

2. 設定事件類型為【提交入庫】，選擇用於儲存簽名的資料庫和表。

3. 點擊【智慧新增欄位】，自動新增欄位【簽名】。

4. 給【簽名】欄位綁定值，切換到公式，輸入$signature0，獲取手寫簽名元件的值。

3

設定回調函式。

1. 點擊【設定回調函式】，輸入如下語句，用於查看元件提交是否成功。

2. 確定後預覽效果。

3. if (fr_submitinfo.success) {

4. FR.Msg.toast('提交成功');

5. } else {

6. FR.Msg.toast('提交失敗');

7. }

4

簽名檔案上傳。

1. 搭配上傳下載檔案插件後，可將簽名檔案上傳至伺服器或FTP。

2. 將事件修改為【檔案上傳】，即可設定上傳方式，設定方式可參考 上傳下載檔案。

3. 上傳下載檔案插件安裝方式，可參考A11-18伺服器-插件管理。