mirror of
				https://github.com/soybeanjs/soybean-admin.git
				synced 2025-11-04 15:53:43 +08:00 
			
		
		
		
	fix(projects): 修复multiTab关闭逻辑,添加关闭左边和右边的标签右键操作
This commit is contained in:
		@@ -33,7 +33,7 @@ interface Props {
 | 
				
			|||||||
  y: number;
 | 
					  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 & {
 | 
					type Option = DropdownOption & {
 | 
				
			||||||
  key: DropdownKey;
 | 
					  key: DropdownKey;
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
@@ -49,7 +49,7 @@ const emit = defineEmits<{
 | 
				
			|||||||
}>();
 | 
					}>();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const app = useAppStore();
 | 
					const app = useAppStore();
 | 
				
			||||||
const { removeMultiTab, clearMultiTab } = useAppStore();
 | 
					const { removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore();
 | 
				
			||||||
const { handleReload } = useReloadInject();
 | 
					const { handleReload } = useReloadInject();
 | 
				
			||||||
const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
 | 
					const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -71,6 +71,16 @@ const options = computed<Option[]>(() => [
 | 
				
			|||||||
    key: 'close-other',
 | 
					    key: 'close-other',
 | 
				
			||||||
    icon: iconifyRender('ant-design:column-width-outlined')
 | 
					    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: '关闭全部标签页',
 | 
					    label: '关闭全部标签页',
 | 
				
			||||||
    key: 'close-all',
 | 
					    key: 'close-all',
 | 
				
			||||||
@@ -88,7 +98,7 @@ const actionMap = new Map<DropdownKey, () => void>([
 | 
				
			|||||||
  [
 | 
					  [
 | 
				
			||||||
    'close-current',
 | 
					    'close-current',
 | 
				
			||||||
    () => {
 | 
					    () => {
 | 
				
			||||||
      removeMultiTab(app.multiTab.activeRoute);
 | 
					      removeMultiTab(props.currentPath);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  ],
 | 
					  ],
 | 
				
			||||||
  [
 | 
					  [
 | 
				
			||||||
@@ -97,6 +107,18 @@ const actionMap = new Map<DropdownKey, () => void>([
 | 
				
			|||||||
      clearMultiTab([props.currentPath]);
 | 
					      clearMultiTab([props.currentPath]);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  ],
 | 
					  ],
 | 
				
			||||||
 | 
					  [
 | 
				
			||||||
 | 
					    'close-left',
 | 
				
			||||||
 | 
					    () => {
 | 
				
			||||||
 | 
					      clearLeftMultiTab(props.currentPath);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  ],
 | 
				
			||||||
 | 
					  [
 | 
				
			||||||
 | 
					    'close-right',
 | 
				
			||||||
 | 
					    () => {
 | 
				
			||||||
 | 
					      clearRightMultiTab(props.currentPath);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  ],
 | 
				
			||||||
  [
 | 
					  [
 | 
				
			||||||
    'close-all',
 | 
					    'close-all',
 | 
				
			||||||
    () => {
 | 
					    () => {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -110,6 +110,37 @@ const appStore = defineStore({
 | 
				
			|||||||
      router.push(activePath);
 | 
					      router.push(activePath);
 | 
				
			||||||
      this.setActiveMultiTab(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 */
 | 
					    /** 点击单个页签tab */
 | 
				
			||||||
    handleClickTab(fullPath: string) {
 | 
					    handleClickTab(fullPath: string) {
 | 
				
			||||||
      if (this.multiTab.activeRoute !== fullPath) {
 | 
					      if (this.multiTab.activeRoute !== fullPath) {
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user