[release] 3.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "3.2.0",
+  "version": "3.1.0",
   "description": "A Vue.js admin",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",

src/components/Breadcrumb/index.vue

@@ -10,8 +10,6 @@
 </template>
 
 <script>
-import { generateTitle } from '@/utils/i18n'
-
 export default {
   created() {
     this.getBreadcrumb()
@@ -27,7 +25,6 @@ export default {
     }
   },
   methods: {
-    generateTitle,
     getBreadcrumb() {
       let matched = this.$route.matched.filter(item => item.name)
       const first = matched[0]
@@ -35,6 +32,9 @@ export default {
         matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
       }
       this.levelList = matched
+    },
+    generateTitle(title) {
+      return this.$t('route.' + title)
     }
   }
 }

src/components/ThemePicker/index.vue

@@ -6,8 +6,9 @@
 </template>
 
 <script>
+import { getVersion } from '@/utils/index.js'
 
-const version = require('element-ui/package.json').version // element-ui version from node_modules
+const version = getVersion('element-ui') // element-ui version from package.json
 const ORIGINAL_THEME = '#409EFF' // default color
 
 export default {

src/permission.js

@@ -26,7 +26,7 @@ router.beforeEach((to, from, next) => {
           const roles = res.data.role
           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record
+            next({ ...to }) // hack方法 确保addRoutes已完成
           })
         }).catch(() => {
           store.dispatch('FedLogOut').then(() => {

src/store/getters.js

@@ -1,8 +1,8 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   language: state => state.app.language,
-  visitedViews: state => state.tagsView.visitedViews,
+  visitedViews: state => state.app.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
+  cachedViews: state => state.app.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,

src/store/index.js

@@ -1,9 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
-import permission from './modules/permission'
-import tagsView from './modules/tagsView'
 import user from './modules/user'
+import permission from './modules/permission'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -11,9 +10,8 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   modules: {
     app,
-    permission,
+    user,
-    tagsView,
+    permission
-    user
   },
   getters
 })

src/store/modules/app.js

@@ -5,7 +5,9 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    language: Cookies.get('language') || 'zh'
+    language: Cookies.get('language') || 'zh',
+    visitedViews: [],
+    cachedViews: []
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -19,6 +21,32 @@ const app = {
     SET_LANGUAGE: (state, language) => {
       state.language = language
       Cookies.set('language', language)
+    },
+    ADD_VISITED_VIEWS: (state, view) => {
+      if (state.visitedViews.some(v => v.path === view.path)) return
+      state.visitedViews.push({
+        name: view.name,
+        path: view.path,
+        title: view.meta.title || 'no-name'
+      })
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
+    },
+    DEL_VISITED_VIEWS: (state, view) => {
+      for (const [i, v] of state.visitedViews.entries()) {
+        if (v.path === view.path) {
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, 1)
+          break
+        }
+      }
     }
   },
   actions: {
@@ -27,6 +55,15 @@ const app = {
     },
     setLanguage({ commit }, language) {
       commit('SET_LANGUAGE', language)
+    },
+    addVisitedViews({ commit }, view) {
+      commit('ADD_VISITED_VIEWS', view)
+    },
+    delVisitedViews({ commit, state }, view) {
+      return new Promise((resolve) => {
+        commit('DEL_VISITED_VIEWS', view)
+        resolve([...state.visitedViews])
+      })
     }
   }
 }

src/store/modules/tagsView.js

@@ -1,47 +0,0 @@
-const tagsView = {
-  state: {
-    visitedViews: [],
-    cachedViews: []
-  },
-  mutations: {
-    ADD_VISITED_VIEWS: (state, view) => {
-      if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push({
-        name: view.name,
-        path: view.path,
-        title: view.meta.title || 'no-name'
-      })
-      if (!view.meta.noCache) {
-        state.cachedViews.push(view.name)
-      }
-    },
-    DEL_VISITED_VIEWS: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
-        if (v.path === view.path) {
-          state.visitedViews.splice(i, 1)
-          break
-        }
-      }
-      for (const i of state.cachedViews) {
-        if (i === view.name) {
-          const index = state.cachedViews.indexOf(i)
-          state.cachedViews.splice(index, 1)
-          break
-        }
-      }
-    }
-  },
-  actions: {
-    addVisitedViews({ commit }, view) {
-      commit('ADD_VISITED_VIEWS', view)
-    },
-    delVisitedViews({ commit, state }, view) {
-      return new Promise((resolve) => {
-        commit('DEL_VISITED_VIEWS', view)
-        resolve([...state.visitedViews])
-      })
-    }
-  }
-}
-
-export default tagsView

src/styles/index.scss

