科技飛速發展的時代，企業資訊化建設會越來越完善，越來越體系化，企業使用的應用系統也就越來越多，業務發展過程中沉澱了大量資料，但是這些資料沒有為企業帶來直覺價值，沒有形成企業的資料資産，是以越來越多企業進入到了資料治理階段，對于主資料治理的需求越來越明确。
主資料治理方案可以将企業的組織、人員、客戶、供應商等高度共享的資料進行統一管理，對需要的業務系統進行同步分發，使資料易采集、易了解、易分析，提高部門與部門之間的溝通效率。
1整體介紹
MDM主資料管理平台是以內建服務的方式把統一的、完整的、準确的、具有權威性的主資料分發給需要使用這些資料的應用系統。是以本次是介紹MDM資料分發功能。
1.1産品體系
首先介紹數通暢聯的産品體系：
數通暢聯所有産品都是通過K8S雲平台部署搭建産品環境，通過不同的産品組合方案來解決企業面臨的不同資訊化困境，幫助企業完善資訊化發展。
MDM主資料管理平台在公司産品體系中是重要的一環，主數管理平台可以跟不同産品組合來滿足不同的項目需求。
1.2産品介紹
MDM主資料管理平台，主資料管理的關鍵就是“管理”。主資料管理不會建立新的資料或新的資料縱向結構。相反，它提供了一種方法，使企業能夠有效地管理存儲在分布系統中的資料。
主資料管理使用現有的系統，從這些系統中擷取最新資訊，并提供了先進的技術和流程，用于自動、準确、及時地分發和分析整個企業中的資料，并對資料進行驗證。
MDM産品的核心在中間的紫色區域，分别是資料模組化、功能模組化、流程模組化、應用管理，使用這些功能能夠自動生成不同的主資料管理，進而進行資料的治理和統計，也就是綠色區域的資料管理、流程監控、統計分析功能，并且管理看闆也能夠進行統計分析，MDM在系統管理中添加組織、人員、崗位，并可以配置相應權限。
1.3更新需求
本次是對現有MDM主資料管理的界面進行UI更新，是對MDM界面的一次美化、提升性能，也是讓MDM産品使用更加的人性化。
本次UI更新參考IDM崗位管理模型進行優化，使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面。
2更新思路
本次UI更新主要是設計出不同模型原型，然後通過原型改成模闆模型，可以直接部署生成對應的功能。
主資料更新UI功能頁面有：主資料管理、主資料導入、主資料流程、主資料同步日志、主資料分發日志、參考資料。
2.1改造模型
以下是需要改造的模型：
2.2模型設計
原型模型設計主要分為：簡單清單、樹形管理、樹及清單、樹形表格、主從模型。
2.2.1簡單清單
簡單清單隻改成使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面。
1.首先通過DP導出一個簡單清單模型主資料，以這個模型作為原型進行改造。
2.引用bootstrap和jqGrid的js和css。
3.把原來的按鈕替換成bootstrap的按鈕。
4.把原來的ectable換成jqGrid表格，并且背景添加擷取jqGrid表格資料代碼。
5.測試按鈕和表格功能是否好使。
6.删除所有引用的js和css，重新加上需要的檢驗檢視是否好使，然後把這些js和css封裝直接引用。
7.遷移原型到MDM産品中，通過原型改成freemark模闆，背景的擷取方法也是改成支援不同模型調用的靈活參數。
2.2.2樹形管理
樹形管理左側樹需要改成easyui-tree，使用bootstrap前端架構更新按鈕和表單樣式、使用jqGrid表格作為清單頁面。
1.首先通過DP導出一個樹形管理模型主資料，以這個模型作為原型進行改造。
2.引用bootstrap和jqGrid、easyui-tree的js和css。
3.樹形管理原來是兩個頁面，左側是樹的頁面，右側是清單的頁面，現在要改成一個頁面。
4.把原來的按鈕替換成bootstrap的按鈕。
5.把原來的ectable換成jqGrid表格，并且背景添加擷取jqGrid表格資料代碼。
6.左側的樹原來是dtree改造成對應easyui-tree。
7.測試按鈕和表格、樹形清單功能是否好使。
8.添加到上面簡單清單所封裝的引用js和css的jsp中。
9.遷移原型到MDM産品中，然後通過原型改成freemark模闆，背景的擷取方法也是改成支援不同模型調用的靈活參數。
2.2.3樹及清單
樹及清單就是所有模型左側關聯一個樹，這個樹改成使用easyui-tree，右側是使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面。
1.首先通過DP導出一個樹及清單模型主資料，以這個模型作為原型進行改造。
2.引用bootstrap和jqGrid、easyui-tree的js和css。
3.把原來的按鈕替換成bootstrap的按鈕。
4.把原來的ectable換成jqGrid表格，并且背景添加擷取jqGrid表格資料代碼。
5.左側的樹原來是dtree改造成對應easyui-tree。
6.測試按鈕和表格、樹形清單功能是否好使。
7.添加到上面簡單清單所封裝的引用js和css的jsp中。
8.遷移原型到MDM産品中，通過原型改成freemark模闆，背景的擷取方法也是改成支援不同模型調用的靈活參數。
2.2.4樹形表格
主表頁面和簡單清單一樣是使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面，從表頁面不改造還是使用原來的樹形表格treeGird。
1.首先通過DP導出一個樹形表格模型主資料，以這個模型作為原型進行改造。
2.引用bootstrap和jqGrid、easyui-tree的js和css。
3.主表頁面把原來的按鈕替換成bootstrap的按鈕。
4.主表頁面把原來的ectable換成jqGrid表格，并且背景添加擷取jqGrid表格資料代碼。
5.從表頁面隻把原來的按鈕替換成bootstrap的按鈕，下面使用treeGrid的表格保持不變。
6.測試按鈕和表格、樹形清單功能是否好使。
7.添加到上面簡單清單所封裝的引用js和css的jsp中。
8.遷移原型到MDM産品中，然後通過原型改成freemark模闆，背景的擷取方法也是改成支援不同模型調用的靈活的參數。
2.2.5主從模型
主從模型和樹形表格類似，但它的主表和從表模型是一樣的都是類似簡單清單模型，是以主和從表頁面都需要改造的也是使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面。
1.首先通過DP導出一個樹形表格模型主資料，以這個模型作為原型進行改造。
2.引用bootstrap和jqGrid、easyui-tree的js和css。
3.主表頁面把原來的按鈕替換成bootstrap的按鈕。
4.主表頁面把原來的ectable換成jqGrid表格，并且背景添加擷取jqGrid表格資料代碼。
5.從表頁面隻把原來的按鈕替換成bootstrap的按鈕
6.從表頁面也把原來的ectable換成jqGrid表格，并且背景添加擷取jqGrid表格資料代碼。
7.測試主表頁面和從表頁面按鈕和表格、樹形清單功能是否好使。
8.添加到上面簡單清單所封裝的引用js和css的jsp中。
9.遷移原型到MDM産品中，通過原型改成freemark模闆，背景的擷取方法也是改成支援不同模型調用的靈活的參數。
3更新步驟
通過MDM導出DP擴充開發功能，把現有的幾個不同模型的主資料導出到DP進行UI更新原型開發。
3.1前期準備
1.準備DP開發平台，應用類型選擇MDMWeb，建立一個MDM的工程。
點選右鍵。
點選ok生成對應的工程：
3.2簡單清單
簡單清單就隻改成使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面，簡單清單更新步驟如下。
3.2.1原型開發
1.簡單清單原型是以客戶為列導出到DP進行擴充更新UI。
源頁面：
2.首先引用bootstrap和jqGrid的js和css。
3.添加jqGrid表格js方法：
4.把原來的按鈕都改成bootstrap按鈕。
5.背景類添加jqGrid表格擷取供應商資料，方法名為：retrieveTableJson讓頁面出現資料。
6.修改按鈕的js方法擷取資料方法參數方法，保證按鈕操作好用。
3.2.2模型展示
1.主資料管理清單頁面：
2.主資料任務清單頁面：
3.主資料流程清單頁面：
4.主資料導入清單頁面：
5.主資料同步日志清單頁面：
6.主資料分發日志清單頁面：
3.2.3技術要點
1.根據原型改造簡單清單模闆。
2.把原有的封裝resource.inc.jsp删除，替換原型封裝的js和css引用新的jsp。
3.把原來清單頁面調用PageForm.ftl裡ectable改成jqgrid，在js擷取字段。
在PageForm.ftl下添加循環擷取字段方法：
3.3樹形管理
樹形管理左側樹需要改成easyui-tree，使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面，樹形管理更新步驟如下：
3.3.1原型開發
1.樹形管理原型是以組織為列導出到DP進行擴充更新UI。
源頁面：
2.首先引用bootstrap和jqGrid的js和css。
3.然後添加jqGrid表格js方法：
4.把原來的按鈕都改成bootstrap按鈕。
5.背景類添加jqGrid表格擷取供應商資料，方法名為：retrieveTableJson讓頁面出現資料。
6.修改按鈕的js方法擷取資料方法參數方法，保證按鈕操作好用。
3.3.2模闆展示
1.主資料管理清單頁面：
2.主資料任務清單頁面
3.主資料流程清單頁面：
4.主資料導入清單頁面：
5.主資料同步日志清單頁面：
6.主資料分發日志清單頁面：
3.3.3技術要點
1.根據原型進行改造樹及清單模闆。
2.把原有的封裝resource.inc.jsp删除，替換原型封裝的js和css引用新的jsp。
3.把原來清單頁面調用PageForm.ftl裡ectable改成jqgrid，在js擷取字段。
在PageForm.ftl下添加循環擷取字段方法：
修改左側樹形管理的樹方法改成easyui-tree。
3.4樹及清單
樹及清單就是所有模型左側關聯一個樹，這個樹改成使用easyui-tree，右側是使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面，樹及清單更新步驟如下。
3.4.1原型開發
1.樹及清單原型是以人員為列導出到DP進行擴充更新UI。
源頁面：
2.首先引用bootstrap和jqGrid的js和css。
3.然後添加jqGrid表格js方法：
4.把原來的按鈕都改成bootstrap按鈕。
5.背景類添加jqGrid表格擷取供應商資料，方法名為：retrieveTableJson讓頁面出現資料。
6.修改按鈕的js方法擷取資料方法參數方法，保證按鈕操作好用。
7.修改左側樹方法改成easyui-tree。
3.4.2模闆展示
1.主資料管理清單頁面：
2.主資料任務清單頁面：
3.主資料流程清單頁面：
4.主資料導入清單頁面：
5.主資料同步日志清單頁面：
6.主資料分發日志清單頁面：
3.4.3技術要點
1.根據原型進行改造樹及清單模闆。
2.把原有的封裝resource.inc.jsp删除，替換原型封裝的js和css引用新的jsp。
3.把原來清單頁面調用PageForm.ftl裡ectable改成jqgrid，在js擷取字段。
在PageForm.ftl下添加循環擷取字段方法：
修改左側樹形管理的樹方法改成easyui-tree。
3.5樹形表格
主表頁面和簡單清單一樣是使用bootstrap前端架構來更新按鈕和表單樣式，使用jqGrid表格作為清單頁面，從表頁面不改造還是使用原來的樹形表格treeGird，樹形表格UI更新如下。
3.5.1原型開發
1.樹及表格原型是以工藝資訊為列導出到DP進行擴充更新UI。
源頁面及主表頁面：
2.首先引用bootstrap和jqGrid的js和css。
3.然後添加jqGrid表格js方法：
4.把原來的按鈕都改成bootstrap按鈕。
5.背景類添加jqGrid表格擷取供應商資料，方法名為：retrieveTableJson讓頁面出現資料。
6.修改主表和從表按鈕的js方法擷取資料方法參數方法，保證按鈕操作好用。
3.5.2模闆展示
1.主資料管理主表清單頁面：
從表清單頁面：
2.主資料任務清單頁面：
3.主資料流程清單頁面：
4.主資料導入清單頁面：
5.主資料同步日志清單頁面：
6.主資料分發日志清單頁面：
3.5.3技術要點
1.根據原型進行改造樹形表格模闆。
2.把原有的封裝resource.inc.jsp删除，替換原型封裝的js和css引用新的jsp。
3.把原來清單頁面調用PageForm.ftl裡ectable改成jqgrid，在js擷取字段。
在PageForm.ftl下添加循環擷取字段方法：
3.6主從模型
主從模型和樹形表格類似，但它的主表和從表模型是一樣的，都是類似簡單清單模型，是以主和從表頁面都需要改造的也是使用bootstrap前端架構來更新按鈕和表單樣式、使用jqGrid表格作為清單頁面，樹形表格UI更新如下。
3.6.1原型開發
1.樹及表格原型是以圖是管理息為列導出到DP進行擴充更新UI。
源頁面及主表頁面：
2.首先引用bootstrap和jqGrid的js和css。
3.然後添加jqGrid表格js方法：
4.把原來的按鈕都改成bootstrap按鈕。
5.背景類添加jqGrid表格擷取供應商資料，方法名為：retrieveTableJson讓頁面出現資料。
6.修改主表和從表按鈕的js方法擷取資料方法參數方法，保證按鈕操作好用。
3.6.2模闆展示
1.主資料管理清單頁面：
從表頁面：
2.主資料任務清單頁面：
3.主資料流程清單頁面：
4.主資料導入清單頁面：
5.主資料同步日志清單頁面：
6.主資料分發日志清單頁面：
3.6.3技術要點
1.根據原型進行改造主從模型模闆。
2.把原有的封裝resource.inc.jsp删除，替換原型封裝的js和css引用新的jsp。
3.把原來清單頁面調用PageForm.ftl裡ectable改成jqgrid，在js擷取字段。
在PageForm.ftl下添加循環擷取字段方法：
4更新總結
通過上述幾個章節，相信大家了解MDM主管理平台的是如何進行UI更新的，更新思路和更新步驟上面已經寫的很清楚，那麼本次更新作用是什麼？更新後給MDM主資料管理平台帶來優勢是什麼？後續還會更新内容嗎？接下來進行簡單介紹。
4.1UI更新作用
本次UI更新的作用就是更能和我們架構融合，也是與時俱進，作為産品最直接呈現給使用者面前的，是以肯定是界面更加美化，并且減少使用者誤操作和學習成本,讓使用者操作更為流暢（使用者體驗） 突出主要功能作用，使得不要因為使用者體驗不好增加工作量。
4.2UI更新優勢
平台是主資料治理方案落地的重要工具，平台在功能上滿足主資料治理需求的同時，具備快速擴充能力，以适應不同業務場景的變化。本次更新可以使公司的産品更加人性化，讓公司的産品不會因為使用者體驗做為短闆失去一些客戶，讓客戶不但感覺公司産品功能全面、強大，而且使用者體驗也更加流暢，讓客戶心甘情願的買單。
4.3UI更新延續
公司的核心産品有ESB、MDM、IDM、DAP、BPM、Portal、UMC，IDM、MDM的UI是最新更新的，其他産品背景管理中都參考這兩款産品進行更新，DAP、Portal、UMC控制台配置功能界面都按照本次更新所更新UI，其中Portal元件是基于DAP元件來完善。
BPM作為低代碼開發平台，更新的内容有所不同，因為它作用是對外圍應用開發，是以他的前端架構會整體調整，但也會與bootstrap前端架構，不會跨度很大，是以公司外圍應用就直接使用BPM就可以直接更新UI，這樣就可以後續産品進一步更新UI鑒定基礎。