前置条件

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

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

页面编写

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

1.编写index.js文件

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

2.编写stores代码

  1. $ cd choerodon-todo-service
  2. $ touch react/routes/table/stores/index.js
  3. $ touch react/routes/table/stores/adminListDataSet.js
  1. // stores/adminListDataSet.js
  2. export default () => {
  3. return {
  4. autoQuery: true,
  5. selection: false,
  6. transport: {
  7. read: {
  8. url: '/base/v1/users/admin',
  9. method: 'get',
  10. },
  11. },
  12. fields: [
  13. { name: 'realName', type: 'string', label: '用户名' },
  14. { name: 'loginName', type: 'string', label: '登录名' },
  15. ],
  16. queryFields: [
  17. { name: 'realName', type: 'string', label: '用户名' },
  18. { name: 'loginName', type: 'string', label: '登录名' },
  19. ],
  20. };
  21. };
  1. // stores/index.js
  2. import React, { createContext, useMemo } from 'react';
  3. import { DataSet } from 'choerodon-ui/pro';
  4. import { inject } from 'mobx-react';
  5. import { injectIntl } from 'react-intl';
  6. import AdminListDataSet from './adminListDataSet';
  7. const Store = createContext();
  8. export default Store;
  9. export const StoreProvider = injectIntl(inject('AppState')(
  10. (props) => {
  11. const { children } = props;
  12. const adminListDataSet = useMemo(() => new DataSet(AdminListDataSet()), []);
  13. const value = {
  14. ...props,
  15. adminListDataSet,
  16. };
  17. return (
  18. <Store.Provider value={value}>
  19. {children}
  20. </Store.Provider>
  21. );
  22. },
  23. ));

3.编写ListView.js文件

  1. $ cd choerodon-todo-service
  2. $ mkdir -p react/routes/table/list/stores
  3. $ touch react/routes/table/index.js
  4. $ touch react/routes/table/list/ListView.js
  1. // table/list/ListView.js
  2. import React, { useContext } from 'react';
  3. import { Content, Header, Breadcrumb, TabPage } from '@choerodon/boot';
  4. import { Table, Button } from 'choerodon-ui/pro';
  5. import Store from './stores';
  6. const { Column } = Table;
  7. export default function ListView() {
  8. const { adminListDataSet } = useContext(Store);
  9. return (
  10. <TabPage>
  11. <Header>
  12. <Button icon="playlist_add" onClick={() => console.log('创建')}>创建</Button>
  13. </Header>
  14. <Breadcrumb />
  15. <Content style={{ paddingTop: 0 }}>
  16. <Table pristine dataSet={adminListDataSet}>
  17. <Column name="realName" />
  18. <Column name="loginName" />
  19. </Table>
  20. </Content>
  21. </TabPage>
  22. );
  23. }

配置异步路由

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

  1. // index.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';
  6. const HelloIndex = asyncRouter(() => import('./routes/hello'));
  7. const TableIndex = asyncRouter(() => import('./routes/table'));
  8. function Index({ match }) {
  9. return (
  10. <Switch>
  11. <Route path={`${match.url}/hello`} component={HelloIndex} />
  12. <Route path={`${match.url}/table`} component={TableIndex} />
  13. <Route path="*" component={nomatch} />
  14. </Switch>
  15. );
  16. }
  17. export default inject('AppState')(Index);

页面访问

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

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