子系统接入

.env.development

@@ -50,6 +50,7 @@ VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 # Alarm Notify Polling Interval Time
 VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
-
+#二三维一体化
+VITE_GLOB_LIGONG_ADMIN = http://localhost:8085/#/
 # Alarm Notify Auto Close Time Unit is Second
 VITE_GLOB_ALARM_NOTIFY_DURATION = 5

.env.production

@@ -58,6 +58,7 @@ VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 # Alarm Notify Polling Interval Time
 VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 60000
-
+#二三维一体化
+VITE_GLOB_LIGONG_ADMIN = http://localhost:8085/#/
 # Alarm Notify Auto Close Time Unit is Second
 VITE_GLOB_ALARM_NOTIFY_DURATION = 5

index.html

@@ -56,6 +56,10 @@
     header.ant-layout-header {
       padding-right: 20px;
     }
+
+    .vben-default-layout-main {
+      margin-left: 0px !important;
+    }
   </style>
 </head>
 

src/hooks/setting/index.ts

@@ -17,6 +17,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_LARGE_DESIGNER,
+    VITE_GLOB_LIGONG_ADMIN,
   } = getAppEnvConfig();
 
   if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -32,6 +33,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     apiUrl2: VITE_GLOB_API_URL2,
     shortName: VITE_GLOB_APP_SHORT_NAME,
     urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    twoThree: VITE_GLOB_LIGONG_ADMIN,
     uploadUrl: VITE_GLOB_UPLOAD_URL,
     configurationPrefix: VITE_GLOB_CONFIGURATION,
     largeDesignerPrefix: VITE_GLOB_LARGE_DESIGNER,

src/utils/MicroFrontend.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: sjl
+ * @Date: 2023-04-26 10:55:12
+ * @Descripttion: 
+ */
+class MicroFrontend {
+  constructor() {
+    this.apps = {}; // 存储子应用的信息
+    this.globalData = {}; // 存储全局数据
+    this.init();
+  }
+
+  // 初始化方法
+  init() {
+    // 监听子应用的消息
+    window.addEventListener('message', (event) => {
+      console.log("父消息：", event);
+      const { data, source } = event;
+      if (data.type === 'register') {
+        // 子应用注册
+        this.apps[data.name] = {
+          source,
+          loaded: false,
+        };
+      } else if (data.type === "logout") {
+        if (globalEvent.wlwLogin) {
+          globalEvent.wlwLogin();
+          globalEvent.wlwLogin = null;
+        }
+      } else if (data.type === "js") {
+        eval(data.message)
+      } else if (data.type === 'loaded') {
+        // 子应用加载完成
+        this.apps[data.name].loaded = true;
+      } else if (data.type === 'setGlobalData') {
+        // 设置全局数据
+        this.globalData[data.key] = data.value;
+      } else if (data.type === 'getGlobalData') {
+        // 获取全局数据
+        const value = this.globalData[data.key];
+        source.postMessage({
+          type: 'getGlobalData',
+          key: data.key,
+          value,
+        }, '*');
+      }
+    });
+    return this;
+  }
+
+  // 注册子应用
+  register(name, id, url, callback) {
+    const iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    document.getElementById(id).appendChild(iframe);
+    this.apps[name] = {
+      source: iframe.contentWindow,
+      loaded: false,
+    };
+    // 发送注册消息给子应用
+    // iframe.contentWindow.postMessage({
+    //   type: 'register',
+    //   name,
+    // }, '*');
+    iframe.onload = function () {
+      callback && callback()
+    };
+  }
+
+  // 发送消息给子应用
+  sendToApp(name, message) {
+    const app = this.apps[name];
+    // if (app && app.loaded) {
+    if (app) {
+      app.source.postMessage(message, '*');
+    }
+  }
+
+  // 设置全局数据
+  setGlobalData(key, value) {
+    this.globalData[key] = value;
+    // 发送设置全局数据的消息给所有子应用
+    Object.values(this.apps).forEach((app) => {
+      if (app.loaded) {
+        app.source.postMessage({
+          type: 'setGlobalData',
+          key,
+          value,
+        }, '*');
+      }
+    });
+  }
+
+  // 获取全局数据
+  getGlobalData(key) {
+    // 发送获取全局数据的消息给所有子应用
+    Object.values(this.apps).forEach((app) => {
+      if (app.loaded) {
+        app.source.postMessage({
+          type: 'getGlobalData',
+          key,
+        }, '*');
+      }
+    });
+  }
+}
+
+
+export default MicroFrontend;

src/utils/Tool.js

@@ -52,6 +52,24 @@ var tool = {
             }
         }
         return fd;
+    },
+
+    UrlSearch() {
+        var name, value;
+        var str = location.href; //取得整个地址栏
+        var num = str.indexOf("?")
+        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]
+        var arr = str.split("&"); //各个参数放到数组里
+        var obj = {};
+        for (var i = 0; i < arr.length; i++) {
+            num = arr[i].indexOf("=");
+            if (num > 0) {
+                name = arr[i].substring(0, num);
+                value = arr[i].substr(num + 1);
+                obj[name] = value;
+            }
+        }
+        return obj;
     }
 }
 

src/utils/env.ts

@@ -34,6 +34,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_LARGE_DESIGNER,
+    VITE_GLOB_LIGONG_ADMIN,
   } = ENV;
 
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -55,6 +56,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_LARGE_DESIGNER,
+    VITE_GLOB_LIGONG_ADMIN,
   };
 }
 

src/views/systemAdmin/system/menu/index.vue

@@ -66,7 +66,8 @@
       const [registerDrawer, { openDrawer }] = useDrawer(); //使用右侧弹出框
       const { t } = useI18n(); //加载国际化
       // 新增菜单
-      const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu'));
+      // const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu'));
+      const getI18nCreateMenu = computed(() => '新增菜单');
 
       const [
         registerTable,

src/views/twoThree/index.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: sjl
+ * @Date: 2023-04-10 11:01:43
+ * @Descripttion: 
+-->
+<template>
+    <div id="twoThree"></div>
+</template>
+<script>
+import { defineComponent, onMounted } from 'vue';
+import MicroFrontend from '/@/utils/MicroFrontend.js';
+import { getAppEnvConfig } from '/@/utils/env';
+import { session } from '/@/utils/Memory.js';
+const { VITE_GLOB_LIGONG_ADMIN } = getAppEnvConfig();
+export default defineComponent({
+    components: {},
+    setup() {
+        var mic = new MicroFrontend().init();
+        onMounted(() => iframe())
+        function iframe() {
+            if (!mic.show) {
+                var token = sessionStorage.getItem('token');
+                var login = session.getItem("loginFrom")
+                if (token && login) {
+                    token = token.replace(/['"]/g, '');
+                    mic.register('wlw', 'twoThree', `${VITE_GLOB_LIGONG_ADMIN}?refreshToken=${token}&password=${login.password}&username=${login.username}`);
+                    mic.show = true;
+                }
+            }
+        }
+        return {};
+    }
+});
+</script>
+<style scoped>
+#iframeapp,
+#twoThree,
+#twoThree iframe {
+    width: 100%;
+    height: 100%;
+}
+</style>
+  

types/config.d.ts

@@ -140,7 +140,7 @@ export interface GlobConfig {
   title: string;
   // Service interface url
   apiUrl: string;
-  
+
   apiUrl2: string;
   // Upload url
   uploadUrl?: string;
@@ -185,4 +185,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME: string;
   // notify duration
   VITE_GLOB_ALARM_NOTIFY_DURATION: string;
+  //理工后台
+  VITE_GLOB_LIGONG_ADMIN: string;
 }