1. 处理企业选择问题

src/router/direction.ts

 export enum Direction {
-    Home = 1,
+    Entrance = 1,
+    Home,
     AddressBook,
     ApplicationRecord,
     InvoiceTitles,

src/router/index.ts

@@ -8,6 +8,8 @@ import { MetaHeader } from './meta-header';
 import { setCompatibleUrl } from './compatible-url';
 import { Envir } from '@/api/env';
 import { loginRouters } from "@/router/sub-router/login";
+import { entranceRouters } from "@/router/sub-router/entrance";
+import EnterpriseHost from '@/views/service/enterprise-host';
 
 Vue.use(VueRouter);
 
@@ -17,6 +19,7 @@ const routes: Array<RouteConfig> = [
     redirect: "/workadmin/addressbook"
   },
   ...loginRouters,
+  ...entranceRouters,
   {
     path: '/workadmin',
     component: () => import('@/views/pages/main.vue'),
@@ -128,7 +131,8 @@ const navigation = (vue: Vue, direction: Direction, query?: Dictionary<string>,
 };
 
 const whiteList = [
-  Direction.Redirect, Direction.SilentRedirect
+  Direction.Redirect, Direction.SilentRedirect,
+  Direction.Entrance
 ];
 
 Vue.prototype.go = async function(direction: Direction, params?: Dictionary<string>, query?: Dictionary<string>) {
@@ -157,6 +161,15 @@ Vue.prototype.getCurrentDirection = function() {
   return Direction.Home;
 };
 
+router.beforeEach((to, from, next) => {
+  if (to.meta && to.meta.direction && !_.includes(whiteList, to.meta.direction)) {
+    if (!EnterpriseHost.hasBaseId()) {
+      return router.replace(Direction[Direction.Entrance]);
+    }
+  }
+  next();
+});
+
 router.afterEach((to, from) => {
   RouterEventer.raiseOnRouterChanged(to.name, from.name);
   document.title = (Envir.isStaging() ? '【组织管理后台测试】' : '') + (to.meta?.title || "首页");

src/router/meta-header.ts

 export class MetaHeader {
     public static readonly root = '组织管理后台';
+    public static readonly entrance = '企业选择';
     public static readonly home = '首页';
     public static readonly employManager = {
         root: "员工管理",

src/router/sub-router/entrance.ts

+import { Direction } from '../direction';
+import { MetaHeader } from '../meta-header';
+
+export const entranceRouters = [
+    {
+        path: "/entrance",
+        meta: { direction: Direction.Entrance, title: MetaHeader.entrance },
+        component: () => import("@/views/pages/entrance/entrance.vue"),
+    },
+];

src/views/pages/common-header/common-header.vue

@@ -69,6 +69,7 @@
                 offset: 64,
                 disableMoreService: true,
                 onEnterpriseChanged: this.onEnterpriseChanged as any,
+                common: true,
             };
         }
 

src/views/pages/entrance/entrance.vue

+<template>
+    <div>
+        <CommonHeader :isSelectOrgPage="true"></CommonHeader>
+        <Loading></Loading>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Vue } from "vue-property-decorator";
+    import CommonHeader from "@/views/pages/common-header/common-header.vue";
+    import Loading from "./loading.vue";
+
+    @Component({ components: { CommonHeader, Loading } })
+    export default class Entrance extends Vue {}
+</script>
+
+<style lang="less" scoped>
+    @import "~@/css/variables.less";
+</style>

src/views/pages/entrance/loading.vue

+<template>
+    <div id="loading" class="hrs-html-loading">
+        <div id="loading-center">
+            <div id="loading-center-absolute">
+                <div class="object" id="object_one"></div>
+                <div class="object" id="object_two" style="left: 20px"></div>
+                <div class="object" id="object_three" style="left: 40px"></div>
+                <div class="object" id="object_four" style="left: 60px"></div>
+                <div class="object" id="object_five" style="left: 80px"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Vue } from "vue-property-decorator";
+
+    @Component({ components: {} })
+    export default class Loading extends Vue {}
+</script>
+
+<style lang="less" scoped>
+    #loading {
+        // background-color: #fafafa;
+        height: 100%;
+        width: 100%;
+        // position: fixed;
+        z-index: 1;
+        margin-top: 0px;
+        top: 0px;
+    }
+
+    #loading-center-absolute {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        height: 20px;
+        width: 100px;
+        margin-top: -10px;
+        margin-left: -50px;
+    }
+    .object {
+        width: 20px;
+        height: 20px;
+        background-color: #077aec;
+        -moz-border-radius: 50% 50% 50% 50%;
+        -webkit-border-radius: 50% 50% 50% 50%;
+        border-radius: 50% 50% 50% 50%;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        position: absolute;
+    }
+    #object_one {
+        -webkit-animation: object 2s linear infinite;
+        animation: object 2s linear infinite;
+    }
+    #object_two {
+        -webkit-animation: object 2s linear infinite -0.4s;
+        animation: object 2s linear infinite -0.4s;
+    }
+    #object_three {
+        -webkit-animation: object 2s linear infinite -0.8s;
+        animation: object 2s linear infinite -0.8s;
+    }
+    #object_four {
+        -webkit-animation: object 2s linear infinite -1.2s;
+        animation: object 2s linear infinite -1.2s;
+    }
+    #object_five {
+        -webkit-animation: object 2s linear infinite -1.6s;
+        animation: object 2s linear infinite -1.6s;
+    }
+    @-webkit-keyframes object {
+        0% {
+            left: 100px;
+            top: 0;
+        }
+        80% {
+            left: 0;
+            top: 0;
+        }
+        85% {
+            left: 0;
+            top: -20px;
+            width: 20px;
+            height: 20px;
+        }
+        90% {
+            width: 40px;
+            height: 15px;
+        }
+        95% {
+            left: 100px;
+            top: -20px;
+            width: 20px;
+            height: 20px;
+        }
+        100% {
+            left: 100px;
+            top: 0;
+        }
+    }
+    @keyframes object {
+        0% {
+            left: 100px;
+            top: 0;
+        }
+        80% {
+            left: 0;
+            top: 0;
+        }
+        85% {
+            left: 0;
+            top: -20px;
+            width: 20px;
+            height: 20px;
+        }
+        90% {
+            width: 40px;
+            height: 15px;
+        }
+        95% {
+            left: 100px;
+            top: -20px;
+            width: 20px;
+            height: 20px;
+        }
+        100% {
+            left: 100px;
+            top: 0;
+        }
+    }
+</style>

src/views/pages/main.vue

@@ -4,7 +4,7 @@
             <div class="flex-none">
                 <CommonHeader></CommonHeader>
             </div>
-            <div class="root-contaniner d-flex">
+            <div class="root-container d-flex">
                 <el-scrollbar class="container-scrollbar-left flex-none">
                     <AsidePanels class="flex-none"></AsidePanels>
                 </el-scrollbar>
@@ -34,7 +34,7 @@
     .manager-container {
         height: 100%;
 
-        .root-contaniner {
+        .root-container {
             height: calc(100vh - 64px);
             min-width: 1240px;
         }

src/views/service/enterprise-host.ts

@@ -22,6 +22,10 @@ class EnterpriseHost {
         localStorage.removeItem(MANAGER_POID);
         localStorage.removeItem(MANAGER_OID);
     }
+
+    public static hasBaseId() {
+        return this.getOid() && this.getPoid();
+    }
 }
 
 export default EnterpriseHost;