• 页面编写
  • 配置路由
  • 页面访问

在项目的react/src/app/demo/containers/organization(project, user, global)目录下新建一个新的功能文件夹table及其相关的JS文件。

  1. // table/index.js
  2. import React, { Component } from 'react';
  3. import { observer } from 'mobx-react';
  4. import { Button, Table } from 'choerodon-ui';
  5. import { Action, Content, Header, Page } from '@choerodon/boot';
  6. import Store from './stores';
  8. @observer
  9. class TableDemo extends Component {
  10.   componentDidMount() {
  11.     this.loadData();
  12.   }
  14.   loadData = () => {
  15.     Store.loadData();
  16.   }
  18.   renderLevel(text) {
  19.     const LEVEL_MAP = {
  20.       organization: '组织',
  21.       project: '项目',
  22.     };
  23.     return LEVEL_MAP[text] || '全局';
  24.   }
  26.   renderTable = () => {
  27.     const { isLoading, pagination } = Store;
  28.     const columns = [
  29.       {
  30.         title: '名字',
  31.         dataIndex: 'name',
  32.         key: 'name',
  33.         width: '25%',
  34.       },
  35.       {
  36.         title: '编码',
  37.         dataIndex: 'code',
  38.         key: 'code',
  39.         width: '25%',
  40.       },
  41.       {
  42.         title: '层级',
  43.         dataIndex: 'level',
  44.       },
  45.       {
  46.         title: '状态',
  48.         key: 'enabled',
  49.       },
  50.       {
  51.         title: '',
  52.         key: 'action',
  53.         align: 'right',
  54.         render: (text, record) => {
  55.           const actionDatas = [{
  56.             icon: '',
  57.             type: 'site',
  58.             text: '修改',
  59.           }];
  60.           if (record.enabled) {
  61.             actionDatas.push({
  62.               icon: '',
  63.               type: 'site',
  64.               text: '停用',
  65.             });
  66.           } else {
  67.             actionDatas.push({
  68.               icon: '',
  69.               type: 'site',
  70.               text: '启用',
  71.             });
  72.           }
  73.           return <Action data={actionDatas} getPopupContainer={() => document.getElementsByClassName('page-content')[0]} />;
  74.         },
  75.       },
  76.     ];
  77.     return (
  78.       <Table
  79.         columns={columns}
  80.         dataSource={Store.data.slice()}
  81.         pagination={pagination}
  82.         rowKey={record => record.id}
  83.         onChange={this.handlePageChange}
  84.         loading={isLoading}
  85.         filterBarPlaceholder="过滤表"
  86.       />
  87.     );
  88.   }
  90.   render() {
  91.     return (
  92.       <Page className="choerodon-role">
  93.           <Button
  94.             onClick={this.handleRefresh}
  96.           >
  97.             刷新
  98.           </Button>
  99.         </Header>
  100.         <Content
  101.           title="标题"
  102.           description="描述"
  103.           link="#"
  104.         >
  105.           {this.renderTable()}
  106.         </Content>
  107.       </Page>
  108.     );
  109.   }
  110. }
  112. export default TableDemo;

2.编写store代码

  1. // stores/index.js
  2. import Store from './Store';
  4. export default Store;
  1. // DEMOIndex.js
  2. import React from 'react';
  3. import { Route, Switch } from 'react-router-dom';
  4. import { inject } from 'mobx-react';
  5. import { asyncRouter, nomatch } from '@choerodon/boot';
  7. const HelloIndex = asyncRouter(() => import('./organization/hello'));
  8. const TableIndex = asyncRouter(() => import('./organization/table'));
  10. @inject('AppState')
  11. class DEMOIndex extends React.Component {
  12.   render() {
  13.     const { match, AppState } = this.props;
  14.     return (
  15.       <Switch>
  16.         <Route path={`${match.url}/hello`} component={HelloIndex} />
  17.         <Route path={`${match.url}/table`} component={TableIndex} />
  18.         <Route path="*" component={nomatch} />
  19.       </Switch>
  20.     );
  21.   }
  22. }
  24. export default DEMOIndex;

本次demo的访问路径应该为： http://localhost:9090/#/demo/table