栏目开发及流程说明 · 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> ~~~