hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@ -34,7 +34,7 @@
"vue-router": "^4.0.14" "vue-router": "^4.0.14"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^17.0.29", "@types/node": "^17.0.30",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.7", "@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.21.0", "@typescript-eslint/eslint-plugin": "^5.21.0",
@ -47,7 +47,7 @@
"prettier": "^2.6.2", "prettier": "^2.6.2",
"sass": "^1.51.0", "sass": "^1.51.0",
"sass-loader": "^12.6.0", "sass-loader": "^12.6.0",
"typescript": "^4.6.3", "typescript": "^4.6.4",
"vite": "^2.9.6", "vite": "^2.9.6",
"vue-eslint-parser": "^8.3.0" "vue-eslint-parser": "^8.3.0"
}, },
@ -505,9 +505,9 @@
} }
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "17.0.29", "version": "17.0.30",
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.29.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.30.tgz",
"integrity": "sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==", "integrity": "sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==",
"dev": true "dev": true
}, },
"node_modules/@types/nprogress": { "node_modules/@types/nprogress": {
@ -4154,9 +4154,9 @@
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "4.6.3", "version": "4.6.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
"devOptional": true, "devOptional": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
@ -4831,9 +4831,9 @@
} }
}, },
"@types/node": { "@types/node": {
"version": "17.0.29", "version": "17.0.30",
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.29.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.30.tgz",
"integrity": "sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==", "integrity": "sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==",
"dev": true "dev": true
}, },
"@types/nprogress": { "@types/nprogress": {
@ -7422,9 +7422,9 @@
"dev": true "dev": true
}, },
"typescript": { "typescript": {
"version": "4.6.3", "version": "4.6.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
"devOptional": true "devOptional": true
}, },
"uri-js": { "uri-js": {

4
package.json
View File

@ -35,7 +35,7 @@
"vue-router": "^4.0.14" "vue-router": "^4.0.14"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^17.0.29", "@types/node": "^17.0.30",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.7", "@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.21.0", "@typescript-eslint/eslint-plugin": "^5.21.0",
@ -48,7 +48,7 @@
"prettier": "^2.6.2", "prettier": "^2.6.2",
"sass": "^1.51.0", "sass": "^1.51.0",
"sass-loader": "^12.6.0", "sass-loader": "^12.6.0",
"typescript": "^4.6.3", "typescript": "^4.6.4",
"vite": "^2.9.6", "vite": "^2.9.6",
"vue-eslint-parser": "^8.3.0" "vue-eslint-parser": "^8.3.0"
}, },

2
src/i18n/lang/en.ts
View File

@ -172,7 +172,7 @@ export default {
sixClassic: 'Two', sixClassic: 'Two',
sixTransverse: 'Three', sixTransverse: 'Three',
sixColumns: 'Four', 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', copyText: 'replication configuration',
resetText: 'restore default', resetText: 'restore default',
copyTextSuccess: 'Copy succeeded!', copyTextSuccess: 'Copy succeeded!',

2
src/i18n/lang/zh-cn.ts
View File

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

2
src/i18n/lang/zh-tw.ts
View File

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

50
src/layout/navBars/tagsView/tagsView.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }"> <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"> <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
<li <li
v-for="(v, k) in tagsViewList" v-for="(v, k) in tagsViewList"
@ -90,6 +90,8 @@ interface TagsViewState {
interface RouteParams { interface RouteParams {
path: string; path: string;
url: string; url: string;
query: object;
params: object;
} }
interface CurrentContextmenu { interface CurrentContextmenu {
meta: { meta: {
@ -139,7 +141,14 @@ export default defineComponent({
if (getThemeConfig.value.isShareTagsView) { if (getThemeConfig.value.isShareTagsView) {
return v.path === state.routePath; return v.path === state.routePath;
} else { } 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 到浏览器临时缓存中，页面刷新时，保留记录 // 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
@ -229,7 +238,7 @@ export default defineComponent({
if (state.tagsViewList.some((v: any) => v.path === path)) return false; if (state.tagsViewList.some((v: any) => v.path === path)) return false;
item = state.tagsViewRoutesList.find((v: any) => v.path === path); 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 (item.meta.isLink && !item.meta.isIframe) return false;
if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params; if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
else item.query = to?.query ? to?.query : route.query; else item.query = to?.query ? to?.query : route.query;
@ -280,22 +289,31 @@ export default defineComponent({
}; };
// 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭 // 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
const closeOtherTagsView = (path: string) => { const closeOtherTagsView = (path: string) => {
state.tagsViewList = []; if (Session.get('tagsViewList')) {
state.tagsViewRoutesList.map((v: any) => { state.tagsViewList = [];
if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v }); Session.get('tagsViewList').map((v: any) => {
}); if (v.meta.isAffix && !v.meta.isHide) {
addTagsView(path, route); v.url = setTagsViewHighlight(v);
state.tagsViewList.push({ ...v });
}
});
addTagsView(path, route);
addBrowserSetSession(state.tagsViewList);
}
}; };
// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭 // 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
const closeAllTagsView = () => { const closeAllTagsView = () => {
state.tagsViewList = []; if (Session.get('tagsViewList')) {
state.tagsViewRoutesList.map((v: any) => { state.tagsViewList = [];
if (v.meta.isAffix && !v.meta.isHide) { Session.get('tagsViewList').map((v: any) => {
state.tagsViewList.push({ ...v }); if (v.meta.isAffix && !v.meta.isHide) {
router.push({ path: state.tagsViewList[state.tagsViewList.length - 1].path }); v.url = setTagsViewHighlight(v);
} state.tagsViewList.push({ ...v });
}); router.push({ path: state.tagsViewList[state.tagsViewList.length - 1].path });
addBrowserSetSession(state.tagsViewList); }
});
addBrowserSetSession(state.tagsViewList);
}
}; };
// 6、开启当前页面全屏 // 6、开启当前页面全屏
const openCurrenFullscreen = async (path: string) => { const openCurrenFullscreen = async (path: string) => {

6
src/views/params/common/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }"> <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 共用` 进行单标签测试"> <el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
<template #extra> <template #extra>
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15"></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></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"> <el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
<SvgIcon name="iconfont icon-putong" /> <SvgIcon name="iconfont icon-putong" />
普通路由传参 普通路由传参

6
src/views/params/dynamic/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }"> <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 共用` 进行单标签测试"> <el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
<template #extra> <template #extra>
<el-input v-model="tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15"></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></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"> <el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
<SvgIcon name="iconfont icon-dongtai" /> <SvgIcon name="iconfont icon-dongtai" />
动态路由传参 动态路由传参