'admin-22.04.29:修复tagsview标签页高亮等问题'
This commit is contained in:
lyt
parent
9991d931a2
commit
f6302a8b40
28
package-lock.json
generated
28
package-lock.json
generated
@ -34,7 +34,7 @@
|
||||
"vue-router": "^4.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^17.0.29",
|
||||
"@types/node": "^17.0.30",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.21.0",
|
||||
@ -47,7 +47,7 @@
|
||||
"prettier": "^2.6.2",
|
||||
"sass": "^1.51.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"typescript": "^4.6.3",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^2.9.6",
|
||||
"vue-eslint-parser": "^8.3.0"
|
||||
},
|
||||
@ -505,9 +505,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "17.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.29.tgz",
|
||||
"integrity": "sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==",
|
||||
"version": "17.0.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.30.tgz",
|
||||
"integrity": "sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/nprogress": {
|
||||
@ -4154,9 +4154,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
|
||||
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
|
||||
"version": "4.6.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
|
||||
"integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
|
||||
"devOptional": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
@ -4831,9 +4831,9 @@
|
||||
}
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "17.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.29.tgz",
|
||||
"integrity": "sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==",
|
||||
"version": "17.0.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.30.tgz",
|
||||
"integrity": "sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/nprogress": {
|
||||
@ -7422,9 +7422,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
|
||||
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
|
||||
"version": "4.6.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
|
||||
"integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
|
||||
"devOptional": true
|
||||
},
|
||||
"uri-js": {
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
"vue-router": "^4.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^17.0.29",
|
||||
"@types/node": "^17.0.30",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.21.0",
|
||||
@ -48,7 +48,7 @@
|
||||
"prettier": "^2.6.2",
|
||||
"sass": "^1.51.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"typescript": "^4.6.3",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^2.9.6",
|
||||
"vue-eslint-parser": "^8.3.0"
|
||||
},
|
||||
|
||||
@ -172,7 +172,7 @@ export default {
|
||||
sixClassic: 'Two',
|
||||
sixTransverse: 'Three',
|
||||
sixColumns: 'Four',
|
||||
tipText: 'Click the button below to copy the layout configuration to `/src/store/modules/themeConfig.ts` It has been modified in.',
|
||||
tipText: 'Click the button below to copy the layout configuration to `/src/stores/themeConfig.ts` It has been modified in.',
|
||||
copyText: 'replication configuration',
|
||||
resetText: 'restore default',
|
||||
copyTextSuccess: 'Copy succeeded!',
|
||||
|
||||
@ -172,7 +172,7 @@ export default {
|
||||
sixClassic: '经典',
|
||||
sixTransverse: '横向',
|
||||
sixColumns: '分栏',
|
||||
tipText: '点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。',
|
||||
tipText: '点击下方按钮，复制布局配置去 `src/stores/themeConfig.ts` 中修改。',
|
||||
copyText: '一键复制配置',
|
||||
resetText: '一键恢复默认',
|
||||
copyTextSuccess: '复制成功！',
|
||||
|
||||
@ -172,7 +172,7 @@ export default {
|
||||
sixClassic: '經典',
|
||||
sixTransverse: '橫向',
|
||||
sixColumns: '分欄',
|
||||
tipText: '點擊下方按鈕，複製佈局配寘去`src/store/modules/themeConfig.ts`中修改。',
|
||||
tipText: '點擊下方按鈕，複製佈局配寘去`src/stores/themeConfig.ts`中修改。',
|
||||
copyText: '一鍵複製配寘',
|
||||
resetText: '一鍵恢復默認',
|
||||
copyTextSuccess: '複製成功！',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
|
||||
<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
|
||||
<el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
|
||||
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
|
||||
<li
|
||||
v-for="(v, k) in tagsViewList"
|
||||
@ -90,6 +90,8 @@ interface TagsViewState {
|
||||
interface RouteParams {
|
||||
path: string;
|
||||
url: string;
|
||||
query: object;
|
||||
params: object;
|
||||
}
|
||||
interface CurrentContextmenu {
|
||||
meta: {
|
||||
@ -139,7 +141,14 @@ export default defineComponent({
|
||||
if (getThemeConfig.value.isShareTagsView) {
|
||||
return v.path === state.routePath;
|
||||
} else {
|
||||
return v.url ? v.url === state.routeActive : v.path === state.routeActive;
|
||||
if ((v.query && Object.keys(v.query).length) || (v.params && Object.keys(v.params).length)) {
|
||||
// 普通传参
|
||||
return v.url ? v.url === state.routeActive : v.path === state.routeActive;
|
||||
} else {
|
||||
// 通过 name 传参，params 取值，刷新页面参数消失
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I51RS9
|
||||
return v.path === state.routePath;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
|
||||
@ -229,7 +238,7 @@ export default defineComponent({
|
||||
if (state.tagsViewList.some((v: any) => v.path === path)) return false;
|
||||
item = state.tagsViewRoutesList.find((v: any) => v.path === path);
|
||||
}
|
||||
if (!item) return false
|
||||
if (!item) return false;
|
||||
if (item.meta.isLink && !item.meta.isIframe) return false;
|
||||
if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
|
||||
else item.query = to?.query ? to?.query : route.query;
|
||||
@ -280,22 +289,31 @@ export default defineComponent({
|
||||
};
|
||||
// 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
|
||||
const closeOtherTagsView = (path: string) => {
|
||||
state.tagsViewList = [];
|
||||
state.tagsViewRoutesList.map((v: any) => {
|
||||
if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
|
||||
});
|
||||
addTagsView(path, route);
|
||||
if (Session.get('tagsViewList')) {
|
||||
state.tagsViewList = [];
|
||||
Session.get('tagsViewList').map((v: any) => {
|
||||
if (v.meta.isAffix && !v.meta.isHide) {
|
||||
v.url = setTagsViewHighlight(v);
|
||||
state.tagsViewList.push({ ...v });
|
||||
}
|
||||
});
|
||||
addTagsView(path, route);
|
||||
addBrowserSetSession(state.tagsViewList);
|
||||
}
|
||||
};
|
||||
// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
|
||||
const closeAllTagsView = () => {
|
||||
state.tagsViewList = [];
|
||||
state.tagsViewRoutesList.map((v: any) => {
|
||||
if (v.meta.isAffix && !v.meta.isHide) {
|
||||
state.tagsViewList.push({ ...v });
|
||||
router.push({ path: state.tagsViewList[state.tagsViewList.length - 1].path });
|
||||
}
|
||||
});
|
||||
addBrowserSetSession(state.tagsViewList);
|
||||
if (Session.get('tagsViewList')) {
|
||||
state.tagsViewList = [];
|
||||
Session.get('tagsViewList').map((v: any) => {
|
||||
if (v.meta.isAffix && !v.meta.isHide) {
|
||||
v.url = setTagsViewHighlight(v);
|
||||
state.tagsViewList.push({ ...v });
|
||||
router.push({ path: state.tagsViewList[state.tagsViewList.length - 1].path });
|
||||
}
|
||||
});
|
||||
addBrowserSetSession(state.tagsViewList);
|
||||
}
|
||||
};
|
||||
// 6、开启当前页面全屏
|
||||
const openCurrenFullscreen = async (path: string) => {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin">
|
||||
<div class="flex-margin" style="width: 400px">
|
||||
<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
|
||||
<template #extra>
|
||||
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15"></el-input>
|
||||
<el-input v-model="value" placeholder="请输入路由参数 id 值" clearable></el-input>
|
||||
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
|
||||
<el-input v-model="value" placeholder="请输入路由参数 id 值" clearable style="width: 400px"></el-input>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
|
||||
<SvgIcon name="iconfont icon-putong" />
|
||||
普通路由传参
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin">
|
||||
<div class="flex-margin" style="width: 400px">
|
||||
<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
|
||||
<template #extra>
|
||||
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15"></el-input>
|
||||
<el-input v-model="value" placeholder="请输入路由参数id值" clearable></el-input>
|
||||
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
|
||||
<el-input v-model="value" placeholder="请输入路由参数id值" clearable style="width: 400px"></el-input>
|
||||
<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
|
||||
<SvgIcon name="iconfont icon-dongtai" />
|
||||
动态路由传参
|
||||
|
||||
Loading…
Reference in New Issue
Block a user