GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(projects): 修复multiTab关闭逻辑，添加关闭左边和右边的标签右键操作

Browse Source
This commit is contained in:
Soybean 2021-11-08 19:33:38 +08:00
parent 560b8a158f
commit ed90cb8f8e
2 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
View File

@ -33,7 +33,7 @@ interface Props {
y: number;
}
type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-all';
type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
type Option = DropdownOption & {
key: DropdownKey;
};
@ -49,7 +49,7 @@ const emit = defineEmits<{
}>();
const app = useAppStore();
const { removeMultiTab, clearMultiTab } = useAppStore();
const { removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore();
const { handleReload } = useReloadInject();
const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
@ -71,6 +71,16 @@ const options = computed<Option[]>(() => [
key: 'close-other',
icon: iconifyRender('ant-design:column-width-outlined')
},
{
label: '关闭左边标签页',
key: 'close-left',
icon: iconifyRender('mdi:format-horizontal-align-left')
},
{
label: '关闭右边标签页',
key: 'close-right',
icon: iconifyRender('mdi:format-horizontal-align-right')
},
{
label: '关闭全部标签页',
key: 'close-all',
@ -88,7 +98,7 @@ const actionMap = new Map<DropdownKey, () => void>([
[
'close-current',
() => {
removeMultiTab(app.multiTab.activeRoute);
removeMultiTab(props.currentPath);
}
],
[
@ -97,6 +107,18 @@ const actionMap = new Map<DropdownKey, () => void>([
clearMultiTab([props.currentPath]);
}
],
[
'close-left',
() => {
clearLeftMultiTab(props.currentPath);
}
],
[
'close-right',
() => {
clearRightMultiTab(props.currentPath);
}
],
[
'close-all',
() => {

31
src/store/modules/app/index.ts
View File

@ -110,6 +110,37 @@ const appStore = defineStore({
router.push(activePath);
this.setActiveMultiTab(activePath);
},
/** 删除左边多页签 */
clearLeftMultiTab(fullPath: string) {
const { routes } = this.multiTab;
const currentIndex = routes.findIndex(route => route.fullPath === fullPath);
const activeIndex = this.activeMultiTabIndex;
if (currentIndex > -1) {
const remain = [ROUTE_HOME.path, ...routes.slice(currentIndex).map(v => v.fullPath)];
const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
this.multiTab.routes = updateRoutes;
if (activeIndex < currentIndex) {
const activePath = updateRoutes[updateRoutes.length - 1].fullPath;
router.push(activePath);
this.setActiveMultiTab(activePath);
}
}
},
/** 删除右边多页签 */
clearRightMultiTab(fullPath: string) {
const { routes } = this.multiTab;
const currentIndex = routes.findIndex(route => route.fullPath === fullPath);
const activeIndex = this.activeMultiTabIndex;
if (currentIndex > -1) {
const remain = [ROUTE_HOME.path, ...routes.slice(0, currentIndex + 1).map(v => v.fullPath)];
const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
this.multiTab.routes = updateRoutes;
if (activeIndex > currentIndex) {
router.push(fullPath);
this.setActiveMultiTab(fullPath);
}
}
},
/** 点击单个页签tab */
handleClickTab(fullPath: string) {
if (this.multiTab.activeRoute !== fullPath) {