eoss-ui 0.5.81-beta4 → 0.5.81-beta6

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

@@ -74,46 +74,32 @@
     </div>
     <div class="es-simplicity-main">
       <!-- 菜单 -->
-      <el-drawer
-        class="es-simplicity-subMenus"
-        direction="ltr"
-        modal-class="es-simplicity-apps-modal"
-        :size="width + 'px'"
-        :modal-append-to-body="false"
-        :with-header="false"
+      <sub-menu
+        ref="subMenus"
         :visible.sync="showMenu"
-      >
-        <sub-menu
-          ref="subMenus"
-          :color="menuColor"
-          :backgroundColor="menuBackgroundColor"
-          :menu-icon="menuIcon"
-          v-bind="subMenus"
-          @command="handlerClickMenu"
-        ></sub-menu>
-      </el-drawer>
+        :fold.sync="fold"
+        :size="menuWidth"
+        :title="title"
+        :color="menuColor"
+        :backgroundColor="menuBackgroundColor"
+        :menu-icon="menuIcon"
+        :active="subActive"
+        v-bind="subMenus"
+        @command="handlerClickMenu"
+      ></sub-menu>
       <!-- 菜单 end -->
 
       <!-- 应用 -->
-      <el-drawer
-        class="es-simplicity-apps"
-        direction="ltr"
-        modal-class="es-simplicity-apps-modal"
-        size="90%"
-        :modal-append-to-body="false"
-        :with-header="false"
+      <apps
         :visible.sync="showApps"
-      >
-        <apps
-          :menu-icon="menuIcon"
-          :color="appColor"
-          :backgroundColor="appBackgroundColor"
-          :applications="applications"
-          :business="business"
-          :systems="systems"
-          @click="handlerClickApp"
-        ></apps>
-      </el-drawer>
+        :menu-icon="menuIcon"
+        :color="appColor"
+        :backgroundColor="appBackgroundColor"
+        :applications="applications"
+        :business="business"
+        :systems="systems"
+        @click="handlerClickApp"
+      ></apps>
       <!-- 应用 end -->
 
       <!-- AI -->
@@ -157,7 +143,8 @@
         <el-card class="es-simplicity-tabs-handler" ref="tabsHandler">
           <div
             class="es-simplicity-tabs-handler-item"
-            @click="handleTabsEvents(0)"
+            :class="{ 'is-disabled': isDisabled.refresh }"
+            @click="isDisabled.refresh ? '' : handleTabsEvents(0)"
           >
             刷新
           </div>
@@ -192,6 +179,7 @@
       </div>
       <el-tabs
         class="es-simplicity-iframe"
+        :class="{ 'is-open': showMenu, 'is-fold': fold }"
         v-model="activeName"
         closable
         hide-bar
@@ -210,14 +198,6 @@
           :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"
@@ -246,7 +226,11 @@
             ></es-wujie>
           </template>
           <template v-else-if="item.method === 'router' && item.refresh">
-            <router-view :name="item.appCode" />
+            <router-page
+              v-bind="item"
+              :show="activeName == item.id"
+              :query="$parent.params"
+            ></router-page>
           </template>
         </el-tab-pane>
       </el-tabs>
@@ -302,6 +286,7 @@ import user from './user.vue';
 import message from './message.vue';
 import notice from './notice.vue';
 import settings from './settings.vue';
