• 前置条件

    在开发table页面之前,要确保已经在本地创建了基础前端项目。详见 新建项目

    1. 页面编写
    2. 配置路由
    3. 页面访问

    页面编写

    在项目的react/routes目录下新建一个新的功能文件夹table及其相关的JS文件。

    1.编写index.js文件

    $ cd choerodon-todo-service
    $ mkdir -p react/routes/table/list/stores
    $ touch react/routes/table/index.js
    $ touch react/routes/table/list/ListView.js
    
    // table/index.js
    import React, { Component } from 'react';
    import { Route, Switch } from 'react-router-dom';
    import { asyncRouter, nomatch } from '@choerodon/boot';
    
    const List = asyncRouter(() => import('./list'));
    
    const Index = ({ match }) => (
      <Switch>
        <Route exact path={match.url} component={List} />
        <Route path="*" component={nomatch} />
      </Switch>
    );
    
    export default Index;
    
    // table/list/index.js
    import React from 'react';
    import { StoreProvider } from './stores';
    import ListView from './ListView.js';
    
    export default (props) => (
      <StoreProvider {...props}>
        <ListView />
      </StoreProvider>
    );
    
    

    2.编写stores代码

    $ cd choerodon-todo-service
    $ touch react/routes/table/stores/index.js
    $ touch react/routes/table/stores/adminListDataSet.js
    
    // stores/adminListDataSet.js
    export default () => {
      return {
        autoQuery: true,
        selection: false,
        transport: {
          read: {
            url: '/base/v1/users/admin',
            method: 'get',
          },
        },
        fields: [
          { name: 'realName', type: 'string', label: '用户名' },
          { name: 'loginName', type: 'string', label: '登录名' },
        ],
        queryFields: [
          { name: 'realName', type: 'string', label: '用户名' },
          { name: 'loginName', type: 'string', label: '登录名' },
        ],
      };
    };
    
    // stores/index.js
    import React, { createContext, useMemo } from 'react';
    import { DataSet } from 'choerodon-ui/pro';
    import { inject } from 'mobx-react';
    import { injectIntl } from 'react-intl';
    import AdminListDataSet from './adminListDataSet';
    
    const Store = createContext();
    
    export default Store;
    
    export const StoreProvider = injectIntl(inject('AppState')(
      (props) => {
        const { children } = props;
        const adminListDataSet = useMemo(() => new DataSet(AdminListDataSet()), []);
        const value = {
          ...props,
          adminListDataSet,
        };
        return (
          <Store.Provider value={value}>
            {children}
          </Store.Provider>
        );
      },
    ));
    

    3.编写ListView.js文件

    $ cd choerodon-todo-service
    $ mkdir -p react/routes/table/list/stores
    $ touch react/routes/table/index.js
    $ touch react/routes/table/list/ListView.js
    
    // table/list/ListView.js
    import React, { useContext } from 'react';
    import { Content, Header, Breadcrumb, TabPage } from '@choerodon/boot';
    import { Table, Button } from 'choerodon-ui/pro';
    import Store from './stores';
    
    const { Column } = Table;
    export default function ListView() {
      const { adminListDataSet } = useContext(Store);
    
      return (
        <TabPage>
          <Header>
            <Button icon="playlist_add" onClick={() => console.log('创建')}>创建</Button>
          </Header>
          <Breadcrumb />
          <Content style={{ paddingTop: 0 }}>
            <Table pristine dataSet={adminListDataSet}>
              <Column name="realName" />
              <Column name="loginName" />
            </Table>
          </Content>
        </TabPage>
      );
    }
    

    配置异步路由

    修改react/routes/index.js文件中配置新建文件的访问路径:

    // index.js
    import React from 'react';
    import { Route, Switch } from 'react-router-dom';
    import { inject } from 'mobx-react';
    import { asyncRouter, nomatch } from '@choerodon/boot';
    
    const HelloIndex = asyncRouter(() => import('./routes/hello'));
    const TableIndex = asyncRouter(() => import('./routes/table'));
    
    function Index({ match }) {
      return (
        <Switch>
          <Route path={`${match.url}/hello`} component={HelloIndex} />
          <Route path={`${match.url}/table`} component={TableIndex} />
          <Route path="*" component={nomatch} />
        </Switch>
      );
    }
    
    export default inject('AppState')(Index);
    

    页面访问

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

    因为在编译自动收集路由配置时,本模块的路由被映射为/demo,也就是在package.json中设置的routeName字段。