👑 [需求]记录搜索状态

[xiexingen]

🥰 需求描述 [详细地描述需求，让大家都能理解]

相信在中后台系统中，大家经常会遇到从列表里面编辑某条数据的情况，编辑完后需要回到之前的页码、搜索条件等这种情况
1.点编辑跳转到一个新的页面，点返回 回到列表页后搜索条件还在、排序状态还在、页码还在
之前编辑的是第二页的第三条，那么返回后应该还是在第二页的第三条

🧐 解决方案 [如果你有解决方案，在这里清晰地阐述]

🚑 其他信息 [如截图等其他信息可以贴在这里]

[chenshuai2144]

可以在onchange 中拿到的，但是记录需要自己记录了

[xiexingen]

onchange

onChange是table组件的onChange吧应该拿不到表单的搜索条件

[chenshuai2144]

你有什么好的想法吗？

[xiexingen]

你有什么好的想法吗？

最近遇到这个情况，还在想解决方案；
想过这样处理，每次触发查询之前 先把搜索条件存到sessionStorage里面(额外加个属性 将这条数据标记为active:false)；
情况一 如果页面是刷新进入 直接从sessionStorage获取缓存的条件 给调用的那
情况二 如果是从子页面点返回，那么返回之前将缓存的active标记为true，然后查询之前判断这个缓存数据的active是true的话用这个作为搜索条件
看各位大佬有没其他好点的方法

我这用途就是
1.浏览器刷新 要能保留之前的搜索条件、排序条件、页码
2.从列表点一条进入编辑页码(路由更改了，非弹窗形式) 然后在编译页码点返回 要能返回到之前的搜索条件、页码、排序 这种

[afc163]

onChange 中拿到所有状态，push 到浏览器 location 地址上。

Table 读取数据时从 location 地址上拿到所有状态复原，并以此为参数去请求数据或填充 Table 的属性。

[xiexingen]

onChange 中拿到所有状态，push 到浏览器 location 地址上。

Table 读取数据时从 location 地址上拿到所有状态复原，并以此为参数去请求数据或填充 Table 的属性。

url上会存在一些问题的，比如没修改任何查询条件点查询按钮、点重置按钮 如果通过路由push 那push的东西是相同的 但是实际上点查询是每次需要查的 哪怕条件没变

[erguotou520]

url上会存在一些问题的，比如没修改任何查询条件点查询按钮、点重置按钮 如果通过路由push 那push的东西是相同的 但是实际上点查询是每次需要查的 哪怕条件没变

可以把push改为replace，任何搜索条件的更改都replace路由参数，可能需要对参数类型做下标记，防止解析回来设置的类型不对

[liuhuapiaoyuan]

onChange 中拿到所有状态，push 到浏览器 location 地址上。
Table 读取数据时从 location 地址上拿到所有状态复原，并以此为参数去请求数据或填充 Table 的属性。

url上会存在一些问题的，比如没修改任何查询条件点查询按钮、点重置按钮 如果通过路由push 那push的东西是相同的 但是实际上点查询是每次需要查的 哪怕条件没变

为什么我的onChange完全不触发呢？

[liuhuapiaoyuan]

应该能够把检索，分页等条件触发一个onChange，让我们可以直接用location.replace的方式，将所有的条件进行url化

[infnan]

想到一种做法，供参考：

列表页面：

// 搜索状态
const [searchParams, setSearchParams] = useState(props.location?.state?.searchParams || {});
const searchRef = useRef();
useEffect(() => {
  if (props.location?.state) {
    // 清除状态否则刷新页面之后仍然会按原搜索条件搜索
    history.replace();
  }

  // 自动恢复搜索表单内容
  searchRef.current?.setFieldsValue({
    ...searchParams,
  });
}, []);

// 不需要initialValue
const columns = [
  ...
  {
    title: '名称',
    dataIndex: 'name',
  },
  ...
];
// ...
// 使用Link跳转到编辑页面
<Link to={{
  pathname: `/edit/${record.id}`,
  state: {
    searchParams,
  },
}}>
  编辑
</Link>
// ...
// 表格
<ProTable
  ...
  formRef={searchRef}
  params={searchParams}
  onSubmit={setSearchParams}

  // 分页的逻辑也不好看，求救
  pagination={{
    defaultCurrent: searchParams.current || 1,
    defaultPageSize: searchParams.pageSize || 20,
    onChange: (current, pageSize) => setSearchParams({
      ...searchParams,
      current,
      pageSize,
    }),
  }}
/>

编辑页面：

const onSubmit = (...) => {
  // ...
  // 使用router跳回去
  history.push('/admin/org', {
    searchParams: props.location?.state?.searchParams,
  });
};