主系统 子系统 通过发布订阅模式 进行通信，修复项目管理 商机列表项目概览 修改内容错位问题

dsk-operate-ui/src/utils/iframeTools.js

@@ -2,7 +2,7 @@
  * @Author: thy
  * @Date: 2023-11-08 09:28:17
  * @LastEditors: thy
- * @LastEditTime: 2023-11-17 09:36:01
+ * @LastEditTime: 2023-11-28 16:04:07
  * @Description: file content
  * @FilePath: \dsk-operate-ui\src\utils\iframeTools.js
  */
@@ -31,6 +31,7 @@ class IframeTools {
    * @returns
    */
   constructor(subSystemIframe, pluginDomain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS) {
+    return new Promise(async (resolve, reject) => {
       try {
         const query = getUrlSearchQuery();
         if (!query.url) return Message.warning("缺少子系统目标地址");
@@ -41,12 +42,15 @@ class IframeTools {
         this.queryParams = query;
         this.pluginDomain = pluginDomain;
         this.subSystemIframe = subSystemIframe;
+        // 是否外部打开
         this.isOuter = query.isOuter && typeof JSON.parse(query.isOuter) == "boolean" ? JSON.parse(query.isOuter) : false;
         // 是一个合法地址 初始化 先替换域名地址 再获取令牌并 拼接
-      this.init();
+        await this.init();
+        resolve(this);
       } catch (error) {
-      throw new Error(error);
+        reject(error)
       }
+    });
   }
 
   /**

dsk-operate-ui/src/utils/postMessageBridge/action/index.js

+import Interaction from "./interaction";
+import Router from "./router";
+
+export default {
+  "interaction": new Interaction(),
+  "router": new Router(),
+};
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/action/interaction.js

+class Interaction {
+  actionName = "interaction";
+
+  constructor() {
+
+  }
+}
+
+export default Interaction;
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/action/router.js

+class Router {
+  actionName = "router"
+
+  constructor() {
+    
+  }
+}
+
+export default Router;
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/bridge/eventCenter.js

+/*
+ * @Author: thy
+ * @Date: 2023-11-28 18:09:11
+ * @LastEditors: thy
+ * @LastEditTime: 2023-11-29 10:48:22
+ * @Description: file content
+ * @FilePath: \dsk-operate-ui\src\utils\postMessageBridge\bridge\eventCenter.js
+ */
+
+import { v4 } from "uuid";
+
+/**
+ * 事件回调 调度中心
+ */
+class EventCenter {
+  //事件回调储存栈
+  _eventHandlerMap = new Map();
+
+  constructor() {
+
+  }
+
+  /**
+   * 根据回调ID获取事件回调储存中的回调
+   * @param {string} handlerId 
+   */
+  getTargetHandler(handlerId) {
+    return this._eventHandlerMap.get(handlerId);
+  }
+
+  /**
+   * 注册事件回调到 事件储存中
+   * @param {Promise} promiseCallBack 
+   */
+  registerHandler(promiseCallBack) {
+    return new Promise((resolve, reject) => {
+      if (Object.prototype.toString.call(promiseCallBack) !== "[object Promise]") return console.warn("传入的回调类型不是一个promise实例");
+      const uid = v4();
+      this._eventHandlerMap.set(uid, promiseCallBack);
+      resolve(uid);
+    });
+  }
+
+  /**
+   * 根据回调ID卸载事件回调储存中的回调
+   * @param {string} handlerId 
+   */
+  writeOffHandler(handlerId) {
+    return this._eventHandlerMap.delete(handlerId);
+  }
+
+  /**
+   * 根据回调ID 执行事件回调储存中的回调 并卸载
+   * @param {string} handlerId 
+   */
+  executeHandler(handlerId) {
+    return new Promise((resolve, reject) => {
+      try {
+        const currentCallBack = this.getTargetHandler(handlerId);
+        if (!currentCallBack) return reject("执行回调错误,未找到对应回调");
+        // 执行回调
+
+      } catch (error) {
+
+      }
+    });
+  }
+}
+
+export default EventCenter;
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/bridge/index.js

@@ -2,44 +2,87 @@
  * @Author: thy
  * @Date: 2023-10-26 14:56:41
  * @LastEditors: thy
- * @LastEditTime: 2023-10-31 09:28:26
+ * @LastEditTime: 2023-11-29 14:25:31
  * @Description: file content
  * @FilePath: \dsk-operate-ui\src\utils\postMessageBridge\bridge\index.js
  */
 
+import EventCenter from "./eventCenter";
+import action from "@/utils/postMessageBridge/action";
+import { normalToPromise } from "@/utils/postMessageBridge/tools";
+
 
 class PostMessageBridge {
   // 当前系统
-  _currenySystem = null;
+  _currentSystem = null;
+  // 当前系统域
+  _currentOriginUrl = null;
   // 目标系统
   _targetSystem = null;
   // 目标域
   _targetOriginUrl = null;
   // 事件调度中心
-  _eventHandlers = new Map();
+  _eventCenter = null;
+  // 触发的行为
+  _actionMap = null;
   /**
    * 
    * @param {{ 
-   * currenySystem : Window || undefined;
+   * currentSystem : Window || undefined;
+   * currentOriginUrl : string;
    * targetSystem : Window || undefined;
    * targetOriginUrl : string || undefined;
    * }} options 
    */
   constructor(options) {
-    this._currenySystem = options.currenySystem;
+    return new Promise(async (resolve, reject) => {
+      try {
+        this._currentSystem = options.currentSystem;
+        this._currentOriginUrl = options.currentOriginUrl || location.origin;
         this._targetSystem = options.targetSystem;
         this._targetOriginUrl = options.targetOriginUrl || "*";
+        await this.init();
+        resolve(this);
+      } catch (error) {
+        reject(error);
+      }
+    });
   }
 
   /**
-   * 订阅消息
-   * @param {{
-   * id : string;
-   * method : string;
-   * params : object;
-   * }} messageEvent 
+   * 通信初始化
    */
-  receiveMessage(messageEvent) {
+  async init() {
+    try {
+      this._eventCenter = new EventCenter();
+      this._actionMap = action;
+      this._currentSystem.addEventListener("message", this.messageListener, false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
+  /**
+   * 触发message 时执行的函数
+   * @param {MessageEvent} event 
+   * @returns 
+   */
+  messageListener(event) {
+    new Promise(async (resolve, reject) => {
+      try {
+        const { data, origin, source } = event;
+        if (origin !== this._currentOriginUrl) return;
+        const { id, action, methodName, params } = data;
+        if (!id) return;
+        // promise化
+        const result = normalToPromise(this._actionMap[action][methodName]);
+        resolve(result);
+      } catch (error) {
+        console.log(error);
+        reject(error);
       }
+    });
+  };
 }
+
+export default PostMessageBridge;
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/index.js

+export { default as PostMessageBridge } from "./bridge";
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/tools/index.js

+/**
+ * 普通函数包装为promise风格函数
+ * @param {Function} fn 
+ * @returns {Promise<any>} 返回一个promise
+ */
+export const normalToPromise = (fn) => {
+  const tag = Object.prototype.toString.call(fn);
+  if (tag !== "[object Function]" || tag !== "[object AsyncFunction]") return fn;
+  return (...args) => {
+    try {
+      const result = fn(...args);
+      return Promise.resolve(result);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+};
\ No newline at end of file

dsk-operate-ui/src/views/project/projectList/component/xmsl.vue

@@ -221,10 +221,11 @@
           this.addtips()
         }
         let j = 0
-        for(var i=1;i<=7;i++){
+        for(let i=1;i<=7;i++){
           let isSelf = document.getElementById('inputxt'+i).contains(event.target)  // 这个是自己的区域
           if(isSelf) {
             this.nowedit = i
+            break;
           }else {
             j++;
           }
@@ -254,13 +255,13 @@
                 break;
               case 7 :
                 // param = {'constructionPhone':this.xmsldata.constructionPhone}
-                this.isphone(1,this.xmsldata.constructionPhone)
+                this.isphone(2,this.xmsldata.constructionPhone)
                 break;
             }
-            if(this.nowedit!=6 && this.nowedit!=7)
+            if(this.nowedit!=6 && this.nowedit!=7) {
               this.editXMSL(param)
             }
-          this.nowedit = -1
+          }
         }
       })
     },
@@ -276,8 +277,7 @@
           this.spanWidth = 'width:'+wid
         });
       },
