n20-common-lib 1.3.5 → 1.3.8

package/src/components/Layout/AsideNav/index.vue

@@ -1,120 +1,116 @@
-<template>
-  <el-menu
-    id="layout-sider"
-    class="layout-aside flex-column"
-    :collapse="collapse"
-    :default-active="activeNav"
-    background-color="#3d4b6a"
-    text-color="#fefefea6"
-    active-text-color="#ffffff"
-  >
-    <template v-for="omenus in menus">
-      <template v-for="itemA in omenus.menu">
-        <!-- 一级菜单 -->
-        <MenuItem
-          v-if="!itemA.children"
-          :key="itemA.title"
-          :item="itemA"
-          @click="linkFn"
-        />
-        <el-submenu
-          v-else
-          :key="itemA.title"
-          :index="itemA.title"
-          popper-class="nav-menu-pop"
-        >
-          <SubmenuTitle slot="title" :item="itemA" />
-          <template v-for="itemB in itemA.children">
-            <!-- 二级菜单 -->
-            <MenuItem
-              v-if="!itemB.children"
-              :key="itemB.title"
-              :item="itemB"
-              @click="linkFn"
-            />
-            <el-submenu
-              v-else
-              :key="itemB.title"
-              :index="itemB.title"
-              popper-class="nav-menu-pop"
-            >
-              <SubmenuTitle slot="title" :item="itemB" />
-              <template v-for="itemC in itemB.children">
-                <!-- 三级菜单 -->
-                <MenuItem
-                  v-if="!itemC.children"
-                  :key="itemC.title"
-                  :item="itemC"
-                  @click="linkFn"
-                />
-                <el-submenu
-                  v-else
-                  :key="itemC.title"
-                  :index="itemC.title"
-                  popper-class="nav-menu-pop"
-                >
-                  <SubmenuTitle slot="title" :item="itemC" />
-                  <template v-for="itemD in itemC.children">
-                    <!-- 四级菜单 -->
-                    <MenuItem
-                      :key="itemD.title"
-                      :item="itemD"
-                      @click="linkFn"
-                    />
-                  </template>
-                </el-submenu>
-              </template>
-            </el-submenu>
-          </template>
-        </el-submenu>
-      </template>
-    </template>
-    <span class="flex-item"></span>
-    <div class="open-collapsed-btn">
-      <span
-        :class="
-          collapse
-            ? 'n20-icon-caidanshouqi f-s-l rotate-icon'
-            : 'n20-icon-caidanshouqi f-s-l'
-        "
-        @click="setCollapse"
-      ></span>
-    </div>
-  </el-menu>
-</template>
-
-<script>
-import MenuItem from './menuItem.vue'
-import SubmenuTitle from './submenuTitle.vue'
-export default {
-  components: { MenuItem, SubmenuTitle },
-  props: {
-    menus: {
-      type: Array,
-      default: () => []
-    },
-    activeNav: {
-      type: String,
-      default: undefined
-    },
-    collapse: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    linkFn(menu, base) {
-      if (!menu.href) {
-        this.$emit('menu-click', menu, base)
-      }
-    },
-    setCollapse() {
-      this.$emit('update:collapse', !this.collapse)
-      window.localStorage.setItem('aside-nav-collapse', !this.collapse)
-    }
-  }
-}
-</script>
+<template>
+  <el-menu
+    id="layout-sider"
+    class="layout-aside flex-column"
+    :collapse="collapse"
+    :default-active="activeNav"
+    background-color="#3d4b6a"
+    text-color="#fefefea6"
+    active-text-color="#ffffff"
+  >
+    <template v-for="(omenus, o) in menus">
+      <template v-for="(itemA, a) in omenus.menu">
+        <!-- 一级菜单 -->
+        <MenuItem
+          v-if="!itemA.children"
+          :key="`${o}-${a}`"
+          :item="itemA"
+          @click="linkFn"
+        />
+        <el-submenu
+          v-else
+          :key="itemA.title"
+          :index="itemA.title"
+          popper-class="nav-menu-pop"
+        >
+          <SubmenuTitle slot="title" :item="itemA" />
+          <template v-for="(itemB, b) in itemA.children">
+            <!-- 二级菜单 -->
+            <MenuItem
+              v-if="!itemB.children"
+              :key="b"
+              :item="itemB"
+              @click="linkFn"
+            />
+            <el-submenu
+              v-else
+              :key="itemB.title"
+              :index="itemB.title"
+              popper-class="nav-menu-pop"
+            >
+              <SubmenuTitle slot="title" :item="itemB" />
+              <template v-for="(itemC, c) in itemB.children">
+                <!-- 三级菜单 -->
+                <MenuItem
+                  v-if="!itemC.children"
+                  :key="c"
+                  :item="itemC"
+                  @click="linkFn"
+                />
+                <el-submenu
+                  v-else
+                  :key="itemC.title"
+                  :index="itemC.title"
+                  popper-class="nav-menu-pop"
+                >
+                  <SubmenuTitle slot="title" :item="itemC" />
+                  <template v-for="(itemD, d) in itemC.children">
+                    <!-- 四级菜单 -->
+                    <MenuItem :key="d" :item="itemD" @click="linkFn" />
+                  </template>
+                </el-submenu>
+              </template>
+            </el-submenu>
+          </template>
+        </el-submenu>
+      </template>
+    </template>
+    <span class="flex-item"></span>
+    <div class="open-collapsed-btn">
+      <span
+        :class="
+          collapse
+            ? 'n20-icon-caidanshouqi f-s-l rotate-icon'
+            : 'n20-icon-caidanshouqi f-s-l'
+        "
+        @click="setCollapse"
+      ></span>
+    </div>
+  </el-menu>
+</template>
+
+<script>
+import MenuItem from './menuItem.vue'
+import SubmenuTitle from './submenuTitle.vue'
+export default {
+  components: { MenuItem, SubmenuTitle },
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    },
+    activeNav: {
+      type: String,
+      default: undefined
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    linkFn(menu, base) {
+      if (!menu.href) {
+        this.$emit('menu-click', menu, base)
+      }
+    },
+    setCollapse() {
+      this.$emit('update:collapse', !this.collapse)
+      window.localStorage.setItem('aside-nav-collapse', !this.collapse)
+    }
+  }
+}
+</script>

