eoss-ui 0.5.81-beta8 → 0.5.82

package/packages/main/src/simplicity/menu-list.vue

@@ -1,70 +1,20 @@
 <template>
-  <el-scrollbar :class="{ 'is-fold': fold }">
-    <template v-for="(item, index) in data">
-      <el-popover
-        v-if="
-          (item.children && item.children.length) ||
-          (item.fourthTabs, item.fourthTabs.length)
-        "
-        placement="right"
-        trigger="hover"
-        popper-class="es-simplicity-menus-sub"
-        :width="width"
-        @show="handleShow"
-        @hide="handleHide"
-      >
-        <template slot-scope="{ parent }">
-          <menu-list
-            ref="menus"
-            :parent="parent"
-            :active="active"
-            :popover="show"
-            :data="[...(item.children || []), ...(item.fourthTabs || [])]"
-            :menuIcon="menuIcon"
-            :color="color"
-            :backgroundColor="backgroundColor"
-            :width="width"
-            @command="handleClick"
-          ></menu-list>
-        </template>
-        <div
-          slot="reference"
-          class="es-simplicity-menus-item"
-          :key="item.id"
-          :class="{ 'is-active': defaultActive === item.id, 'is-fold': fold }"
-          :title="fold ? item.text || item.name : ''"
-        >
-          <template v-if="fold">
-            <el-badge is-dot :hidden="!item.tips">
-              <es-icon
-                class="es-simplicity_apps-icon"
-                :style="setStyle(index)"
-                :contents="item.icons || item.icon || menuIcon"
-              ></es-icon>
-            </el-badge>
-          </template>
-          <template v-else>
-            <es-icon
-              class="es-simplicity_apps-icon"
-              :style="setStyle(index)"
-              :contents="item.icons || item.icon || menuIcon"
-            ></es-icon>
-            <div class="es-simplicity-menus-tips" v-if="item.tips">
-              {{ item.tips > 99 ? '99+' : item.tips }}
-            </div>
-          </template>
-          <div class="es-simplicity_apps-text" v-show="!fold">
-            {{ item.text || item.name }}
-          </div>
-        </div>
-      </el-popover>
+  <el-scrollbar class="es-simplicity-menus-scrollbar">
+    <div
+      class="es-simplicity-menus-lists"
+      :class="{ 'is-fold': fold }"
+      @mouseleave="handleOut(true)"
+      @mouseenter="handleOut(false)"
+    >
       <div
-        v-else
+        v-for="(item, index) in data"
         class="es-simplicity-menus-item"
         :key="item.id"
-        :class="{ 'is-active': defaultActive === item.id, 'is-fold': fold }"
+        :class="{ 'is-fold': fold, 'is-active': active == item.id }"
         :title="fold ? item.text || item.name : ''"
         @click="handleClick(item)"
+        @mouseenter="handleEnter(item)"
+        @mouseleave="handleLeave(item)"
       >
         <template v-if="fold">
           <el-badge is-dot :hidden="!item.tips">
@@ -89,11 +39,12 @@
           {{ item.text || item.name }}
         </div>
       </div>
-    </template>
+    </div>
   </el-scrollbar>
 </template>
 
 <script>
+import util from 'eoss-ui/src/utils/util';
 export default {
   name: 'MenuList',
   components: {},
@@ -155,23 +106,20 @@ export default {
           util.win.open(res.url);
           return;
         } else if (res.urlopenmode == 2) {
-          util.win.location.href = res.url;
+          util.win.open(res.url, '_self');
           return;
         }
+        this.$emit('command', res);
       }
-      this.$emit('command', res);
     },
-    handleShow() {
-      this.show = true;
-      if (this.parent) {
-        this.parent.changeContinue(true);
-      }
+    handleEnter(res) {
+      this.$emit('menter', res);
     },
-    handleHide() {
-      if (this.parent) {
-        this.parent.changeContinue(false);
-        //this.parent.hidePopper();
-      }
+    handleLeave(res) {
+      this.$emit('mleave', res);
+    },
+    handleOut(res) {
+      this.$emit('mout', res);
     }
   }
 };

