JS實現填報校驗後傳回錯誤資訊

1.1 問題描述

填報報表，透過 內建校驗 可以設定校驗規則，校驗成功就提交入庫，校驗不成功則提示錯誤資訊，錯誤資訊彈窗位置固定在左上角。

如果使用者不想使用 FineReport 內建左上角的校驗提示，希望能夠以彈出框的形式提示錯誤資訊，如下圖所示，並且根據錯誤資訊決定下一步的操作，該如何實現呢？

1.2 實現思路

範本新增「內建校驗」後，在「範本 Web 屬性>填報頁面設定」中，重新整理增一個「校驗後」事件，事件內容為根據校驗結果執行相關彈窗操作。

1.3 API介紹

校驗後事件會傳回參數 fr_verifyinfo，此參數包含校驗傳回的資訊，為一個物件，該物件包含兩個屬性：

fr_verifyinfo.success：傳回 true/false， true 表示校驗成功，false 表示校驗失敗；

fr_verifyinfo.info：傳回具體的錯誤提示資訊，為一個陣列物件，比如傳回A12 儲存格、B13 儲存格的錯誤，分別存為陣列點的一個元素。

校驗不透過，可以傳回單個彈窗提示，也可以傳回多個彈窗提示，這取決於「校驗後」事件中的 JS ，以下給出單個彈窗和多個彈窗的範例。

2.1 傳回單個彈窗

1）準備範本，設計報表樣式，其中 A3-F3 儲存格中都新增「正文元件」，如下圖所示：

2）點選「範本>報表填報屬性>資料校驗」，新增「內建校驗」規則，如下圖所示：

校驗規則：當 D3 儲存格值小於等於0的時候，提示錯誤資訊“0”；大於等於 1000 的時候，提示錯誤資訊“1”。

3）點選「範本>範本 Web 屬性>填報頁面設定」，選擇「為該範本單獨設定」，新增「校驗後」事件，如下圖所示：

JavaScript 程式碼如下：

if (fr_verifyinfo.success) {
	alert("校驗成功");
	return false;
} else {
	if (fr_verifyinfo.info == "D3:0") {
		alert("成本價小於0！！！");
		location.reload();
		return false;
	} else {
		FR.Msg.confirm("警告", "成本價大於1000，確認要提交嗎？", function(result) {
			if (result) {
				_g().writeReport();
				//強制提交
				location.reload();
				//重新整理頁面
			}
		})
		return false;
	}
}

4）儲存範本後，點選「填報預覽」，效果如下圖所示：

注：不支援行動端。

2.2 傳回多個彈窗

1）點選「範本>報表填報屬性>資料校驗」，修改內建校驗規則，如下圖所示：

校驗規則：當 D3 儲存格值小於等於 0 的時候，提示錯誤資訊“0”; E3 儲存格值小於 0 的時候，就提示錯誤資訊“1”。

2）點選「範本>範本 Web 屬性>填報頁面設定」，修改「校驗後」事件，如下圖所示：

JavaScript 程式碼如下：

if (fr_verifyinfo.success) {
	alert("校驗成功");
	return false;
	//不再觸發原來的校驗成功提示
} else {
	for (var i = 0; i < fr_verifyinfo.info.length; i++) {
		if (fr_verifyinfo.info[i] == "D3:0") {
			alert("D3儲存格校驗出錯");
		} else if (fr_verifyinfo.info[i] == "E3:1") {
			alert("E3儲存格校驗出錯");
		}
	}
	return false;
	//不再觸發原來的校驗失敗提示
}

3）儲存後，點選「填報預覽」，效果如下圖所示：

銷售成本、其他支出輸入小於 0 的值

按確定後彈出提示 E3 儲存格校驗出錯。

注：不支援行動端。

1）傳回單個彈窗

點選下載範本：56-JS實現填報校驗後傳回錯誤資訊範例一.cpt

2）傳回多個彈窗

點選下載範本：56-JS實現填報校驗後傳回錯誤資訊範例二.cpt