diff --git a/src/views/collect/CollectOrderTabs.vue b/src/views/collect/CollectOrderTabs.vue index b7d95ba2..46e72d8d 100644 --- a/src/views/collect/CollectOrderTabs.vue +++ b/src/views/collect/CollectOrderTabs.vue @@ -126,19 +126,30 @@ :key="item.name" :label="item.title" :name="item.name" - + @contextmenu.stop.prevent="handleTabContextMenu($event, item)" > +
- -
- - - -
+ + + + + + + + + + + + @@ -225,7 +236,7 @@ export default { return { showContextMenu: false, // 控制上下文菜单的显示 contextMenuPosition: { x: 0, y: 0 }, // 上下文菜单的位置 - selectBusTypeDisabled: false, + selectBusTypeDisabled: false, busQuery: { busKey: '', workplaceCode: null, @@ -445,6 +456,7 @@ export default { this.formData.busType = this.$route.query.busType }else if (this.busTypeList.length == 1) { this.formData.busType = this.busTypeList[0].documentTypeCode + this.$router.push({query: {...this.$route.query, busType: this.formData.busType}, path: this.$route.path}) this.selectBusTypeDisabled = false } else { this.selectBusTypeDisabled = true @@ -456,47 +468,46 @@ export default { }) }, - handleContextMenu(event, tabItem) { - console.log("右击") + handleContextMenu() { + this.showContextMenu = true; + }, + handleTabContextMenu(event, tab) { this.showContextMenu = true; + this.contextMenuTab = tab; this.contextMenuPosition = { x: event.clientX, y: event.clientY }; - // 这里可以显示一个自定义的菜单,例如使用 Element UI 的 Dialog 或 Popover - // 假设你有一个名为 showContextMenu 的方法来显示菜单,并传递 tabItem 作为参数 - this.showContextMenu(tabItem, event.clientX, event.clientY); }, - showContextMenu(tabItem, x, y) { - // 显示你的自定义菜单逻辑,这里只是示例 - this.contextMenuVisible = true; - this.contextMenuPosition = { x, y }; - this.selectedTabItem = tabItem; + + closeContextMenu() { + this.showContextMenu = false; + this.contextMenuStyle.display = 'none'; // 隐藏上下文菜单 }, - // 其他菜单操作的方法,如 closeCurrent, closeOthers, closeAll - closeCurrent() { + closeCurrentTab(index) { // 关闭当前标签页的逻辑 - const index = this.editableTabs.findIndex(tab => tab.name === this.selectedTabItem.name); - if (index !== -1) { - this.editableTabs.splice(index, 1); - this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1]?.name || ''; - } + this.editableTabs.splice(index, 1); // 假设这是关闭标签页的方式 + this.editableTabsValue = this.editableTabs.length > 0 ? this.editableTabs[0].name : ''; + this.closeContextMenu(); }, - closeOthers() { + closeOtherTabs() { // 关闭其他标签页的逻辑 - this.editableTabs = this.editableTabs.filter(tab => tab.name === this.selectedTabItem.name); - this.editableTabsValue = this.selectedTabItem.name; + // ... + this.closeContextMenu(); }, - closeAll() { + closeAllTabs() { // 关闭所有标签页的逻辑 this.editableTabs = []; this.editableTabsValue = ''; - } + this.closeContextMenu(); + }, }, computed: { - contextMenuStyle() { + contextMenuPosition() { return { + position: 'fixed', // 使用 fixed 定位确保它浮动在顶层 left: `${this.contextMenuPosition.x}px`, top: `${this.contextMenuPosition.y}px`, - // 你可以添加更多的样式来美化你的上下文菜单 + zIndex: 1000, // 确保它在其他内容之上 + // 其他样式... }; }, }, @@ -511,7 +522,7 @@ export default { } -