|
|
|
@ -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>
|
|
|
|
|