eoss-ui 0.5.81-beta2 → 0.5.81-beta4

package/packages/main/src/simplicity/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="es-main">
     <div class="es-simplicity-side">
-      <img
-        class="es-simplicity-side-item es-simplicity-logo"
-        v-if="mainLogo"
-        :src="mainLogo"
-      />
-      <el-popover placement="right-start" width="360" trigger="click">
+      <img class="es-simplicity-logo" v-if="mainLogo" :src="mainLogo" />
+      <div class="es-simplicity-org-name">{{ userModel.orgName }}</div>
+      <el-popover
+        class="es-simplicity-user-popover"
+        placement="right-start"
+        width="360"
+        trigger="click"
+      >
         <!-- 用户信息 -->
         <user
           :user="user"
@@ -19,7 +21,7 @@
         <avatar slot="reference" :user="user"> </avatar>
         <!-- 用户信息 end -->
       </el-popover>
-      <div class="es-simplicity-side-item es-simplicity-side-Application">
+      <div class="es-simplicity-side-Application">
         <!-- 常用应用 -->
         <el-scrollbar>
           <div
@@ -76,7 +78,7 @@
         class="es-simplicity-subMenus"
         direction="ltr"
         modal-class="es-simplicity-apps-modal"
-        :size="width"
+        :size="width + 'px'"
         :modal-append-to-body="false"
         :with-header="false"
         :visible.sync="showMenu"
@@ -116,19 +118,18 @@
 
       <!-- AI -->
       <el-drawer
-        class="es-simplicity-subMenus"
+        class="es-simplicity-public-drawer"
         direction="ltr"
         modal-class="es-simplicity-apps-modal"
         size="100%"
         show-close
         :modal-append-to-body="false"
-        :with-header="false"
         :visible.sync="drawer.visible"
       >
-        <i
+        <!-- <i
           class="es-icon-close es-simplicity-drawer-close"
           @click="handleCloseDrawer"
-        ></i>
+        ></i> -->
         <template v-if="drawer.url">
           <template v-if="isIE || drawer.method !== 'wujie'">
             <iframe
@@ -194,7 +195,6 @@
         v-model="activeName"
         closable
         hide-bar
-        @tab-click="handleTab"
         @tab-remove="handleRemove"
         @tab-contextmenu="handleContextmenu"
       >
@@ -210,6 +210,14 @@
           :notice-num="notice"
           @click="handleClick"
         ></handler>
+        <div
+          class="es-simplicity-unfold"
+          ref="box"
+          v-show="!showMenu && subMenus"
+          @click="handleShowMenus"
+        >
+          <i class="el-icon-s-unfold" ref="area"></i>
+        </div>
         <el-tab-pane
           v-for="item in tabs"
           :key="item.id"
@@ -238,10 +246,7 @@
             ></es-wujie>
           </template>
           <template v-else-if="item.method === 'router' && item.refresh">
-            <router-view v-if="!isKeepAlive" :name="item.appCode" />
-            <keep-alive>
-              <router-view v-if="isKeepAlive" :name="item.appCode" />
-            </keep-alive>
+            <router-view :name="item.appCode" />
           </template>
         </el-tab-pane>
       </el-tabs>