+import routerPage from './router-page.vue';
 import {
   wss,
   logout,
@@ -314,14 +299,14 @@ import store from 'eoss-ui/src/utils/store';
 import util from 'eoss-ui/src/utils/util';
 const isIE = navigator.userAgent.indexOf('MSIE') != -1;
 let events = [
-  (tabs, index) => {
+  (tabs, index, that) => {
     let tab = tabs[index];
 
     if (tab.method == 'iframe') {
       tabs[index].url = util.handlerUrl(tab.url);
     } else {
       tabs[index].refresh = false;
-      this.$nextTick(() => {
+      that.$nextTick(() => {
         tabs[index].refresh = true;
       });
     }
@@ -364,7 +349,7 @@ let events = [
   }
 ];
 export default {
-  name: 'EsMainSimplicity',
+  name: 'Simplicity',
   components: {
     avatar,
     handler,
@@ -373,7 +358,8 @@ export default {
     user,
     message,
     notice,
-    settings
+    settings,
+    routerPage
   },
   props: {
     appCode: String,
@@ -455,10 +441,13 @@ export default {
     wjProps: Object,
     //无界微前端Attrs属性
     wjAttrs: Object,
+    //菜单宽度
     menuWidth: {
       type: Number,
       default: 220
-    }
+    },
+    //路由方式
+    routeType: String
   },
   data() {
     return {
@@ -472,12 +461,16 @@ export default {
       userApps: [],
       //所有菜单
       menus: [],
+      //菜单名称
+      title: '',
       //子菜单
       subMenus: null,
       //展示菜单导航
       showMenu: false,
-      //展示菜单导航宽度
-      width: this.menuWidth,
+      //子菜单选中
+      subActive: '',
+      //折叠菜单
+      fold: false,
       //人工智能配置
       aiConfig: null,
       //公用窗口面板配置
@@ -610,7 +603,7 @@ export default {
     util.win.refresh = this.handleRefresh;
     util.win.jumpMenu = this.jumpMenu;
     util.win.windowOpen = this.openPage;
-    this.move();
+    this.handleListener();
   },
   methods: {
     /**
@@ -618,13 +611,13 @@ export default {
      * @author huangbo
      * @date 2024年9月7日
      **/
-    hasRouter(res, url, code, parentName) {
+    hasRouter(res, url, code) {
       if (!url) {
         return false;
       }
       if (Array.isArray(res)) {
         for (let i in res) {
-          let path = this.hasRouter(res[i], url, code, parentName);
+          let path = this.hasRouter(res[i], url, code);
           if (path) {
             return path;
           }
@@ -650,7 +643,7 @@ export default {
           return pathname;
         }
         if (res && Object.prototype.hasOwnProperty.call(res, 'children')) {
-          let path = this.hasRouter(res.children, url, code, res.name);
+          let path = this.hasRouter(res.children, url, code);
           if (path) {
             return path;
           }
@@ -839,7 +832,6 @@ export default {
               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;
@@ -852,100 +844,81 @@ export default {
                       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 subMenus = this.getMenu(
+                  this.menus,
+                  this.appCode,
+                  'appCode'
+                );
+                if (subMenus) {
+                  if (this.tabs.length == 0) {
                     let obj = this.getFirst(subMenus);
                     if (obj) {
+                      this.subActive = obj.id;
                       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.subActive = '';
                     }
-                  } else {
-                    this.subMenus = null;
-                    this.showMenu = false;
                   }
+                  this.subMenus = subMenus;
+                  this.showMenu = true;
+                } 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) {
-                  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
-                      });
+              } else {
+                if (this.indexUrl) {
+                  let obj = this.getMenu(this.menus, this.indexUrl);
+                  if (obj) {
+                    if (!this.appCode) {
+                      let tab = this.setIframeType(obj);
+                      this.tabs = [tab];
+                      this.activeName = tab.id;
                     }
-                  }
-                  this.homePage = obj;
-                } else {
-                  this.homePage = this.setIframeType({
-                    url: this.indexUrl,
-                    text: '工作台',
-                    id: '0',
-                    appCode: 'indexUrl'
-                  });
-                  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
-                      });
+                    this.homePage = obj;
+                  } else {
+                    this.homePage = this.setIframeType({
+                      url: this.indexUrl,
+                      text: '工作台',
+                      id: '0',
+                      appCode: 'indexUrl'
+                    });
+                    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: { ...this.$parent.params, ...params }
+                      //   });
+                      // }
                     }
                   }
-                }
-              } else if (
-                this.initApps &&
-                this.initApps.length &&
-                !this.appCode
-              ) {
-                let obj = this.getMenu(
-                  this.menus,
-                  this.initApps[this.initApps.length - 1]
-                );
-                if (obj) {
-                  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 if (
+                  this.initApps &&
+                  this.initApps.length &&
+                  !this.appCode
+                ) {
+                  let obj = this.getMenu(
+                    this.menus,
+                    this.initApps[this.initApps.length - 1]
+                  );
+                  if (obj) {
+                    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: { ...this.$parent.params, ...params }
+                    //   });
+                    // }
                   }
                 }
               }
@@ -986,7 +959,7 @@ export default {
           const routes = this.$router.options.routes;
           if (routes) {
             let path = this.hasRouter(routes, urls[0], res.appCode);
-            if (path) {
+            if (path && this.routeType !== 'wujie') {
               res.method = 'router';
               res.path = path;
             } else {
@@ -1125,8 +1098,9 @@ export default {
             return flag;
           }
         } else {
-          if (this.menuTips[obj.id] && Number(this.menuTips[obj.id])) {
-            this.$set(obj, 'tips', Number(this.menuTips[obj.id]));
+          let num = this.menuTips[obj.id] || this.menuTips[obj.code];
+          if (num && Number(num)) {
+            this.$set(obj, 'tips', Number(num));
             return this.menuTips[obj.id];
           }
         }
@@ -1204,6 +1178,8 @@ export default {
      * @date 2024年9月7日
      **/
     handlerClickApp(res) {
+      this.showMsg = false;
+      this.showSet = false;
       if (res) {
         if (res.permission === false) {
           return false;
@@ -1215,8 +1191,6 @@ export default {
           this.subMenus = res;
           this.showMenu = true;
           this.showApps = false;
-          this.width = this.menuWidth;
-          this.$refs.subMenus && this.$refs.subMenus.clearSubmenu();
         } else {
           let set = true;
           if (res.url) {
@@ -1231,25 +1205,16 @@ export default {
               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
-                  });
-                }
+                this.tabs.push(tab);
               }
             }
           }
           if (set && res.code) {
             let subMenus = this.getMenu(this.menus, res.code, 'appCode');
-            console.log(subMenus);
+            this.title = res.text || res.name;
             this.subMenus = subMenus ? subMenus : null;
             this.showMenu = subMenus !== false;
             this.showApps = false;
-            this.width = this.menuWidth;
-            this.$refs.subMenus && this.$refs.subMenus.clearSubmenu();
           }
         }
         this.active = res.id;
@@ -1258,14 +1223,6 @@ export default {
         this.showApps = !this.showApps;
       }
     },
-    /**
-     * @desc:显示菜单界面
-     * @author huangbo
-     * @date 2024年9月7日
-     **/
-    handleShowMenus() {
-      this.showMenu = true;
-    },
     /**
      * @desc:显示Drawer界面
      * @author huangbo
@@ -1293,24 +1250,13 @@ export default {
      * @date 2024年9月7日
      **/
     handlerClickMenu(res) {
-      if (typeof res === 'number') {
-        let num = this.menuWidth;
-        this.width = num * res;
-      } else {
-        let i = util.indexOfObj(this.tabs, res, 'id');
-        this.activeName = res.id;
-        if (i == -1) {
-          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;
+      this.showMsg = false;
+      this.showSet = false;
+      let i = util.indexOfObj(this.tabs, res, 'id');
+      this.activeName = res.id;
+      if (i == -1) {
+        let tab = this.setIframeType(res);
+        this.tabs.push(tab);
       }
     },
     /**
@@ -1353,7 +1299,14 @@ export default {
      * @date 2024年9月7日
      **/
     handleRefresh() {
-      this.handleTab();
+      let tab = this.tabs[this.activeName];
+      if (tab.method === 'iframe') {
+        tab.url = util.handlerUrl(tab.url);
+      }
+      tab.refresh = false;
+      this.$nextTick(() => {
+        tab.refresh = true;
+      });
     },
     /**
      * @desc:删除iframe
@@ -1391,6 +1344,9 @@ export default {
       if (this.tabs.length == 1) {
         disabled.other = true;
       }
+      if (this.tabs[index].id != this.activeName) {
+        disabled.refresh = true;
+      }
       this.isDisabled = disabled;
       this.$refs.tabsHandler.$el.style.setProperty('left', `${e.x}px`);
       this.$refs.tabsHandler.$el.style.setProperty('top', `${e.y}px`);
@@ -1439,6 +1395,8 @@ export default {
             this.handleQuit();
             break;
           case 'online':
+            this.showMsg = false;
+            this.showSet = false;
             if (this.onlineUrl) {
               this.dialog = {
                 title: '查看在线人员',
@@ -1449,9 +1407,11 @@ export default {
             break;
           case 'notice':
             this.showMsg = !this.showMsg;
+            this.showSet = false;
             break;
           case 'set':
             this.showSet = !this.showSet;
+            this.showMsg = false;
             break;
           case 'home':
             if (this.homePage.id !== this.activeName) {
@@ -1460,10 +1420,14 @@ export default {
                 this.tabs.unshift(this.homePage);
               }
               this.activeName = this.homePage.id;
+              this.showMsg = false;
+              this.showSet = false;
             }
             break;
           case 'search':
             this.handlerSetDrawer(res);
+            this.showMsg = false;
+            this.showSet = false;
             break;
           case 'goView':
             util.win.open(res.path, '_blank');
@@ -1714,7 +1678,10 @@ export default {
       }
     },
     jumpMenu(res) {
-      let apps = res.split(',');
+      let apps = res;
+      if (typeof res === 'string') {
+        apps = res.split(',');
+      }
       let obj = this.getMenu(this.menus, apps[apps.length - 1]);
       if (obj) {
         let i = util.indexOfObj(this.tabs, obj, 'id');
@@ -1723,69 +1690,24 @@ export default {
         if (i == -1) {
           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
-            });
-          }
         }
       } 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;
+    //监听改变菜单
+    handleListener() {
+      util.win.addEventListener(
+        'message',
+        (e) => {
+          var msg = e.data;
+          if (msg.key == 'jump_Menu') {
+            let res = msg.data1;
+            this.jumpMenu(res);
           }
-          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;
-          };
-        };
-      });
+        },
+        false
+      );
     }
   },
   beforeDestroy() {