Question

我的后端使用过滤器就像这样（例如）：

filters = {
  "groupOp": "AND",
  "rules": [
    {
      "field": "id",
      "op": "equal",
      "data": 6
    },
    {
      "field": "partnerId",
      "op": "equal",
      "data": 446
    }
  ],
  "groups": [
    {
      "groupOp": "AND",
      "rules": [
        {
          "field": "username",
          "op": "startswith",
          "data": "Alex"
        }
      ],
      "groups": []
    }
  ]
}

它与持久性过滤器一起工作正常，但它不能与传递给列表组件的用户过滤器一起使用。例如：

export const OrdersFilter = (props) => (
<Filter {...props}>
    <TextInput label="username" source="username" />
    <TextInput label="partnerId" source="partnerId" />
</Filter>
);

因为它是一个键值过滤器，我无法理解如何在用户过滤器字段中添加其他字段。

或者我如何在动作@@ redux-form / CHANGE之后包装url更改（'@@ router / LOCATION_CHANGE'）以修改传递给带有filtred字段名称的url的原始过滤器：

filter=%7B%22partnerId%22%3A%226%22%7D&order=DESC&page=1&perPage=10'
to 
filter={"field": "partnerId","op": "equal","data": 6}&order=DESC&page=1&perPage=10

Answer 1

您应该简化（展平）react-admin和＆＃34;翻译＆＃34;的客户端过滤器。它们是您dataProvider

中后端所期望的形状

Answer 2

您可以在过滤器中选择自定义属性，并通过后端应用过滤器。

const UserFilter = (props) => (
    <Filter {...props}>
        <TextInput label="Username" source="q" alwaysOn />
    </Filter>
);

后端：Loopback4 例如：

 async find(@param.filter(User) filter?: Filter<User>): Promise<User[]> {
    if(filter && filter.where){
        const where = filter.where as any;
        if(where["q"]){
          where.username = { ilike: '%'+where["q"]+'%' };
          filter.where = where;
        }
    }
    const response = await this.userRepository.find(filter);
    this.response.set("X-Total-Count", ""+response.length);
    this.response.set("access-control-expose-headers", "X-Total-Count");
    return response;
  }

react-admin：列表组件的自定义用户过滤器

2 个答案: