1. init 初始化公共头部

package-lock.json

@@ -3211,6 +3211,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "bankcardinfo": {
+      "version": "2.0.6",
+      "resolved": "http://npm.job.qinqinxiaobao.com/bankcardinfo/-/bankcardinfo-2.0.6.tgz",
+      "integrity": "sha1-05+zahi8fSdQ3NTsJVa8d0aqQ8U=",
+      "requires": {
+        "bluebird": "^3.4.1"
+      }
+    },
     "base": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
@@ -3318,8 +3326,7 @@
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
     "bn.js": {
       "version": "5.2.0",
@@ -11941,6 +11948,17 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
       "dev": true
     },
+    "teammix-frame-element-vue": {
+      "version": "0.1.119",
+      "resolved": "http://npm.job.qinqinxiaobao.com/teammix-frame-element-vue/-/teammix-frame-element-vue-0.1.119.tgz",
+      "integrity": "sha512-LCuVNtWhDu7HU5F8o/kK1GDoqjbxJeFgvK0OONVCnoCMvrA8FQJCsva9oKrRoxNNlDrgXtNxgjMOVmTVUw+Szw==",
+      "requires": {
+        "bankcardinfo": "^2.0.6",
+        "vue": "^2.6.11",
+        "vue-class-component": "^7.2.3",
+        "vue-property-decorator": "^9.1.2"
+      }
+    },
     "terser": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "update-tmv": "npm install teammix-frame-element-vue@latest --registry http://npm.job.qinqinxiaobao.com --save"
   },
   "dependencies": {
     "axios": "^0.26.1",
@@ -13,6 +14,7 @@
     "element-ui": "^2.15.7",
     "lodash": "^4.17.21",
     "oidc-client": "^1.11.5",
+    "teammix-frame-element-vue": "^0.1.119",
     "uniplat-sdk": "^0.1.350-private",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

src/api/token.ts

@@ -183,6 +183,18 @@ class UserController {
         return await instance.getUser();
     }
 
+    public static async getCurrentUserTokenHasBearer() {
+        const user = await UserController.getUser();
+        if (user) {
+            if (TokenManager.isExpired(user)) {
+                await UserController.tryLogin();
+                return "";
+            }
+            return "Bearer " + user.access_token;
+        }
+        return "";
+    }
+
     private static trimUser(user: User) {
         const copy = Object.create(null);
         for (const item of this.untrimProperty) {

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

@@ -12,19 +12,74 @@
             <span class="dividline">|</span>
             <span class="logo-name2">企业管理后台</span>
         </div>
-        <div>头像</div>
+        <div>
+            <teammix-header
+                v-model="headerOption"
+                v-if="headerOption"
+                ref="header"
+            />
+        </div>
     </div>
 </template>
 
 <script lang="ts">
     import { Direction } from "@/router";
     import { Component, Vue } from "vue-property-decorator";
+    import { Envir } from "@/api/env";
+    import {
+        TeammixHeader,
+        TeammixEnterpriseSelectorEnvironment,
+        TeammixEnterpriseSelectorOption,
+        OrganizationItemV2,
+    } from "teammix-frame-element-vue";
+    import { UserController } from "@/api/token";
 
-    @Component({ components: {} })
+    @Component({ components: { TeammixHeader } })
     export default class CommonHeader extends Vue {
+        private headerOption: TeammixEnterpriseSelectorOption | null = null;
+
+        mounted() {
+            this.buildPublicHeader();
+        }
+
         private goHome() {
             this.go(Direction.Home);
         }
+
+        private getTeammixEnterPriseSelectorEnvironment() {
+            if (Envir.isPro()) {
+                return TeammixEnterpriseSelectorEnvironment.Pro;
+            }
+            if (Envir.isStaging()) {
+                return TeammixEnterpriseSelectorEnvironment.Pre;
+            }
+            return TeammixEnterpriseSelectorEnvironment.Dev;
+        }
+
+        private buildPublicHeader() {
+            const comid = localStorage.getItem("poid") || "";
+            this.headerOption = {
+                token: () => UserController.getCurrentUserTokenHasBearer(),
+                envir: this.getTeammixEnterPriseSelectorEnvironment(),
+                onLogout: this.signout,
+                selectedEnterpriseId: comid,
+                onlyShowOwner: true,
+                autoSelectEnterprise4One: true,
+                offset: 64,
+                disableMoreService: true,
+                onEnterpriseChanged: this.onEnterpriseChanged as any,
+            };
+        }
+
+        private signout() {
+            UserController.signout();
+        }
+
+        private onEnterpriseChanged(poid: string, item: OrganizationItemV2) {
+            localStorage.setItem("poid", poid);
+            localStorage.setItem("oid", item.id + "");
+            return "";
+        }
     }
 </script>