列表页如何在URL中记住查询条件以及分页排序条件👑 [需求]

[anewcoder1992]

🥰 需求描述

目前查询某个table ，链接中只是路由。但并不包含查询信息。那如何实现给一个url 可以跳转到指定的查询条件和第几页 呢。 比如给定 类似https://cowboy-dev.castlery.com/wms/home#/services?filter={name:123}&order=ASC&page=1&perPage=50&sort=id 页面就会自动带着name =123 和第1页 每页50行数据去查询改列表，且name输入框会自动带出123显示。

🧐 解决方案

table 自动解析 search 讲 默认的 pagination 和 filter覆盖。

🚑 其他信息

[ccloveak]

试试 'react-router-dom' 的 useLocation

[anewcoder1992]

试试 'react-router-dom' 的 useLocation

这个只是获取 location信息的把。如何将这些信息塞入table的查询条件中呢？

[chenshuai2144]

initValues 和 setFiledValue 这两个都可以

[anewcoder1992]

initValues 和 setFiledValue 这两个都可以

好像是可以 ，所以这个功能还是自己手动实现 就好咯 ，并不会作为table的一个特性？

[chenshuai2144]

有 issue希望有这个，但是我们现在人手不是很够，只能搁置了

[ccloveak]

有实现方法的话分享一下啊，我现在做的这个跟你类似 浏览器后退的时候 查询列表的值跟着回到上个url地址上带的值

[chenshuai2144]

useLocation + initValues 这两个办法就可以了吧

[ccloveak]

useLocation + initValues 这两个办法就可以了吧

之前是什么需求，用Input重新渲染了查询列表（就是要改动的话，会改很多地方）。现在已经手动把Input变成受控组件了，现在的问题总结一下就是：根据浏览器后退事件改变 Input 的value。另外项目leader指出受控组件跟输入法之间_可能_还会存在冲突。。。

[chenshuai2144]

输入法的问题是react的bug，应该已经修掉了

[Straighty94]

import {useHistory} from 'umi'
import {useCallback} from "react";

type Partial<T> = {
    [P in keyof T]?: T[P];
};

interface PageData {
    page: number,
    pageSize?: number
}

/**
 * 缓存表格
 */
export function useTableKeep<T>() {
    // 历史对象
    const history = useHistory()
    // 搜索数据
    let searchData: Partial<T> = {}
    // 页码数据
    let pageData: PageData = {page: 1}

    // 初始化
    const {query}: any = history.location
    const queryKeys = Object.keys(query)
    if (queryKeys.length) {
        queryKeys.forEach(key => {
            if (key === 'page' || key === 'pageSize') {
                pageData[key] = query[key]
            } else {
                searchData[key] = query[key]
            }
        })
    }

    const ref = useCallback(form => {
        if (form) {
            form.setFieldsValue({
                ...searchData
            })
        }
    }, [])

    /**
     * 记录参数到路由
     */
    const routerReplace = () => {
        // @ts-ignore
        history.replace({
            pathname: history.location.pathname,
            query: {
                ...searchData,
                ...pageData
            }
        })
    }

    /**
     * 搜索栏修改
     * @param params
     */
    const onSearchChange = (params: Partial<T>) => {
        searchData = Object.assign(searchData, params)
        routerReplace()
        return params
    }

    /**
     * 页面修改
     * @param page
     * @param pageSize
     */
    const onPageDataChange = (page: number, pageSize?: number) => {
        pageData = Object.assign(pageData, {
            page,
            pageSize
        })
        routerReplace()
    }

    return {
        formRef: ref,
        pagination: {
            defaultCurrent: pageData.page,
            defaultPageSize: pageData.pageSize,
            onChange: onPageDataChange
        },
        beforeSearchSubmit: onSearchChange
    }
}

TableListParams 缓存ProTable查询数据

使用场景：在需要缓存搜索页面的查询数据使用，避免跳转页面之后页面被重置，导致筛选项丢失

const keep = useTableKeep<筛选项定义>()

return (
    <ProTable {...keep}>
        ...
    </ProTable>
)

注意：select等需要匹配value的组件缓存后会变成string类型，所以匹配的value请使用string类型

[Straighty94]

这是我写的一个 大佬们看看有没有问题 @chenshuai2144

[chenshuai2144]

来个 pr？ 做成一个通用的

[chenshuai2144]

官方提供了

syncToUrl	同步参数到 url 上,url 只支持 string，在使用之前最好读一下文档	true \	(values,type)=>values	-

[ccloveak]

官方提供了

syncToUrl 同步参数到 url 上,url 只支持 string，在使用之前最好读一下文档 true | (values,type)=>values -

优秀啊。。。好几天没做table了 变化好大啊

[anewcoder1992]

官方提供了

syncToUrl 同步参数到 url 上,url 只支持 string，在使用之前最好读一下文档 true | (values,type)=>values -

在table中 设置这个 为true 可以让查询条件显示到url ,但是 ，分页和排序信息并没有保存到url中。这样对于table 而言 仅仅保存查询表单信息，并没有太大实际上的作用。业务上一般还是得支持 分页信息以及排序信息。所以是否 改造table 更为合理呢

[chenshuai2144]

@MoonSeeing 直接来个 pr 吧，信息是有的只是没有设置进来

[anewcoder1992]

@MoonSeeing 直接来个 pr 吧，信息是有的只是没有设置进来

在table中实现的 syncToUrl 暂时未支持分页信息和排序 #2006

[alvin0216]

同上，真实业务需求还有

1. 通过当前页面修改检索条件，比如 history.replace({ pathname, query: { ... }})，需要刷新表格
2. 需要有转化的参数 比如时间 antd 采用的是 moment 格式，映射到表单需要转化
3. 需要有某个表单值不需要通过 url 来缓存到路由

[tangtanglove]

@chenshuai2144 现在这个issue解决了吗？

[tss0823]

useLocation + initValues 这两个办法就可以了吧 我现在就是这么干的，但是遇到一个问题，就是每次点击“重置”按钮后，再点下一页，分页条件current 永远是第1页，好几天了，无解

[ccloveak]

useLocation + initValues 这两个办法就可以了吧

我现在就是这么干的，但是遇到一个问题，就是每次点击“重置”按钮后，再点下一页，分页条件current 永远是第1页，好几天了，无解

你接管重置 除了检索条件重置 其他的保持不变比如sort page pagesize

[wxf4150]

  form={{
    // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
    syncToUrl: (values, type) => {
      console.log("syncToUrl",type,values,history.location.query)
      if (type === 'get') {
         values={...values,...history.location.query}
      }
      return values;

  syncToUrl    加上这个values={...values,...history.location.query}

[ccloveak]

浏览器回退现在只能监听 popState 然后处理 url 设置到表单里吧？

考虑下单一数据源呢 只根据url取数据 设置state