一款好的産品需要不斷地打磨才能變得更完整、更穩定。所以，MDM作為公司的核心産品，為了滿足更多的需求，更好的視覺效果和體驗感，從上線以來一直都在不斷地完善叠代。

本次升級主要是針對整體頁面進行優化以及對部分功能進行修複和調整。升級之後不僅在頁面布局上看起來更舒适，而且功能方面也更加完善。同時，這也是我正式開始做代碼開發相關的工作，在下面的内容中我将詳細介紹本次升級的内容和過程以及我的一些心得體會。

本篇文檔主要是圍繞着本次頁面升級的最終效果以及實現過程來展開的，所以這部分内容占的篇幅也比較長，其次會簡單介紹MDM相關的産品信息，最後就是問題總結和個人總結。

1.産品體系

目前數通暢聯擁有UMC雲管理平台、DP應用開發平台、IDM身份管理平台、MDM基礎數據平台、BPM流程集成平台、ESB企業服務總線和Portal門戶等多款核心産品。産品之間相互組合，形成多套解決方案。比較典型的解決方案有ESB結合MDM的統一應用集成方案，ESB結合IDM的統一身份管理方案，ESB結合MDM和DAP的數據治理分析方案等，還有很多其它優秀的解決方案，通過這些解決方案來滿足不同客戶的不同需求。本篇文檔将詳細介紹MDM産品在本次UI升級後的頁面樣式以及功能的調整。

2.産品介紹

随着企業業務迅速發展，需要支撐業務運轉的信息系統越來越多，各系統之間數據分散、重複，未完全形成業務閉環，數據孤立不能互通，數據統計不一緻，企業主數據（組織、人員、項目、客戶、供應商、産品等）不能共享，如何對數據進行治理已經成為困擾企業的一大問題。基于此問題，主數據管理系統應運而生。

在數通暢聯的産品家族中主數據平台命名為AEAI MDM，它可以幫助創建并維護整個企業内主數據的單一視圖，保證單一視圖的準确性、一緻性以及完整性，從而簡化數據清洗工作、提高數據質量、加快業務系統對接、業務流程再造速度，提高業務響應速度。

3.頁面升級

本次升級主要針對數據管理頁面和參考數據頁面，在按鈕樣式、表單格式和整體頁面的布局方面進行了優化，同時也修複了部分按鈕存在的bug，如點擊無反應或者點擊頁面空白等等問題，使各功能可以正常使用。接下來會具體演示本次的升級内容和過程。

該部分将以文字加圖片的形式來展示本次升級的最終效果，包括優化了哪些頁面，哪些按鈕，它們在樣式和布局上有怎樣的變化。

1.頁面升級

這次頁面升級引用了bootstrap這一前端框架來構建整個頁面的樣式和布局，主要體現在按鈕和表單方面，按鈕樣式用到bootstrap自帶的一些樣式，而表單用到了jqGrid表單控件，升級之後的頁面看起來更加簡潔、美觀。

< < < <數據管理頁面

在數據管理下主要是針對生成任務、分發啟用和分發禁用三個按鈕對應的頁面進行升級，由于升級的内容是一緻的，所以以下就通過生成任務這一頁面進行介紹。

首先，當選擇了某一條數據并點擊生成任務時，會彈出如下頁面：

在該頁面中間的位置有三個按鈕（原本有五個按鈕，其中快速選擇和定義群組已删除）添加應用、删除應用和清空應用。點擊添加應用進入到如下頁面：

在該頁面中，首先修改了選擇按鈕的樣式，原本的按鈕樣式是通過一張圖片添加上去的，而現在則使用bootstrap框架提供的按鈕圖标樣式。目前的樣式在外觀上看起來更簡潔了，其次在按鈕顔色和圖标的修改上也更容易了。

其次，在查詢條件框處加了淺藍色的背景讓整體看起來更美觀。由于上一層頁面中定義群組按鈕删掉了，所以在此頁面中又新增了按分組查詢的條件。

最後，在下面的表格中最右側新增一列用來顯示每條數據的分組信息。

< < < <參考數據頁面

在參考數據下，選中一條數據點擊編輯進入如下頁面：

在該頁面中，調整所有文本和輸入框在同一行顯示，文本後冒号去掉并且文本居右對齊。調整後的樣式如上圖所示：

2.功能調整

該部分内容将介紹對哪些按鈕功能進行了修複和修改。

< < < <數據管理頁面

生成任務頁面，由于快速添加和定義群組功能并入了添加應用頁面裡，所以删掉了這兩個按鈕，頁面隻剩下三個按鈕，如圖所示：

修複了分發啟用和分發禁用兩個按鈕點擊無法進入頁面的問題。

< < < <參考數據頁面

首先，表格數據由多選改為單選。

修複編輯按鈕點擊沒有反應的問題，修複後如圖：

修複複制按鈕點擊沒有反應的問題，修複後如圖：

