Merge branch 'v5.0.0dev' of https://gitee.com/ZhongBangKeJi/CRMEB into v5.0.0dev

template/admin/src/layout/component/transverseAside.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="layout-columns-tra-aside">
-    <el-scrollbar>
+  <div class="layout-columns-tra-aside el-menu-horizontal-warp">
+    <el-scrollbar ref="elMenuHorizontalScrollRef" @wheel.native.prevent="onElMenuHorizontalScroll">
       <ul>
         <li
           v-for="(v, k) in columnsAsideList"
@@ -80,8 +80,25 @@ export default {
       this.setFilterRoutes();
     });
     this.setFilterRoutes();
+    this.$nextTick((e) => {
+      this.initElMenuOffsetLeft();
+    });
   },
   methods: {
+    // 设置横向滚动条可以鼠标滚轮滚动
+    onElMenuHorizontalScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40;
+      this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
+        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft + eventDelta / 4;
+    },
+    // 初始化数据，页面刷新时，滚动条滚动到对应位置
+    initElMenuOffsetLeft() {
+      this.$nextTick(() => {
+        let els = document.querySelector('.layout-columns.layout-columns-active');
+        if (!els) return false;
+        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
+      });
+    },
     // 设置菜单高亮位置移动
     setColumnsAsideMove(k) {
       if (k === undefined) return false;
@@ -199,12 +216,34 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/deep/ .el-scrollbar__bar.is-horizontal {
+  height: 0;
+}
+.el-menu-horizontal-warp {
+  ::v-deep .el-scrollbar__bar.is-vertical {
+    display: none;
+  }
+  ::v-deep .el-scrollbar__wrap {
+    overflow-y: hidden !important;
+    overflow-x: scroll !important;
+  }
+  ::v-deep a {
+    width: 100%;
+  }
+  .el-menu.el-menu--horizontal {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
 .layout-columns-tra-aside {
-  //   width: 70px;
   height: 100%;
   background: var(--prev-bg-columnsMenuBar);
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   overflow-y: hidden;
+  // flex: 1;
   ul {
     position: relative;
     display: flex;
@@ -226,7 +265,7 @@ export default {
       .columns-horizontal {
         display: flex;
         height: 50px;
-        width: 100%;
+        width: 80px;
         align-items: center;
         justify-content: center;
         padding: 0 5px;
@@ -257,8 +296,9 @@ export default {
       background: var(--prev-color-primary);
       position: absolute;
       left: 0;
-      height: 50px;
+      height: 40px;
       width: 80px;
+      margin-top: 5px;
       transform: translatey(0%);
       z-index: 0;
       transition: 0.3s ease-in-out;
@@ -270,6 +310,7 @@ export default {
       height: 50px;
       width: 80px;
       border-radius: 0;
+      margin-top: 0px;
     }
   }
 }

template/admin/src/pages/system/backendRouting/debugging.vue

@@ -298,7 +298,15 @@ export default {
     this.interfaceData = this.formValidate;
     this.interfaceData.request_body = JSON.parse(JSON.stringify(this.interfaceData.request));
   },
-  mounted() {},
+  mounted() {
+    if (!this.$refs.zTable.getTableData().tableData.length && this.apiType == 'adminapi') {
+      this.insertEvent('zTable', {
+        attribute: 'Authori-Zation',
+        value: 'Bearer ' + getCookies('token'),
+      });
+      // this.insertEvent('zaTable');
+    }
+  },
   methods: {
     async handleChange(e, row, type) {
       if (e.value !== 'array' && e.value !== 'object') {
@@ -407,15 +415,15 @@ export default {
       return x;
     },
     changeTab(name) {
-      if (name === 'Header') {
-        if (!this.$refs.zTable.getTableData().tableData.length) {
-          this.insertEvent('zTable', {
-            attribute: 'Authori-Zation',
-            value: 'Bearer ' + getCookies('token'),
-          });
-          this.insertEvent('zaTable');
-        }
-      }
+      // if (name === 'Header') {
+      //   if (!this.$refs.zTable.getTableData().tableData.length) {
+      //     this.insertEvent('zTable', {
+      //       attribute: 'Authori-Zation',
+      //       value: 'Bearer ' + getCookies('token'),
+      //     });
+      //     this.insertEvent('zaTable');
+      //   }
+      // }
     },
     async insertEvent(type, d) {
       const $table = this.$refs[type];