package/packages/main/src/simplicity/router-page.vue

@@ -18,32 +18,23 @@ export default {
       default() {
         return {};
       }
-    },
-    show: Boolean
+    }
   },
   data() {
-    return {
-      params: {}
-    };
+    return {};
   },
   computed: {},
-  watch: {
-    show(val) {
-      if (val) {
-        this.jump();
-      }
-    }
-  },
+  watch: {},
   created() {},
   mounted() {
-    this.params = util.getParams({ url: this.url });
     this.jump();
   },
   methods: {
     jump() {
+      let params = util.getParams({ url: this.url });
       this.$router.push({
         path: this.path,
-        query: { ...this.query, ...this.params }
+        query: { ...this.query, ...params }
       });
     }
   }

package/packages/main/src/simplicity/sub-menu.vue

@@ -11,7 +11,10 @@
     :wrapperClosable="false"
     :visible.sync="show"
   >
-    <div class="es-simplicity-menus">
+    <div
+      class="es-simplicity-menus"
+      :class="{ 'es-simplicity-menus-plus': mode == 'plus' }"
+    >
       <div class="es-simplicity-menus-box" :style="{ width: width + 'px' }">
         <div class="es-simplicity-menus-title">
           <span class="es-simplicity-menus-title-text" v-if="!fold">{{
@@ -29,17 +32,64 @@
           ></i>
         </div>
         <menu-list
-          ref="menus"
-          :active="active"
+          :active="actives[0]"
           :data="menus"
           :menuIcon="menuIcon"
           :color="color"
           :backgroundColor="backgroundColor"
           :fold="fold"
           :width="size"
+          @menter="
+            (res) => {
+              this.getData(res, 0, true);
+            }
+          "
+          @mleave="
+            (res) => {
+              this.getData(res, 0, false);
+            }
+          "
+          @hover="handleHover"
           @command="handleCommand"
         ></menu-list>
       </div>
+      <div
+        class="es-simplicity-menus-view"
+        @mouseleave="handleLeave"
+        @mouseenter="handleEnter"
+        v-show="subMenus.length"
+      >
+        <div
+          class="es-simplicity-menus-box"
+          v-for="(item, index) in subMenus"
+          :key="item.id"
+        >
+          <div class="es-simplicity-menus-title">
+            <span class="es-simplicity-menus-title-text">{{
+              item.name || item.text || item.title
+            }}</span>
+          </div>
+          <menu-list
+            :active="actives[index + 1]"
+            :data="[...item.children, ...item.fourthTabs]"
+            :menuIcon="menuIcon"
+            :color="color"
+            :backgroundColor="backgroundColor"
+            :width="size"
+            @menter="
+              (res) => {
+                getData(res, index + 1, true);
+              }
+            "
+            @mleave="
+              (res) => {
+                getData(res, index + 1, false);
+              }
+            "
+            @command="handleCommand"
+          ></menu-list>
+        </div>
+      </div>
     </div>
   </el-drawer>
 </template>
@@ -50,8 +100,10 @@ export default {
   name: 'SubMenu',
   components: { MenuList },
   props: {
+    mode: String,
     title: String,
     active: String,
+    closed: Boolean,
     color: {
       type: [String, Array],
       default: '#fff'
@@ -91,9 +143,12 @@ export default {
   },
   data() {
     return {
-      fold: false,
+      fold: this.closed,
       width: this.size,
-      subMenus: []
+      subMenus: [],
+      isEnter: false,
+      timer: null,
+      actives: []
     };
   },
   computed: {
@@ -110,7 +165,16 @@ export default {
       }
     }
   },
-  watch: {},
+  watch: {
+    closed(val) {
+      this.fold = val;
+      if (val) {
+        this.width = 48;
+      } else {
+        this.width = this.size;
+      }
+    }
+  },
   created() {},
   mounted() {},
   methods: {
@@ -121,14 +185,54 @@ export default {
       } else {
         this.width = this.size;
       }
-      this.$emit('update:fold', res);
+      this.$emit('update:closed', res);
     },
     handleCommand(res) {
       this.$emit('command', res);
     },
+    getData(res, n, is) {
+      this.isEnter = is;
+      if (is) {
+        this.actives.splice(n);
+        if (this.actives[n]) {
+          this.actives[n] = res.id;
+        } else {
+          this.actives.push(res.id);
+        }
+        this.subMenus.splice(n);
+        let { children, fourthTabs } = res;
+        if (
+          (children && children.length) ||
+          (fourthTabs && fourthTabs.length)
+        ) {
+          this.subMenus = this.subMenus.concat(res);
+        }
+      } else {
+        if (n == 0) {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            if (res && !this.isEnter) {
+              this.subMenus = [];
+              this.actives = [];
+            }
+          }, 300);
+        }
+      }
+    },
+    handleHover(res) {
+      this.isEnter = res;
+      //if(this)
+    },
     clearSubmenu() {
       this.$refs.menus.clearActive();
       this.subMenus = [];
+    },
+    handleLeave() {
+      this.subMenus = [];
+      this.actives = [];
+    },
+    handleEnter() {
+      this.isEnter = true;
     }
   }
 };

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

