undefinedfix
Sign in

How to realize the search function of Ant Design Pro form?

Shinchan edited in Tue, 12 Apr 2022

Problem description

I am using the local mock test data, and see that the form search function in the official example can be used, but I found that the search function failed after I made the corresponding modification. So I'd like to consult you

The background of the problem and what methods have you tried

The above is the official example. Click the query button to display the matching data in the table

Related codes

//Please paste the code text below (do not use pictures instead of codes)

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      const values = {
        ...fieldsValue,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };

      this.setState({
        formValues: values,
      });
      dispatch({
        type: 'rule/fetch',
        payload: values,
      });
    });
  };

I can find the corresponding request method in the corresponding model and service, but I can't find the logic of query processing

What are your expectations? What is the actual error message?

2 Replies
Ove
commented on Wed, 13 Apr 2022

ant-design-pro/mock/ rule.js

function getRule(req, res, u) {
  let url = u;
  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
    url = req.url; // eslint-disable-line
  }

  const params = parse(url, true).query;

  let dataSource = tableListDataSource;

  if (params.sorter) {
    const s = params.sorter.split('_');
    dataSource = dataSource.sort((prev, next) => {
      if (s[1] === 'descend') {
        return next[s[0]] - prev[s[0]];
      }
      return prev[s[0]] - next[s[0]];
    });
  }

  if (params.status) {
    const status = params.status.split(',');
    let filterDataSource = [];
    status.forEach(s => {
      filterDataSource = filterDataSource.concat(
        dataSource.filter(data => parseInt(data.status, 10) === parseInt(s[0], 10))
      );
    });
    dataSource = filterDataSource;
  }

  if (params.name) {
    dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
  }

  let pageSize = 10;
  if (params.pageSize) {
    pageSize = params.pageSize * 1;
  }

  const result = {
    list: dataSource,
    pagination: {
      total: dataSource.length,
      pageSize,
      current: parseInt(params.currentPage, 10) || 1,
    },
  };

  return res.json(result);
}
bigfunvip
commented on Wed, 13 Apr 2022

Both form query and filtering have the same meaning. They filter out unqualified data in datasource

lock This question has been locked and the reply function has been disabled.