package/src/components/Layout/AsideNav/menuItem.vue

@@ -1,34 +1,34 @@
-<template>
-  <el-menu-item :index="item.uuid" @click="$emit('click', item)">
-    <i
-      v-if="item.iconUrl"
-      class="el-icon- icon-url"
-      :style="{ backgroundImage: `url(${item.iconUrl})` }"
-    ></i>
-    <i v-else :class="item.iconClass"></i>
-    <span v-if="!item.href" slot="title">{{ item | titleF }}</span>
-    <a
-      v-else
-      slot="title"
-      :href="item.href"
-      target="_blank"
-      :rel="/^\//.test(item.href) ? 'opener' : undefined"
-      >{{ item | titleF }}</a
-    >
-  </el-menu-item>
-</template>
-
-<script>
-import { labelF } from '../utils'
-export default {
-  filters: {
-    titleF: labelF
-  },
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    }
-  }
-}
-</script>
+<template>
+  <el-menu-item :index="item.uuid" @click="$emit('click', item)">
+    <i
+      v-if="item.iconUrl"
+      class="el-icon- icon-url"
+      :style="{ backgroundImage: `url(${item.iconUrl})` }"
+    ></i>
+    <i v-else :class="item.iconClass"></i>
+    <span v-if="!item.href" slot="title">{{ item | titleF }}</span>
+    <a
+      v-else
+      slot="title"
+      :href="item.href"
+      target="_blank"
+      :rel="/^\//.test(item.href) ? 'opener' : undefined"
+      >{{ item | titleF }}</a
+    >
+  </el-menu-item>
+</template>
+
+<script>
+import { labelF } from '../utils'
+export default {
+  filters: {
+    titleF: labelF
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>

package/src/components/Layout/AsideNav/submenuTitle.vue

@@ -1,26 +1,26 @@
-<template>
-  <component :is="'slot'">
-    <i
-      v-if="item.iconUrl"
-      class="el-icon- icon-url"
-      :style="{ backgroundImage: `url(${item.iconUrl})` }"
-    ></i>
-    <i v-else :class="item.iconClass"></i>
-    <span>{{ item | titleF }}</span>
-  </component>
-</template>
-
-<script>
-import { labelF } from '../utils'
-export default {
-  filters: {
-    titleF: labelF
-  },
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    }
-  }
-}
-</script>
+<template>
+  <component :is="'slot'">
+    <i
+      v-if="item.iconUrl"
+      class="el-icon- icon-url"
+      :style="{ backgroundImage: `url(${item.iconUrl})` }"
+    ></i>
+    <i v-else :class="item.iconClass"></i>
+    <span>{{ item | titleF }}</span>
+  </component>
+</template>
+
+<script>
+import { labelF } from '../utils'
+export default {
+  filters: {
+    titleF: labelF
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>