fix: 提交

20240912_adapter_z
chenhc 10 months ago
parent 6786afe220
commit a244b1e241

@ -126,19 +126,30 @@
:key="item.name"
:label="item.title"
:name="item.name"
@contextmenu.stop.prevent="handleTabContextMenu($event, item)"
>
<ul v-if="showContextMenu" class="context-menu" :style="contextMenuPosition">
<li @click="closeCurrentTab(contextMenuIndex)"></li>
<li @click="closeOtherTabs"></li>
<li @click="closeAllTabs"></li>
</ul>
<div >
<component v-if="showChild" :is="item.component" v-bind="item.componentProps" :reset-key="resetKeys[item.name]" @parent-method="parentMethod" />
</div>
</el-tab-pane>
<!-- 自定义的上下文菜单这里只是一个占位符你需要实现它 -->
<div v-if="showContextMenu" class="context-menu" :style="contextMenuStyle">
<button @click="closeCurrentTab"></button>
<button @click="closeOtherTabs"></button>
<button @click="closeAllTabs"></button>
</div>
<!-- 上下文菜单 -->
<!-- <ul v-show="showContextMenu" :style="{left:left+'px',top:top+'px'}" class="contextmenu">-->
<!-- <li> <i class="el-icon-refresh-right"></i> 刷新页面</li>-->
<!-- <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>-->
<!-- <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> </li>-->
<!-- <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>-->
<!-- <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> </li>-->
<!-- <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> </li>-->
<!-- <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>-->
<!-- </ul>-->
</el-tabs>
</el-col>
@ -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 {
}
</script>
<style scoped>
<style lang="css" scoped>
.sidebar-logo {
width: 80px;
height: 60px;
@ -519,8 +530,25 @@ export default {
margin-left: 25px;
}
.context-menu {
position: absolute;
z-index: 1000; /* 确保它在其他内容之上 */
zIndex: 1000;
position: fixed ;
list-style-type: none;
padding: 0;
margin: 0;
background-color: #f9f9f9;
border: 1px solid #d4d4d4;
border-radius: 4px;
/* 其他样式... */
}
.context-menu li {
padding: 8px 16px;
cursor: pointer;
/* 其他样式... */
}
.context-menu li:hover {
background-color: #e1e1e1;
}
</style>

Loading…
Cancel
Save