easydo-zcgx-web/src/layout/index.vue

<template>
    <el-config-provider :locale="localeLang">
        <div class="tjm_wrapper">
            <div class="tjm_warpper_container fixed" :class="!hasTabs && 'no-tabs-bar'">
                <tjm-side-bar v-if="layoutStyle == 'vertical'" />
                <div class="tjm_container" :class="{ 'is-collapse': collapse, 'is-layoutStyle': layoutStyle == 'horizontal' }">
                    <div class="header_container fixed-header" 
                        :class="{ 'is-collapse': collapse, 'is-layoutStyle': layoutStyle == 'horizontal' }">
                        <tjm-nav-bar />
                        <tjm-tabs-bar v-if="hasTabs" />
                    </div>
                    <div class="content_container">
                        <tjm-main :hasTabs="hasTabs" />
                    </div>
                </div>
            </div>
        </div>
    </el-config-provider>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { getConfig } from "@/config/config";
import { useSettingStore } from "@/store/settings";

import TjmSideBar from "./components/SideBar/index.vue";
import TjmNavBar from "./components/NavBar/index.vue";
import TjmTabsBar from "./components/TabsBar/index.vue";
import TjmMain from "./components/Main/index.vue";

const route = useRoute();
const hasTabs = computed(() => route.name != "homePolicyDetail");
const { collapse, layoutStyle } = storeToRefs(useSettingStore());

const { messages, locale, t } = useI18n();
const localeLang = ref(messages[getConfig("globalI18n")])
// 修改element 和 i18n 默认语言
const changeLanguage = () => {
    locale.value = getConfig("globalI18n");
    localeLang.value = messages.value[locale.value];
}
// 监听修改语言实现element
watchEffect(changeLanguage)
</script>

<style lang="scss" scoped>
@mixin fix-header {
  position: fixed;
  top: 0;
  right: 0px;
  z-index: $base-z-index - 2;
  width: calc(100% - $base-sidebar-width);
}
.tjm_wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  .tjm_warpper_container {
    &.fixed {
      padding-top: calc(#{$base-navbar-height} + #{$base-tabsbar-height});
    }
    &.fixed.no-tabs-bar {
      padding-top: $base-navbar-height;
    }
    .tjm_container {
      min-height: 100%;
      margin-left: $base-sidebar-width;
      &.is-collapse {
        margin-left: $base-sidebar-width-min;
        border-right: 0;
      }
      &.is-layoutStyle {
        margin-left: 0;
        border-right: 0;
      }
      .header_container {
        box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
        &.fixed-header {
          @include fix-header;
        }
        &.is-collapse {
          width: calc(100% - $base-sidebar-width-min);
        }
        &.is-layoutStyle {
          width: 100%;
        }
      }
      .content_container {
        background: #f7f8fa;
      }
    }
  }
}
</style>