MTP2.0_WEB/src/layout/index.vue

<template>
  <div class="layout">
    <LayoutTop @chooseMenu="chooseMenu" />
    <template v-if="true">
      <div class="sliderLayout">
        <div class="shortLine"></div>
      </div>
      <LayoutBottom />
    </template>
  </div>
</template>
<script lang="ts">
import LayoutTop from './components/top.vue';
import LayoutBottom from './components/bottom.vue';
import { defineComponent, ref } from 'vue';
import APP from '@/services';
import { OperationTabMenu } from '@/services/go/commonService/interface';
import { initData } from '@/common/methods';

// 控制下半部分是否显示
function submitBottomIsShow() {
    const isShowBottomPart = ref<boolean>(true);
    function chooseMenu(value: boolean) {
        isShowBottomPart.value = value;
    }
    return { isShowBottomPart, chooseMenu };
}

export default defineComponent({
    name: 'layout',
    components: {
        LayoutTop,
        LayoutBottom,
    },
    setup() {
        const menuList = APP.getRef('menus');
        const { isShowBottomPart, chooseMenu } = submitBottomIsShow();
        initData(() => {
            // 判断是否有单据
            if (menuList.value.find((e: OperationTabMenu) => e.code === 'bottom')) {
                isShowBottomPart.value = true;
            }
            isShowBottomPart.value = true;
        });

        return { isShowBottomPart, chooseMenu };
    },
});
</script>
<style lang="less">
.layout {
    .flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .sliderLayout {
        width: 100%;
        height: 4px;
        background: #242a2e;
        border-top: 1px solid @m-grey5;
        border-bottom: 1px solid @m-grey5;
        position: relative;
        .shortLine {
            width: 30px;
            height: 2px;
            background: #4b5861;
            border-radius: 1px;
            .position(absolute, 50%, auto, auto, 50%);
            transform: translate(-50%, -50%);
        }
    }
}
</style>