-      editXMSL(param){
-        this.nowedit = -1
+      async editXMSL(param){
         if(this.isDisabled == true)
           return false
         if(param.projectStage){//修改项目阶段
@@ -286,17 +286,17 @@
         }else{
           let params = param
           params.id = this.id
-          editXMNR(JSON.stringify(params)).then(res=>{
+          const res = await editXMNR(JSON.stringify(params));
             if (res.code == 200){
               if(!param.projectStage){
                 // this.$message.success('修改成功！')
               }
             }else{
               this.$message.error(res.msg)
-              this.getXMSL()
+              await this.getXMSL()
             }
-          })
           }
+          this.nowedit = -1;
       },
       //验证电话号码
       isphone(type,value){
@@ -352,7 +352,7 @@
       },
 
       getXMSL(){
-        getXMSL(this.id).then(result=> {
+        return getXMSL(this.id).then(result=> {
           this.xmjd = !result.data.projectStage?'待添加':result.data.projectStage
           if(result.data.labelList == null || result.data.labelList == "" || result.data.labelList == undefined){
             this.tipslit = []

dsk-operate-ui/src/views/subsystem/components/IframeComIns.vue

@@ -22,6 +22,11 @@ export default {
     url: {
       type: String,
       default: ""
+    },
+    // 100%模式
+    layout: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {

dsk-operate-ui/src/views/subsystem/index.vue

 <template>
   <div class="subsystem-iframe-container">
     <iframe-com-ins ref="subsystemIframeContainer" :iframeStyles="urlQueryParams.iframeStyles" :styles="urlQueryParams.styles"
-      :url="urlQueryParams.url"></iframe-com-ins>
+      :url="urlQueryParams.url" :layout="urlQueryParams.layout"></iframe-com-ins>
   </div>
 </template>
 <script>
 import IframeComIns from "./components/IframeComIns";
 import IframeTools from "@/utils/iframeTools";
+import { PostMessageBridge } from "@/utils/postMessageBridge";
 export default {
   name: "subsystemIframeContainer",
   components: {
@@ -15,12 +16,13 @@ export default {
   data() {
     return {
       urlQueryParams: {},
-      iframeToolsIns: {}
+      iframeToolsIns: {},
+      messageBridgeIns: {}
     };
   },
   //可访问data属性
   created() {
-    this.Init();
+    this.init();
   },
   beforeDestroy() {
     if (this.iframeToolsIns) {
@@ -33,10 +35,20 @@ export default {
   },
   //方法集
   methods: {
-    async Init() {
+    async init() {
       await this.$nextTick();
       const dom = this.$refs["subsystemIframeContainer"].$el.querySelector("iframe");
-      const iframeTools = new IframeTools(dom);
+      // 初始化iframe工具
+      const iframeTools = await new IframeTools(dom);
+      // 初始化iframe通信工具
+      console.dir(iframeTools);
+      const messageBridge = await new PostMessageBridge({
+        currenySystem: window,
+        targetSystem: iframeTools.subSystemIframe?.contentWindow,
+        targetOriginUrl: process.env.VUE_APP_SUB_SYSTEM_ADDRESS
+      });
+      console.log(messageBridge);
+      this.messageBridgeIns = messageBridge;
       this.iframeToolsIns = iframeTools;
       this.urlQueryParams = iframeTools.queryParams;
       console.log(this.urlQueryParams);
@@ -52,5 +64,6 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
 </style>