'admin-22.04.29:修复tagsview标签页高亮等问题'

This commit is contained in:
lyt 2022-04-29 13:19:54 +08:00
parent 9991d931a2
commit f6302a8b40
8 changed files with 59 additions and 41 deletions

28
package-lock.json generated
View File

@ -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": {

View File

@ -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"
},

View File

@ -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!',

View File

@ -172,7 +172,7 @@ export default {
sixClassic: '经典',
sixTransverse: '横向',
sixColumns: '分栏',
tipText: '点击下方按钮,复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。',
tipText: '点击下方按钮,复制布局配置去 `src/stores/themeConfig.ts` 中修改。',
copyText: '一键复制配置',
resetText: '一键恢复默认',
copyTextSuccess: '复制成功!',

View File

@ -172,7 +172,7 @@ export default {
sixClassic: '經典',
sixTransverse: '橫向',
sixColumns: '分欄',
tipText: '點擊下方按鈕,複製佈局配寘去`src/store/modules/themeConfig.ts`中修改。',
tipText: '點擊下方按鈕,複製佈局配寘去`src/stores/themeConfig.ts`中修改。',
copyText: '一鍵複製配寘',
resetText: '一鍵恢復默認',
copyTextSuccess: '複製成功!',

View File

@ -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 tagsViewisAffix
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 tagsViewisAffix
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) => {

View File

@ -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" />
普通路由传参

View File

@ -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" />
动态路由传参