eoss-ui 0.6.53 → 0.6.55

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

@@ -1,241 +1,263 @@
-<template>
-  <el-drawer
-    class="es-simplicity-subMenus"
-    direction="ltr"
-    modal-class="es-simplicity-apps-modal"
-    size="auto"
-    :modal-append-to-body="false"
-    :close-on-press-escape="false"
-    :modal="false"
-    :with-header="false"
-    :wrapperClosable="false"
-    :visible.sync="show"
-  >
-    <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">{{
-            title || text
-          }}</span>
-          <i
-            class="es-icon-shouqicaidan es-simplicity-menus-title-icon"
-            v-show="!fold"
-            @click="handleFold(true)"
-          ></i>
-          <i
-            class="es-icon-shouqicaidan-right es-simplicity-menus-title-icon"
-            v-show="fold"
-            @click="handleFold(false)"
-          ></i>
-        </div>
-        <menu-list
-          :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>
-
-<script>
-import MenuList from './menu-list.vue';
-export default {
-  name: 'SubMenu',
-  components: { MenuList },
-  props: {
-    mode: String,
-    title: String,
-    active: String,
-    closed: Boolean,
-    color: {
-      type: [String, Array],
-      default: '#fff'
-    },
-    backgroundColor: {
-      type: [String, Array],
-      default() {
-        return [
-          '#FF9C52',
-          '#2591F7',
-          '#17C27B',
-          '#1265D7',
-          '#FFC724',
-          '#E34D59'
-        ];
-      }
-    },
-    size: {
-      type: Number,
-      default: 220
-    },
-    visible: Boolean,
-    text: String,
-    menuIcon: String,
-    children: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    fourthTabs: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {
-      fold: this.closed,
-      width: this.size,
-      subMenus: [],
-      isEnter: false,
-      timer: null,
-      actives: []
-    };
-  },
-  computed: {
-    menus() {
-      return [...this.children, ...this.fourthTabs];
-    },
-    show: {
-      get() {
-        return this.visible;
-      },
-      set(val) {
-        this.$emit('update:visible', val);
-        return val;
-      }
-    }
-  },
-  watch: {
-    closed(val) {
-      this.fold = val;
-      if (val) {
-        this.width = 48;
-      } else {
-        this.width = this.size;
-      }
-    }
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    handleFold(res) {
-      this.fold = res;
-      if (res) {
-        this.width = 48;
-      } else {
-        this.width = this.size;
-      }
-      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;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <el-drawer
+    class="es-simplicity-subMenus"
+    direction="ltr"
+    modal-class="es-simplicity-apps-modal"
+    size="auto"
+    :modal-append-to-body="false"
+    :close-on-press-escape="false"
+    :modal="false"
+    :with-header="false"
+    :wrapperClosable="false"
+    :visible.sync="show"
+  >
+    <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">{{
+            title || text
+          }}</span>
+          <i
+            class="es-icon-shouqicaidan es-simplicity-menus-title-icon"
+            v-show="!fold"
+            @click="handleFold(true)"
+          ></i>
+          <i
+            class="es-icon-shouqicaidan-right es-simplicity-menus-title-icon"
+            v-show="fold"
+            @click="handleFold(false)"
+          ></i>
+        </div>
+        <div v-if="collapse" class="es-simplicity-menus-scrollbar">
+          <es-menu
+            popperClass="es-simplicity_menus"
+            :menu-class="
+              fold
+                ? 'es-simplicity_menus es-simplicity_menus-fold'
+                : 'es-simplicity_menus'
+            "
+            :data="menus"
+            :menuIcon="menuIcon"
+            :color="color"
+            :backgroundColor="backgroundColor"
+            :show-title="false"
+            :collapse="fold"
+            @select="handleSelect"
+          ></es-menu>
+        </div>
+        <menu-list
+          v-else
+          :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>
+
+<script>
+import MenuList from './menu-list.vue';
+export default {
+  name: 'SubMenu',
+  components: { MenuList },
+  props: {
+    mode: String,
+    collapse: Boolean,
+    title: String,
+    active: String,
+    closed: Boolean,
+    color: {
+      type: [String, Array],
+      default: '#fff'
+    },
+    backgroundColor: {
+      type: [String, Array],
+      default() {
+        return [
+          '#FF9C52',
+          '#2591F7',
+          '#17C27B',
+          '#1265D7',
+          '#FFC724',
+          '#E34D59'
+        ];
+      }
+    },
+    size: {
+      type: Number,
+      default: 220
+    },
+    visible: Boolean,
+    text: String,
+    menuIcon: String,
+    children: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    fourthTabs: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      fold: this.closed,
+      width: this.size,
+      subMenus: [],
+      isEnter: false,
+      timer: null,
+      actives: []
+    };
+  },
+  computed: {
+    menus() {
+      return [...this.children, ...this.fourthTabs];
+    },
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+        return val;
+      }
+    }
+  },
+  watch: {
+    closed(val) {
+      this.fold = val;
+      if (val) {
+        this.width = 48;
+      } else {
+        this.width = this.size;
+      }
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleFold(res) {
+      this.fold = res;
+      if (res) {
+        this.width = 48;
+      } else {
+        this.width = this.size;
+      }
+      this.$emit('update:closed', res);
+    },
+    handleCommand(res) {
+      this.$emit('command', res);
+    },
+    handleSelect(res) {
+      this.$emit('command', res.node);
+    },
+    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;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>