01 需求簡介

最近從沒有接觸過Finereport（以下簡稱帆軟）的我收到了老板安排的新任務(wù)：用Finereport制作各區(qū)域現(xiàn)階段KPI填報(bào)報(bào)表，填報(bào)完成后需要在前臺頁面中展示所有區(qū)域的KPI，本填報(bào)報(bào)表的目的是可以讓老板快速了解各區(qū)域的KPI和相應(yīng)完成情況。老板希望各區(qū)域名稱按行展示，各KPI按列展示，并可以靈活刪減，同時(shí)具備搜索功能，以及展示KPI編輯人的功能也必不可少。

對于從未接觸過帆軟報(bào)表的我，這個(gè)需求聽起來不難，但是在制作過程中由于我熟練度欠缺，遇到了各種坑，下面我將分享避坑指南。

02 報(bào)表構(gòu)思

基于以上需求，可以先用excel構(gòu)思報(bào)表樣式，然后再構(gòu)思數(shù)據(jù)庫中表的設(shè)計(jì)，便于在帆軟中進(jìn)行開發(fā)，我的報(bào)表可以展示成以下形式。

根據(jù)excel中設(shè)計(jì)的表格樣式，在數(shù)據(jù)庫中建表并設(shè)計(jì)主鍵，針對本案例需要把KPI和編輯人設(shè)計(jì)成聯(lián)合主鍵，有兩點(diǎn)原因：

1. KPI列需要橫向擴(kuò)展，由于帆軟軟件要求，這一列需要設(shè)置成主鍵（橫向擴(kuò)展：隨著業(yè)務(wù)的開展未來會(huì)有很多列來記錄KPI，這些列橫向排列）；
2. 為防止多人填報(bào)時(shí)內(nèi)容被覆蓋，需要把編輯人也設(shè)置為主鍵（后文會(huì)詳細(xì)解釋）。雖然把KPI設(shè)置成為主鍵，但從業(yè)務(wù)角度而言，是完全可以重復(fù)的，但是編輯人不會(huì)重復(fù)的，因?yàn)閱T工的ID是不能重復(fù)的，因此把KPI 員工ID設(shè)置成聯(lián)合主鍵，來確保該員工填寫KPI的唯一性。

03 報(bào)表開發(fā)

構(gòu)思好報(bào)表樣式后就可以在帆軟中進(jìn)行開發(fā)了，搭建好的報(bào)表如圖一所示。

圖一

帆軟默認(rèn)數(shù)據(jù)設(shè)置為分組，但是，對于我們設(shè)置橫向擴(kuò)展的填報(bào)報(bào)表是不可以的，所以要把數(shù)據(jù)設(shè)置為列表，如果有很多行，怕麻煩，最起碼也要把橫向擴(kuò)展的主鍵設(shè)置成列表，讓它“帶動(dòng)”著其他行一起擴(kuò)展。修改好后，原來表格中的.G就會(huì)變成.S(見圖二)，接下來。要在單元格屬性中把KPI列的擴(kuò)展方向設(shè)置為橫向。

圖二

接下來，可以為需要填報(bào)的內(nèi)容設(shè)置控件，例如設(shè)置下拉框控件，有是，否，部分，待定四個(gè)選項(xiàng)，用來反映某城市或省份是否有這個(gè)KPI, 僅部分網(wǎng)點(diǎn)有這個(gè)KPI，不清楚是否有這個(gè)KPI這些情況。并通過數(shù)據(jù)字典記錄，具體操作請參考圖三。

圖三

如果在數(shù)據(jù)報(bào)表中已經(jīng)有了相關(guān)選項(xiàng)的收錄，可以直接使用數(shù)據(jù)報(bào)表和數(shù)據(jù)查詢得到選項(xiàng)。設(shè)計(jì)好填報(bào)表格，添加填報(bào)控件之后，需要將填報(bào)數(shù)據(jù)的單元格與數(shù)據(jù)庫表字段進(jìn)行綁定，確保填報(bào)的數(shù)據(jù)可以錄入到對應(yīng)的數(shù)據(jù)庫表字段下。