@@ -299,6 +304,7 @@ import notice from './notice.vue';
 import settings from './settings.vue';
 import {
   wss,
+  logout,
   topic,
   getUserAppWithTag,
   getComplexApplications,
@@ -448,7 +454,11 @@ export default {
     //无界微前端Props属性
     wjProps: Object,
     //无界微前端Attrs属性
-    wjAttrs: Object
+    wjAttrs: Object,
+    menuWidth: {
+      type: Number,
+      default: 220
+    }
   },
   data() {
     return {
@@ -463,11 +473,11 @@ export default {
       //所有菜单
       menus: [],
       //子菜单
-      subMenus: [],
+      subMenus: null,
       //展示菜单导航
       showMenu: false,
       //展示菜单导航宽度
-      width: '296px',
+      width: this.menuWidth,
       //人工智能配置
       aiConfig: null,
       //公用窗口面板配置
@@ -526,7 +536,9 @@ export default {
       //页签对象
       pane: null,
       //选中菜单
-      active: ''
+      active: '',
+      //单位名称
+      orgName: ''
     };
   },
   computed: {
@@ -598,6 +610,7 @@ export default {
     util.win.refresh = this.handleRefresh;
     util.win.jumpMenu = this.jumpMenu;
     util.win.windowOpen = this.openPage;
+    this.move();
   },
   methods: {
     /**
@@ -624,20 +637,20 @@ export default {
         let pathname = url.substring(url.indexOf('#/') + 1);
         pathname = pathname.split('?')[0];
         if (res.path !== '/' && pathname == path) {
-          if (typeof res.component === 'function') {
-            let component = {};
-            component[code] = res.component;
-            res.component = component;
-            if (parentName) {
-              this.$router.addRoute({ parentName, route: res });
-            } else {
-              this.$router.addRoute(res);
+          if (res.components) {
+            if (!res.components[code]) {
+              console.error('“命名视图”规范属性名称与菜单appCode不一致', res);
             }
+          } else {
+            console.error(
+              '请根据“命名视图”规范，正确添加components属性名称',
+              res
+            );
           }
           return pathname;
         }
         if (res && Object.prototype.hasOwnProperty.call(res, 'children')) {
-          let path = this.hasRouter(res.children, url, code, parentName);
+          let path = this.hasRouter(res.children, url, code, res.name);
           if (path) {
             return path;
           }
@@ -654,7 +667,6 @@ export default {
       this.setConfig(results);
       if (this.remote) {
         this.getApplications();
-        this.getMenus();
       }
     },
     /**
@@ -774,6 +786,7 @@ export default {
      * @date 2024年9月7日
      **/
     getApplications() {
+      let loading = util.loading('', '加载中...');
       util
         .ajax({
           url: this.appsUrl,
@@ -797,12 +810,15 @@ export default {
             } else {
               this.$message.error('未分配应用菜单权限，请联系管理员！');
             }
+            this.getMenus(loading);
           } else {
+            loading.close();
             let msg = res.msg || '系统错误，请联系管理员！';
             this.$message.error(msg);
           }
         })
         .catch((err) => {
+          loading.close();
           if (err.message && err.message !== 'canceled') {
             this.$message.error(err.message);
           }
@@ -813,21 +829,84 @@ export default {
      * @author huangbo
      * @date 2024年9月7日
      **/
-    getMenus(appCode, url) {
-      let params = appCode ? { menuCode: appCode } : {};
+    getMenus(loading) {
       util
-        .ajax({ url: url || this._menuUrl, params: params })
+        .ajax({ url: this._menuUrl })
         .then((res) => {
+          loading.close();
           if (res.rCode === 0) {
             if (res.results && res.results.length) {
               this.menus = res.results;
               this.setTips(this.menus);
               store.set('nav', this.menus);
+              console.log(12121);
+              if (this.appCode) {
+                let app = this.userApps.filter((item) => {
+                  return item.code === this.appCode;
+                })[0];
+                if (app) {
+                  this.active = app.id;
+                  if (app.url) {
+                    let obj = this.getMenu(this.menus, app.url);
+                    if (obj) {
+                      let tab = this.setIframeType(obj);
+                      this.tabs = [tab];
+                      this.activeName = tab.id;
+                      if (tab.method == 'router') {
+                        let params = util.getParams({ url: tab.url });
+                        this.$router.push({
+                          path: tab.path,
+                          query: params
+                        });
+                      }
+                    }
+                  }
+                }
+                if (this.tabs.length == 0) {
+                  let subMenus = this.getMenu(
+                    this.menus,
+                    this.appCode,
+                    'appCode'
+                  );
+                  if (subMenus) {
+                    // this.subMenus = subMenus;
+                    // this.showMenu = true;
+                    let obj = this.getFirst(subMenus);
+                    if (obj) {
+                      let tab = this.setIframeType(obj);
+                      this.tabs = [tab];
+                      this.activeName = tab.id;
+                      if (tab.method == 'router') {
+                        let params = util.getParams({ url: tab.url });
+                        this.$router.push({
+                          path: tab.path,
+                          query: params
+                        });
+                      }
+                    }
+                  } else {
+                    this.subMenus = null;
+                    this.showMenu = false;
+                  }
+                }
+                // this.width = this.menuWidth;
+                // this.$refs.subMenus && this.$refs.subMenus.clearSubmenu();
+              }
               if (this.indexUrl) {
                 let obj = this.getMenu(this.menus, this.indexUrl);
                 if (obj) {
-                  this.tabs = [this.setIframeType(obj)];
-                  this.activeName = obj.id;
+                  if (!this.appCode) {
+                    let tab = this.setIframeType(obj);
+                    this.tabs = [tab];
+                    this.activeName = tab.id;
+                    if (tab.method == 'router') {
+                      let params = util.getParams({ url: tab.url });
+                      this.$router.push({
+                        path: tab.path,
+                        query: params
+                      });
+                    }
+                  }
                   this.homePage = obj;
                 } else {
                   this.homePage = this.setIframeType({
@@ -836,18 +915,38 @@ export default {
                     id: '0',
                     appCode: 'indexUrl'
                   });
-                  this.tabs = [this.homePage];
-                  this.activeName = '0';
+                  if (!this.appCode) {
+                    this.tabs = [this.homePage];
+                    this.activeName = '0';
+                    if (this.homePage.method == 'router') {
+                      let params = util.getParams({ url: this.homePage.url });
+                      this.$router.push({
+                        path: this.homePage.path,
+                        query: params
+                      });
+                    }
+                  }
                 }
-              }
-              if (this.initApps && this.initApps.length) {
+              } else if (
+                this.initApps &&
+                this.initApps.length &&
+                !this.appCode
+              ) {
                 let obj = this.getMenu(
                   this.menus,
                   this.initApps[this.initApps.length - 1]
                 );
                 if (obj) {
-                  this.tabs.push(this.setIframeType(obj));
-                  this.activeName = obj.id;
+                  let tab = this.setIframeType(obj);
+                  this.tabs.push(tab);
+                  this.activeName = tab.id;
+                  if (tab.method == 'router') {
+                    let params = util.getParams({ url: tab.url });
+                    this.$router.push({
+                      path: tab.path,
+                      query: params
+                    });
+                  }
                 }
               }
             } else {
@@ -859,19 +958,22 @@ export default {
           }
         })
         .catch((err) => {
+          loading.close();
           if (err.message && err.message !== 'canceled') {
             this.$message.error(err.message);
           }
         });
     },
+    /**
+     * @desc:设置页面加载类型
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
     setIframeType(res) {
       let { url } = res;
       let urls = url.split('?');
       if (urls[0].indexOf('.js') > 1 && !isIE) {
         res.method = 'wujie';
-        this.$nextTick(() => {
-          res.refresh = true;
-        });
       } else if (
         urls[0].indexOf('.dhtml') > 0 ||
         (urls[0].indexOf('.html') > 0 && urls[0].indexOf('.html#') === -1)
@@ -885,14 +987,8 @@ export default {
           if (routes) {
             let path = this.hasRouter(routes, urls[0], res.appCode);
             if (path) {
-              let params = util.getParams({ url: url });
-              this.$router.push({
-                path: path,
-                query: params
-              });
-              this.$nextTick(() => {
-                res.refresh = true;
-              });
+              res.method = 'router';
+              res.path = path;
             } else {
               let urlopenmode = util.getParams({
                 url: url,
@@ -907,9 +1003,6 @@ export default {
                 res.method = 'iframe';
               } else {
                 res.method = 'wujie';
-                this.$nextTick(() => {
-                  res.refresh = true;
-                });
               }
             }
           } else if (
@@ -917,14 +1010,12 @@ export default {
             urls[0].indexOf('/#/') > -1
           ) {
             res.method = 'wujie';
-            this.$nextTick(() => {
-              res.refresh = true;
-            });
           } else {
             res.method = 'iframe';
           }
         }
       }
+      res.refresh = true;
       return res;
     },
     /**
@@ -964,6 +1055,37 @@ export default {
       }
       return false;
     },
+    /**
+     * @desc:获取菜单第一条数据
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    getFirst(obj) {
+      if (!obj) {
+        return '';
+      }
+      let openIdex = 0;
+      if (
+        obj.extendData &&
+        (obj.extendData.subDefOpenIndex || obj.extendData.subDefOpen)
+      ) {
+        openIdex = parseInt(
+          obj.extendData.subDefOpenIndex || obj.extendData.subDefOpen,
+          10
+        );
+      }
+      if (obj.children && obj.children.length && obj.children[openIdex]) {
+        return this.getFirst(obj.children[openIdex]);
+      } else if (
+        obj.fourthTabs &&
+        obj.fourthTabs.length &&
+        obj.fourthTabs[openIdex]
+      ) {
+        return this.getFirst(obj.fourthTabs[openIdex]);
+      } else if (obj.url) {
+        return obj;
+      }
+    },
     /**
      * @desc:遍历设置菜单气泡提醒
      * @author huangbo
@@ -983,31 +1105,29 @@ export default {
           this.$set(obj, 'tips', false);
           delete obj.tips;
         }
-        let flag = false;
+        let flag = 0;
         if (obj.children && obj.children.length) {
           obj.children.forEach((item) => {
-            if (this.setTips(item)) {
-              flag = true;
-            }
+            let n = this.setTips(item);
+            flag += n ? parseInt(n) : 0;
           });
           if (flag) {
-            this.$set(obj, 'tips', true);
-            return true;
+            this.$set(obj, 'tips', flag);
+            return flag;
           }
         } else if (obj.fourthTabs && obj.fourthTabs.length) {
           obj.fourthTabs.forEach((item) => {
-            if (this.setTips(item)) {
-              flag = true;
-            }
+            let n = this.setTips(item);
+            flag += n ? parseInt(n) : 0;
           });
           if (flag) {
-            this.$set(obj, 'tips', true);
-            return true;
+            this.$set(obj, 'tips', flag);
+            return flag;
           }
         } else {
           if (this.menuTips[obj.id] && Number(this.menuTips[obj.id])) {
             this.$set(obj, 'tips', Number(this.menuTips[obj.id]));
-            return true;
+            return this.menuTips[obj.id];
           }
         }
       }
@@ -1095,37 +1215,57 @@ export default {
           this.subMenus = res;
           this.showMenu = true;
           this.showApps = false;
-          this.width = '296px';
+          this.width = this.menuWidth;
           this.$refs.subMenus && this.$refs.subMenus.clearSubmenu();
         } else {
-          if (res.code) {
+          let set = true;
+          if (res.url) {
+            if (res.urlopenmode == 1 || res.openModel == 1) {
+              set = false;
+              util.win.open(res.url);
+            } else if (res.urlopenmode == 2 || res.openModel == 2) {
+              set = false;
+              util.win.location.href = res.url;
+            } else {
+              let i = util.indexOfObj(this.tabs, res, 'id');
+              this.activeName = res.id;
+              if (i == -1) {
+                let tab = this.setIframeType(res);
+                this.tabs.push(obj);
+                if (tab.method == 'router') {
+                  let params = util.getParams({ url: tab.url });
+                  this.$router.push({
+                    path: tab.path,
+                    query: params
+                  });
+                }
+              }
+            }
+          }
+          if (set && res.code) {
             let subMenus = this.getMenu(this.menus, res.code, 'appCode');
-            this.subMenus = subMenus ? subMenus : [];
+            console.log(subMenus);
+            this.subMenus = subMenus ? subMenus : null;
             this.showMenu = subMenus !== false;
             this.showApps = false;
-            this.width = '296px';
+            this.width = this.menuWidth;
             this.$refs.subMenus && this.$refs.subMenus.clearSubmenu();
           }
         }
-        if (res.url) {
-          if (res.urlopenmode == 1 || res.openModel == 1) {
-            util.win.open(res.url);
-          } else if (res.urlopenmode == 2 || res.openModel == 2) {
-            util.win.location.href = res.url;
-          } else {
-            let i = util.indexOfObj(this.tabs, res, 'id');
-            this.activeName = res.id;
-            if (i == -1) {
-              this.tabs.push(this.setIframeType(res));
-            }
-          }
-        }
         this.active = res.id;
       } else {
         this.showMenu = false;
         this.showApps = !this.showApps;
       }
     },
+    /**
+     * @desc:显示菜单界面
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    handleShowMenus() {
+      this.showMenu = true;
+    },
     /**
      * @desc:显示Drawer界面
      * @author huangbo
@@ -1154,14 +1294,23 @@ export default {
      **/
     handlerClickMenu(res) {
       if (typeof res === 'number') {
-        let num = 296;
-        this.width = num * res + 'px';
+        let num = this.menuWidth;
+        this.width = num * res;
       } else {
         let i = util.indexOfObj(this.tabs, res, 'id');
         this.activeName = res.id;
         if (i == -1) {
-          this.tabs.push(this.setIframeType(res));
+          let tab = this.setIframeType(res);
+          this.tabs.push(tab);
+          if (tab.method == 'router') {
+            let params = util.getParams({ url: tab.url });
+            this.$router.push({
+              path: tab.path,
+              query: params
+            });
+          }
         }
+        this.showMenu = false;
       }
     },
     /**
@@ -1198,28 +1347,6 @@ export default {
         this.webSocket.destroy();
       }
     },
-    /**
-     * @desc:选中iframe页签刷新
-     * @author huangbo
-     * @date 2024年9月7日
-     **/
-    handleTab(res) {
-      let index;
-      if (res) {
-        index = parseInt(res.index);
-      } else {
-        index = util.indexOfObj(this.tabs, this.activeName, 'id');
-      }
-      let item = this.tabs[index];
-      if (item.method == 'iframe') {
-        item.url = util.handlerUrl(item.url);
-      } else {
-        item.refresh = false;
-        this.$nextTick(() => {
-          item.refresh = true;
-        });
-      }
-    },
     /**
      * @desc:刷新选中iframe页签
      * @author huangbo
@@ -1591,13 +1718,74 @@ export default {
       let obj = this.getMenu(this.menus, apps[apps.length - 1]);
       if (obj) {
         let i = util.indexOfObj(this.tabs, obj, 'id');
+        let n = util.indexOfObj(this.tabs, this.activeName, 'id');
+        this.activeName = obj.id;
         if (i == -1) {
-          this.tabs.push(this.setIframeType(obj));
+          let tab = this.setIframeType(obj);
+          this.tabs.splice(n + 1, 0, tab);
+          if (tab.method == 'router') {
+            let params = util.getParams({ url: tab.url });
+            this.$router.push({
+              path: tab.path,
+              query: params
+            });
+          }
         }
-        this.activeName = obj.id;
       } else {
         this.$message.error('没有此菜单！');
       }
+    },
+    //移动
+    move() {
+      let area = this.$refs.area;
+      let box = this.$refs.box;
+      let [sTime, eTime] = [0, 0];
+      area.addEventListener('mousedown', (e) => {
+        sTime = new Date().getTime();
+        let { y: downY, x: downX } = e;
+        let { height: winH, width: winW } =
+          document.body.getBoundingClientRect();
+        //防止拖动期间选中和复制网页文本
+        document.body.onselectstart = document.body.oncontextmenu = () => {
+          return false;
+        };
+        document.onmousemove = (eve) => {
+          let size = 40;
+          let { y: moveY, x: moveX } = eve;
+          let { top: boxTop, left: boxLeft } = box.getBoundingClientRect();
+          boxTop += moveY - downY;
+          boxLeft += moveX - downX;
+          boxTop >= winH - size && (boxTop = winH - size);
+          boxTop <= -size && (boxTop = -size);
+          boxLeft >= winW - size && (boxLeft = winW - size);
+          boxLeft <= -size && (boxLeft = -size);
+          if (boxTop < 60) {
+            boxTop = 60;
+          }
+          if (boxLeft < 80) {
+            boxLeft = 80;
+          }
+          box.style.top = boxTop + 'px';
+          box.style.left = boxLeft + 'px';
+          downY = moveY;
+          downX = moveX;
+        };
+        document.onmouseup = () => {
+          eTime = new Date().getTime();
+          let isClick = eTime - sTime < 200;
+          if (isClick) {
+            let onArea = () => {
+              this.subMenu = [];
+              area.removeEventListener('click', onArea);
+            };
+            area.addEventListener('click', onArea);
+          }
+          document.onmousemove = null;
+          document.body.onselectstart = document.body.oncontextmenu = () => {
+            return true;
+          };
+        };
+      });
     }
   },
   beforeDestroy() {