欄目開發及流程說明 · CAP開發文檔

# 欄目開發及流程說明 * * * ## 說明欄目組件為特殊的業務組件，自身會根據欄目配置發送ajax請求。 #### 依賴關系： * 所有欄目組件都依賴于`cap4-column-base`組件，此組件包含ajax底層請求方法，和v5環境變量。 * 所有欄目組件都依賴于`_utils/mixin/columnMixin`，此組件包含了數據請求方法，和基本的數據注入。注：`_utils/mixin/columnMixin`中包含有`_utils/mixin/themesMixin`，無需再次引入; 以上依賴已經預置到初始化欄目組件里。 #### `cap4-column-base`組件提供支持由門戶開發人員注入，全局只需要一個，主要提供欄目的ajax請求支持。注入后可在vue原型對象上訪問到`$httpClient`對象。 $httpClient： | 參數 | 說明 | 類型 | 備注 | | --- | --- | --- | --- | | env | v5外框的環境參數 | Object | {\_ctxPath,\_ctxServer,CsrfGuard} | | getUrlSurffix() | v5外框的跨域保護，返回String | String | | | urls | 欄目相關url合集 | Object | | | axios | pc-ajax請求用工具 | Object | | | setEnv(p) | 可在env中手動寫入字段，或覆蓋環境變量 | | p:Object對象 | | getDataByColumnIds(p1,p2) | 取得欄目運行時數據,返回promise | | p1:模板id p2:欄目元素id數組 | | getCurrentUserInfo() | 取得用戶信息,返回promise | | | | getConfig() | 取得配置文件,返回promise | | | 注：如果不使用`$httpClient`,可自行通過接口獲取數據。 urls：的接口列表 ~~~js //根據模板id獲取運行時數據 getDataByTemplateIdUrl:`${_ctxPath}/rest/cap4/template/getDataByTemplateId/`, //根據欄目id獲取運行時數據 getDataByColumnIdsUrl:`${_ctxPath}/rest/cap4/template/getDataByColumnIds/`, //根據欄目元素id獲取運行時數據 getDataByElementIdsUrl:`${_ctxPath}/rest/cap4/template/getDataByElementIds/`, // 根據真實參數獲取運行時數據 getDataByRealParams:`${_ctxPath}/rest/cap4/template/getDataByRealParams`, ~~~ 推薦使用根據欄目元素id獲取運行時數據，方便理解。 ~~~js 請求地址:/seeyon/rest/cap4/template/getDataByElementIds 請求類型:POST 請求參數： templateId:模板id elementIds:[123,123] 返回參數： { "code": 1000, "data": { ... }, "message": "the operation is success!!!" } ~~~ #### `_utils/mixin/columnMixin`提供支持為了標準化欄目開發規范，所有欄目組件都必須混入`_utils/mixin/columnMixin`來提供以下特性。 props: 接受參數 | 參數 | 說明 | 類型 | 備注 | | --- | --- | --- | --- | | column | 欄目配置 | Object | 數據獲取和欄目元素名稱獲取 | | templateId | 模板id【必須】 | String | 模板id，用于數據獲取 | | bussId | 業務包id【必須】 | String | 主要用于穿透 | data:\*引入后可直接用this.xxx 進行訪問到數據信息 | 參數 | 說明 | 類型 | 備注 | | --- | --- | --- | --- | | datas | 欄目配置 | Array | 欄目請求到數據后數據所存放的位置 | | keys | 模板id | Array | 從模板配置文件中解析出來的dynamicKey合集 | | themes | 業務包id | String | 門戶開發人員所設置的皮膚樣式字段，用于適配多皮膚欄目 | methods:提供方法 * getData (callback)，在欄目組件的`mounted`或者`create`中調用，調用后才能使用下面方法獲取數據 \*\*\* callback【可選】：請求數據完成后的回調，非必須，利用雙向綁定無需使用。 * this.dk(index,key)次方法可以根據欄目的標記位置取到對應的數據。 \*\*\* index【必須】：配置文件中數據標記位置如下`標記0`,`標記1` \*\*\* key【可選】：取得欄目元素數據中某個字段的值。 column：從config中切割下來的欄目配置，以下為dk標記位置 ~~~JSON { "fileName":"yearStatis", "oldFileName":"yearStatis", "elements":[ { -- 標記0 "name":"本部門預算執行率", "dynamicKey":"E9640111-5E99-4D15-8FAC-57A3CA03F07C", "type":4 }, {-- 標記1 "name":"本部門預算執行率", "dynamicKey":"E9640111-5E99-4D15-8FAC-57A3CA03F07C", "type":5 } ], "name":"本部門年度預算統計", "state":"1", "type":4 } ~~~ ### 集成以上組件后，欄目開發代碼如下 ~~~ <template> <div class="cap4-column-card-container" :style="{cursor:dk(1,'isEg')=='1'?'default':'pointer'}" @click="goUrl(dk(1))"> <cap4-pc-ui-eg style="position: absolute;top: 0px;left: 10px;z-index: 1" v-if="dk(0,'isEg')=='1'" :direction="1"> </cap4-pc-ui-eg> <div class="cap4-column-card-left" :style="{backgroundColor:color}"> <div class="inner" v-if="keys.length"> <p class="value" :title="dk(0,'display')" > {{dk(0) | dataFormat}}  </p> <p class="type" :title="dk(0,'name')" v-text="column.name"></p> </div> </div> <div class="cap4-column-card-right" :style="{backgroundColor:color}"> <i class="CAP" :class="[icon]"></i> </div> </div> </template> <script> import columnMixin from '_utils/mixin/columnMixin'; import dataFormatMixin from '_utils/mixin/dataFormatMixin'; import Cap4PcUiEg from '_pc_ui/cap4-pc-ui-eg'; export default{ name: 'Cap4ColumnCard', mixins : [columnMixin,dataFormatMixin], props: { color : { type : String, default : '#3FA8D8' }, icon : { type : String, default : '' } }, data () { return { } }, mounted (){ this.getData(); }, methods:{ }, components : {Cap4PcUiEg} } </script> ~~~