Skip to content

M
mes-ui
Commit 640dc1ee authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

多页签

parent 750a8b16
Show whitespace changes
Inline Side-by-side
Showing with 249 additions and 234 deletions
layouts/basic-layout/product.vue
View file @ 640dc1ee
...@@ -16,14 +16,10 @@ ...@@ -16,14 +16,10 @@
<td> <td>
<ul class="table_row_ul"> <ul class="table_row_ul">
<li> <li>
<a class="a_goIndex" @click="goIndex"> <a class="a_goIndex" @click="goIndex">首页一</a>
首页一
</a>
</li> </li>
<li> <li>
<a class="a_goIndex" @click="goIndexTwo"> <a class="a_goIndex" @click="goIndexTwo">首页二</a>
首页二
</a>
</li> </li>
</ul> </ul>
</td> </td>
...@@ -35,7 +31,10 @@ ...@@ -35,7 +31,10 @@
<td> <td>
<ul class="table_row_ul"> <ul class="table_row_ul">
<li v-for="(li) in item.children"> <li v-for="(li) in item.children">
<a @click="goPage(item,li)" :class="{'active': li.id === isActive}">{{li.title}}</a> <a
@click="goPage(item,li)"
:class="{'active': li.id === isActive}"
>{{li.title}}</a>
</li> </li>
</ul> </ul>
</td> </td>
...@@ -55,12 +54,8 @@ ...@@ -55,12 +54,8 @@
<BreadcrumbItem to="/" class="white"> <BreadcrumbItem to="/" class="white">
<Icon type="ios-home" />首页 <Icon type="ios-home" />首页
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem> <BreadcrumbItem>{{homeMenu}}</BreadcrumbItem>
{{homeMenu}} <BreadcrumbItem :to="parthto" class="white">{{homeMenuItem}}</BreadcrumbItem>
</BreadcrumbItem>
<BreadcrumbItem :to="parthto" class="white">
{{homeMenuItem}}
</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" /> <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
<div class="header_right"> <div class="header_right">
...@@ -77,6 +72,11 @@ ...@@ -77,6 +72,11 @@
<i-header-setting v-if="enableSetting && !isMobile" />--> <i-header-setting v-if="enableSetting && !isMobile" />-->
</div> </div>
</Header> </Header>
<div class="i-tabs">
<transition name="fade-quick">
<i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
</transition>
</div>
<Content class="i-layout-content"> <Content class="i-layout-content">
<keep-alive :include="keepAlive"> <keep-alive :include="keepAlive">
<nuxt v-if="loadRouter" /> <nuxt v-if="loadRouter" />
...@@ -137,9 +137,9 @@ export default { ...@@ -137,9 +137,9 @@ export default {
isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动 isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
loadRouter: true, loadRouter: true,
homeMenu:'', homeMenu: "",
homeMenuItem:"", homeMenuItem: "",
parthto:'', parthto: ""
}; };
}, },
computed: { computed: {
...@@ -248,7 +248,8 @@ export default { ...@@ -248,7 +248,8 @@ export default {
}, 0); }, 0);
}, },
$route(to, from) { $route(to, from) {
if (to.name === from.name) {// 相同路由，不同参数，跳转时，重载页面 if (to.name === from.name) {
// 相同路由，不同参数，跳转时，重载页面
if (Setting.sameRouteForceUpdate) { if (Setting.sameRouteForceUpdate) {
this.handleReload(); this.handleReload();
} }
...@@ -267,7 +268,8 @@ export default { ...@@ -267,7 +268,8 @@ export default {
}, },
handleScroll() { handleScroll() {
if (!this.headerHide) return; if (!this.headerHide) return;
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop; const scrollTop =
document.body.scrollTop + document.documentElement.scrollTop;
if (!this.ticking) { if (!this.ticking) {
this.ticking = true; this.ticking = true;
requestAnimation(() => { requestAnimation(() => {
...@@ -294,7 +296,8 @@ export default { ...@@ -294,7 +296,8 @@ export default {
// todo $menuHead.handleGetMenuHeight(); // todo $menuHead.handleGetMenuHeight();
} }
}, },
handleReload() {// 针对缓存的页面也生效 handleReload() {
// 针对缓存的页面也生效
const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1; const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
const pageName = this.$route.name; const pageName = this.$route.name;
if (isCurrentPageCache) { if (isCurrentPageCache) {
...@@ -308,24 +311,24 @@ export default { ...@@ -308,24 +311,24 @@ export default {
} }
}); });
}, },
goPage(u,li) { goPage(u, li) {
this.$router.push(li.path) this.$router.push(li.path);
this.isActive = li.id this.isActive = li.id;
this.homeMenu = u.title this.homeMenu = u.title;
this.homeMenuItem = li.title this.homeMenuItem = li.title;
this.parthto = li.path this.parthto = li.path;
}, },
goIndex(){ goIndex() {
this.$router.push("/") this.$router.push("/");
this.homeMenu = '' this.homeMenu = "";
this.homeMenuItem = '' this.homeMenuItem = "";
this.isActive = 0 this.isActive = 0;
}, },
goIndexTwo(){ goIndexTwo() {
this.$router.push("/home") this.$router.push("/home");
this.homeMenu = '' this.homeMenu = "";
this.homeMenuItem = '' this.homeMenuItem = "";
this.isActive = 0 this.isActive = 0;
} }
}, },
mounted() { mounted() {
...@@ -342,21 +345,25 @@ export default { ...@@ -342,21 +345,25 @@ export default {
<style lang="less"> <style lang="less">
.i-layout-header-breadcrumb { .i-layout-header-breadcrumb {
color: #A7B8CC!important;//wheat color: #a7b8cc !important; //wheat
} }
.i-layout-header-breadcrumb .white .ivu-breadcrumb-item-link { .i-layout-header-breadcrumb .white .ivu-breadcrumb-item-link {
color: #ffffff!important;//wheat color: #ffffff !important; //wheat
} }
.ivu-icon-ios-home{ .ivu-icon-ios-home {
font-size: 20px; font-size: 20px;
} }
.white{ .white {
color: #ffffff!important; color: #ffffff !important;
} }
.product-layout { .product-layout {
.i-layout-content { .i-layout-content {
padding: 5px 10px; padding: 5px 10px;
} }
.i-tabs {
width: 100% !important;
height: 40px;
}
.ivu-layout-header { .ivu-layout-header {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
......
layouts/basic-layout/tabs/index.vue
View file @ 640dc1ee
...@@ -44,95 +44,99 @@ ...@@ -44,95 +44,99 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState, mapGetters, mapActions } from 'vuex'; import { mapState, mapGetters, mapActions } from "vuex";
import menuSider from '@/menu/sider'; import menuSider from "@/menu/sider";
import tTitle from '../mixins/translate-title'; import tTitle from "../mixins/translate-title";
import Setting from '@/setting'; import Setting from "@/setting";
import { getAllSiderMenu } from '@/libs/system'; import { getAllSiderMenu } from "@/libs/system";
export default { export default {
name: 'iTabs', name: "iTabs",
mixins: [ tTitle ], mixins: [tTitle],
computed: { computed: {
...mapState('admin/page', [ ...mapState("admin/page", ["opened", "current"]),
'opened', ...mapState("admin/layout", [
'current' "showTabsIcon",
"tabsFix",
"tabsReload",
"headerFix",
"headerStick",
"isMobile",
"menuCollapse"
]), ]),
...mapState('admin/layout', [ ...mapGetters("admin/menu", ["hideSider"]),
'showTabsIcon', classes() {
'tabsFix', // return {
'tabsReload', // "i-layout-tabs-fix": this.tabsFix
'headerFix', // };
'headerStick',
'isMobile',
'menuCollapse'
]),
...mapGetters('admin/menu', [
'hideSider'
]),
classes () {
return {
'i-layout-tabs-fix': this.tabsFix
}
}, },
isHeaderStick () { isHeaderStick() {
return this.hideSider; return this.hideSider;
}, },
styles () { styles() {
let style = {}; let style = {};
if (this.tabsFix && !this.headerFix) { if (this.tabsFix && !this.headerFix) {
style.top = `${64 - this.scrollTop}px`; style.top = `${64 - this.scrollTop}px`;
} }
const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 80 : Setting.menuSideWidth; const menuWidth = this.isHeaderStick
if (!this.isMobile && this.tabsFix) { ? 0
style.width = `calc(100% - ${menuWidth}px)`; : this.menuCollapse
style.left = `${menuWidth}px`; ? 80
} : Setting.menuSideWidth;
// if (!this.isMobile && this.tabsFix) {
// style.width = `calc(100% - ${menuWidth}px)`;
// style.left = `${menuWidth}px`;
// }
return style; return style;
} }
}, },
data () { data() {
return { return {
// 得到所有侧边菜单，并转为平级，查询图标用 // 得到所有侧边菜单，并转为平级，查询图标用
allSiderMenu: getAllSiderMenu(menuSider), allSiderMenu: getAllSiderMenu(menuSider),
scrollTop: 0 scrollTop: 0
} };
}, },
methods: { methods: {
...mapActions('admin/page', [ ...mapActions("admin/page", [
'close', "close",
'closeLeft', "closeLeft",
'closeRight', "closeRight",
'closeOther', "closeOther",
'closeAll' "closeAll"
]), ]),
tabLabel (h, page) { tabLabel(h, page) {
const title = h('span', this.tTitle(page.meta.title) || '未命名'); const title = h("span", this.tTitle(page.meta.title) || "未命名");
let slot = []; let slot = [];
if (this.showTabsIcon) { if (this.showTabsIcon) {
const fullPathWithoutQuery = page.fullPath.indexOf('?') >= 0 ? page.fullPath.split('?')[0] : page.fullPath; const fullPathWithoutQuery =
const currentMenu = this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) || {}; page.fullPath.indexOf("?") >= 0
? page.fullPath.split("?")[0]
: page.fullPath;
const currentMenu =
this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) ||
{};
let icon; let icon;
if (currentMenu.icon) { if (currentMenu.icon) {
icon = h('Icon', { icon = h("Icon", {
props: { props: {
type: currentMenu.icon type: currentMenu.icon
} }
}); });
} else if (currentMenu.custom) { } else if (currentMenu.custom) {
icon = h('Icon', { icon = h("Icon", {
props: { props: {
custom: currentMenu.custom custom: currentMenu.custom
} }
}); });
} else if (currentMenu.img) { } else if (currentMenu.img) {
icon = h('img', { icon = h("img", {
attrs: { attrs: {
src: currentMenu.img src: currentMenu.img
} }
...@@ -145,14 +149,18 @@ ...@@ -145,14 +149,18 @@
slot.push(title); slot.push(title);
} }
return h('div', { return h(
class: 'i-layout-tabs-title' "div",
}, slot); {
class: "i-layout-tabs-title"
},
slot
);
}, },
handleClickTab (tabName) { handleClickTab(tabName) {
if (tabName === this.current) { if (tabName === this.current) {
if (this.tabsReload) { if (this.tabsReload) {
this.$emit('on-reload'); this.$emit("on-reload");
} }
} else { } else {
const page = this.opened.find(page => page.fullPath === tabName); const page = this.opened.find(page => page.fullPath === tabName);
...@@ -161,43 +169,43 @@ ...@@ -161,43 +169,43 @@
if (page) this.$router.push({ name, params, query }, () => {}); if (page) this.$router.push({ name, params, query }, () => {});
} }
}, },
handleClickClose (tagName) { handleClickClose(tagName) {
this.close({ this.close({
tagName tagName
}); });
}, },
handleScroll () { handleScroll() {
if (this.tabsFix && !this.headerFix) { // if (this.tabsFix && !this.headerFix) {
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop; // const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
this.scrollTop = scrollTop > 64 ? 64 : scrollTop; // this.scrollTop = scrollTop > 64 ? 64 : scrollTop;
} // }
}, },
handleClose (name) { handleClose(name) {
const params = { const params = {
pageSelect: this.current pageSelect: this.current
}; };
switch (name) { switch (name) {
case 'left': case "left":
this.closeLeft(params); this.closeLeft(params);
break; break;
case 'right': case "right":
this.closeRight(params); this.closeRight(params);
break; break;
case 'other': case "other":
this.closeOther(params); this.closeOther(params);
break; break;
case 'all': case "all":
this.closeAll(); this.closeAll();
break; break;
} }
} }
}, },
mounted () { mounted() {
document.addEventListener('scroll', this.handleScroll, { passive: true }); document.addEventListener("scroll", this.handleScroll, { passive: true });
this.handleScroll(); this.handleScroll();
}, },
beforeDestroy () { beforeDestroy() {
document.removeEventListener('scroll', this.handleScroll); document.removeEventListener("scroll", this.handleScroll);
}
} }
};
</script> </script>
pages/order/quotation/index.vue
View file @ 640dc1ee
...@@ -363,7 +363,7 @@ export default { ...@@ -363,7 +363,7 @@ export default {
}, },
created() { created() {
this.treeHeight = window.innerHeight - 140; this.treeHeight = window.innerHeight - 140;
this.tableHeight = window.innerHeight - 210; this.tableHeight = window.innerHeight - 250;
this.newColumn = this.column; this.newColumn = this.column;
this.tableTata(this.selectName); this.tableTata(this.selectName);
}, },
...@@ -376,7 +376,7 @@ export default { ...@@ -376,7 +376,7 @@ export default {
return (() => { return (() => {
window.screenHeight = window.innerHeight; window.screenHeight = window.innerHeight;
this.treeHeight = window.screenHeight - 140; this.treeHeight = window.screenHeight - 140;
this.tableHeight = window.innerHeight - 210; this.tableHeight = window.innerHeight - 250;
})(); })();
}; };
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment