[release] 3.2.0

package.json

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

src/components/ThemePicker/index.vue

@@ -6,9 +6,8 @@
 </template>
 
 <script>
-import { getVersion } from '@/utils/index.js'
 
-const version = getVersion('element-ui') // element-ui version from package.json
+const version = require('element-ui/package.json').version // element-ui version from node_modules
 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 }) // hack方法 确保addRoutes已完成
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record
           })
         }).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.app.visitedViews,
-  cachedViews: state => state.app.cachedViews,
+  visitedViews: state => state.tagsView.visitedViews,
+  cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,

src/store/index.js

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

src/store/modules/app.js

@@ -5,9 +5,7 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    language: Cookies.get('language') || 'zh',
-    visitedViews: [],
-    cachedViews: []
+    language: Cookies.get('language') || 'zh'
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -21,32 +19,6 @@ 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: {
@@ -55,15 +27,6 @@ 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

@@ -0,0 +1,47 @@
+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,10 +98,11 @@ div:focus{
 
 code {
   background: #eef1f6;
-  padding: 15px 10px;
+  padding: 15px 16px;
   margin-bottom: 20px;
   display: block;
   line-height: 36px;
+  font-size: 14px;
   a {
     color: #337ab7;
     cursor: pointer;

src/utils/index.js

@@ -265,9 +265,3 @@ 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: 'dnd-list-demo',
+  name: 'dndList-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.app.cachedViews
+      return this.$store.state.tagsView.cachedViews
     }
   }
 }

src/views/example/table/inlineEditTable.vue

@@ -35,14 +35,18 @@
 
       <el-table-column min-width="300px" label="标题">
         <template slot-scope="scope">
-          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
-          <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
+          <template v-if="scope.row.edit">
+            <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
+            <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 :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-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</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>
 
@@ -84,12 +88,40 @@ export default {
       fetchList(this.listQuery).then(response => {
         const items = response.data.items
         this.list = items.map(v => {
-          this.$set(v, 'edit', false)
+          this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+          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,7 +13,8 @@ export default {
   name: 'AppMain',
   computed: {
     cachedViews() {
-      return this.$store.state.app.cachedViews
+      // console.log(this.$store.state.tagsView.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/TagsView.vue

@@ -15,7 +15,7 @@ export default {
   components: { ScrollPane },
   computed: {
     visitedViews() {
-      return this.$store.state.app.visitedViews
+      return this.$store.state.tagsView.visitedViews
     }
   },
   mounted() {