添加刷新按鈕，用于操作之後重新加載數據，如圖所示：

新增、編輯、複制頁面保存數據之後添加提示信息“保存成功”，返回點擊刷新按鈕即可看到更新後的數據，如圖所示：

另外，頁面上的提示信息都改成jAlert彈窗形式，如圖所示：

該部分内容将以文字加代碼的形式來展示以上提到的效果的實現過程，包括樣式和布局的調整，以及按鈕bug的修複，在代碼層面是如何實現的。

1.樣式修改

本次頁面升級用到了bootstrap框架去設置頁面格式和樣式。按鈕樣式實現方式如下：

class裡定義按鈕的顔色和大小，span标簽裡的class定義按鈕的圖标，plus就是 的樣式。

查詢條件的藍色背景設置方法如下：

alert-info是淺藍色的關鍵字，Form-control可以對input标簽和select标簽的樣式進行設置。效果為：寬度100%、邊框為淺灰色、具有4px的圓角以及鼠标點擊時的陰影效果。

2.布局調整

在數據管理-生成任務-添加應用頁面中的條件查詢區域新增分組查詢。

表格部分新增一個分組列。

在參考數據的詳情編輯頁面裡，調整文本居右對齊，文本後冒号去掉，文本和文本框在一行顯示。

From-label可以設置文本右對齊。

3.按鈕修複

由于多個頁面都存在按鈕功能有問題的情況，所以接下來會按照不同頁面來分别介紹按鈕修複的過程。

< < < <數據管理頁面

修複選中數據點擊編輯按鈕不彈出編輯頁面的問題。編輯按鈕對應的js方法部分的代碼如圖所示：

問題主要是出在了js部分，修改了代碼。複制按鈕同理，除此之外，将信息提示全部換成了jAlert形式的彈窗。

分發啟用和分發禁用按鈕也遇到了同樣的問題，修改後的代碼如下:

出問題的地方在标紅的部分少寫了一個Box，啟用和禁用是一樣的問題。

< < < <參考數據

在參考數據頁面也同樣有按鈕功能無法使用問題，分别是編輯、複制和删除。

編輯和複制直接重寫了調用方法并且編輯參考了雙擊的方法，代碼如下:

然後複制按鈕的代碼部分，如圖所示：

删除按鈕的問題出在判斷傳入的參數是否為空的方法中，調整後的代碼如下：

除此之外，添加了一個刷新按鈕，用于編輯後重新獲取最新的數據。

該部分内容對本次頁面升級工作過程當中遇到的問題進行了總結，同時也整理相對應的解決問題的思路，作為參考希望能對之後的工作起到幫助。

1.問題整理

1.選中數據的情況下點擊按鈕沒有反應；

2.編輯好數據點擊保存按鈕，數據沒有保存上；

3.按鈕點擊直接報白。

2.解決思路

1.首先确定是否獲取到了值，如果沒獲取到，去找頁面是否有問題，如果獲取到了，去找Sql語句是否有錯誤；

2.Sql語句沒有錯誤的情況下，看看handler裡是否寫了對應的字段；

3.大概率是js方法出現了問題，可以找一下類似頁面的js方法作參考去修改。

該部分内容将從技術、态度和心得體會三個方面對這段時間對于MDM産品升級的工作進行總結。

1.關于技術

這段時間通過對MDM産品進行升級學到了很多新知識。比如：Bootstrap框架的樣式設置，jqGrid控件的使用，前後端debug的調試，代碼同步以及更新，這些新知識我相信會對之後的工作起到非常大的作用，尤其是代碼調試，同時也能提高自己分析問題和解決問題的能力。

2.關于态度

現階段對于我個人而言，我覺得最重要的就是細心，尤其是在代碼撰寫方面，要多注意一些細節，經常會有一些字段忘記寫或者寫錯，再就是會忘記部署文件，這些都是之後的工作中需要注意的。

3.心得體會

其實這段時間算是正式開始了代碼開發的工作，雖然大多數情況下都是在現有的基礎上進行修改和調用，但這段時間工作下來，我自己感覺我已經有了很大的進步。從剛開始很多代碼都看不懂到現在知道它們分别都是什麼意思以及有什麼作用，後面用到的時候我知道調用，這部分是我收獲最多的，也讓我在開發效率不斷提高。

除了這些比較明顯的進步之外，代碼整體邏輯性的理解和分析能力也有所提高，之前一遇到報錯的時候基本是比較目盲狀态，現在遇到問題可以冷靜下來自己分析了，而且有的時候自己也能夠解決一些不太複雜的問題，我覺得這些都是對于代碼邏輯的理解能力提高了之後的新收獲。但是還要不斷提高自己，多去看一些底層代碼，看不懂的要多去請教，讓自己對代碼的理解方面可以更加深入。

本文由@數通暢聯原創，歡迎轉發，僅供學習交流使用，引用請注明出處！謝謝~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!