eoss-ui 0.7.27 → 0.7.29

package/packages/main/src/main.vue

@@ -25,24 +25,33 @@
     <!-- 公用弹窗 -->
     <es-dialog
       v-for="(item, index) in dialogs"
-      :visible.sync="visibles[index]"
-      :key="item.id || item.name || index"
-      size="md"
-      v-bind="
-        exclAttribute({
-          data: item,
-          attrs: ['visible', 'url']
-        })
-      "
+      :visible.sync="item.visible"
+      :key="item.appCode || item.id || item.name || index"
+      :title="item.name"
+      :width="item.width"
+      :height="item.height"
+      :size="item.size"
       @close="handleClosed(item, index)"
     >
-      <iframe
-        v-if="visibles[index]"
-        width="100%"
-        height="100%"
-        frameborder="0"
-        :src="item.url"
-      ></iframe>
+      <template v-if="item.visible">
+        <es-wujie
+          v-if="item.openModel === 'wujie' && !isIE"
+          :host="host"
+          :show="true"
+          :name="item.appCode"
+          :url="item.url"
+          :props="item"
+        ></es-wujie>
+        <iframe
+          v-else
+          width="100%"
+          height="100%"
+          frameborder="0"
+          :id="item.appCode || item.id"
+          :src="item.url"
+          @load="(event) => handleIframeLoad(event.target, item)"
+        ></iframe>
+      </template>
     </es-dialog>
     <!-- 公用弹窗 end -->
   </div>
@@ -53,6 +62,7 @@ import Simplicity from './simplicity/index.vue';
 import MainDefault from './default/index.vue';
 import util from 'eoss-ui/src/utils/util';
 import WujieVue from 'wujie-vue2';
+import { size } from 'lodash';
 export default {
   name: 'EsMain',
   inheritAttrs: false,
@@ -102,7 +112,8 @@ export default {
       visibles: [],
       isLogin: false,
       layoutType: this.type,
-      layout: this.scene
+      layout: this.scene,
+      isIE: /MSIE|Trident/.test(navigator.userAgent)
     };
   },
   created() {
@@ -142,6 +153,8 @@ export default {
         if (bus) {
           bus.$on('reLogin', this.handleReLogin);
           bus.$on('refresh', this.$refs.main.handleRefresh);
+          bus.$on('windowOpen', this.winOpen);
+          bus.$on('windowClose', this.winClose);
           bus.$on('jumpMenu', this.$refs.main.jumpMenu);
           bus.$on('emit', (method, args) => {
             // 主应用发送事件
@@ -149,65 +162,21 @@ export default {
           });
         }
         util.win.reLogin = this.handleReLogin;
-        util.win.windowOpen = this.openPage;
+        util.win.windowOpen = this.winOpen;
+        util.win.windowClose = this.winClose;
         util.win.refresh = this.$refs.main.handleRefresh;
         util.win.jumpMenu = this.$refs.main.jumpMenu;
         WujieVue.bus.$on('reLogin', this.handleReLogin);
         WujieVue.bus.$on('refresh', this.$refs.main.handleRefresh);
         WujieVue.bus.$on('jumpMenu', this.$refs.main.jumpMenu);
+        WujieVue.bus.$on('windowOpen', this.$refs.main.winOpen);
+        WujieVue.bus.$on('windowClose', this.$refs.main.winClose);
         WujieVue.bus.$on('emit', (method, args) => {
           // 主应用发送事件
           WujieVue.bus.$emit(method, args);
         });
 
-        window.addEventListener('message', (e) => {
-          const { method, args } = e.data;
-          switch (method) {
-            case 'reLogin':
-              this.handleReLogin(args);
-              break;
-            case 'refresh':
-              this.$refs.main.handleRefresh(args);
-              break;
-            case 'jumpMenu':
-              Array.isArray(args)
-                ? this.$refs.main.jumpMenu(...args)
-                : this.$refs.main.jumpMenu(args);
-              break;
-            case 'emit':
-              const { origin, ...data } = args;
-              let iframes = document.getElementsByTagName('iframe');
-              iframes = iframes.filter((item) => {
-                return origin
-                  ? item.src.indexOf(origin) > -1
-                  : item.src.indexOf(e.origin) == -1;
-              });
-              for (let i = 0; i < iframes.length; i++) {
-                iframes[i] &&
-                  iframes[i].contentWindow.postMessage(
-                    data,
-                    origin ? origin : '*'
-                  );
-              }
-              break;
-            case 'openDialog':
-              this.dialogs.push(args);
-              let index = this.visibles.length;
-              this.visibles.push(false);
-              this.$nextTick(() => {
-                this.$set(this.visibles, index, true);
-              });
-              break;
-            case 'closeDialog':
-              for (let i = 0; i < this.dialogs.length; i++) {
-                let item = this.dialogs[i];
-                if (item.url == args.url) {
-                  this.$set(this.visibles, i, false);
-                }
-              }
-              break;
-          }
-        });
+        window.addEventListener('message', this.handleMessage);
       });
     } else {
       const loginPage =
@@ -373,11 +342,16 @@ export default {
       }
     },
     /**
-     * @desc:打开页面
+     * @desc:打开dialog页面
      * @author huangbo
      * @date 2024年9月7日
      **/
