n20-common-lib 1.3.5 → 1.3.6

package/src/components/MoreTab/index.vue

@@ -1,232 +1,232 @@
-/**
- * author: zhengwei
- * tiem: 2021-8-31
- */
-<template>
-  <div class="__common-layout-pageTabs">
-    <el-scrollbar>
-      <div class="__tabs">
-        <div
-          v-for="item in openedPageRouters"
-          :key="item.fullPath"
-          class="__tab-item"
-          :class="{
-            '__is-active': item.fullPath == $route.fullPath
-          }"
-          @click="onClick(item)"
-          @contextmenu.prevent="showContextMenu($event, item)"
-        >
-          {{ item.meta.title }}
-          <span
-            class="el-icon-close"
-            :style="openedPageRouters.length <= 1 ? 'width:0;' : ''"
-            @click.stop="onClose(item)"
-            @contextmenu.prevent.stop
-          ></span>
-        </div>
-      </div>
-    </el-scrollbar>
-    <div v-show="contextMenuVisible">
-      <ul
-        :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
-        class="__contextmenu"
-      >
-        <li>
-          <el-button type="text" size="mini" @click="reload()"
-            >重新加载</el-button
-          >
-        </li>
-        <li>
-          <el-button
-            type="text"
-            :disabled="false"
-            size="mini"
-            @click="closeOtherLeft"
-            >关闭左边</el-button
-          >
-        </li>
-        <li>
-          <el-button
-            type="text"
-            :disabled="false"
-            size="mini"
-            @click="closeOtherRight"
-            >关闭右边</el-button
-          >
-        </li>
-        <li>
-          <el-button type="text" size="mini" @click="closeOther"
-            >关闭其他</el-button
-          >
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'MoreTab',
-  props: {
-    keepAliveComponentInstance: {
-      type: Object,
-      default: () => ({})
-    }, //keep-alive控件实例对象
-    blankRouteName: {
-      type: String,
-      default: 'blank'
-    } //空白路由的name值
-  },
-  data() {
-    return {
-      contextMenuVisible: false, //右键菜单是否显示
-      contextMenuLeft: 0, //右键菜单显示位置
-      contextMenuTop: 0, //右键菜单显示位置
-      contextMenuTargetPageRoute: null, //右键所指向的菜单路由
-      openedPageRouters: [] //已打开的路由页面
-    }
-  },
-  watch: {
-    //当路由变更时，执行打开页面的方法
-    $route: {
-      handler(v) {
-        this.openPage(v)
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    //添加点击关闭右键菜单
-    window.addEventListener('click', this.closeContextMenu)
-  },
-  destroyed() {
-    window.removeEventListener('click', this.closeContextMenu)
-  },
-  methods: {
-    //打开页面
-    openPage(route) {
-      if (route.name === this.blankRouteName) {
-        return
-      }
-      let isExist = this.openedPageRouters.some(
-        (item) => item.fullPath === route.fullPath
-      )
-      if (!isExist) {
-        let openedPageRoute = this.openedPageRouters.find(
-          (item) => item.path === route.path
-        ) //判断页面是否支持不同参数多开页面功能，如果不支持且已存在path值一样的页面路由，那就替换它
-        if (!route.meta.canMultipleOpen && openedPageRoute != null) {
-          this.delRouteCache(openedPageRoute.fullPath)
-          this.openedPageRouters.splice(
-            this.openedPageRouters.indexOf(openedPageRoute),
-            1,
-            route
-          )
-        } else {
-          this.openedPageRouters.push(route)
-        }
-      }
-    }, //点击页面标签卡时
-    onClick(route) {
-      if (route.fullPath !== this.$route.fullPath) {
-        this.$router.push(route.fullPath)
-      }
-    }, //关闭页面标签时
-    onClose(route) {
-      let index = this.openedPageRouters.indexOf(route)
-      this.delPageRoute(route)
-      if (route.fullPath === this.$route.fullPath) {
-        //删除页面后，跳转到上一页面
-        this.$router.replace(
-          this.openedPageRouters[index === 0 ? 0 : index - 1]
-        )
-      }
-    }, //右键显示菜单
-    showContextMenu(e, route) {
-      this.contextMenuTargetPageRoute = route
-      this.contextMenuLeft = e.layerX
-      this.contextMenuTop = e.layerY
-      this.contextMenuVisible = true
-    }, //隐藏右键菜单
-    closeContextMenu() {
-      this.contextMenuVisible = false
-      this.contextMenuTargetPageRoute = null
-    }, //重载页面
-    reload() {
-      this.delRouteCache(this.contextMenuTargetPageRoute.fullPath)
-      if (this.contextMenuTargetPageRoute.fullPath === this.$route.fullPath) {
-        this.$router.replace({ name: this.blankRouteName }).then(() => {
-          this.$router.replace(this.contextMenuTargetPageRoute)
-        })
-      }
-    }, //关闭其他页面
-    closeOther() {
-      for (let i = 0; i < this.openedPageRouters.length; i++) {
-        let r = this.openedPageRouters[i]
-        if (r !== this.contextMenuTargetPageRoute) {
-          this.delPageRoute(r)
-          i--
-        }
-      }
-      if (this.contextMenuTargetPageRoute.fullPath !== this.$route.fullPath) {
-        this.$router.replace(this.contextMenuTargetPageRoute)
-      }
-    }, //根据路径获取索引
-    getPageRouteIndex(fullPath) {
-      for (let i = 0; i < this.openedPageRouters.length; i++) {
-        if (this.openedPageRouters[i].fullPath === fullPath) {
-          return i
-        }
-      }
-    }, //关闭左边页面
-    closeOtherLeft() {
-      let index = this.openedPageRouters.indexOf(
-        this.contextMenuTargetPageRoute
-      )
-      let currentIndex = this.getPageRouteIndex(this.$route.fullPath)
-      if (index > currentIndex) {
-        this.$router.replace(this.contextMenuTargetPageRoute)
-      }
-      for (let i = 0; i < index; i++) {
-        let r = this.openedPageRouters[i]
-        this.delPageRoute(r)
-        i--
-        index--
-      }
-    }, //关闭右边页面
-    closeOtherRight() {
-      let index = this.openedPageRouters.indexOf(
-        this.contextMenuTargetPageRoute
-      )
-      let currentIndex = this.getPageRouteIndex(this.$route.fullPath)
-      for (let i = index + 1; i < this.openedPageRouters.length; i++) {
-        let r = this.openedPageRouters[i]
-        this.delPageRoute(r)
-        i--
-      }
-      if (index < currentIndex) {
-        this.$router.replace(this.contextMenuTargetPageRoute)
-      }
-    }, //删除页面
-    delPageRoute(route) {
-      let routeIndex = this.openedPageRouters.indexOf(route)
-      if (routeIndex >= 0) {
-        this.openedPageRouters.splice(routeIndex, 1)
-      }
-      this.delRouteCache(route.fullPath)
-    }, //删除页面缓存
-    delRouteCache(key) {
-      let cache = this.keepAliveComponentInstance.cache
-      let keys = this.keepAliveComponentInstance.keys
-      for (let i = 0; i < keys.length; i++) {
-        if (keys[i] === key) {
-          keys.splice(i, 1)
-          if (cache[key] != null) {
-            delete cache[key]
-          }
-          break
-        }
-      }
-    }
-  }
-}
-</script>
+/**
+ * author: zhengwei
+ * tiem: 2021-8-31
+ */
+<template>
+  <div class="__common-layout-pageTabs">
+    <el-scrollbar>
+      <div class="__tabs">
+        <div
+          v-for="item in openedPageRouters"
+          :key="item.fullPath"
+          class="__tab-item"
+          :class="{
+            '__is-active': item.fullPath == $route.fullPath
+          }"
+          @click="onClick(item)"
+          @contextmenu.prevent="showContextMenu($event, item)"
+        >
+          {{ item.meta.title }}
+          <span
+            class="el-icon-close"
+            :style="openedPageRouters.length <= 1 ? 'width:0;' : ''"
+            @click.stop="onClose(item)"
+            @contextmenu.prevent.stop
+          ></span>
+        </div>
+      </div>
+    </el-scrollbar>
+    <div v-show="contextMenuVisible">
+      <ul
+        :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
+        class="__contextmenu"
+      >
+        <li>
+          <el-button type="text" size="mini" @click="reload()"
+            >重新加载</el-button
+          >
+        </li>
+        <li>
+          <el-button
+            type="text"
+            :disabled="false"
+            size="mini"
+            @click="closeOtherLeft"
+            >关闭左边</el-button
+          >
+        </li>
+        <li>
+          <el-button
+            type="text"
+            :disabled="false"
+            size="mini"
+            @click="closeOtherRight"
+            >关闭右边</el-button
+          >
+        </li>
+        <li>
+          <el-button type="text" size="mini" @click="closeOther"
+            >关闭其他</el-button
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MoreTab',
+  props: {
+    keepAliveComponentInstance: {
+      type: Object,
+      default: () => ({})
+    }, //keep-alive控件实例对象
+    blankRouteName: {
+      type: String,
+      default: 'blank'
+    } //空白路由的name值
+  },
+  data() {
+    return {
+      contextMenuVisible: false, //右键菜单是否显示
+      contextMenuLeft: 0, //右键菜单显示位置
+      contextMenuTop: 0, //右键菜单显示位置
+      contextMenuTargetPageRoute: null, //右键所指向的菜单路由
+      openedPageRouters: [] //已打开的路由页面
+    }
+  },
+  watch: {
+    //当路由变更时，执行打开页面的方法
+    $route: {
+      handler(v) {
+        this.openPage(v)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    //添加点击关闭右键菜单
+    window.addEventListener('click', this.closeContextMenu)
+  },
+  destroyed() {
+    window.removeEventListener('click', this.closeContextMenu)
+  },
+  methods: {
+    //打开页面
+    openPage(route) {
+      if (route.name === this.blankRouteName) {
+        return
+      }
+      let isExist = this.openedPageRouters.some(
+        (item) => item.fullPath === route.fullPath
+      )
+      if (!isExist) {
+        let openedPageRoute = this.openedPageRouters.find(
+          (item) => item.path === route.path
+        ) //判断页面是否支持不同参数多开页面功能，如果不支持且已存在path值一样的页面路由，那就替换它
+        if (!route.meta.canMultipleOpen && openedPageRoute != null) {
+          this.delRouteCache(openedPageRoute.fullPath)
+          this.openedPageRouters.splice(
+            this.openedPageRouters.indexOf(openedPageRoute),
+            1,
+            route
+          )
+        } else {
+          this.openedPageRouters.push(route)
+        }
+      }
+    }, //点击页面标签卡时
+    onClick(route) {
+      if (route.fullPath !== this.$route.fullPath) {
+        this.$router.push(route.fullPath)
+      }
+    }, //关闭页面标签时
+    onClose(route) {
+      let index = this.openedPageRouters.indexOf(route)
+      this.delPageRoute(route)
+      if (route.fullPath === this.$route.fullPath) {
+        //删除页面后，跳转到上一页面
+        this.$router.replace(
+          this.openedPageRouters[index === 0 ? 0 : index - 1]
+        )
+      }
+    }, //右键显示菜单
+    showContextMenu(e, route) {
+      this.contextMenuTargetPageRoute = route
+      this.contextMenuLeft = e.layerX
+      this.contextMenuTop = e.layerY
+      this.contextMenuVisible = true
+    }, //隐藏右键菜单
+    closeContextMenu() {
+      this.contextMenuVisible = false
+      this.contextMenuTargetPageRoute = null
+    }, //重载页面
+    reload() {
+      this.delRouteCache(this.contextMenuTargetPageRoute.fullPath)
+      if (this.contextMenuTargetPageRoute.fullPath === this.$route.fullPath) {
+        this.$router.replace({ name: this.blankRouteName }).then(() => {
+          this.$router.replace(this.contextMenuTargetPageRoute)
+        })
+      }
+    }, //关闭其他页面
+    closeOther() {
+      for (let i = 0; i < this.openedPageRouters.length; i++) {
+        let r = this.openedPageRouters[i]
+        if (r !== this.contextMenuTargetPageRoute) {
+          this.delPageRoute(r)
+          i--
+        }
+      }
+      if (this.contextMenuTargetPageRoute.fullPath !== this.$route.fullPath) {
+        this.$router.replace(this.contextMenuTargetPageRoute)
+      }
+    }, //根据路径获取索引
+    getPageRouteIndex(fullPath) {
+      for (let i = 0; i < this.openedPageRouters.length; i++) {
+        if (this.openedPageRouters[i].fullPath === fullPath) {
+          return i
+        }
+      }
+    }, //关闭左边页面
+    closeOtherLeft() {
+      let index = this.openedPageRouters.indexOf(
+        this.contextMenuTargetPageRoute
+      )
+      let currentIndex = this.getPageRouteIndex(this.$route.fullPath)
+      if (index > currentIndex) {
+        this.$router.replace(this.contextMenuTargetPageRoute)
+      }
+      for (let i = 0; i < index; i++) {
+        let r = this.openedPageRouters[i]
+        this.delPageRoute(r)
+        i--
+        index--
+      }
+    }, //关闭右边页面
+    closeOtherRight() {
+      let index = this.openedPageRouters.indexOf(
+        this.contextMenuTargetPageRoute
+      )
+      let currentIndex = this.getPageRouteIndex(this.$route.fullPath)
+      for (let i = index + 1; i < this.openedPageRouters.length; i++) {
+        let r = this.openedPageRouters[i]
+        this.delPageRoute(r)
+        i--
+      }
+      if (index < currentIndex) {
+        this.$router.replace(this.contextMenuTargetPageRoute)
+      }
+    }, //删除页面
+    delPageRoute(route) {
+      let routeIndex = this.openedPageRouters.indexOf(route)
+      if (routeIndex >= 0) {
+        this.openedPageRouters.splice(routeIndex, 1)
+      }
+      this.delRouteCache(route.fullPath)
+    }, //删除页面缓存
+    delRouteCache(key) {
+      let cache = this.keepAliveComponentInstance.cache
+      let keys = this.keepAliveComponentInstance.keys
+      for (let i = 0; i < keys.length; i++) {
+        if (keys[i] === key) {
+          keys.splice(i, 1)
+          if (cache[key] != null) {
+            delete cache[key]
+          }
+          break
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/NavMenu/index.vue

@@ -1,60 +1,60 @@
-<template>
-  <el-menu :router="true">
-    <template v-for="omenus in menus">
-      <template v-for="item in omenus.menu">
-        <el-submenu v-if="item.children" :key="item.title" :index="item.title">
-          <template slot="title">
-            <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.title }}</span>
-          </template>
-          <template v-for="itemc in item.children">
-            <el-menu-item
-              :key="itemc.title"
-              :index="itemc.title"
-              :route="omenus.base + itemc.route"
-            >
-              <i
-                v-if="item.iconUrl"
-                class="el-icon- icon-url"
-                :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
-              ></i>
-              <i v-else :class="itemc.iconClass"></i>
-              <span slot="title">{{ itemc.title }}</span>
-            </el-menu-item>
-          </template>
-        </el-submenu>
-        <el-menu-item
-          v-else
-          :key="item.title"
-          :index="item.title"
-          :route="omenus.base + item.route"
-        >
-          <i
-            v-if="item.iconUrl"
-            class="el-icon- icon-url"
-            :style="{ backgroundImage: `url(${item.iconUrl})` }"
-          ></i>
-          <i v-else :class="item.iconClass"></i>
-          <span slot="title">{{ item.title }}</span>
-        </el-menu-item>
-      </template>
-    </template>
-  </el-menu>
-</template>
-
-<script>
-export default {
-  name: 'NavMenu',
-  props: {
-    menus: {
-      type: Array,
-      default: () => []
-    }
-  }
-}
-</script>
+<template>
+  <el-menu :router="true">
+    <template v-for="omenus in menus">
+      <template v-for="item in omenus.menu">
+        <el-submenu v-if="item.children" :key="item.title" :index="item.title">
+          <template slot="title">
+            <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.title }}</span>
+          </template>
+          <template v-for="itemc in item.children">
+            <el-menu-item
+              :key="itemc.title"
+              :index="itemc.title"
+              :route="omenus.base + itemc.route"
+            >
+              <i
+                v-if="item.iconUrl"
+                class="el-icon- icon-url"
+                :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
+              ></i>
+              <i v-else :class="itemc.iconClass"></i>
+              <span slot="title">{{ itemc.title }}</span>
+            </el-menu-item>
+          </template>
+        </el-submenu>
+        <el-menu-item
+          v-else
+          :key="item.title"
+          :index="item.title"
+          :route="omenus.base + item.route"
+        >
+          <i
+            v-if="item.iconUrl"
+            class="el-icon- icon-url"
+            :style="{ backgroundImage: `url(${item.iconUrl})` }"
+          ></i>
+          <i v-else :class="item.iconClass"></i>
+          <span slot="title">{{ item.title }}</span>
+        </el-menu-item>
+      </template>
+    </template>
+  </el-menu>
+</template>
+
+<script>
+export default {
+  name: 'NavMenu',
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>