newoa-rest-utils v1.0.0

newoa-rest-utils

newoa-rest-utils 解决一些 React 组件与新 OA 项目的 RESTful Web API 交互的状态管理。

分页查询列表 createListFetch()

分页查询列表是非常常用的一个场景，而且现在后端关于数据分页的接口已经规范化，所以就有了createListFetch()这个高阶组件，用于创建与分页查询列表后端接口进行交互并管理相关的状态。

示例：

import { createListFetch } from 'newoa-rest-utils';
import DataTable, { TableColumn } from 'sinoui-data-table';
import Form, { FormItem, Label, TextInput } from 'sinoui-forms';
import Button from 'sinoui-components/Button';

const UsersListFetch = createListFetch('/oa/users');

expect default function UsersList() {
  return <UsersListFetch>{
    (listFetch) =>
      <div>
        <Form onSubmit={listFetch.query}>
          <FormItem>
            <Label>用户名</Label>
            <TextInput name="userName" />
          </FormItem>
          <Button>查询</Button>
        </Form>
        <DataTable
          {...listFetch}
          onChange={listFetch.fetch}
        >
          <TableColumn title="姓名" name="userName" />
        </DataTable>
      </div>
  }</UsersListFetch>;
};

上面的示例中，关键点是通过createListFetch('/oa/users')创建了一个UsersListFetch组件， 此组件会在挂载 DOM 成功后(componentDidMounted())发出数据加载请求，以获取列表数据。UsersListFetch组件会通过函数  子元素（function children）的方式将  列表数据的状态告知子元素，并渲染出子元素。所以，你看到的UsersListFetch组件的用法几乎是下面这个样子：

<UsersListFetch>
  {listFetch =>
    listFetch.loading ? (
      <div>数据正在加载中...</div>
    ) : (
      <div>加载到${listFetch.data.length}条数据</div>
    )
  }
</UsersListFetch>

 子元素函数的第一个参数是代表数据状态的对象，此对象包括以下属性：

• loading - 数据加载中状态。如果为 true，表示加载中。
• error - 数据加载失败状态。如果为 true，表示加载失败。
• data - 加载到的列表数据。为数组。
• pagination - 分页数据对象，有以下属性：
  • pageSize - 页大小，即一页  应显示多少条数据，默认为 10
  • total - 数据总数量
  • currentPage - 当前页索引，从 1 开始计数

• fetch() - 用于  获取列表数据的方法， 方法规格如下：

  function fetch (
    pageNo: number,
    pageSize: number,
    sort: {
      name: string,
      direction: 'desc' | 'asc'
    }
  ) => Promise;

    一般用于翻页、 排序、设置页大小，如：

  1. 加载第 10 页数据

     fetch(10);

  2. 将页大小切换到 20/页：

     fetch(1, 20);

  3. 按照用户名（userName）排序

     fetch(1, 10, {
       name: 'userName',
       direction: 'desc',
     });

• query() - 用于过滤数据列表的方法，方法规格如下：

  function query(
    {
      [filterParamName: string] : any,
    }
  ) => Promise;

   示例：查找姓张的用户：

  query({ userName: '张' });

通过createListFetch()方法创建的UsersListFetch组件，会将所有的属性作为查询条件的一部分。所以可以通过组件属性的方式传递一些查询条件，如在北京分行(部门 id 为001001)中获取用户数据：

<UsersListFetch deptId="001001">
{listFetch => ...}
</UsersListFetch>

如果需要在UsersListFetch组件之外加载数据，使用innerRef属性获取到UsersListFetch组件实例，如下所示：

class UsersList extends React.Component {
  render() {
    return <div>
      <Button onClick={this.listFetch.fetch()}>刷新列表</Button>
      <UsersListFetch innerRef={listFetch => {this.listFetch = listFetch;}}>
      {
        listFetch => ...
      }
      </UsersListFetch>
    </div>
  }
}