設(shè)計(jì)器菜單欄點(diǎn)擊模板>報(bào)表填報(bào)屬性，設(shè)置界面默認(rèn)選擇提交，點(diǎn)擊 ，選擇內(nèi)置SQL即可。選擇提交類型即選擇數(shù)據(jù)入庫的方式，共有 4 種方式可供選擇，我一般選擇智能提交，然后選擇數(shù)據(jù)庫和表是為了獲取數(shù)據(jù)庫表字段，用于后面綁定填報(bào)單元格。隨后添加字段，有 2 種方式：智能添加字段和添加字段。

• 智能添加字段：當(dāng)需要添加的字段較多時(shí)，可以使用這種批量操作的方式，點(diǎn)擊按鈕后，默認(rèn)選中表中全部字段，將不需要綁定的字段去掉勾選即可。
• 添加字段：當(dāng)需要添加的字段很少時(shí)，可以用這種手動(dòng)一個(gè)一個(gè)添加的方式。

點(diǎn)擊智能添加單元格，將填報(bào)單元格跟數(shù)據(jù)庫表字段進(jìn)行綁定，操作方式為手動(dòng)選取填報(bào)單元格，同時(shí)還需要設(shè)置主鍵。主鍵用于確認(rèn)需要根據(jù)哪個(gè)或者哪幾個(gè)字段來進(jìn)行更新和刪除操作，相當(dāng)于 SQL 中 where 的效果，和數(shù)據(jù)庫的主鍵不是一個(gè)概念。如果涉及到修改或刪除需求，那么必須勾選一個(gè)或多個(gè)主鍵。

04 報(bào)表功能設(shè)置

至此報(bào)表基本可以滿足記錄內(nèi)容的需求，但達(dá)到讓用戶順利使用的效果，還遠(yuǎn)遠(yuǎn)不夠，下面我將為大家分享可以優(yōu)化的部分。

1 篩選功能

隨著業(yè)務(wù)的開展未來將有許多KPI，為了快速檢索出用戶想得到的KPI，篩選功能不可缺少，以下步驟將介紹如何新建參數(shù)，添加篩選。步驟如圖四：

1. 新建數(shù)據(jù)集
2. 填寫查詢語句（見下文）
3. 點(diǎn)擊“筆”圖表，調(diào)出參數(shù)面板，顯示創(chuàng)建好的參數(shù)，并點(diǎn)擊參數(shù)
4. 根據(jù)業(yè)務(wù)需求，選擇合適的控件。本文以下拉復(fù)選框控件為例

圖四

查詢語句代碼如下：

SELECT * FROM `fine_test`where 1=1${IF(LEN(KPI) = 0,""," AND [KPI] IN ('" KPI "')")}

SELECT * FROM `fine_test`

where 1=1

${IF(LEN(KPI) = 0,""," AND [KPI] IN ('" KPI "')")}

標(biāo)黃部分需要根據(jù)自己的實(shí)際情況更換表名和字段名。

做好這一步之后，下一步在數(shù)據(jù)字典中添加需要篩選的列，簡單來說就是distinct要篩選的列，并存入數(shù)據(jù)字典中，同時(shí)設(shè)置分隔符，操作步驟如圖五所示：

圖五

總結(jié)來說就是新建數(shù)據(jù)集用于存放篩選列的值，然后在數(shù)據(jù)字典中選擇剛剛新建的數(shù)據(jù)集。設(shè)置數(shù)據(jù)字典這一步很重要，如果不設(shè)置的話，會(huì)出來篩選列表為空的現(xiàn)象。

友情提示：點(diǎn)擊控件才能出現(xiàn)控件設(shè)置的相應(yīng)內(nèi)容。

至此，篩選功能已設(shè)置完成，下一步是添加/刪除列設(shè)置，對于第一次接觸的我是有一定難度的。

2 添加/刪除列設(shè)置

目前，設(shè)置好的報(bào)表如圖六所示，需要新增的功能是在報(bào)表上方增加添加/刪除列按鈕，具體操作為（圖七）：

