refactor:add keep-alive && component add name

This commit is contained in:
Pan 2017-10-31 10:49:24 +08:00
parent a932272b8f
commit 1ae31fdd45
28 changed files with 147 additions and 63 deletions

View file

@ -9,11 +9,14 @@ Vue.use(Router)
import Layout from '../views/layout/Layout'
/**
* icon : the icon show in the sidebar
* hidden : if `hidden:true` will not show in the sidebar
* title : the name show in submenu and levelbar
* redirect : if `redirect:noredirect` will no redirct in the levelbar
* meta : { role: ['admin'] } will control the page role
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* redirect: noredirect if `redirect:noredirect` will no redirct in the levelbar
* meta : {
role: ['admin'] will control the page role
title: 'title' the name show in submenu and levelbar
icon: 'svg-name' the icon show in the sidebar,
noCache: true if fasle ,the page will no be cached(default is false)
}
**/
export const constantRouterMap = [
@ -119,9 +122,9 @@ export const asyncRouterMap = [
},
children: [
{ path: 'index', component: _import('charts/index'), name: 'chartsIndex', meta: { title: '介绍' }},
{ path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboard', meta: { title: '键盘图表' }},
{ path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboard2', meta: { title: '键盘图表2' }},
{ path: 'line', component: _import('charts/line'), name: 'line', meta: { title: '折线图' }},
{ path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: '键盘图表' }},
{ path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboardChart2', meta: { title: '键盘图表2' }},
{ path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: '折线图' }},
{ path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: '混合图表' }}
]
},
@ -149,12 +152,25 @@ export const asyncRouterMap = [
{ path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: '动态table' }},
{ path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: '拖拽table' }},
{ path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'table内编辑' }},
{ path: 'table', component: _import('example/table/table'), name: 'tableDemo', meta: { title: '综合table' }}
{ path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: '综合table' }}
]
},
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }},
{ path: 'form/edit', icon: 'form', component: _import('example/form'), name: 'formEdit', meta: { title: '编辑Form', isEdit: true }},
{ path: 'form/create', icon: 'form', component: _import('example/form'), name: 'FormCreate', meta: { title: '创建Form' }}
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }}
]
},
{
path: '/form',
component: Layout,
redirect: 'noredirect',
name: 'form',
meta: {
title: '表单',
icon: 'form'
},
children: [
{ path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: '创建表单', icon: 'table' }},
{ path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: '编辑表单', icon: 'table' }}
]
},
@ -168,8 +184,8 @@ export const asyncRouterMap = [
icon: '404'
},
children: [
{ path: '401', component: _import('errorPage/401'), name: '401', meta: { title: '401' }},
{ path: '404', component: _import('errorPage/404'), name: '404', meta: { title: '404' }}
{ path: '401', component: _import('errorPage/401'), name: 'page401', meta: { title: '401', noCache: true }},
{ path: '404', component: _import('errorPage/404'), name: 'page404', meta: { title: '404', noCache: true }}
]
},
@ -177,7 +193,7 @@ export const asyncRouterMap = [
path: '/error-log',
component: Layout,
redirect: 'noredirect',
children: [{ path: 'log', component: _import('errlog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}]
children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}]
},
{
@ -190,9 +206,9 @@ export const asyncRouterMap = [
icon: 'excel'
},
children: [
{ path: 'export-excel', component: _import('excel/index'), name: 'exportExcel', meta: { title: 'export excel' }},
{ path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected' }},
{ path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel' }}
{ path: 'export-excel', component: _import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'export excel', noCache: true }},
{ path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected', noCache: true }},
{ path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel', noCache: true }}
]
},
@ -214,7 +230,7 @@ export const asyncRouterMap = [
path: '/clipboard',
component: Layout,
redirect: 'noredirect',
children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard', meta: { title: 'clipboard', icon: 'clipboard' }}]
children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboard', icon: 'clipboard' }}]
},
{ path: '*', redirect: '/404', hidden: true }

View file

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

View file

@ -5,7 +5,8 @@ const app = {
sidebar: {
opened: !+Cookies.get('sidebarStatus')
},
visitedViews: []
visitedViews: [],
cachedViews: []
},
mutations: {
TOGGLE_SIDEBAR: state => {
@ -18,17 +19,28 @@ const app = {
},
ADD_VISITED_VIEWS: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push({ name: view.name, path: view.path })
state.visitedViews.push({
name: view.name,
path: view.path
})
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
},
DEL_VISITED_VIEWS: (state, view) => {
let index
for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) {
index = i
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
}
}
state.visitedViews.splice(index, 1)
}
},
actions: {

View file

@ -1,16 +1,17 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboard-chart height='100%' width='100%'></keyboard-chart>
<chart height='100%' width='100%'></chart>
</div>
</div>
</template>
<script>
import keyboardChart from '@/components/Charts/keyboard'
import Chart from '@/components/Charts/keyboard'
export default {
components: { keyboardChart }
name: 'keyboardChart',
components: { Chart }
}
</script>

View file

@ -1,16 +1,17 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboard-chart2 height='100%' width='100%'></keyboard-chart2>
<chart height='100%' width='100%'></chart>
</div>
</div>
</template>
<script>
import keyboardChart2 from '@/components/Charts/keyboard2'
import Chart from '@/components/Charts/keyboard2'
export default {
components: { keyboardChart2 }
name: 'keyboardChart2',
components: { Chart }
}
</script>

View file

@ -1,16 +1,17 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<line-marker height='100%' width='100%'></line-marker>
<chart height='100%' width='100%'></chart>
</div>
</div>
</template>
<script>
import lineMarker from '@/components/Charts/lineMarker'
import Chart from '@/components/Charts/lineMarker'
export default {
components: { lineMarker }
name: 'lineChart',
components: { Chart }
}
</script>

View file

@ -1,16 +1,17 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<mix-chart height='100%' width='100%'></mix-chart>
<chart height='100%' width='100%'></chart>
</div>
</div>
</template>
<script>
import mixChart from '@/components/Charts/mixChart'
import Chart from '@/components/Charts/mixChart'
export default {
components: { mixChart }
name: 'mixChart',
components: { Chart }
}
</script>

View file

@ -18,6 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
export default {
name: 'clipboardDemo',
directives: {
clipboard
},

View file

@ -14,6 +14,7 @@
import errCode from './errcode'
export default {
name: 'errorLog',
components: { errCode }
}
</script>

View file

@ -30,6 +30,7 @@
import errGif from '@/assets/401_images/401.gif'
export default {
name: 'page401',
data() {
return {
errGif: errGif + '?' + +new Date(),

View file

@ -23,6 +23,7 @@ import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
export default {
name: 'page404',
data() {
return {
img_404,

View file

@ -15,7 +15,7 @@
import tabPane from './components/tabPane'
export default {
name: 'tabDemo',
name: 'tab',
components: { tabPane },
data() {
return {

View file

@ -168,7 +168,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
}, {})
export default {
name: 'table_demo',
name: 'complexTable',
directives: {
waves
},

View file

@ -64,7 +64,7 @@ import { fetchList } from '@/api/article'
import Sortable from 'sortablejs'
export default {
name: 'drag-table_demo',
name: 'dragTable',
data() {
return {
list: null,

View file

@ -13,6 +13,7 @@ import fixedThead from './fixedThead'
import unfixedThead from './unfixedThead'
export default {
name: 'dynamicTable',
components: { fixedThead, unfixedThead }
}
</script>

View file

@ -1,5 +1,18 @@
<template>
<keep-alive>
<transition name="fade" mode="out-in">
<keep-alive :include='cachedViews'>
<router-view></router-view>
</keep-alive>
</transition>
</template>
<script>
export default {
name: 'TableMain',
computed: {
cachedViews() {
return this.$store.state.app.cachedViews
}
}
}
</script>

View file

@ -54,7 +54,7 @@
import { fetchList } from '@/api/article'
export default {
name: 'inline_edit-table_demo',
name: 'inlineEditTable',
data() {
return {
list: null,

View file

@ -37,6 +37,7 @@ import { fetchList } from '@/api/article'
import { parseTime } from 'utils'
export default {
name: 'exportExcel',
data() {
return {
list: null,

View file

@ -38,6 +38,7 @@
import { fetchList } from '@/api/article'
export default {
name: 'selectExcel',
data() {
return {
list: null,

View file

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<upload-excel @on-selected-file='selected'></upload-excel>
<upload-excel-component @on-selected-file='selected'></upload-excel-component>
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
<el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
</el-table-column>
@ -9,10 +9,11 @@
</template>
<script>
import uploadExcel from 'components/UploadExcel/index.vue'
import UploadExcelComponent from 'components/UploadExcel/index.vue'
export default {
components: { uploadExcel },
name: 'uploadExcel',
components: { UploadExcelComponent },
data() {
return {
tableData: [],

View file

@ -148,6 +148,12 @@ const defaultForm = {
export default {
name: 'articleDetail',
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
const validateRequire = (rule, value, callback) => {
if (value === '') {
@ -196,25 +202,13 @@ export default {
computed: {
contentShortLength() {
return this.postForm.content_short.length
},
isEdit() {
return this.$route.meta.isEdit // meta
// return this.$route.path.indexOf('edit') !== -1 //
}
},
created() {
if (this.isEdit) {
this.fetchData()
}
},
watch: {
//
'$route'(to, from) {
if (this.isEdit) {
this.fetchData()
} else {
this.postForm = defaultForm
}
this.postForm = Object.assign({}, defaultForm)
}
},
methods: {

13
src/views/form/create.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<article-detail :is-edit='false'></article-detail>
</template>
<script>
import ArticleDetail from './components/ArticleDetail'
export default {
name: 'createForm',
components: { ArticleDetail }
}
</script>

13
src/views/form/edit.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<article-detail :is-edit='true'></article-detail>
</template>
<script>
import ArticleDetail from './components/ArticleDetail'
export default {
name: 'editForm',
components: { ArticleDetail }
}
</script>

View file

@ -1,7 +1,7 @@
<template>
<section class="app-main" style="min-height: 100%">
<transition name="fade" mode="out-in">
<keep-alive>
<keep-alive :include='cachedViews'>
<router-view></router-view>
</keep-alive>
</transition>
@ -10,6 +10,14 @@
<script>
export default {
name: 'AppMain'
name: 'AppMain',
computed: {
cachedViews() {
return this.$store.state.app.cachedViews
}
// key() {
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
}
</script>

View file

@ -11,7 +11,7 @@
export default {
computed: {
visitedViews() {
return this.$store.state.app.visitedViews.slice(-6)
return this.$store.state.app.visitedViews
}
},
mounted() {

View file

@ -48,6 +48,7 @@ import { toggleClass } from '@/utils'
import '@/assets/custom-theme/index.css' // element-ui css
export default {
name: 'theme',
data() {
return {
theme: false,

View file

@ -36,6 +36,7 @@
import { fetchList } from '@/api/article'
export default {
name: 'exportZip',
data() {
return {
list: null,