|
|
@@ -1,25 +1,19 @@
|
|
|
<template>
|
|
|
- <a-layout :class="['layout-top', isBottom ? 'layout-top-bottom' : 'layout-top-no-bottom']">
|
|
|
- <a-layout-header class="m-layout-header">
|
|
|
- <Header />
|
|
|
- </a-layout-header>
|
|
|
- <a-layout class="middleLayout">
|
|
|
- <a-layout-sider
|
|
|
- class="m-layout-left"
|
|
|
- width="160"
|
|
|
- v-model:collapsed="collapsed"
|
|
|
- @collapse="collapse"
|
|
|
- collapsible
|
|
|
- >
|
|
|
- <Menu @chooseMenu="chooseMenu" :collapsed="collapsed" />
|
|
|
- </a-layout-sider>
|
|
|
- <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
|
|
|
- <!-- <Drawer :title="'挂牌'" :visible="visible"></Drawer> -->
|
|
|
- <!-- <Main /> -->
|
|
|
- <router-view />
|
|
|
- </a-layout-content>
|
|
|
- </a-layout>
|
|
|
+ <a-layout :class="['layout-top', isBottom ? 'layout-top-bottom' : 'layout-top-no-bottom']">
|
|
|
+ <a-layout-header class="m-layout-header">
|
|
|
+ <Header />
|
|
|
+ </a-layout-header>
|
|
|
+ <a-layout class="middleLayout">
|
|
|
+ <a-layout-sider class="m-layout-left" width="160" v-model:collapsed="collapsed" @collapse="collapse" collapsible>
|
|
|
+ <Menu @chooseMenu="chooseMenu" :collapsed="collapsed" />
|
|
|
+ </a-layout-sider>
|
|
|
+ <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
|
|
|
+ <!-- <Drawer :title="'挂牌'" :visible="visible"></Drawer> -->
|
|
|
+ <!-- <Main /> -->
|
|
|
+ <router-view />
|
|
|
+ </a-layout-content>
|
|
|
</a-layout>
|
|
|
+ </a-layout>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { defineComponent, ref, provide } from 'vue';
|
|
|
@@ -35,98 +29,98 @@ import { OperationTabMenu } from '@/services/go/commonService/interface';
|
|
|
import { getHasBottom } from '@/common/setup/order/orderData';
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: 'layout-top',
|
|
|
- emits: ['chooseMenu'],
|
|
|
- components: {
|
|
|
- CapitalInfo,
|
|
|
- SecondMenu,
|
|
|
- Drawer,
|
|
|
- Main,
|
|
|
- Menu,
|
|
|
- Header,
|
|
|
- },
|
|
|
- setup(props, context) {
|
|
|
- const router = useRouter();
|
|
|
- const route = useRoute();
|
|
|
- const list = ref<OperationTabMenu[]>([]); // 右边tab栏 需要的列表数据
|
|
|
- const index = ref<string[]>(['0']); // 右边tab栏 具体选中的哪一个数据 默认第一个
|
|
|
- // 配置是否显示下半部分
|
|
|
- function setShowBottomPart(code: string) {
|
|
|
- // 显示下半部分 这里保存的是市场对应的 code
|
|
|
- const show: string[] = [''];
|
|
|
- context.emit('chooseMenu', show.includes(code));
|
|
|
- }
|
|
|
- const isBottom = getHasBottom();
|
|
|
- // 选中菜单
|
|
|
- function chooseMenu(value: OperationTabMenu) {
|
|
|
- const matched = route.matched;
|
|
|
- const len = matched.length;
|
|
|
- let temp = 'home';
|
|
|
- if (matched.length > 2) {
|
|
|
- temp = matched[2].name as string;
|
|
|
- } else {
|
|
|
- temp = matched[len - 1].name as string;
|
|
|
- }
|
|
|
- let name = temp;
|
|
|
+ name: 'layout-top',
|
|
|
+ emits: ['chooseMenu'],
|
|
|
+ components: {
|
|
|
+ CapitalInfo,
|
|
|
+ SecondMenu,
|
|
|
+ Drawer,
|
|
|
+ Main,
|
|
|
+ Menu,
|
|
|
+ Header,
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
+ const router = useRouter();
|
|
|
+ const route = useRoute();
|
|
|
+ const list = ref<OperationTabMenu[]>([]); // 右边tab栏 需要的列表数据
|
|
|
+ const index = ref<string[]>(['0']); // 右边tab栏 具体选中的哪一个数据 默认第一个
|
|
|
+ // 配置是否显示下半部分
|
|
|
+ function setShowBottomPart(code: string) {
|
|
|
+ // 显示下半部分 这里保存的是市场对应的 code
|
|
|
+ const show: string[] = [''];
|
|
|
+ context.emit('chooseMenu', show.includes(code));
|
|
|
+ }
|
|
|
+ const isBottom = getHasBottom();
|
|
|
+ // 选中菜单
|
|
|
+ function chooseMenu(value: OperationTabMenu) {
|
|
|
+ const matched = route.matched;
|
|
|
+ const len = matched.length;
|
|
|
+ let temp = 'home';
|
|
|
+ if (matched.length > 2) {
|
|
|
+ temp = matched[2].name as string;
|
|
|
+ } else {
|
|
|
+ temp = matched[len - 1].name as string;
|
|
|
+ }
|
|
|
+ let name = temp;
|
|
|
|
|
|
- if (temp === 'home') {
|
|
|
- // 第一次进入项目
|
|
|
- if (value?.children.length) {
|
|
|
- // 默认第一个tab页
|
|
|
- name = value.children[0].code;
|
|
|
- index.value = ['0'];
|
|
|
- } else if (value?.code.includes('market-')) {
|
|
|
- // 动态市场
|
|
|
- const param = value.code.split('-')
|
|
|
- router.push({ name: 'dymanicMarket', query: { id: param[1] } });
|
|
|
- return
|
|
|
- } else {
|
|
|
- router.push({ name: '404' });
|
|
|
- return;
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 这里处理页面刷新,还原 导航栏数据
|
|
|
- const i = value.children.findIndex((e) => e.code === temp);
|
|
|
- if (i === -1) {
|
|
|
- if (value?.code.includes('market-')) {
|
|
|
- // 动态市场
|
|
|
- const param = value.code.split('-')
|
|
|
- router.push({ name: 'dymanicMarket', query: { id: param[1] } });
|
|
|
- return
|
|
|
- } else if (value?.children.length) {
|
|
|
- // 切换左边菜单栏
|
|
|
- // 默认第一个tab页
|
|
|
- name = value.children[0].code;
|
|
|
- index.value = ['0'];
|
|
|
- } else {
|
|
|
- router.push({ name: '404' });
|
|
|
- return;
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 切换右边上面tab 栏
|
|
|
- index.value = [`${i}`];
|
|
|
- }
|
|
|
- }
|
|
|
- list.value = value.children;
|
|
|
- setShowBottomPart(value.code);
|
|
|
- router.push({ name: name as string });
|
|
|
+ if (temp === 'home') {
|
|
|
+ // 第一次进入项目
|
|
|
+ if (value?.children.length) {
|
|
|
+ // 默认第一个tab页
|
|
|
+ name = value.children[0].code;
|
|
|
+ index.value = ['0'];
|
|
|
+ } else if (value?.code.includes('market-')) {
|
|
|
+ // 动态市场
|
|
|
+ const param = value.code.split('-')
|
|
|
+ router.push({ name: 'dymanicMarket', query: { id: param[1] } });
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ router.push({ name: '404' });
|
|
|
+ return;
|
|
|
}
|
|
|
- // 选中菜单的数据
|
|
|
- provide('thirdMenuList', list);
|
|
|
- provide('index', index);
|
|
|
- // 控制菜单是否隐藏
|
|
|
- const collapsed = ref<boolean>(false);
|
|
|
- function collapse(show: boolean) {
|
|
|
- collapsed.value = show;
|
|
|
+ } else {
|
|
|
+ // 这里处理页面刷新,还原 导航栏数据
|
|
|
+ const i = value.children.findIndex((e) => e.code === temp);
|
|
|
+ if (i === -1) {
|
|
|
+ if (value?.code.includes('market-')) {
|
|
|
+ // 动态市场
|
|
|
+ const param = value.code.split('-')
|
|
|
+ router.push({ name: 'dymanicMarket', query: { id: param[1] } });
|
|
|
+ return
|
|
|
+ } else if (value?.children.length) {
|
|
|
+ // 切换左边菜单栏
|
|
|
+ // 默认第一个tab页
|
|
|
+ name = value.children[0].code;
|
|
|
+ index.value = ['0'];
|
|
|
+ } else {
|
|
|
+ router.push({ name: '404' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 切换右边上面tab 栏
|
|
|
+ index.value = [`${i}`];
|
|
|
}
|
|
|
+ }
|
|
|
+ list.value = value.children;
|
|
|
+ setShowBottomPart(value.code);
|
|
|
+ router.push({ name: name as string });
|
|
|
+ }
|
|
|
+ // 选中菜单的数据
|
|
|
+ provide('thirdMenuList', list);
|
|
|
+ provide('index', index);
|
|
|
+ // 控制菜单是否隐藏
|
|
|
+ const collapsed = ref<boolean>(false);
|
|
|
+ function collapse(show: boolean) {
|
|
|
+ collapsed.value = show;
|
|
|
+ }
|
|
|
|
|
|
- return {
|
|
|
- collapsed,
|
|
|
- collapse,
|
|
|
- chooseMenu,
|
|
|
- isBottom,
|
|
|
- };
|
|
|
- },
|
|
|
+ return {
|
|
|
+ collapsed,
|
|
|
+ collapse,
|
|
|
+ chooseMenu,
|
|
|
+ isBottom,
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
@@ -203,11 +197,8 @@ export default defineComponent({
|
|
|
.middleLayout {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 32px);
|
|
|
- max-height: calc(100% - 32px);
|
|
|
background: @m-grey18;
|
|
|
.inlineflex;
|
|
|
- border-bottom: 1px solid @m-black2;
|
|
|
.ant-layout-sider-has-trigger {
|
|
|
padding-bottom: 30px;
|
|
|
background: @m-black4;
|
|
|
@@ -216,7 +207,6 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
.m-layout-left {
|
|
|
- min-height: calc(100vh - 316px);
|
|
|
background: @m-black4;
|
|
|
border-right: 1px solid @m-black32;
|
|
|
overflow: hidden;
|
|
|
@@ -302,6 +292,7 @@ export default defineComponent({
|
|
|
.ant-layout-content {
|
|
|
overflow: hidden;
|
|
|
background: @m-black31 !important;
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
}
|
|
|
.ant-menu-vertical {
|
|
|
.ant-menu-submenu-vertical {
|
|
|
@@ -333,15 +324,8 @@ export default defineComponent({
|
|
|
.inlineflex;
|
|
|
}
|
|
|
.ant-menu-inline-collapsed > .ant-menu-item,
|
|
|
- .ant-menu-inline-collapsed
|
|
|
- > .ant-menu-item-group
|
|
|
- > .ant-menu-item-group-list
|
|
|
- > .ant-menu-item,
|
|
|
- .ant-menu-inline-collapsed
|
|
|
- > .ant-menu-item-group
|
|
|
- > .ant-menu-item-group-list
|
|
|
- > .ant-menu-submenu
|
|
|
- > .ant-menu-submenu-title,
|
|
|
+ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
|
|
|
+ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title,
|
|
|
.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
|
|
|
padding: 0 20px !important;
|
|
|
}
|