应用平台

# 栏目开发及流程说明

# 说明

栏目组件为特殊的业务组件，自身会根据栏目配置发送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：的接口列表

//根据模板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获取运行时数据，方便理解。

请求地址:/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标记位置

{
      "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}}&nbsp;
        </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>
编撰人：yinyanting

快速跳转

← 4.4 页面模板 →