SaaS-lib/lib/saas/view/system/application.vue

<!-- @format -->

<template>
  <a-layout class="ns-application" :id="iframe ? 'iframeApplication' : ''">
    <ns-header
      v-show="!iframe"
      class="ns-header-menu"
      :headerList="headers"
      :initHeaderKey="selectedHeaderKeys" />
    <a-layout class="ns-application-layout">
      <ns-sider
        :menuList="newMenu"
        :initSiderKey="selectedSiderKeys"
        :initSiderOpenKey="selectedSiderOpenKeys" />
      <a-layout class="ns-application-layout-main">
        <newNsTags v-if="configStore.useHistoryTag" />
        <ns-tags v-else />
        <NsBreadcrumb :breadcrumbList="breadcrumbList" />
        <a-layout-content class="ns-content">
          <!-- <transition name="fade-slide" mode="out-in"> -->
          <!-- <div> -->
          <ns-content />
          <!-- </div> -->
          <!-- </transition> -->
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
  import { computed, defineComponent, provide, ref, watch } from 'vue';
  import NsHeader from './layout/header.vue';
  import NsSider from './layout/sider.vue';
  import NsBreadcrumb from './layout/breadcrumb.vue';
  import NsTags from './layout/tags.vue';
  import newNsTags from './layout/tag/index.vue';
  import NsContent from './layout/baseContent.vue';
  import { useRouter } from 'vue-router';
  import { emitEvents, menusClass, tagsClass } from './application.d';
  import { cloneDeep } from 'lodash-es';
  import { storeToRefs } from 'pinia';
  import { Cookies } from '/nerv-lib/util/cookie';
  import { useKeepAlive } from '/nerv-base/store/modules/keepAlive';
  import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
  import { useRouteStore } from '/nerv-base/store/modules/route';
  import { useTags } from '/nerv-base/store/modules/tags';
  import { authorizationService } from '/nerv-base/store/modules/authorization-service';
  import mitt from 'mitt';

  export default defineComponent({
    name: 'NsApplication',
    components: { NsBreadcrumb, NsHeader, NsSider, NsContent, newNsTags, NsTags },
    provide() {
      return {
        selectTags: computed(() => this.selectTags),
        baseHeader: computed(() => this.baseHeader),
      };
    },
    setup() {
      const mittEmit = mitt<emitEvents>();

      provide('mittEmit', mittEmit);
      const breadcrumbList = ref<object[]>([]);
      const keepAliveStore = useKeepAlive();
      const configStore = appConfigStore();
      const authorizationStore = authorizationService();
      const tagsStore = useTags();
      tagsStore.initTags();
      const tagList = computed(() => tagsStore.getTags);

      const siderPosition = computed(() => configStore.siderPosition);
      const initRouterList = computed(() => authorizationStore.getInitRouterList);
      const userResourceList = computed(() => authorizationStore.getUserResourceList);
      if (!authorizationStore.getPrjectId && Cookies.get('projectUuid')) {
        authorizationStore.setProjectId(Cookies.get('projectUuid'));
      }
      const { route: routeModules, routeModuleObject, routeModule } = storeToRefs(useRouteStore());
      console.log(routeModules, 'routeModules');

      const headers = computed(() => {
        const module = cloneDeep(routeModules.value);
        const list = [];
        console.log('----');
        keepAliveStore.clearKeepAlive();
        for (let i = 0, j = module.length; i < j; i++) {
          const mod = module[i] || {};
          const modList: menusClass[] = Array.isArray(mod) ? [...mod] : [mod];
          dealKeepAlive(mod);
          dealResource(modList[0]);
          if (mod.children !== undefined) {
            modList[0].ischoice = false;
            list.push(modList[0]);
          }
        }
        list.sort((a, b) => {
          return a.meta.index - b.meta.index;
        });
        delProjectRouter(list);
        setTimeout(() => {
          if (siderPosition.value === 'top') {
            newMenu.value = list.filter(
              (x: menusClass) => x.name === router.currentRoute.value.matched[0].name,
            );
          } else {
            newMenu.value = [{ children: list }];
          }
        }, 0);
        return siderPosition.value === 'top' ? list : [];
      });
      const dealKeepAlive = (val) => {
        if (val?.meta?.keepAlive) {
          keepAliveStore.addKeepAlive(val.name);
        }
        if (val?.children?.length > 0) {
          val.children.forEach((item) => {
            dealKeepAlive(item);
          });
        }
      };
      const delProjectRouter = (val) => {
        if (configStore.enablePermissions !== undefined && configStore.enablePermissions) {
          const projectItem = val.filter((x) => x.name === 'project')[0];
          if (projectItem !== undefined) {
            if (!projectItem.children.filter((x) => x.name === 'Enter')[0].isHide) {
              projectItem.children.forEach((item) => {
                if (item.name !== 'Enter') {
                  if (authorizationStore.getPrjectId) {
                    item.isHide = false;
                  } else {
                    item.isHide = true;
                  }
                }
              });
            }
          }
        }
      };
      const dealResource = (val) => {
        if (configStore.enablePermissions !== undefined && configStore.enablePermissions) {
          if (configStore.resourceName) {
            val.isHide =
              initRouterList.value.indexOf(`${configStore.resourceName}${val.name}`) === -1;
          } else {
            val.isHide = initRouterList.value.indexOf(val.name) === -1;
          }
          if (
            Object.prototype.toString.call(val.children) === '[object Array]' &&
            val.children.length !== 0
          ) {
            val.children.forEach((item: any, i: number) => {
              dealResource(item);
              //支持部分小程序的菜单不可见
              if (item.meta?.isHide) {
                val.children.splice(i, 1);
                return;
              }
            });
          }
        }
      };
      const mergetRouter = (rout, source) => {
        let list: any = [];
        let routCode: any = {};
        let spiceMenu: any = [];
        const setcode = (data) => {
          data.forEach((el) => {
            let codeItem = cloneDeep(el);
            if (el.isHide) {
              spiceMenu.push(codeItem);
              return;
            }
            delete codeItem['children'];
            routCode[el.name] = codeItem;
            if (el['children'] !== undefined) {
              setcode(el['children']);
            }
          });
        };
        setcode(rout);
        const setMenu = (menus, Clist) => {
          menus.forEach((menu: any) => {
            let relaMenu: any = {};
            if (routCode[menu['code']] || ['menus', 'noChildrenMenu'].includes(menu['type'])) {
              relaMenu = routCode[menu['code']];
              if (menu.menus) {
                relaMenu['children'] = [];
                setMenu(menu.menus, relaMenu['children']);
              }
              Clist.push(relaMenu);
            }
          });
        };
        setMenu(source, list);
        // source.forEach((menu: any) => {
        //   let relaMenu: any = {};
        //   if (routCode[menu['code']] || ['menus', 'noChildrenMenu'].includes(menu['type'])) {
        //     relaMenu = routCode[menu['code']];
        //     if (menu.menus) {
        //       relaMenu['children'] = [];
        //       setMenu(menu.menus, relaMenu['children']);
        //     }
        //     list.push(relaMenu);
        //   }
        // });
        list = [...list, ...spiceMenu];
        console.log(list);
        return list;
      };
      const selectTags = ref({});
      const newMenu = ref<menusClass[]>([]);
      const selectedHeaderKeys = ref<string[]>([]);
      const selectedSiderOpenKeys = ref<string[]>([]);
      const selectedSiderKeys = ref<string[]>([]);
      const baseHeader = headers.value[0] || [];
      // 处理路由变化时导航栏选中事件
      const initSider = (ary: Array<T>) => {
        if (selectedHeaderKeys.value !== ary[0].name && siderPosition.value === 'top') {
          selectedHeaderKeys.value = [ary[0].name];
          newMenu.value = headers.value.filter((x: menusClass) => x.name === ary[0].name);
        }
        const index = ary.findIndex((x) =>
          x.meta ? x.meta.hideChildren || (!x.redirect && siderPosition.value === 'left') : '',
        );
        //更新选中的tags标签

        selectTags.value = index === -1 ? (ary.length > 2 ? ary[2] : ary[1]) : dealTags(ary[index]);
        // console.log(selectTags);
        //更新导航展开的key
        console.log(ary);
        selectedSiderOpenKeys.value = index === -1 ? [ary[1].name] : dealSiderOpenKey(ary, index);

        // //更新导航选中的key
        selectedSiderKeys.value =
          index === -1 ? (ary.length > 2 ? [ary[2].name] : [ary[1].name]) : dealSelectKey(ary);
      };
      const dealSiderOpenKey = (ary: any, index: number) => {
        const initList = [];
        for (var i = 0; i <= index; i++) {
          initList.push(ary[i].name);
        }

        return initList;
      };

      const dealSelectKey = (ary: any) => {
        const selectKeyIndex = ary.findIndex((x) => x.name === router.currentRoute.value.name);
        if (router.currentRoute.value.meta?.hideChildren) {
          const initList = [];
          for (var i = 0; i < selectKeyIndex; i++) {
            initList.push(ary[i].name);
          }
          if (router.currentRoute.value.meta?.type === 'noChildrenMenu') {
            initList.push(ary[selectKeyIndex].name);
          }
          return initList;
        } else {
          return [ary[selectKeyIndex].name];
        }
      };
      const dealTags = (ary: any) => {
        if (ary.children?.length > 0 && !ary.meta?.hideChildren) {
          return ary.children.filter(
            (x) =>
              x.name === router.currentRoute.value.name ||
              (x.meta.hideChildren && x.redirect?.name === router.currentRoute.value.name),
          )[0];
        } else {
          return ary;
        }
      };
      const router = useRouter();
      watch(
        () => router.currentRoute.value,
        (e) => {
          if (e.fullPath !== '/login' && e.matched.length > 1) {
            breadcrumbList.value = e.matched as object[];
            initSider(e.matched);
            window.sessionStorage.setItem('url', e.fullPath);
          }
        },
      );
      watch(
        () => routeModuleObject.value,
        (e) => {
          tagList.value.forEach((item: tagsClass, index: number) => {
            if (e[item.name] !== undefined) {
              if (item.title !== e[item.name].label) {
                tagsStore.updateTagTitle(index, e[item.name].label);
              }
            }
          });
        },
        { deep: true },
      );
      return {
        breadcrumbList,
        iframe: computed(() => configStore.iframe),
        configStore,
        initRouterList,
        selectedHeaderKeys,
        selectedSiderKeys,
        selectedSiderOpenKeys,
        headers,
        baseHeader,
        selectTags,
        initSider,
        newMenu,
      };
    },
    created() {
      const e = this.$router.currentRoute.value;
      if (e.fullPath !== '/login' && e.matched.length > 1) {
        this.breadcrumbList = e.matched as object[];
        this.initSider(e.matched);
      }
    },
  });
</script>
<style lang="less" scoped>
  .ns-application {
    min-height: 100%;
    .ns-application-layout {
      min-height: 100%;
      flex-direction: row;
    }
  }
  .ns-application-layout-main {
    padding-top: calc(@layout-header-height + @ns-nav-shutters-height * 2);
    height: 100vh;
    overflow: auto;
  }
  .ns-content {
    position: relative;
    flex: 1 1 auto;
    padding: @ns-gap;
    // padding-top: calc(@layout-header-height + @ns-nav-shutters-height);
    background-color: @ns-content-bg;
    > div {
      height: 100%;
      background-color: @white;
      border-radius: @ns-border-radius;
      overflow-y: auto;
      // overflow-x: hidden;
      // margin: 0 16px 16px 16px;
    }
    .ns-content-main {
      // margin: @ns-gap;
      min-height: calc(100% - 48px);
      // height: calc(100% - 16px);
      // background-color: @white;
    }
    .ns-view {
      // margin: @ns-content-padding;
      // min-height: calc(100% - 48px);
      // height: calc(100% - 48px);
      background-color: @white;
    }
  }
  #iframeApplication .ns-content {
    padding-top: 55px !important;
  }
</style>