更新

src/components/admin-frame/Tags.vue

@@ -9,7 +9,7 @@
                 <router-link :to="item.path" class="tags-li-title">
                   {{ item.title }}
                 </router-link>
-                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
+                <!-- <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> -->
               </li>
             </ul>
           </el-col>
@@ -119,6 +119,8 @@ export default {
   },
   watch: {
     $route(newValue, oldValue) {
+      let index = this.tagsList.findIndex(i => i.path == oldValue.path);
+      this.tagsList.splice(index, 1);
       this.setTags(newValue);
     },
   },

src/components/admin-frame/directives.js

@@ -18,7 +18,7 @@ Vue.directive('dialogDrag', {
       }
     })();
 
-    dialogHeaderEl.onmousedown = (e) => {
+    dialogHeaderEl.onmousedown = e => {
       // 鼠标按下，计算当前元素距离可视区的距离
       const disX = e.clientX - dialogHeaderEl.offsetLeft;
       const disY = e.clientY - dialogHeaderEl.offsetTop;
@@ -48,7 +48,7 @@ Vue.directive('dialogDrag', {
         styT = +styT.replace(/\px/g, '');
       }
 
-      document.onmousemove = function (e) {
+      document.onmousemove = function(e) {
         // 通过事件委托，计算移动的距离
         let left = e.clientX - disX;
         let top = e.clientY - disY;
@@ -70,7 +70,7 @@ Vue.directive('dialogDrag', {
         dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
       };
 
-      document.onmouseup = function (e) {
+      document.onmouseup = function(e) {
         document.onmousemove = null;
         document.onmouseup = null;
       };

src/components/admin-frame/备份/Header copy.vue

@@ -1,171 +0,0 @@
-<template>
-  <div class="header">
-    <!-- 折叠按钮 -->
-    <div class="collapse-btn" @click="collapseChage">
-      <i v-if="!collapse" class="el-icon-s-fold"></i>
-      <i v-else class="el-icon-s-unfold"></i>
-    </div>
-    <div class="logo">管理中心</div>
-    <div class="header-right">
-      <div class="header-user-con">
-        <!-- 全屏显示 -->
-        <div class="btn-fullscreen" @click="handleFullScreen">
-          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
-            <i class="el-icon-rank"></i>
-          </el-tooltip>
-        </div>
-        <!-- 用户头像 -->
-        <div class="user-avator">
-          <img src="../../assets/img/img.jpg" alt="" />
-        </div>
-        <!-- 用户名下拉菜单 -->
-        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
-          <span class="el-dropdown-link">
-            {{ user.name || '游客' }}
-            <i class="el-icon-caret-bottom"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import bus from './bus';
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  data() {
-    return {
-      collapse: false,
-      fullscreen: false,
-    };
-  },
-  computed: {
-    ...mapState(['user']),
-  },
-  methods: {
-    // 用户名下拉菜单选择事件
-    handleCommand(command) {
-      if (command == 'loginout') {
-        localStorage.removeItem('token');
-        this.$router.push('/login');
-      }
-    },
-    // 侧边栏折叠
-    collapseChage() {
-      this.collapse = !this.collapse;
-      bus.$emit('collapse', this.collapse);
-    },
-    // 全屏事件
-    handleFullScreen() {
-      let element = document.documentElement;
-      if (this.fullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        if (element.requestFullscreen) {
-          element.requestFullscreen();
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen();
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen();
-        }
-      }
-      this.fullscreen = !this.fullscreen;
-    },
-  },
-  mounted() {
-    if (document.body.clientWidth < 1500) {
-      this.collapseChage();
-    }
-  },
-};
-</script>
-<style scoped>
-.header {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 60px;
-  font-size: 22px;
-  color: #fff;
-}
-.collapse-btn {
-  float: left;
-  padding: 0 21px;
-  cursor: pointer;
-  line-height: 60px;
-}
-.header .logo {
-  float: left;
-  width: 25%;
-  line-height: 60px;
-}
-.header-right {
-  float: right;
-  padding-right: 50px;
-}
-.header-user-con {
-  display: flex;
-  height: 60px;
-  align-items: center;
-}
-.btn-fullscreen {
-  transform: rotate(45deg);
-  margin-right: 5px;
-  font-size: 24px;
-}
-.btn-bell,
-.btn-fullscreen {
-  position: relative;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  border-radius: 15px;
-  cursor: pointer;
-}
-.btn-bell-badge {
-  position: absolute;
-  right: 0;
-  top: -2px;
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: #f56c6c;
-  color: #fff;
-}
-.btn-bell .el-icon-bell {
-  color: #fff;
-}
-.user-name {
-  margin-left: 10px;
-}
-.user-avator {
-  margin-left: 20px;
-}
-.user-avator img {
-  display: block;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-.el-dropdown-link {
-  color: #fff;
-  cursor: pointer;
-}
-.el-dropdown-menu__item {
-  text-align: center;
-}
-</style>

src/components/admin-frame/备份/Home copy.vue

@@ -1,66 +0,0 @@
-<template>
-  <el-container>
-    <el-header style="padding: 0">
-      <v-head></v-head>
-    </el-header>
-    <el-container>
-      <el-aside width="200px">
-        <v-sidebar></v-sidebar>
-      </el-aside>
-      <el-main>
-        <div class="content-box" :class="{ 'content-collapse': collapse }">
-          <v-tags></v-tags>
-          <div class="content">
-            <transition name="move" mode="out-in">
-              <el-row>
-                <el-col :span="24">
-                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
-                  <el-col :span="24" class="container">
-                    <router-view></router-view>
-                  </el-col>
-                </el-col>
-              </el-row>
-            </transition>
-            <el-backtop target=".content"></el-backtop>
-          </div>
-        </div>
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-
-<script>
-import breadcrumb from './breadcrumb.vue';
-import vHead from './Header.vue';
-import vSidebar from './Sidebar.vue';
-import vTags from './Tags.vue';
-import bus from './bus';
-export default {
-  data() {
-    return {
-      tagsList: [],
-      collapse: false,
-    };
-  },
-  components: {
-    vHead,
-    vSidebar,
-    vTags,
-    breadcrumb,
-  },
-  created() {
-    bus.$on('collapse-content', msg => {
-      this.collapse = msg;
-    });
-
-    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
-    bus.$on('tags', msg => {
-      let arr = [];
-      for (let i = 0, len = msg.length; i < len; i++) {
-        msg[i].name && arr.push(msg[i].name);
-      }
-      this.tagsList = arr;
-    });
-  },
-};
-</script>

src/components/admin-frame/备份/Sidebar copy.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="sidebar">
-    <el-menu
-      class="sidebar-el-menu"
-      :default-active="onRoutes"
-      :collapse="collapse"
-      background-color="#324157"
-      text-color="#bfcbd9"
-      active-text-color="#20a0ff"
-      unique-opened
-      router
-    >
-      <template v-for="item in items">
-        <template v-if="item.subs">
-          <el-submenu class="second" :index="item.index" :key="item.index">
-            <template slot="title">
-              <i :class="item.icon"></i>
-              <span slot="title">{{ item.title }}</span>
-            </template>
-            <template v-for="subItem in item.subs">
-              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
-                <template slot="title">{{ subItem.title }}</template>
-                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
-              </el-submenu>
-              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
-            </template>
-          </el-submenu>
-        </template>
-        <template v-else>
-          <el-menu-item class="first" :index="item.index" :key="item.index">
-            <i :class="item.icon"></i>
-            <span slot="title">{{ item.title }}</span>
-          </el-menu-item>
-        </template>
-      </template>
-    </el-menu>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash';
-import { mapState, createNamespacedHelpers } from 'vuex';
-import bus from './bus';
-export default {
-  data() {
-    return {
-      collapse: false,
-      items: [
-        {
-          icon: 'el-icon-s-home',
-          index: '/adminCenter/homeIndex',
-          title: '系统首页',
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapState(['user']),
-    onRoutes() {
-      return this.$route.path.replace('/', '');
-    },
-  },
-  created() {
-    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
-    bus.$on('collapse', msg => {
-      this.collapse = msg;
-      bus.$emit('collapse-content', msg);
-    });
-  },
-  methods: {
-    // 分配用户彩带权限
-    async getMenu() {
-      let list = _.cloneDeep(this.items);
-      let data = [
-        {
-          icon: 'el-icon-s-home',
-          index: '/adminCenter/test/index',
-          title: '测试页面',
-        },
-      ];
-      list.push(...data);
-      this.$set(this, `items`, _.uniqBy(list, 'index'));
-    },
-  },
-  watch: {
-    user: {
-      deep: true,
-      immediate: true,
-      handler(val) {
-        this.getMenu();
-      },
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.sidebar {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 60px;
-  bottom: 0;
-  overflow-y: scroll;
-}
-.sidebar::-webkit-scrollbar {
-  width: 0;
-}
-.sidebar-el-menu:not(.el-menu--collapse) {
-  width: 200px;
-}
-.sidebar > ul {
-  height: 100%;
-}
-// /deep/.first {
-//   padding-left: 0 !important;
-// }
-// /deep/.second .el-submenu__title {
-//   padding-left: 0 !important;
-// }
-</style>

src/components/admin-frame/备份/Tags copy.vue

@@ -1,181 +0,0 @@
-<template>
-  <div class="tags" v-if="showTags">
-    <ul>
-      <li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
-        <router-link :to="item.path" class="tags-li-title">
-          {{ item.title }}
-        </router-link>
-        <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
-      </li>
-    </ul>
-    <div class="tags-close-box">
-      <el-dropdown @command="handleTags">
-        <el-button size="mini" type="primary"> 标签选项<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
-        <el-dropdown-menu size="small" slot="dropdown">
-          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
-          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import bus from './bus';
-export default {
-  data() {
-    return {
-      tagsList: [],
-    };
-  },
-  methods: {
-    isActive(path) {
-      return path === this.$route.fullPath;
-    },
-    // 关闭单个标签
-    closeTags(index) {
-      const delItem = this.tagsList.splice(index, 1)[0];
-      const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
-      if (item) {
-        delItem.path === this.$route.fullPath && this.$router.push(item.path);
-      } else {
-        this.$router.push('/');
-      }
-    },
-    // 关闭全部标签
-    closeAll() {
-      this.tagsList = [];
-      this.$router.push('/');
-    },
-    // 关闭其他标签
-    closeOther() {
-      const curItem = this.tagsList.filter(item => {
-        return item.path === this.$route.fullPath;
-      });
-      this.tagsList = curItem;
-    },
-    // 设置标签
-    setTags(route) {
-      const isExist = this.tagsList.some(item => {
-        return item.path === route.fullPath;
-      });
-      if (!isExist) {
-        if (this.tagsList.length >= 8) {
-          this.tagsList.shift();
-        }
-        this.tagsList.push({
-          title: route.meta.title,
-          path: route.fullPath,
-          name: route.matched[1].components.default.name,
-        });
-      }
-      bus.$emit('tags', this.tagsList);
-    },
-    handleTags(command) {
-      command === 'other' ? this.closeOther() : this.closeAll();
-    },
-  },
-  computed: {
-    showTags() {
-      return this.tagsList.length > 0;
-    },
-  },
-  watch: {
-    $route(newValue, oldValue) {
-      this.setTags(newValue);
-    },
-  },
-  created() {
-    this.setTags(this.$route);
-    // 监听关闭当前页面的标签页
-    bus.$on('close_current_tags', () => {
-      for (let i = 0, len = this.tagsList.length; i < len; i++) {
-        const item = this.tagsList[i];
-        if (item.path === this.$route.fullPath) {
-          if (i < len - 1) {
-            this.$router.push(this.tagsList[i + 1].path);
-          } else if (i > 0) {
-            this.$router.push(this.tagsList[i - 1].path);
-          } else {
-            this.$router.push('/');
-          }
-          this.tagsList.splice(i, 1);
-          break;
-        }
-      }
-    });
-  },
-};
-</script>
-
-<style>
-.tags {
-  position: relative;
-  height: 30px;
-  overflow: hidden;
-  background: #fff;
-  padding-right: 120px;
-  box-shadow: 0 5px 10px #ddd;
-}
-
-.tags ul {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
-
-.tags-li {
-  float: left;
-  margin: 3px 5px 2px 3px;
-  border-radius: 3px;
-  font-size: 12px;
-  overflow: hidden;
-  cursor: pointer;
-  height: 23px;
-  line-height: 23px;
-  border: 1px solid #e9eaec;
-  background: #fff;
-  padding: 0 5px 0 12px;
-  vertical-align: middle;
-  color: #666;
-  -webkit-transition: all 0.3s ease-in;
-  -moz-transition: all 0.3s ease-in;
-  transition: all 0.3s ease-in;
-}
-
-.tags-li:not(.active):hover {
-  background: #f8f8f8;
-}
-
-.tags-li.active {
-  color: #fff;
-}
-
-.tags-li-title {
-  float: left;
-  max-width: 80px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-right: 5px;
-  color: #666;
-}
-
-.tags-li.active .tags-li-title {
-  color: #fff;
-}
-
-.tags-close-box {
-  position: absolute;
-  right: 0;
-  top: 0;
-  box-sizing: border-box;
-  padding-top: 1px;
-  text-align: center;
-  width: 110px;
-  height: 30px;
-  background: #fff;
-  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-}
-</style>