|
|
@@ -105,18 +105,43 @@
|
|
|
</el-dropdown>
|
|
|
</el-header>
|
|
|
|
|
|
- <el-main style="background: #f2f4f5; height: 100%;">
|
|
|
- <el-tabs
|
|
|
- class="menu-tabs"
|
|
|
+ <el-main class="app-main">
|
|
|
+ <!-- <el-tabs
|
|
|
+ class="app-tabs"
|
|
|
v-model="currentTab"
|
|
|
type="card"
|
|
|
- closable
|
|
|
@tab-remove="removeTab"
|
|
|
@tab-click="clickTab"
|
|
|
>
|
|
|
- <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.title" :name="item.name">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="item in tabs"
|
|
|
+ :key="item.name"
|
|
|
+ :label="item.title"
|
|
|
+ :name="item.name"
|
|
|
+ :closable="item.title !== '待办列表'"
|
|
|
+ >
|
|
|
</el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </el-tabs> -->
|
|
|
+ <div
|
|
|
+ class="app-tabs-wrapper"
|
|
|
+ @mousedown.left="mousedown"
|
|
|
+ @mousemove="mousemove"
|
|
|
+ @mouseup.left="mouseup"
|
|
|
+ ref="appTabs"
|
|
|
+ >
|
|
|
+ <el-tag
|
|
|
+ class="app-tab-item"
|
|
|
+ size="large"
|
|
|
+ v-for="(item, index) in tabs"
|
|
|
+ :key="item.name"
|
|
|
+ :closable="item.title !== '待办列表'"
|
|
|
+ @close="removeTab(index)"
|
|
|
+ @click="clickTab(index)"
|
|
|
+ :type="item.active ? '' : 'info'"
|
|
|
+ >
|
|
|
+ {{ item.title }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
<router-view> </router-view>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
@@ -141,7 +166,7 @@ export default {
|
|
|
this.tabs = [
|
|
|
{
|
|
|
name: this.homePage,
|
|
|
- title: this.homePage == 'agency' ? '代办列表' : '企业认证'
|
|
|
+ title: this.homePage == 'agency' ? '待办列表' : '企业认证'
|
|
|
}
|
|
|
];
|
|
|
|
|
|
@@ -167,6 +192,10 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+ let index = this.tabs.findIndex(i => i.name === this.$route.name);
|
|
|
+ if (index > -1) {
|
|
|
+ this.$set(this.tabs[index], 'active', true);
|
|
|
+ }
|
|
|
this.currentTab = this.$route.name;
|
|
|
this.getMenus();
|
|
|
},
|
|
|
@@ -182,10 +211,13 @@ export default {
|
|
|
{
|
|
|
title: '企业认证',
|
|
|
name: 'orgInfoList',
|
|
|
- path: '/orgInfoList'
|
|
|
+ path: '/orgInfoList',
|
|
|
+ active: true
|
|
|
}
|
|
|
],
|
|
|
- currentTab: 'roomStatus'
|
|
|
+ currentTab: 'roomStatus',
|
|
|
+ lastX: 0,
|
|
|
+ leftMouseDown: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -249,8 +281,7 @@ export default {
|
|
|
this.$router.replace('/login');
|
|
|
}
|
|
|
},
|
|
|
- removeTab(name) {
|
|
|
- let removeIndex = this.tabs.findIndex(i => i.name === name);
|
|
|
+ removeTab(removeIndex) {
|
|
|
let currentIndex = this.tabs.findIndex(i => i.name === this.$route.name);
|
|
|
if (this.tabs.length > 1 && removeIndex > 0) {
|
|
|
this.tabs.splice(removeIndex, 1);
|
|
|
@@ -263,14 +294,32 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- clickTab(tab) {
|
|
|
- var index = this.tabs.findIndex(i => i.name === tab.name);
|
|
|
- console.log(tab, index);
|
|
|
+ clickTab(index) {
|
|
|
+ console.log('clickTab', index);
|
|
|
+ this.tabs.forEach((item, idx) => {
|
|
|
+ this.$set(this.tabs[idx], 'active', false);
|
|
|
+ });
|
|
|
+ this.$set(this.tabs[index], 'active', true);
|
|
|
this.$router.push({
|
|
|
name: this.tabs[index].name,
|
|
|
query: this.tabs[index].query,
|
|
|
params: this.tabs[index].params
|
|
|
});
|
|
|
+ },
|
|
|
+ mousedown(e) {
|
|
|
+ this.leftMouseDown = true;
|
|
|
+ this.lastX = e.clientX;
|
|
|
+ },
|
|
|
+ mousemove(e) {
|
|
|
+ if (this.leftMouseDown) {
|
|
|
+ let d = e.clientX - this.lastX;
|
|
|
+ console.log(d);
|
|
|
+ this.$refs.appTabs.scrollLeft = this.$refs.appTabs.scrollLeft - d;
|
|
|
+ }
|
|
|
+ this.lastX = e.clientX;
|
|
|
+ },
|
|
|
+ mouseup(e) {
|
|
|
+ this.leftMouseDown = false;
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -278,6 +327,9 @@ export default {
|
|
|
// this.findActiveMenu(this.rawMenus);
|
|
|
// },
|
|
|
$route(route) {
|
|
|
+ this.tabs.forEach((item, idx) => {
|
|
|
+ this.$set(this.tabs[idx], 'active', false);
|
|
|
+ });
|
|
|
this.findActiveMenu(this.rawMenus);
|
|
|
var routeInfo = { ...this.$route };
|
|
|
var tabs = [...this.tabs];
|
|
|
@@ -287,18 +339,22 @@ export default {
|
|
|
|
|
|
let index = this.tabs.findIndex(i => i.name === route.name);
|
|
|
if (index === -1) {
|
|
|
+ console.log('watch', index);
|
|
|
this.tabs.push({
|
|
|
name: route.name,
|
|
|
title: route.query.tabTitle || route.meta.title || route.name,
|
|
|
query: route.query,
|
|
|
- params: route.parms
|
|
|
+ params: route.parms,
|
|
|
+ active: true
|
|
|
});
|
|
|
} else {
|
|
|
+ console.log('watch', index);
|
|
|
this.$set(this.tabs, index, {
|
|
|
name: route.name,
|
|
|
title: route.query.tabTitle || route.meta.title || route.name,
|
|
|
query: route.query,
|
|
|
- params: route.parms
|
|
|
+ params: route.parms,
|
|
|
+ active: true
|
|
|
});
|
|
|
}
|
|
|
this.currentTab = route.name;
|
|
|
@@ -341,7 +397,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-left: 0;
|
|
|
- // border-bottom: 1px solid #dcdfe6;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
.header-btn {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
@@ -391,4 +447,32 @@ export default {
|
|
|
.el-tabs {
|
|
|
background: #fff;
|
|
|
}
|
|
|
+.app-main {
|
|
|
+ background: #f2f4f5;
|
|
|
+ padding: 0 !important;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.app-tabs-wrapper {
|
|
|
+ height: 32px;
|
|
|
+ min-height: 32px;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin: 0 !important;
|
|
|
+ overflow-x: auto;
|
|
|
+ white-space: nowrap;
|
|
|
+ user-select: none;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .app-tab-item {
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