1. 在報(bào)表上方增加添加/刪除列按鈕控件
2. 指定單元格：指定的單元格必須是需要橫向擴(kuò)展的單元格
3. 在單元格屬性中修改上父格，上父格設(shè)計(jì)思路可以“簡單粗暴”的理解為，需要跟隨哪個(gè)單元格進(jìn)行擴(kuò)展，以本文為例，E4需要橫向擴(kuò)展，所以不管是按鈕控件的指定單元格還是單元格屬性中的上父格，都應(yīng)設(shè)置為E4。
4. 防止填報(bào)第一列數(shù)據(jù)被刪除：存在插入刪除列按鈕的模板，如果只剩一列數(shù)據(jù)時(shí)點(diǎn)擊了刪除列，那后續(xù)就無法再新增列了，因?yàn)轫撁嫔蠜]有插入列按鈕了，這將對用戶非常不友好。那么如何實(shí)現(xiàn)第一列數(shù)據(jù)禁用刪除行按鈕呢？
5. 給E2單元格的刪除行按鈕設(shè)置控件名稱為sc，并設(shè)置為不可用。
6. 點(diǎn)擊模板>模板 Web 屬性>填報(bào)頁面設(shè)置，選擇「為該模板單獨(dú)設(shè)置」，增加一個(gè)「加載結(jié)束」事件

JavaScript代碼如下

var arr = ['sc'];//定義需要執(zhí)行事件的刪除行按鈕名稱數(shù)組，如有多組則寫法為['sc1','sc2']for (i = 0; i < arr.length; i ) { var kj = $('[widgetname="' arr[i].toUpperCase() '"]:visible'); //獲取頁面上可見的刪除行按鈕元素 var sc = _g().getWidgetsByName(arr[i].toUpperCase()); //根據(jù)名字獲取刪除行按鈕 for (j = 0; j < sc.length; j ) { kj.length <= 1 ? sc[j].setEnable(false) : sc[j].setEnable(true); //當(dāng)控件只剩1個(gè)時(shí)，禁用控件，否則遍歷啟用所有控件 }}

圖六

圖七

3 多人填報(bào)時(shí)如何防止內(nèi)容覆蓋

在多人同時(shí)填報(bào)一個(gè)模板的時(shí)候，可能會(huì)出現(xiàn)后填報(bào)的內(nèi)容覆蓋掉先填報(bào)的內(nèi)容的問題。會(huì)出現(xiàn)覆蓋問題的原因，是因?yàn)橹麈I沒有根據(jù)用戶區(qū)分，所以不同人提交的時(shí)候，可能出現(xiàn)主鍵一致的現(xiàn)象。根據(jù)提交邏輯，主鍵一致會(huì)執(zhí)行更新操作，這就造成了上述問題。解決方案就是增加一個(gè)可以區(qū)分用戶的主鍵，這就是我在最開始設(shè)置時(shí)會(huì)把編輯人也設(shè)置成主鍵的原因。

具體做法是將填報(bào)人字段的值設(shè)置為公式：$fine_username，這樣提交時(shí)會(huì)將填報(bào)者的用戶名填寫到數(shù)據(jù)庫填報(bào)人這個(gè)字段中去。

注：$fine_username需要登錄后才能正常獲取當(dāng)前的用戶名。

4 凍結(jié)設(shè)置

填報(bào)預(yù)覽時(shí)，如果列數(shù)和行數(shù)較多，拖動(dòng)滾動(dòng)條查看數(shù)據(jù)時(shí)，希望標(biāo)題行或者某些部分可以固定不動(dòng)，菜單欄點(diǎn)擊模板>重復(fù)與凍結(jié)設(shè)置，即可進(jìn)入設(shè)置界面，如圖八所示：

圖八

注1：凍結(jié)必須從首行或者首列開始設(shè)置，不支持從中間設(shè)置凍結(jié)，不支持單獨(dú)凍結(jié)尾行和尾列。

注2：當(dāng)凍結(jié)的行包括可擴(kuò)展的動(dòng)態(tài)數(shù)據(jù)時(shí)，擴(kuò)展出來的數(shù)據(jù)全部凍結(jié)。

注3：凍結(jié)的行列有合并單元格時(shí)，需要凍結(jié)合并單元格的全部行列。

05 總結(jié)

本文為大家分享了帆軟填報(bào)功能的常規(guī)步驟，從創(chuàng)建數(shù)據(jù)庫到報(bào)表搭建，再到功能設(shè)置，可以基本滿足業(yè)務(wù)需要。由于作者能力所限，還有很多需要改進(jìn)的地方，歡迎指正。