@@ -42,7 +42,11 @@
     </div>
     <div class="es-simplicity-notice-type" v-if="userScanBindImgUrl">
       <div class="es-simplicity-notice-title">微信公众号：</div>
-      <img class="es-simplicity-qrcode" @click="getQrcode" :src="qrcode" />
+      <el-image
+        class="es-simplicity-qrcode"
+        @click="getQrcode"
+        :src="qrcode"
+      ></el-image>
     </div>
     <div class="es-simplicity-notice-type">
       <div class="es-simplicity-notice-title">接收消息类型：</div>

package/packages/menu/src/main.vue

@@ -109,9 +109,10 @@ export default {
       } else {
         this.$nextTick(() => {
           let w = 0;
-          Array.from(this.$refs.menu.$el.children).forEach((item) => {
-            w += item.getBoundingClientRect().width;
-          });
+          this.$refs.menu &&
+            Array.from(this.$refs.menu.$el.children).forEach((item) => {
+              w += item.getBoundingClientRect().width;
+            });
           const styles = window.getComputedStyle(this.$refs.menu.$el);
           w += parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
           if (w > this.$refs.esMenu.$el.getBoundingClientRect().width) {

package/packages/pagination/src/main.vue

@@ -1,6 +1,7 @@
 <template>
   <el-pagination
     class="es-pagination"
+    :class="{ 'es-pagination-complete': isComplete && position != 'center' }"
     v-bind="$attrs"
     :current-page="pageNum"
     :page-size="pageSize"
@@ -18,10 +19,28 @@
   </el-pagination>
 </template>
 <script>
+import util from 'eoss-ui/src/utils/util';
+const paginationLayout =
+  util.win.top.tableLayout ||
+  util.win.tableLayout ||
+  'prev, pager, next, sizes, total';
 export default {
   name: 'EsPagination',
   inheritAttrs: false,
+  computed: {
+    isComplete() {
+      return (
+        this.layout.indexOf('total') > -1 &&
+        this.layout.indexOf('sizes') > -1 &&
+        this.layout.indexOf('prev') > -1 &&
+        this.layout.indexOf('pager') > -1 &&
+        this.layout.indexOf('next') > -1 &&
+        this.layout.indexOf('jumper') > -1
+      );
+    }
+  },
   props: {
+    position: String,
     // 当前页码
     pageNum: {
       type: Number,
@@ -46,7 +65,7 @@ export default {
     // 自定义排版
     layout: {
       type: String,
-      default: 'prev, pager, next, sizes, total'
+      default: paginationLayout
     },
     // 只有一页时是否隐藏
     hideOnSinglePage: {