页面扩展

非元数据开发的页面我们在src/client/web/components/portal下编写，portal下的页面都当做一个单独的页面进行访问。（适用于本地联调）

一、创建页面

我们在portal下创建自定义扩展文件PortalTest;

import { ConfigProvider, Radio, Switch, Table } from "@tinper/next-ui";
import React, { Component } from 'react';
 const columns = [
     { title: "员工编号", dataIndex: "a", key: "a", width: 150 },
     { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
     { title: "性别", dataIndex: "c", key: "c", width: 100 },
     { title: "部门", dataIndex: "d", key: "d", width: 100 },
     { title: "职级", dataIndex: "e", key: "e", width: 100 }
 ];
 const data = [
     { a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
     { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
     { a: "ASVAL_20190322", b: "小黄", c: "女", d: "财务二科", e: "G1", key: "4" },
     { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "5" }
 ];
 class PortalTest extends Component {
     constructor(props) {
         super(props);
         this.state = {
             height: 35,
             stripeLine: false,
             bordered: false
         };
     }
     handleSizeChange = (value) => {
         this.setState({
             height: value
         });
     };
     handleStripeLine = (value) => {
         this.setState({
             stripeLine: value
         });
     };
     handleBordered = (value) => {
         this.setState({
             bordered: value
         });
     };
     render() {
         const { height } = this.state;
         return (<div className="demo1">
                 <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
                     <Radio.Group style={{ marginRight: 20 }} selectedValue={height} onChange={this.handleSizeChange}>
                         <Radio.Button value={29}>紧凑</Radio.Button>
                         <Radio.Button value={35}>标准</Radio.Button>
                         <Radio.Button value={41}>宽松</Radio.Button>
                     </Radio.Group>
                     斑马线：<Switch onChange={this.handleStripeLine}/>
                     &nbsp;&nbsp;&nbsp;&nbsp;
                     边框线：<Switch onChange={this.handleBordered}/>
                 </div>

                 <ConfigProvider table={{ ...this.state }}>
                     <Table columns={columns} data={data} showRowNum={true} headerHeight={30}/>
                 </ConfigProvider>
             </div>);
     }
 }
 export default PortalTest;

二、注册页面

使用platform公共路由；（线下和线上走支持）

src/client/web/components/portal下的index页面，将新写的组件注入进去

import PortalTest from './portalTest';

const PortalComponents = {
  'test': PortalTest
}

export default PortalComponents

三、访问使用

通过公共路由platform注册时，访问如下：

访问节点 /platform/test,就可以访问到刚刚编写的页面组件.这里的test，就是刚刚注入的PortalTest组件对应的keys字段

访问：http://local.yonyoucloud.com:3003/platform/test

四、发布到线上环境

* 发布到线上环境时，需要使用公共路由platform得方式配置路由

我的应用 -> 找到自己的应用 -> （点击）服务列表

添加自建服务

这里得url 就是${domain.iuap-mdf-node}/platform/test?domainKey='' 输入自己项目得domainKey F5刷新页面，就可以正常访问了

五、如何在扩展页面请求接口数据？

cb.rest.DynamicProxy

无ViewModel时的情况，需要自行传入domainKey参数； params：需要上送的参数对象

// 声明
var proxy = cb.rest.DynamicProxy.create({
  ensure: {
    url: '/xxx/xxx/autoPick',
    method: 'POST'
  }
});
// 调用
proxy.ensure(params, function (err, result) {
  console.log('success', result)
})

页面编写