search

fangzhengjin / umi-plugin-panel-tabs

umi-plugin-panel-tabs
MIT License
86 stars 20 forks source link

[Question] 同一路由带不同的参数如何处理？（需要新Tab页或原Tab页刷新） #65

Open scarletfrank opened 1 year ago

scarletfrank commented 1 year ago

问题描述

用Ant Design Pro开发了一个项目，业务提出最好支持Tab页。一番搜寻，找到了您的项目，轻松实现了Tab页功能。现在有个烦恼，有一个展示页面，我设计了可以带不同的参数跳过去，现状是：

  1. 表格中每一行数据都有一个操作按钮，带参数用history.push跳转
  2. 选中行1，点击按钮，带参数A跳转后，展示正常。（Tab页不关闭）
  3. 回到表格页面，选中行2，点击按钮，带参数B跳转（去到步骤2的Tab页，页面未刷新）
  4. 我个人操作习惯是在这个Tab页面右键点【刷新】，就会按参数B再刷新一次，得到我想要看的新页面。（当然业务不能接受就是了）

所以我的问题如下：

  1. 对于同一路由带不同参数的情况，是应该新增Tab页面还是让原Tab页面刷新好呢
  2. 如果要实现上述处理，这应该是tab页插件的功能，还是我自己页面应该监测页面参数变化呢

示例代码

项目中两种页面都会遇到这个问题

  1. 前面问题描述后，我总感觉我写的useEffect有问题（根据url参数来改变访问接口参数）。因为我在步骤3的时候，接口请求后是有提示的（即第二次进入的确以新参数调了接口），好像只是我的画布第二次收到新数据后没刷新。（此时手动刷新URL应该又相当于第一次进入页面了）
  2. ProTable的普通页面，用columns配置表格字段和查询栏的参数，这个好像很智能，url里带着参数就能实现带参查询了。（此时右键刷新Tab页应该也会变成第一次进入页面的处理逻辑）
// 画布的页面
import { useRequest, history } from 'umi';
function App(){
  const { loading, run } = useRequest(someservice, {
    manual: true,
    onSuccess: (result, params) => {
      setGraphData(result || []);
      setReady(true);
      message.info('加载接口数据完毕');
    },
    onError: (error) => {
      message.error(error.message);
    },
  });
  useEffect(() => {
    // location 对象，包含 pathname、search 和 hash
    let search = history.location.search;
    let obj = {};
    if (search.indexOf('?') != -1) {
      let query = search.substring(search.indexOf('?') + 1);
      let vars = query.split('&');
      for (var i = 0; i < vars.length; i++) {
        let pair = vars[i].split('=');
        obj[pair[0]] = pair[1];
      }
      if (obj.paramA=== 'undefined') {
        message.error('参数跳转为空');
      } else {
        run({ paramA: obj.paramA});
      }
    }
  }, [history.location.search]);
}

其他信息

放一下版本信息

  "dependencies": {
    "@ant-design/charts": "^1.4.2",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-card": "^1.19.0",
    "@ant-design/pro-components": "^1.1.14",
    "@ant-design/pro-descriptions": "^1.10.0",
    "@ant-design/pro-form": "^1.64.0",
    "@ant-design/pro-layout": "^6.35.0",
    "@ant-design/pro-table": "^2.71.0",
    "@umijs/route-utils": "^2.0.0",
    "ahooks": "^3.7.0",
    "antd": "^4.23.0",
    "classnames": "^2.3.0",
    "lodash": "^4.17.0",
    "moment": "^2.29.0",
    "omit.js": "^2.0.2",
    "rc-menu": "^9.1.0",
    "rc-util": "^5.16.0",
    "react": "^17.0.0",
    "react-dev-inspector": "^1.7.0",
    "react-dom": "^17.0.0",
    "react-helmet-async": "^1.2.0",
    "react-i18next": "^11.16.9",
    "umi": "^3.5.0",
    "umi-plugin-panel-tabs": "^0.0.27-SNAPSHOT"
  },