業務背景：
專案上有一個價格庫的概念，對應於某個地區的某個時間段。即：在某年的某個季度或者月份，專案公司會對各個地區建立該地區的人工、材料、機械的價格庫。
呈現檢視如下：

資料庫設計

對於上面的業務，由於地區和價格期數是作為字典維護的，有獨立的前端模組進行維護，所以需要獨立建表。
同時，出於效率方面的考慮，未採用物理外來鍵，使用了邏輯外來鍵，由程式全權保證業務邏輯的正確性和完整性。
最終的表結構如下圖所示：

後臺介面

專案採用前後端分離的結構，後臺提供CRUD介面，前臺進行邏輯呈現。後端採用SpringBoot構建微服務體系，前臺為使用vue框架的SPA應用。
後臺提供Restful API介面，並通過Swagger提供前端開發人員進行查詢和聯調的介面文件介面及聯調工具。

地區介面

價格期數介面

價格庫介面

價格庫中，除了基礎的增刪改查介面之外，還有帶字典獲取列表的介面（即一個請求同時獲取到價格庫及地區字典、價格期數字典）；另外，還有按照價格期數執行使能切換的介面。

前端呈現實現

前端呈現的一個複雜之處在於：
1. 將原本的無層級記錄列表呈現為帶層級的邏輯檢視；
2. 一級記錄為從原本記錄中構造出來的交集；
3. 二級記錄需要與一級記錄構建層級關係；
4. 存在過濾狀態（即按照關鍵字進行過濾的狀態）；

為此，作如下的處理：
1 三級請求獲取資料（鑑於帶字典請求資料的介面與目前的前端公共介面不相容，因此暫時採用三級序列請求的方式）：

function(currentItemId) {
        var vueObj = this;
        // 一級請求，請求價格期數資料
        periodModel().getTableDatas(function(items) {
          vueObj.periods = items;
          items.forEach(function(item) {
            vueObj.periodMap[item.id] = item.description;
          });
          // 二級請求，請求地區資料
 

          regionModel().getTableDatas(function(items) {
            vueObj.regions = items;
            items.forEach(function(item) {
              vueObj.regionMap[item.id] = item.description;
            });
            // 三級請求，請求價格庫資料
            resPriceDBModel().getTableDatas(function(items) {
              vueObj.moving = false;
              vueObj.doFormatDisplayData(items);
              // 資料獲取完成並進行修飾構造後，通過handsonTable進行呈現
              vueObj.$refs.table.$emit('show-grid', vueObj.tableData(), vueObj.fieldList, vueObj.getEditStyle, true, vueObj.getAlignment, 'all');
              vueObj.setCurrentRow(currentItemId);
            }, function(errMsg) {
              vueObj.moving = false;
              vueObj.$message({message: errMsg, type: 'error'});
            });
          }, function(errMsg) {
            vueObj.moving = false;
            vueObj.$message({message: errMsg, type: 'error'});
          });
        }, function(errMsg) {
          vueObj.moving = false;
          vueObj.$message({message: errMsg, type: 'error'});
        });
      }

2 其中，最關鍵的方式是doFormatDisplayData，該方法構造出最終呈現的資料檢視；
演算法邏輯為：
① 遍歷獲取到的價格庫記錄陣列，按照需要填充前臺呈現所需資料（採用陣列的map方法）；
② 如果處於過濾狀態，則對構造後的陣列執行過濾處理（採用陣列的filter方法）；
③ 對於構造後的陣列執行排序（按照價格期數排序，採用陣列的sort方法）；
④ 通過構造後的陣列，提取出一級記錄的map（採用陣列的reduce方法）；
⑤ 將構造後的資料填充到handsonTable呈現對應的陣列物件，對於一級記錄直接壓入（採用陣列的push方法）；
⑥ 對於二級記錄，則將原資料陣列進行slice處理提取出一級記錄對應的子記錄，然後呼叫forEach方法將各記錄壓入陣列（採用陣列的slice及forEach方法）。

function(items) {
        var vueObj = this;
        var keyword = vueObj.keyword;
        var datas = [];
        if (vueObj.inSearch) {
          datas = items.map(vueObj.makeupResPriceDB).filter(function(item) {
            return (item.period && item.period.indexOf(keyword) >= 0) ||
            (item.region && item.region.indexOf(keyword) >= 0) ||
            (item.auditor && item.auditor.indexOf(keyword) >= 0);
          }).sort(vueObj.doCompareResPriceDB);
        } else {
          datas = items.map(vueObj.makeupResPriceDB).sort(vueObj.doCompareResPriceDB);
        }
        var periodMap = datas.reduce(function (prevResult, currItem) {
          if (prevResult.has(currItem.period_id)) {
            prevResult.get(currItem.period_id).childCount += 1;
          } else {
            var periodObj = vueObj.makeupParentPeriodRec(currItem.period_id, currItem.enabled);
            prevResult.set(currItem.period_id, periodObj);
          }
          return prevResult;
        }, new Map());
        dataStore[vueObj._uid].tableData = [];
        var startIndex = 0;
        for (var value of periodMap.values()) {
          dataStore[vueObj._uid].tableData.push(value);
          datas.slice(startIndex, startIndex + value.childCount).forEach(function(data) {
            dataStore[vueObj._uid].tableData.push(data);
          });
          startIndex += value.childCount;
        }
      }

如上可知，該部分檢視的構造邏輯還是有一些複雜的，其中綜合運用了陣列的各個方法，也算是對於JS陣列的一次學習應用了。

JS陣列方法總結

XMind總結陣列方法，如下三張圖：