門戶與欄目掛載 · CAP開發文檔

# 門戶開發及欄目掛載 * * * ## 說明 > 由于現在設計上，門戶能夠配置任何功能進行展示，為了方便代碼的維護和管理，對門戶進行了功能塊組件化分割。 ## 概覽 ![門戶設計](http://mall.seeyon.com/help/Public/dev/static/img/layout-setting.62a069e.svg) ## 新建門戶下面用`LayoutTest`門戶舉例，如何新建一個門戶頁面 ### start * 1.下載工程[工程腳手架](http://mall.seeyon.com/help/Public/dev/static/zip/cap4-component.zip)，運行`npm i`安裝依賴 * 2.在`layout/pages/`下拷貝`LayoutShangJi`文件夾，重命名`LayoutTest` * 3.在`layout/pages/main.js`中修改`import App from './pages/LayoutTest/home.vue'`指向到自己的欄目工程，此`main.js`是本地啟動的關鍵，只是測試用，真正打包的`main.js`在`layout/pages/LayoutTest/`下注：任何需要打包的屬性，一定得加入到`layout/pages/LayoutTest/`下的`main.js`中 ### step1 門戶中如果引用欄目組件，main.js中推薦加入以下設置 ~~~ // 主題字段，如果白色背景或者單獨定制門戶，則不需要設置。 Vue.prototype.$themes = 'black'; // 注入基礎欄目組件支持 import Cap4ColumnBase from '_columns/cap4-column-base'; Vue.use(Cap4ColumnBase); // 遠程掛載組件(可選，只有遠程掛載才會使用) import Cap4ColumnComponent from '_columns/cap4-column-component'; Vue.use(Cap4ColumnComponent); ~~~ ### step2 門戶的主要處理邏輯（`layout/pages/LayoutTest/home.vue`）需要引入`_utils/mixin/layoutMixin` 引入后在`mounted`中通過`this.getConfig()`獲取本模板配置信息。直接通過`this.getColumn(index)`分割配置信息，將欄目配置信息分發給各個欄目。以下參數可以直接用`this.xxx`訪問到，部分參數在調用`this.getConfig()`后才能獲取。 | 參數 | 說明 | 類型 | 備注 | | --- | --- | --- | --- | | config | 模板配置文件 | Object | 無 | | columns | 欄目配置列表 | Array | 無 | | bussId | 業務包id | String | 從url上獲取 | | templateId | 模板id | String | 從url上獲取 | ### step3 創建配置文件創建配置文件必須得理解`欄目`、`欄目元素`兩個概念，一個模板包含多個欄目，一個欄目包含多個欄目元素。 ![門戶設計](http://mall.seeyon.com/help/Public/dev/static/img/snp-lanmu.9a68c04.png) 配置文件示例： ~~~ { "columns": [ --------------------------------------------------------門戶模板包含的欄目數組 { "elements": [ ---------------------------------------------------欄目中包含的欄目元素數組 { "name": "本月商機成交量", "dynamicKey": "02440231-5E99-4D15-8FAC-57A3CA03F07C", "type": 4 ---------------------------------------------------欄目元素類型，影響門戶設置數據源配置范圍。 }, { "name": "本月商機成交量", "dynamicKey": "02540231-5E99-4D15-8FAC-57A3CA03F07C", "type": 5 ---------------------------------------------------type5為快捷入口，不會再頁面上有顯示內容，只影響點擊跳轉 } ], "name": "待完成工作任務", "state": "1", ---------------------------------------------------欄目狀態，后端可操作此字段來修改欄目顯示狀態。 "type": 4 -------------------------------------------------------欄目類型，影響門戶設置欄目配置的欄目類型顯示。 }, { "elements": [ { "name": "待完成項目任務", "dynamicKey": "03440231-5E99-4D15-8FAC-57A3CA03F07C", "type": 4 }, { "name": "待完成項目任務", "dynamicKey": "03540231-5E99-4D15-8FAC-57A3CA03F07C", "type": 5 } ], "name": "待完成項目任務", "state": "1", "type": 4 } ], "name": "任務管理模板", "type": 1 } ~~~ #### 模板配置文件結構 | 參數 | 說明 | 類型 | 可選值 | | --- | --- | --- | --- | | columns | 參照欄目配置：column | Array | 無 | | name | 模板名稱【必須】 | String | 無 | | type | 模板類型【必須】 | Number | 0:pc&移動 1:pc 2:移動 | #### 欄目配置結構column | 參數 | 說明 | 類型 | 可選值 | | --- | --- | --- | --- | | elements | 參照欄目元素配置：element | Array | 無 | | name | 欄目名稱【必須】 | String | 無 | | state | 欄目開關狀態【必須】 | Number | 無 | | type | 欄目類型【必須】 | Number | 0 default 未指定 1 queryResult 查詢結果 2 caclResult 統計結果 3 flowList 流程列表 4 businessTarget 業務指標 5 shortCut 快捷方式 6 unflowList 無流程列表 7 noData 無須配置數據源 8 menuCollection 菜單合集 | | componentName | 動態掛載時需要指定此欄目掛載的組件名【可選】配置了這個字段才能使用Cap4ColumnComponent動態掛載 | String | 無 | | componentUrl | 指定組件的url路徑（可不用vue組件，如果是.html結尾會自動使用ifram加載）【可選】 | String | 無 | #### 欄目元素配置結構element | 參數 | 說明 | 類型 | 可選值 | | --- | --- | --- | --- | | name | 欄目元素名稱【必須】 | String | 無 | | dynamicKey | 全局唯一key【必須】 | String | 無 | | type | 欄目元素類型【必須】 | Number | 0 default 未指定 1 queryResult 查詢結果 2 caclResult 統計結果 3 flowList 流程列表 4 businessTarget 業務指標 5 shortCut 快捷方式 6 unflowList 無流程列表 7 noData 無須配置數據源 8 menuCollection 菜單合集 | | page | 取得查詢或者統計時候可分頁取得數據【可選】 | Object | { ??page:1(從1開始，必須), ??pageSize:50(默認50，可選) } | | columnIndex | 返回第幾列數據，如果大于總列數則返回最后一列【可選】 | Number | 無 | | maxColumnLength | 限制（統計查詢）最大返回列【可選】 | Number | 無 | | completeCrossColumn | 限制（統計查詢）最大返回列，可能產生不完整交叉項，如果為true則舍棄不完整交叉組，返回可能小于最大返回列【可選】 | Boolean | 無 | | extend | 擴展字段【可選】 | Object | 無 | ### step4 上傳商城現在寫的config文件沒有欄目id跟欄目元素id。這兩個id是經過后臺處理后，由后臺分配的，本地調試需要進行商城上傳下載。后臺處理后的config文件，欄目和欄目元素被分配了id，這時候才能獲取數據。后臺處理后config示例： ~~~ { "templateFolder": "2346017665022313537", --------------------------------------- 后端分配的模板id，此id一般在url上直接獲取 "columns": [{ "columnId": "165012826161365089", -------------------------------------- 后端分配的欄目id "elements": [{ "elementId": "1152844087841408814", ---------------------------- 后端分配的欄目元素id "name": "新建菜單合集", "dynamicKey": "01863984-0646-49C6-BD8F-780ACEE28521", "type": "8" }], "name": "新建菜單合集", "state": "1", "type": "8" }, { "columnId": "3115505023330371320", "elements": [{ "elementId": "4257172996191834010", "name": "本月新增商機", "dynamicKey": "02440231-5E99-4D15-8FAC-57A3CA03F07C", "type": "4" }, { "elementId": "4088305993474785437", "name": "本月新增商機", "dynamicKey": "02540231-5E99-4D15-8FAC-57A3CA03F07C", "type": "5" }], "name": "本月新增商機", "state": "1", "type": "4" }, { "columnId": "2627389823276306095", "elements": [{ "elementId": "7556469782579068978", "name": "本月新增客戶", "dynamicKey": "03440231-5E99-4D15-8FAC-57A3CA03F07C", "type": "4" }, { "elementId": "2070180027328514266", "name": "本月新增客戶", "dynamicKey": "03540231-5E99-4D15-8FAC-57A3CA03F07C", "type": "5" }], "name": "本月新增客戶", "state": "1", "type": "4" }, { "columnId": "3735702750817242562", "elements": [{ "elementId": "4357802298177374266", "name": "本月商機成交量", "dynamicKey": "04440231-5E99-4D15-8FAC-57A3CA03F07C", "type": "4" }, { "elementId": "-2211378874524548588", "name": "本月商機成交量", "dynamicKey": "04540231-5E99-4D15-8FAC-57A3CA03F07C", "type": "5" }], "name": "本月商機成交量", "state": "1", "type": "4" }, { "columnId": "-3940581403590308363", "elements": [{ "elementId": "126384694740273687", "name": "本月成交金額", "dynamicKey": "054CDA7B-479D-4F9B-A21A-431C9D68F75B", "type": "4" }, { "elementId": "-2482746810529855644", "name": "本月成交金額", "dynamicKey": "055CDA7B-479D-4F9B-A21A-431C9D68F75B", "type": "5" }], "name": "本月成交金額", "state": "1", "type": "4" }, { "columnId": "-2923792911191421994", "elements": [{ "elementId": "-9001353740858146132", "name": "客戶來源分析", "dynamicKey": "06233BE8-89EF-4F6A-BD78-FEFD5BA37840", "type": "2" }, { "elementId": "8698323620921229485", "name": "更多", "dynamicKey": "0653D5B7-05BB-4BBD-B8CD-06B4ABC2508A", "type": "5" }], "name": "客戶來源分析", "state": "1", "type": "2" }, { "columnId": "-5055874239504298447", "elements": [{ "elementId": "-835606408726230998", "name": "本于銷售業績PK", "dynamicKey": "07233BE8-89EF-4F6A-BD78-FEFD5BA37840", "type": "2" }, { "elementId": "8798617162677897017", "name": "更多", "dynamicKey": "0753D5B7-05BB-4BBD-B8CD-06B4ABC2508A", "type": "5" }], "name": "本于銷售業績PK", "state": "1", "type": "2" }], "name": "商機管理模板", "type": "1", "templateId": "2346017665022313537" } ~~~ ### step4-1 執行`npm run dist:layout`,選擇`LayoutTest`進行打包，打包后在`dist_layout`文件夾下找到`LayoutTest.zip`,用于上傳商城上傳文檔：[更新商城主題包文檔](http://mall.seeyon.com/help/Public/dev/static/zip/%E6%9B%B4%E6%96%B0%E4%B8%BB%E9%A2%98%E5%8C%85.docx) ### step4-2 本地調試需要在本地啟動v5后臺，在門戶設置中下載剛上傳的主題包，配置權限。通過預覽獲取config的路徑和業務包id、模板id，獲取到這些參數以后，配置本地env文件`layout/env/env.js` 最后通過`npm dev:layout`本地啟動門戶首頁。 ### step5 門戶開發參照示例門戶、通過`import`引入標準欄目組件。注：如果組件沒有在工程下，需要遠程加載，則使用`Cap4ColumnComponent`來代理加載，vue組件是`.js`結尾，支持`.html`結尾的組件 ~~~ <Cap4ColumnComponent src="http://10.5.5.200:4000/static/wwc/cap4-pc-ui-eg/index.js" // 遠程欄目組件掛載地址 :templateId="templateId" // 掛載欄目組件的參數 :bussId="bussId" // 掛載欄目組件的參數 :column="getColumn(5)"> // 掛載欄目組件的參數 </Cap4ColumnComponent> ~~~ ### step6 eg數據制作在`LayoutTest\config`下有`data.json`,這個是門戶的默認數據，當剛下載門戶模板沒有數據獲取時候，由這個json文件填充。 `data.json`與`config.json`是一一對應的，參照`config.json`的`dynamicKey`對應創建`data.json`的數據。 ### end 門戶再次上傳引入欄目組件后的門戶網站，再次上傳商城，重新配置數據源。