@@ -98,11 +98,10 @@ div:focus{
 
 code {
   background: #eef1f6;
-  padding: 15px 16px;
+  padding: 15px 10px;
   margin-bottom: 20px;
   display: block;
   line-height: 36px;
-  font-size: 14px;
   a {
     color: #337ab7;
     cursor: pointer;

src/utils/i18n.js

@@ -1,3 +0,0 @@
-export function generateTitle(title) {
-  return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
-}

src/utils/index.js

@@ -265,3 +265,9 @@ export function deepClone(source) {
   }
   return targetObj
 }
+
+// get dependencies verison from package.json
+export function getVersion(name) {
+  const p = require('../../package')
+  return p.dependencies[name]
+}

src/views/components-demo/dndList.vue

@@ -14,7 +14,7 @@ import DndList from '@/components/DndList'
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'dndList-demo',
+  name: 'dnd-list-demo',
   components: { DndList },
   data() {
     return {

src/views/example/table/index.vue

@@ -11,7 +11,7 @@ export default {
   name: 'TableMain',
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.app.cachedViews
     }
   }
 }

src/views/example/table/inlineEditTable.vue

@@ -35,18 +35,14 @@
 
       <el-table-column min-width="300px" label="标题">
         <template slot-scope="scope">
-          <template v-if="scope.row.edit">
+          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
-            <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
+          <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
-            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
-          </template>
-          <span v-else>{{ scope.row.title }}</span>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="编辑" width="120">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
+          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
-          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
         </template>
       </el-table-column>
 
@@ -88,40 +84,12 @@ export default {
       fetchList(this.listQuery).then(response => {
         const items = response.data.items
         this.list = items.map(v => {
-          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+          this.$set(v, 'edit', false)
-          v.originalTitle = v.title //  will be used when user click the cancel botton
           return v
         })
         this.listLoading = false
       })
-    },
-    cancelEdit(row) {
-      row.title = row.originalTitle
-      row.edit = false
-      this.$message({
-        message: 'The title has been restored to the original value',
-        type: 'warning'
-      })
-    },
-    confirmEdit(row) {
-      row.edit = false
-      row.originalTitle = row.title
-      this.$message({
-        message: 'The title has been edited',
-        type: 'success'
-      })
     }
   }
 }
 </script>
-
-<style scoped>
-.edit-input {
-  padding-right: 100px;
-}
-.cancel-btn {
-  position: absolute;
-  right: 15px;
-  top: 13px;
-}
-</style>

src/views/layout/components/AppMain.vue

@@ -13,8 +13,7 @@ export default {
   name: 'AppMain',
   computed: {
     cachedViews() {
-      // console.log(this.$store.state.tagsView.cachedViews)
+      return this.$store.state.app.cachedViews
-      return this.$store.state.tagsView.cachedViews
     }
     // key() {
     //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="menu-wrapper">
-    <template v-for="item in routes" v-if="!item.hidden&&item.children">
+    <template v-for="item in routes">
 
-      <router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
+      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
         <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
           <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
           <span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
         </el-menu-item>
       </router-link>
 
-      <el-submenu v-else :index="item.name||item.path" :key="item.name">
+      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key="item.name">
         <template slot="title">
           <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
           <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
         </template>
 
-        <template v-for="child in item.children" v-if="!child.hidden">
+        <template v-if="!child.hidden" v-for="child in item.children">
           <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
 
           <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
@@ -32,8 +32,6 @@
 </template>
 
 <script>
-import { generateTitle } from '@/utils/i18n'
-
 export default {
   name: 'SidebarItem',
   props: {
@@ -42,7 +40,9 @@ export default {
     }
   },
   methods: {
-    generateTitle
+    generateTitle(title) {
+      return this.$t('route.' + title)
+    }
   }
 }
 </script>

src/views/layout/components/TagsView.vue

@@ -1,7 +1,7 @@
 <template>
   <scroll-pane class='tags-view-container' ref='scrollPane'>
     <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
-      {{generateTitle(tag.title)}}
+      {{$t('route.'+tag.title)}}
       <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
     </router-link>
   </scroll-pane>
@@ -9,20 +9,18 @@
 
 <script>
 import ScrollPane from '@/components/ScrollPane'
-import { generateTitle } from '@/utils/i18n'
 
 export default {
   components: { ScrollPane },
   computed: {
     visitedViews() {
-      return this.$store.state.tagsView.visitedViews
+      return this.$store.state.app.visitedViews
     }
   },
   mounted() {
     this.addViewTags()
   },
   methods: {
-    generateTitle,
     closeViewTags(view, $event) {
       this.$store.dispatch('delVisitedViews', view).then((views) => {
         if (this.isActive(view)) {
@@ -63,6 +61,7 @@ export default {
         }
       })
     }
+
   },
   watch: {
     $route() {