-    openPage(url, name, width, height) {
+    winOpen({ url, name, width, height, appCode, id, size }) {
+      if (!appCode && !id) {
+        console.error('参数错误，缺少appCode或者id');
+        return;
+      }
+      const openModel = util.getStorage('openModel');
       let src = url;
       if (!util.startWith(url, ['http', '/'], true)) {
         let pathname = window.location.pathname;
@@ -388,6 +362,25 @@ export default {
         }
         src = pathname + url.replace('./', '/');
       }
+      if (openModel && openModel == 'dialog') {
+        let dialog = {
+          id,
+          url: src,
+          name,
+          width,
+          height,
+          appCode,
+          visible: false,
+          size
+        };
+        let n = this.dialogs.push(dialog);
+        this.$nextTick(() => {
+          this.$set(dialog, 'index', n - 1);
+          this.$set(dialog, 'visible', true);
+        });
+        return dialog;
+      }
+
       if (name) {
         let w = 0;
         let h = 0;
@@ -407,6 +400,109 @@ export default {
         return util.win.open(src);
       }
     },
+
+    /**
+     * @desc:关闭dialog页面
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    winClose({ url, appCode, id }) {
+      if (!appCode && !id) {
+        console.error('参数错误，缺少appCode或者id');
+        return;
+      }
+      let dialog = this.dialogs.find(
+        (item) => item.url == url || item.appCode == appCode || item.id == id
+      );
+      if (dialog) {
+        this.$set(dialog, 'visible', false);
+        this.dialogs.splice(dialog.index, 1);
+      }
+    },
+
+    /**
+     * @desc:postMessage消息处理
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    handleMessage(e) {
+      const { method, args } = e.data;
+      const { index, refresh, jumpMenu } = args;
+      switch (method) {
+        case 'reLogin':
+          this.handleReLogin(args);
+          break;
+        case 'refresh':
+          this.$refs.main.handleRefresh(args);
+          break;
+        case 'jumpMenu':
+          Array.isArray(args)
+            ? this.$refs.main.jumpMenu(...args)
+            : this.$refs.main.jumpMenu(args);
+          break;
+        case 'emit':
+          const { origin, appCode, id, ...data } = args;
+          let iframe = document.getElementById(appCode || id);
+          iframe.contentWindow.postMessage(data, origin ? origin : '*');
+          break;
+        case 'openDialog': //打开弹窗
+          if (!args.appCode && !args.id) {
+            console.error('参数错误，缺少appCode或者id');
+            return;
+          }
+          args.index = this.dialogs.length;
+          args.visible = false;
+          this.dialogs.push(args);
+          this.$nextTick(() => {
+            this.$set(args, 'visible', true);
+          });
+          break;
+        case 'closeDialog': //关闭弹窗
+          this.$set(this.dialogs[index], 'visible', false);
+          this.dialogs.splice(index, 1);
+          refresh && this.$refs.main.handleRefresh(refresh);
+          jumpMenu &&
+            (Array.isArray(jumpMenu)
+              ? this.$refs.main.jumpMenu(...jumpMenu)
+              : this.$refs.main.jumpMenu(jumpMenu));
+          break;
+        case 'windowOpen': //打开弹窗
+          if (!args.appCode && !args.id) {
+            console.error('参数错误，缺少appCode或者id');
+            return;
+          }
+          args.index = this.dialogs.length;
+          args.visible = false;
+          this.dialogs.push(args);
+          this.$nextTick(() => {
+            this.$set(args, 'visible', true);
+          });
+          break;
+        case 'windowClose': //关闭弹窗
+          this.$set(this.dialogs[index], 'visible', false);
+          this.dialogs.splice(index, 1);
+          refresh && this.$refs.main.handleRefresh(refresh);
+          jumpMenu &&
+            (Array.isArray(jumpMenu)
+              ? this.$refs.main.jumpMenu(...jumpMenu)
+              : this.$refs.main.jumpMenu(jumpMenu));
+          break;
+      }
+    },
+
+    /**
+     * @desc:dialog页面加载完成后通讯
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    handleIframeLoad(iframe, data) {
+      iframe = iframe
+        ? iframe
+        : document.getElementById(data.appCode || data.id);
+      const origin = new URL(iframe.src).origin;
+      iframe.contentWindow.postMessage(data, origin);
+    },
+
     /**
      * @desc:排除属性
      * @author huangbo
@@ -422,7 +518,6 @@ export default {
      **/
     handleClosed(res, index) {
       this.dialogs.splice(index, 1);
-      this.visibles.splice(index, 1);
     },
     /**
      * @desc:主应用向子应用发送事件
@@ -449,6 +544,7 @@ export default {
     }
   },
   beforeDestroy() {
+    window.removeEventListener('message', this.handleMessage);
     WujieVue.bus.$off('reLogin');
     WujieVue.bus.$off('refresh');
     WujieVue.bus.$off('jumpMenu');

package/packages/main/src/public/online.vue

@@ -1,89 +1,89 @@
-<template>
-  <es-data-table
-    numbers
-    :url="sysuseronline"
-    :thead="thead"
-    page
-  ></es-data-table>
-</template>
-
-<script>
-import { userOnline } from 'eoss-ui/src/config/api.js';
-export default {
-  name: 'Online',
-  components: {},
-  props: {
-    sysuseronline: {
-      type: String,
-      default: userOnline
-    }
-  },
-  data() {
-    return {
-      thead: [
-        {
-          title: '单位',
-          field: 'orgName',
-          minWidth: 120
-        },
-        {
-          title: '部门',
-          field: 'depName',
-          align: 'center',
-          minWidth: 120
-        },
-        {
-          title: '姓名',
-          field: 'userName',
-          align: 'center',
-          width: 120
-        },
-        {
-          title: '职务',
-          field: 'position',
-          align: 'center',
-          width: 120
-        },
-        {
-          title: '账号',
-          field: 'loginName',
-          align: 'center',
-          width: 120
-        },
-        {
-          title: '登录时间',
-          field: 'loginDate',
-          align: 'center',
-          width: 156
-        },
-        {
-          title: '登录次数',
-          field: 'freQuency',
-          align: 'center',
-          width: 100
-        },
-        {
-          title: '登录方式',
-          field: 'loginModel',
-          align: 'center',
-          width: 100,
-          render: (h, params) => {
-            let {
-              row: { loginModel }
-            } = params;
-            let types = ['普通登录', 'CA登录', '手机登录'];
-            return h('span', {}, [types[loginModel] || types[0]]);
-          }
-        }
-      ]
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {}
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <es-data-table
+    numbers
+    :url="sysuseronline"
+    :thead="thead"
+    page
+  ></es-data-table>
+</template>
+
+<script>
+import { userOnline } from 'eoss-ui/src/config/api.js';
+export default {
+  name: 'Online',
+  components: {},
+  props: {
+    sysuseronline: {
+      type: String,
+      default: userOnline
+    }
+  },
+  data() {
+    return {
+      thead: [
+        {
+          title: '单位',
+          field: 'orgName',
+          minWidth: 120
+        },
+        {
+          title: '部门',
+          field: 'depName',
+          align: 'center',
+          minWidth: 120
+        },
+        {
+          title: '姓名',
+          field: 'userName',
+          align: 'center',
+          width: 120
+        },
+        {
+          title: '职务',
+          field: 'position',
+          align: 'center',
+          width: 120
+        },
+        {
+          title: '账号',
+          field: 'loginName',
+          align: 'center',
+          width: 120
+        },
+        {
+          title: '登录时间',
+          field: 'loginDate',
+          align: 'center',
+          width: 156
+        },
+        {
+          title: '登录次数',
+          field: 'freQuency',
+          align: 'center',
+          width: 100
+        },
+        {
+          title: '登录方式',
+          field: 'loginModel',
+          align: 'center',
+          width: 100,
+          render: (h, params) => {
+            let {
+              row: { loginModel }
+            } = params;
+            let types = ['普通登录', 'CA登录', '手机登录'];
+            return h('span', {}, [types[loginModel] || types[0]]);
+          }
+        }
+      ]
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped></style>