应用平台

# 门户开发及栏目挂载

# 说明

由于现在设计上，门户能够配置任何功能进行展示，为了方便代码的维护和管理，对门户进行了功能块组件化分割。

# 概览

门户设计

# 新建门户

下面用LayoutTest门户举例，如何新建一个门户页面

# start

  • 1.下载工程工程脚手架 (opens new window)，运行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 创建配置文件

创建配置文件必须得理解栏目、栏目元素两个概念，一个模板包含多个栏目，一个栏目包含多个栏目元素。

门户设计

配置文件示例：

{
  "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,用于上传商城

上传文档：更新商城主题包文档 (opens new window)

# 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 门户再次上传

引入栏目组件后的门户网站，再次上传商城，重新配置数据源。

创建人：yinyanting

快速跳转

← 3.3.2 栏目开发及流程说明 →