# 门户开发及栏目挂载 * * * ## 说明 > 由于现在设计上，门户能够配置任何功能进行展示，为了方便代码的维护和管理，对门户进行了功能块组件化分割。 ## 概览  ## 新建门户 下面用`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 创建配置文件 创建配置文件必须得理解`栏目`、`栏目元素`两个概念，一个模板包含多个栏目，一个栏目包含多个栏目元素。  配置文件示例： ~~~ { "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 门户再次上传 引入栏目组件后的门户网站，再次上传商城，重新配置数据源。