xs-common-plugins 1.1.5 → 1.2.0

package/README.md

@@ -268,4 +268,24 @@
 ```
    1.1.5
    1. common.js common.exportExcel （报表导出） 方法， 移除空条件
+```
+```
+   1.1.6
+   1. 增加多租户却换
+   2. 兼容相同路由跳转警告问题
+   3. common.js 增加公用方法 this.$common.dic() 用于查询字典单条/多条数据
+```
+```
+   1.1.7
+   1. 多余显示移除
+```
+```
+   1.1.8
+   1. common.js 增加 方法
+   2. common.js commom.format() 拓展类型枚举
+   3. 表单校验增加 min, max 参数
+```
+```
+   1.2.0
+   1. 项目增加多页签功能， 方便切换
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xs-common-plugins",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "private": false,
   "description": "向上公共代码部分",
   "author": "祝玲云 <1902733517@qq.com>",

package/src/common/common.js

@@ -4,7 +4,8 @@ import router from '@/router/index'
 import store from '@/store/index'
 import {OrgEnum} from '@/utils/enum'
 import filterRules from '@/utils/filterRules'
-
+import request from "xs-request";
+import moduleCfg from '@/modules/module.config.js'
 const common = {}
 
 /**
@@ -399,28 +400,45 @@ common.requiredList = (list) => {
 /**
  *  格式化数据样式
  * @param {*} value  值
- * @param {*} type  要格式化的类型 [date, price]
+ * @param {*} type  要格式化的类型 [date, price, price, money, enum, list(前端自定义枚举)]
  * @returns 
  */
  common.format = (value, type="date") => {
-    switch (type) {
+    let newType = ['money', 'date', 'mdate'].includes(type) ? type : type.split('.').length > 1 ? 'enum' : 'list'
+    switch (newType) {
+        case 'money':
+            return Number(value).toFixed(4);
         case 'date':
-            if(value) return value.replace("T", ' ').substr(0, 19)
-            else return ''
-            break;
+            if(value === '1970-01-01T00:00:00') return '/'
+            return value ? value.replace('T', ' ').substr(0, 19) : ''
+        case 'mdate':
+            if(value === '1970-01-01T00:00:00') return '/'
+            return value ? value.replace('T', ' ').substr(5, 19) : ''
         case 'price':
             if(typeof(value) === 'number') {
                 return value.toFixed(2).toString().replace(/,/g,'').replace(/\d+/, function (n) { // 先提取整数部分
                     return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
-                      return $1 + ",";
+                        return $1 + ",";
                     });
                 });
             }
             else return ''
-            break;
+        case 'enum':
+            return getValueByType('enum', type, value)
+        case 'list':
+            return getValueByType('list', type, value)
         default:
             break;
     }
+    function getValueByType (type, name, value) {
+        if(type === 'enum') {
+            let row = OrgEnum[name].find(item => item.Id == value)
+            return row ? row.Text : ''
+        } else if(type === 'list') {
+            let row = moduleCfg.format ? moduleCfg.format[name].find(item => item.id == value) : null
+            return row ? row.name: ''
+        }
+    }
 }
 
 /**
@@ -473,4 +491,59 @@ common.getReportList = (that, url, query, callBack) => {
     })
 }
 
+
+/**
+ * 字典表 里通过Id 查 name, 或者查询多条数据 （单条返回 name， 多条返回数组）
+ * @param {Array} props  ['服务名', '表名', '字段名']
+ * @param {String, Number, Array} val 值， 传入id, 或者 [id1, id2, ...]
+ * 
+ * 使用案例  (异步方法)
+ *  async getValue () {
+ *     await this.$common.dic(['qccuser', 'Brand'], '10010')
+ *  }
+ *   
+ */
+
+common.dic = async (props, val) => {
+    let isArray = Array.isArray(val)
+    let server = props[0] || ''
+    let tableName = props[1] || ''
+    let prop = props[2] || 'name'
+    let key = server + tableName
+    if(store.getters.dic[key]) {
+        if(isArray) return await getDicVal()
+        let row =  store.getters.dic[key].find(item => item.id == val)
+        if(row && (row.isNull || row[prop] === null)) { return '' }
+        if(row) return row[prop]
+        if(!row) return await getDicVal()
+        
+    } else {
+        return await getDicVal()
+    }
+    async function getDicVal () {
+        let servers = props[0] || "";
+        let tableName = props[1] || "";
+        let key = servers + tableName;
+        let url = servers + "/UserAll/Search/Dic/" + tableName;
+        let res = await request.post(url, isArray ? val : [val])
+        if (res.code !== 0) return;
+        store.commit("dic/SET_ASK", { key, val: res.data });
+        if(isArray) return res.data
+        else {
+            let row = res.data.find(item => item.id == val)
+            return row ? row[prop] : ''
+        }
+    }
+}
+/**
+ * 快速给页面变量赋值
+ * @param {*} url  请求接口的地址
+ * @param {*} query  接口参数
+ * @param {*} prop  要为哪个字段名赋值
+ */
+common.getLabelList = (that, prop, url, query) => {
+    common.getObject(url)(query).then(res => {
+        that[prop] = res.data
+    })
+}
 export default common

package/src/router/index.js

@@ -3,7 +3,22 @@ import VueRouter from 'vue-router'
 import autoRouter from '../automatically/router'
 Vue.use(VueRouter)
 
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
 const routes = [
+  {
+    path: '/redirect',
+    component: () => import('../views/layout/index'),
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect/index')
+      }
+    ]
+  },
   {
     path: '/',
     name: 'layout',
@@ -16,7 +31,7 @@ const routes = [
     path: '/home',
     name: 'home',
     component: () => import('../views/layout/index'),
-    meta: { title: '首页', icon: 'example' },
+    meta: { title: '首页', icon: 'example', affix: true,},
     children: [{
       path:'/',
       component: () => import('../views/home/index'),

package/src/store/index.js

@@ -5,6 +5,7 @@ import app from './modules/app'
 import user from './modules/user'
 import widgetdata from './modules/widgetdata'
 import dic from './modules/dic'
+import tagsView from './modules/tagsView'
 import oss from './modules/oss'
 
 const globalCfg = require("../modules/module.config");
@@ -44,6 +45,7 @@ let storeCfg = {
 
   modules: {
     app,
+    tagsView,
     user,
     widgetdata,
     dic,

package/src/store/modules/tagsView.js

@@ -0,0 +1,160 @@
+const state = {
+  visitedViews: [],
+  cachedViews: []
+}
+
+const mutations = {
+  ADD_VISITED_VIEW: (state, view) => {
+    if (state.visitedViews.some(v => v.path === view.path)) return
+    state.visitedViews.push(
+      Object.assign({}, view, {
+        title: view.meta.title || 'no-name'
+      })
+    )
+  },
+  ADD_CACHED_VIEW: (state, view) => {
+    if (state.cachedViews.includes(view.name)) return
+    if (!view.meta.noCache) {
+      state.cachedViews.push(view.name)
+    }
+  },
+
+  DEL_VISITED_VIEW: (state, view) => {
+    for (const [i, v] of state.visitedViews.entries()) {
+      if (v.path === view.path) {
+        state.visitedViews.splice(i, 1)
+        break
+      }
+    }
+  },
+  DEL_CACHED_VIEW: (state, view) => {
+    const index = state.cachedViews.indexOf(view.name)
+    index > -1 && state.cachedViews.splice(index, 1)
+  },
+
+  DEL_OTHERS_VISITED_VIEWS: (state, view) => {
+    state.visitedViews = state.visitedViews.filter(v => {
+      return v.meta.affix || v.path === view.path
+    })
+  },
+  DEL_OTHERS_CACHED_VIEWS: (state, view) => {
+    const index = state.cachedViews.indexOf(view.name)
+    if (index > -1) {
+      state.cachedViews = state.cachedViews.slice(index, index + 1)
+    } else {
+      // if index = -1, there is no cached tags
+      state.cachedViews = []
+    }
+  },
+
+  DEL_ALL_VISITED_VIEWS: state => {
+    // keep affix tags
+    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
+    state.visitedViews = affixTags
+  },
+  DEL_ALL_CACHED_VIEWS: state => {
+    state.cachedViews = []
+  },
+
+  UPDATE_VISITED_VIEW: (state, view) => {
+    for (let v of state.visitedViews) {
+      if (v.path === view.path) {
+        v = Object.assign(v, view)
+        break
+      }
+    }
+  }
+}
+
+const actions = {
+  addView({ dispatch }, view) {
+    dispatch('addVisitedView', view)
+    dispatch('addCachedView', view)
+  },
+  addVisitedView({ commit }, view) {
+    commit('ADD_VISITED_VIEW', view)
+  },
+  addCachedView({ commit }, view) {
+    commit('ADD_CACHED_VIEW', view)
+  },
+
+  delView({ dispatch, state }, view) {
+    return new Promise(resolve => {
+      dispatch('delVisitedView', view)
+      dispatch('delCachedView', view)
+      resolve({
+        visitedViews: [...state.visitedViews],
+        cachedViews: [...state.cachedViews]
+      })
+    })
+  },
+  delVisitedView({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_VISITED_VIEW', view)
+      resolve([...state.visitedViews])
+    })
+  },
+  delCachedView({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_CACHED_VIEW', view)
+      resolve([...state.cachedViews])
+    })
+  },
+
+  delOthersViews({ dispatch, state }, view) {
+    return new Promise(resolve => {
+      dispatch('delOthersVisitedViews', view)
+      dispatch('delOthersCachedViews', view)
+      resolve({
+        visitedViews: [...state.visitedViews],
+        cachedViews: [...state.cachedViews]
+      })
+    })
+  },
+  delOthersVisitedViews({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_OTHERS_VISITED_VIEWS', view)
+      resolve([...state.visitedViews])
+    })
+  },
+  delOthersCachedViews({ commit, state }, view) {
+    return new Promise(resolve => {
+      commit('DEL_OTHERS_CACHED_VIEWS', view)
+      resolve([...state.cachedViews])
+    })
+  },
+
+  delAllViews({ dispatch, state }, view) {
+    return new Promise(resolve => {
+      dispatch('delAllVisitedViews', view)
+      dispatch('delAllCachedViews', view)
+      resolve({
+        visitedViews: [...state.visitedViews],
+        cachedViews: [...state.cachedViews]
+      })
+    })
+  },
+  delAllVisitedViews({ commit, state }) {
+    return new Promise(resolve => {
+      commit('DEL_ALL_VISITED_VIEWS')
+      resolve([...state.visitedViews])
+    })
+  },
+  delAllCachedViews({ commit, state }) {
+    return new Promise(resolve => {
+      commit('DEL_ALL_CACHED_VIEWS')
+      resolve([...state.cachedViews])
+    })
+  },
+
+  updateVisitedView({ commit }, view) {
+    commit('UPDATE_VISITED_VIEW', view)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

package/src/utils/filterRules.js

@@ -2,11 +2,16 @@ const filterRules = ({ required, type, min, max }) => {
   let validate = [];
   if (required) {
     // 必填项
-    validate.push({
-      required: true,
-      message: "该输入项为必填项",
-      trigger: "change",
-    });
+    validate.push({ required: true, message: "该输入项为必填项", trigger: "change",});
+  }
+  if(min&&max){
+    validate.push({ min:min,max:max, message: '字符长度在'+min+'至'+max+'之间!', trigger: 'change' })
+  }
+  if(min){
+    validate.push({ min:min, message: '最少输入'+min+'个字符!', trigger: 'change' })
+  }
+  if(max){
+    validate.push({ min:1,max:max, message: '最多输入'+max+'个字符!', trigger: 'change' })
   }
   if (type) {
     let message = "";

package/src/utils/getMenu.js

@@ -77,6 +77,7 @@ function getApis () {
 
 export {
 
-  main
+  main,
+  initMenu
   
 }

package/src/views/layout/components/AppMain.vue

@@ -25,10 +25,10 @@ export default {
 .app-main {
   display: flex;
   /*50 = navbar  */
-  height: calc(100vh - 50px);
+  height: calc(100vh - 85px);
   width: 100%;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
 }
 .footer {
   position: absolute;

package/src/views/layout/components/Navbar.vue

@@ -31,6 +31,7 @@
       <AllSearch />
       <div class="is-dot">
         <el-badge
+          style="margin: 0 3px;"
           v-if="isShowKF === 'isv' || isShowKF === 'erp'"
           is-dot
           class="item"
@@ -45,7 +46,7 @@
         </el-badge>
       </div>
       <div>
-        <el-tag>{{
+        <el-tag style="margin: 0 3px;">{{
           userProfile &&
           userProfile.hasOwnProperty("real_name") &&
           userProfile.real_name
@@ -61,6 +62,17 @@
               : "--未绑定--"
           }}
         </el-tag>
+      </div> 
+      <!-- 租户 -->
+      <div class="tenant" v-if="userProfile && userProfile.TId">
+        <el-dropdown @command="changeTenant">
+          <span class="el-dropdown-link">
+            {{tenantList && tenantList[userProfile.TId]}}
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for="(value, key) in tenantList" :key="key" :command="key">{{value}}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
       </div>
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
@@ -107,7 +119,9 @@ import AllSearch from "./AllSearch";
 import { getConfig } from "@/utils/global-config";
 import { getToken, removeToken, removeLocalToken } from "@/utils/auth"; // get token from cookie
 import ImCom from "@/components/im";
-import { getLocalStorage } from "@/utils/localStorage";
+import { getLocalStorage, setLocalStorage } from "@/utils/localStorage";
+import { setToken } from "@/utils/auth"; // get token from cookie
+import { initMenu } from '@/utils/getMenu'
 
 export default {
   components: {
@@ -136,6 +150,7 @@ export default {
       LoginName: false,
       isShowKF: getConfig("GROUP"),
       defaultParentId: "887904812217cca9bc2b9adb875daf42",
+      tenantList: [], // 租户列表
     };
   },
   computed: {
@@ -146,8 +161,29 @@ export default {
     if (userName === "admin") {
       this.LoginName = true;
     }
+    if(this.userProfile &&this.userProfile.TId) this.getTenantList()
   },
   methods: {
+    changeTenant (id) {
+       if(id === this.userProfile.TId) return
+        this.$router.push("/home")
+        this.$ask.ucmng.api.sysmng.Tenant.SwitchTenant({clientId: getConfig('CLIENT_ID'), newTId: id}).then(res => {
+          let newuser = this.userProfile
+          newuser.TId = id
+          setLocalStorage('userProfile', newuser)
+          this.userProfile = getLocalStorage('userProfile')
+          let user = res.data
+            setToken(user.accessToken);
+            localStorage.setItem("token", user.accessToken);
+            initMenu()
+            
+        })
+    },
+    getTenantList () {
+      this.$ask.ucmng.api.sysmng.Tenant.GetTenants().then(res => {
+        this.tenantList = res.data
+      })
+    },
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
     },
@@ -279,6 +315,10 @@ export default {
     }
   }
 
+  .tenant {
+    padding: 0 10px;
+  }
+
   .breadcrumb-container {
     float: left;
   }

package/src/views/layout/components/TagsView/ScrollPane.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeDestroy() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    emitScroll() {
+      this.$emit('scroll')
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  ::v-deep {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>

package/src/views/layout/components/TagsView/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
+      <li @click="closeOthersTags">关闭其他</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane'
+import path from 'path'
+import router from '../../../../router/index'
+export default {
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews
+    },
+    routes() {
+      return router.options.routes
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    isAffix(tag) {
+      return tag.meta && tag.meta.affix
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
+      const { meta } = this.$route
+      if (meta && meta.title) {
+        this.$store.dispatch('tagsView/addView', this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView.fullPath)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === 'Dashboard') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  height: 34px;
+  width: 100%;
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      &:last-of-type {
+        margin-right: 15px;
+      }
+      &.active {
+        background-color: #409EFF;
+        color: #fff;
+        border-color: #409EFF;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

package/src/views/layout/components/index.js

@@ -1,3 +1,4 @@
 export { default as Navbar } from './Navbar'
 export { default as Sidebar } from './Sidebar'
 export { default as AppMain } from './AppMain'
+export { default as TagsView } from './TagsView/index.vue'

package/src/views/layout/index.vue

@@ -4,6 +4,7 @@
     <div class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
+        <tags-view />
       </div>
       <app-main />
     </div>
@@ -11,14 +12,15 @@
 </template>
 
 <script>
-import { Navbar, Sidebar, AppMain } from "./components";
+import { Navbar, Sidebar, AppMain, TagsView } from "./components";
 import { main } from '@/utils/getMenu'
 export default {
   name: "Layout",
   components: {
     Navbar,
     Sidebar,
-    AppMain
+    AppMain,
+    TagsView
   },
   data() {
     return {

package/src/views/redirect/index.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+  created() {
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
+  },
+  render: function(h) {
+    return h() // avoid warning message
+  }
+}
+</script>