baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
16.85k stars 2.47k forks source link

app组件中使用nav切换页面的时候不会选中 #10614

Closed lawbc closed 1 month ago

lawbc commented 1 month ago

描述问题:

app组件中使用nav切换页面的时候不会选中,不会高亮,我是在page的aside里面用nav的,然后点击url可以根据link的to进行刷新,url参数值会变化,页面也可以刷新,但是nav就不会选中

截图或视频:

nav

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? npm

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在

6.6.0

  1. 粘贴有问题的完整 amis schema 代码:
    
    import addPage from './add'
    import editPage from './edit'

export default { type:'page', asideResizor: true, asideMinWidth: 150, asideMaxWidth: 400, aside:{ type: 'form', wrapWithPanel: false, target: 'menu-list', submitOnInit: true, messages:{ validateFailed:'' }, body:[ { type: 'nav', name: 'systemId', stacked: true, searchable: true, source: { url: '/upms/system/options', adaptor: function (payload, response, api, context) { if(payload.data && payload.data.length > 0){ for(let i = 0; i < payload.data.length; i++){ payload.data[i].to = '?systemId=' + payload.data[i].value; payload.data[i].active = i == 0; } } return { ...payload }; } } } ] }, body: { type: 'crud', name:'menu-list', autoFillHeight: true, api: { url: '/upms/menu/list/tree', sendOn: 'this.systemId' }, footerToolbar: [ ], autoGenerateFilter: { showBtnToolbar: false, columnsNum: 3 }, headerToolbar:[ 'bulkActions', { type: 'button', actionType: 'dialog', align: 'right', label: '新增', icon: 'fa fa-plus pull-left', primary: true, dialog: { title: '新增菜单', body: addPage, closeOnEsc: true, showErrorMsg: false, size: 'lg' } } ], 'bulkActions': [ { label: '批量删除', actionType: 'ajax', api: 'post:/upms/menu/delete?ids=${ids}', confirmText: '确定要批量删除?' } ], columns: [ { name: 'name', label: '菜单名称', searchable: { type: 'input-text', name: 'name', label: '菜单名称' } }, { name: 'code', label: '菜单编码', searchable: { type: 'input-text', name: 'code', label: '菜单编码' } }, { name: 'path', label: '菜单路径' }, { name: 'permission', label: '权限编码' }, { name: 'typeStr', label: '菜单类型' }, { name: 'mark', label: '标记' }, { name: 'sortNo', label: '排序号' }, { name: 'visibleFlag', label: '是否显示', type: 'mapping', map: { "0": "", "1": "", } }, { type: 'operation', label: '操作', buttons: [ { label: '修改', type: 'button', actionType: 'dialog', dialog:{ title: '修改菜单', closeOnEsc: true, showErrorMsg: false, size: 'lg', body: editPage } }, { label: '删除', type: 'button', level: 'danger', actionType:'ajax', confirmText: '确认要删除该记录?', api: '/upms/menu/delete?ids=${id}' } ] } ] } }



4. 操作步骤
请简单描述一下复现的操作步骤...
lawbc commented 1 month ago

官网的admin-demo改了一个页面使用nav依然选中不了 admin-nav

lawbc commented 1 month ago

已解决,amis-admin中默认提供的isCurrentUrl有bug,需要用示例里面提供的代码才行,代码入下:

function isCurrentUrl(to, ctx){
    if (!to) {
      return false;
    }
    const link = normalizeLink(to);
    const location = window.location;
    let pathname = link;
    let search = '';
    const idx = link.indexOf('?');
    if (~idx) {
      pathname = link.substring(0, idx);
      search = link.substring(idx);
    }

    if (search) {
      if (pathname !== location.pathname || !location.search) {
        return false;
      }

      const query = qs.parse(search.substring(1));
      const currentQuery = qs.parse(location.search.substring(1));

      return Object.keys(query).every(
        key => query[key] === currentQuery[key]
      );
    } else if (pathname === location.pathname) {
      return true;
    } else if (!~pathname.indexOf('http') && ~pathname.indexOf(':')) {
      return match(link, {
        decode: decodeURIComponent,
        strict: ctx?.strict ?? true
      })(location.pathname);
    }

    return false;
  }