lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增keep-alive

This commit is contained in:
zouzhibing 2022-05-30 15:37:04 +08:00
parent 59a2e25de0
commit dd15e27ab3
28 changed files with 200 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},

21
src/layout/components/AppMain.vue
View File

@ -1,18 +1,27 @@
<template>
<section class="app-main" >
<router-view v-slot="{ Component,route }">
<transition name="fade-slide" mode="out-in">
<component :is="Component" :key="route.path"/>
</transition>
</router-view>
<router-view v-slot="{ Component,route }">
<transition name="fade-slide" mode="out-in">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.name" />
</keep-alive>
</transition>
</router-view>
<u-setting/>
</section>
</template>
<script lang="ts" setup>
import USetting from '@/components/u-setting/index.vue'
import {useStore} from "vuex";
import {computed, ref,} from 'vue'
const store = useStore()
const cachedViews = computed(()=>{
return store.state.tagsView.cachedViews
})
</script>
<style lang="scss" scoped>

12
src/layout/components/TagsView/ScrollPane.vue
View File

@ -75,13 +75,11 @@ onMounted(()=>{
position: relative;
overflow: hidden;
width: 100%;
::v-deep {
.el-scrollbar__bar {
bottom: 0px;
}
.el-scrollbar__wrap {
height: 35px;
}
::v-deep(.el-scrollbar__bar){
bottom: 0px;
}
::v-deep(.el-scrollbar__wrap){
height: 35px;
}
}
</style>

6
src/permission.js → src/permission.ts
View File

@ -14,8 +14,10 @@ router.beforeEach(async(to, from, next) => {
// 开启进度条
NProgress.start()
// set page title
document.title = to.meta.title
// 设置标题
if(typeof(to.meta.title) === 'string'){
document.title = to.meta.title ||'vue-admin-perfect'
}
// 确定用户是否已登录
const hasToken = getToken()

6
src/router/index.ts
View File

@ -20,7 +20,7 @@ interface extendRoute {
/**
* alwaysShow 如果设置为true，将始终显示根菜单，无论其子路由长度如何
* hidden 如果“hidden:true”不会显示在侧边栏中（默认值为false）
*
* keepAlive 设为true 缓存
*/
@ -65,7 +65,7 @@ const clipboardTable = {
path: 'index',
component: () => import('@/views/clipboard/index.vue'),
name: 'map',
meta: { title: '剪贴板', noCache: true , roles:['other'] ,icon: 'document-copy',}
meta: { title: '剪贴板', roles:['other'] ,icon: 'document-copy',}
},
]
@ -88,7 +88,7 @@ const zipRoutes = {
path: 'download',
component: () => import('@/views/zip/download.vue'),
name: 'download',
meta: { title: 'Zip', noCache: true , roles:['other'] ,icon: 'document-copy',}
meta: { title: 'Zip', roles:['other'] ,icon: 'document-copy',}
},
]

6
src/router/modules/charts.ts
View File

@ -23,19 +23,19 @@ const chartsRouter = {
path: 'migration',
component: () => import('@/views/charts/migration.vue'),
name: 'migration',
meta: { title: '迁徙图', noCache: true , roles:['other'] }
meta: { title: '迁徙图', roles:['other'] }
},
{
path: 'simple',
component: () => import('@/views/charts/simple.vue'),
name: 'charts-simple',
meta: { title: '简单图表', noCache: true , roles:['other'] }
meta: { title: '简单图表', roles:['other'] }
},
{
path: 'complex',
component: () => import('@/views/charts/complex.vue'),
name: 'charts-complex',
meta: { title: '复杂图表', noCache: true , roles:['other'] }
meta: { title: '复杂图表', roles:['other'] }
},
]
}

2
src/router/modules/chat.ts
View File

@ -16,7 +16,7 @@ const chartsRouter = {
path: 'index',
component: () => import('@/views/chat/index.vue'),
name: 'chat',
meta: { title: '聊天框', noCache: true,icon: 'chat-square' }
meta: { title: '聊天框', icon: 'chat-square' }
},
]
}

22
src/router/modules/components.ts
View File

@ -17,67 +17,67 @@ const componentsRouter = {
path: 'button',
component: () => import('@/views/components-demo/button.vue'),
name: 'button',
meta: { title: '按钮', noCache: true }
meta: { title: '按钮', }
},
{
path: 'upload',
component: () => import('@/views/components-demo/upload.vue'),
name: 'upload',
meta: { title: '上传图片', noCache: true }
meta: { title: '上传图片', }
},
{
path: 'form',
component: () => import('@/views/components-demo/form.vue'),
name: 'form',
meta: { title: '表单', noCache: true , roles:['other']}
meta: { title: '表单', roles:['other']}
},
{
path: 'link',
component: () => import('@/views/components-demo/link.vue'),
name: 'link',
meta: { title: '文字链接', noCache: true , roles:['other']}
meta: { title: '文字链接', roles:['other']}
},
{
path: 'radio',
component: () => import('@/views/components-demo/radio.vue'),
name: 'radio',
meta: { title: '单选框', noCache: true , roles:['other']}
meta: { title: '单选框', roles:['other']}
},
{
path: 'checkbox',
component: () => import('@/views/components-demo/checkbox.vue'),
name: 'checkbox',
meta: { title: '多选框', noCache: true , roles:['other']}
meta: { title: '多选框', roles:['other']}
},
{
path: 'input',
component: () => import('@/views/components-demo/input.vue'),
name: 'input',
meta: { title: '输入框', noCache: true , roles:['other']}
meta: { title: '输入框', roles:['other']}
},
{
path: 'inputnumber',
component: () => import('@/views/components-demo/inputnumber.vue'),
name: 'inputnumber',
meta: { title: '数字输入框', noCache: true , roles:['other']}
meta: { title: '数字输入框', roles:['other']}
},
{
path: 'timepicker',
component: () => import('@/views/components-demo/timepicker.vue'),
name: 'timepicker',
meta: { title: '时间选择器', noCache: true , roles:['other']}
meta: { title: '时间选择器', roles:['other']}
},
{
path: 'datetimepicker',
component: () => import('@/views/components-demo/datetimepicker.vue'),
name: 'datetimepicker',
meta: { title: '日期时间选择器', noCache: true , roles:['other']}
meta: { title: '日期时间选择器', roles:['other']}
},
{
path: 'scroll',
component: () => import('@/views/components-demo/scroll.vue'),
name: 'scroll',
meta: { title: '无限滚动', noCache: true }
meta: { title: '无限滚动', }
},

4
src/router/modules/error.ts
View File

@ -18,13 +18,13 @@ const errorRouter = {
path: '404',
component: () => import('@/views/error/404.vue'),
name: '404',
meta: { title: '404', noCache: true }
meta: { title: '404', }
},
{
path: '401',
component: () => import('@/views/error/401.vue'),
name: '401',
meta: { title: '401', noCache: true }
meta: { title: '401', }
},
]
}

8
src/router/modules/excel.ts
View File

@ -18,25 +18,25 @@ const excelRouter = {
path: 'export-excel',
component: () => import('@/views/excel/export-excel.vue'),
name: 'export-excel',
meta: { title: '导出 Excel', noCache: true }
meta: { title: '导出 Excel', }
},
{
path: 'export-merge-header',
component: () => import('@/views/excel/export-merge-header.vue'),
name: 'export-merge-header',
meta: { title: '导出 多级表头', noCache: true }
meta: { title: '导出 多级表头', }
},
{
path: 'upload-excel',
component: () => import('@/views/excel/upload-excel.vue'),
name: 'upload-excel',
meta: { title: '上传 Excel', noCache: true }
meta: { title: '上传 Excel', }
},
{
path: 'upload-style-excel',
component: () => import('@/views/excel/export-style-excel.vue'),
name: 'upload-style-excel',
meta: { title: '自定义样式导出 Excel', noCache: true }
meta: { title: '自定义样式导出 Excel', }
},
]
}

2
src/router/modules/externalLink.ts
View File

@ -11,7 +11,7 @@ const externalLink = {
{
path: 'https://github.com/zouzhibin/vue-admin-perfect',
name: 'external',
meta: { title: 'Github地址', noCache: true , icon: 'link' }
meta: { title: 'Github地址', icon: 'link' }
},
]
}

18
src/router/modules/other.ts
View File

@ -16,55 +16,55 @@ const othersRouter = {
path: 'editor',
component: () => import('@/views/other/editor.vue'),
name: 'editor',
meta: { title: '富文本编辑器', noCache: true, roles:['other'] }
meta: { title: '富文本编辑器', roles:['other'] }
},
{
path: 'mark-down',
component: () => import('@/views/other/mark-down.vue'),
name: 'mark-down',
meta: { title: 'markDown', noCache: true , roles:['other']}
meta: { title: 'markDown', roles:['other']}
},
{
path: 'print',
component: () => import('@/views/other/print.vue'),
name: 'print',
meta: { title: '打印', noCache: true }
meta: { title: '打印', }
},
{
path: 'cropper',
component: () => import('@/views/other/cropper/index.vue'),
name: 'cropper',
meta: { title: '头像裁剪', noCache: true }
meta: { title: '头像裁剪' }
},
{
path: 'grid-sorter',
component: () => import('@/views/other/grid-sorter.vue'),
name: 'grid-sorter',
meta: { title: '卡片拖拽', noCache: true }
meta: { title: '卡片拖拽', }
},
{
path: 'splitpane',
component: () => import('@/views/other/splitpane.vue'),
name: 'splitpane',
meta: { title: '分割模块', noCache: true }
meta: { title: '分割模块', }
},
{
path: 'qrcode',
component: () => import('@/views/other/qrcode.vue'),
name: 'qrcode',
meta: { title: '生成二维码', noCache: true }
meta: { title: '生成二维码', }
},
{
path: 'right-menu',
component: () => import('@/views/other/right-menu.vue'),
name: 'right-menu',
meta: { title: '右键菜单', noCache: true }
meta: { title: '右键菜单', }
},
{
path: 'count',
component: () => import('@/views/other/count.vue'),
name: 'count',
meta: { title: '数字自增长', noCache: true }
meta: { title: '数字自增长', }
},
]
}

2
src/router/modules/permission.ts
View File

@ -17,7 +17,7 @@ const permissionRouter = {
path: 'page',
component: () => import('@/views/permission/page.vue'),
name: 'page',
meta: { title: '页面权限', noCache: true,icon: 'trend-charts', roles:['other'] }
meta: { title: '页面权限', icon: 'trend-charts', roles:['other'] }
},
]
}

6
src/router/modules/table.ts
View File

@ -17,19 +17,19 @@ const tableRouter = {
path: 'comprehensive',
component: () => import('@/views/table/comprehensive.vue'),
name: 'comprehensive',
meta: { title: '综合表格', noCache: true }
meta: { title: '综合表格', keepAlive: true }
},
{
path: 'inline-table',
component: () => import('@/views/table/inline-edit-table.vue'),
name: 'inline-table',
meta: { title: '行内编辑', noCache: true }
meta: { title: '行内编辑', keepAlive: true }
},
{
path: 'edit-table',
component: () => import('@/views/table/edit.vue'),
name: 'edit-table',
meta: { title: '可编辑表格', noCache: true }
meta: { title: '可编辑表格', keepAlive: true }
},
// {
// path: 'multi-table',

24
src/store/modules/tagsView.ts
View File

@ -13,6 +13,11 @@ const mutations = {
title: view.meta.title || 'no-name'
})
)
if (view.meta.keepAlive) {
state.cachedViews.push(view.name)
console.log('======触发=======',state.cachedViews)
}
},
REMOVE_VISITED_VIEW: (state, routes) => {
state.visitedViews = state.visitedViews.filter(item=>!routes.includes(item.path))
@ -34,12 +39,25 @@ const mutations = {
break
}
}
for (const i of state.cachedViews) {
if (i === view.name) {
const index = state.cachedViews.indexOf(i)
state.cachedViews.splice(index, 1)
break
}
}
},
DEL_CACHED_VIEW: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
index > -1 && state.cachedViews.splice(index, 1)
},
DEL_ALL_VIEWS: (state) => {
state.visitedViews = []
state.cachedViews = []
}
}
const actions = {
@ -81,6 +99,12 @@ const actions = {
},
clearVisitedView({ commit, state }){
commit('CLEAR_VISITED_VIEW')
},
delAllViews({ commit, state }) {
return new Promise((resolve) => {
commit('DEL_ALL_VIEWS')
resolve([...state.visitedViews])
})
}
}

2
src/views/charts/components/migration/index.vue
View File

@ -119,7 +119,7 @@ var convertToLineData = function(data, gps) {
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var toCoord = geoCoordMap[dataItem.name];
debugger;
// debugger;
var fromCoord = gps; //郑州
// var toCoord = geoGps[Math.random()*3];
if (fromCoord && toCoord) {

10
src/views/chat/components/u-chartBox/index.vue
View File

@ -251,11 +251,9 @@
min-height: 120px;
flex: 1;
background: #f7f6f4;
::v-deep{
.at-logo{
padding-right: 5px;
vertical-align: text-bottom;
}
::v-deep(.at-logo){
padding-right: 5px;
vertical-align: text-bottom;
}
}
@ -266,7 +264,7 @@
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
::v-deep .el-button{
::v-deep(.el-button){
padding: 8px 20px;
margin-right: 15px;
}

1
src/views/components-demo/upload.vue
View File

@ -134,7 +134,6 @@
padding: 0;
width: 146px;
height: 146px;
display: inline-flex;
}
</style>

4
src/views/home/index.vue
View File

@ -168,10 +168,8 @@
}
}
.custom{
::v-deep{
.el-card__body{
::v-deep(.el-card__body){
padding: 0;
}
}
}
.item {

20
src/views/login/index.vue
View File

@ -115,17 +115,15 @@
<style lang="scss" scoped>
$dark_gray:#889aa4;
::v-deep{
input {
background: transparent;
border: 0;
-webkit-appearance: none;
border-radius: 0;
padding: 12px 5px 12px 15px;
color: #fff;
height: 47px;
caret-color: #fff;
}
::v-deep(input){
background: transparent;
border: 0;
-webkit-appearance: none;
border-radius: 0;
padding: 12px 5px 12px 15px;
color: #fff;
height: 47px;
caret-color: #fff;
}
.login-box{
width: 80%;

6
src/views/other/cropper/cropper1.vue
View File

@ -164,10 +164,8 @@
text-align: center;
}
::v-deep{
.el-button{
margin-top: 15px;
}
::v-deep(.el-button){
margin-top: 15px;
}
.m-cropper{
display: flex;

6
src/views/other/cropper/cropper2.vue
View File

@ -199,10 +199,8 @@
text-align: center;
}
::v-deep{
.el-button{
margin-top: 15px;
}
::v-deep(.el-button){
margin-top: 15px;
}
.m-cropper{
width: 100%;

6
src/views/other/cropper/index.vue
View File

@ -182,10 +182,8 @@
text-align: center;
}
::v-deep{
.el-button{
margin-top: 15px;
}
::v-deep(.el-button){
margin-top: 15px;
}
.m-cropper{
width: 100%;

17
src/views/other/splitpane.vue
View File

@ -48,15 +48,12 @@
.item5{
background: rgb(72, 239, 205);
}
::v-deep {
.splitpanes__splitter{
min-height: 6px;
cursor: row-resize;
background: white;
}
.splitpanes__splitter {
min-width: 6px;
}
::v-deep(.splitpanes__splitter){
min-width: 6px;
}
::v-deep(.splitpanes__splitter) {
min-height: 6px;
cursor: row-resize;
background: white;
}
</style>

8
src/views/table/components/edit.vue
View File

@ -219,14 +219,6 @@
}
}
const formInline = reactive({
user: '',
region: '',
})
const onSubmit = () => {
console.log('submit!')
}
const deleteAction = (row)=>{
row.visible = false

3
src/views/table/comprehensive.vue
View File

@ -291,6 +291,9 @@ import {ref, reactive, onMounted} from "vue";
},500)
})
</script>
<script lang="ts">
export default { name: 'comprehensive' };
</script>
<style scoped>
.edit-input {
padding-right: 100px;

6
src/views/table/edit.vue
View File

@ -167,9 +167,7 @@
</script>
<style lang="scss" scoped>
::v-deep{
.el-divider--horizontal{
margin: 10px 0;
}
::v-deep(.el-divider--horizontal){
margin: 10px 0;
}
</style>

157
src/views/table/inline-edit-table.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="inline-edit-table">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.user" placeholder="请输入姓名" />
<el-input v-model="formInline1.username" placeholder="请输入姓名" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
@ -86,93 +86,96 @@
</div>
</div>
</template>
<script lang="ts" setup>
import {computed, ref} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
const data = [
]
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
<script lang="ts" setup >
import {computed, ref} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
const data = [
]
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
const currentPage1 = ref(1)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
currentPage1.value = val
}
const transData = ref(data)
const loading = ref(false)
const list = computed(()=>{
let arr = JSON.parse(JSON.stringify(transData.value))
return arr.splice((currentPage1.value-1)*10,10)
})
}
const currentPage1 = ref(1)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
currentPage1.value = val
}
const transData = ref(data)
const loading = ref(false)
const list = computed(()=>{
let arr = JSON.parse(JSON.stringify(transData.value))
return arr.splice((currentPage1.value-1)*10,10)
})
const listLoading = ref(false)
const listLoading = ref(false)
const confirmEdit = (row)=>{
row.edit = false
}
const confirmEdit = (row)=>{
row.edit = false
}
const cancelEdit = (row)=>{
row.edit = false
}
const cancelEdit = (row)=>{
row.edit = false
}
import { reactive } from 'vue'
import { reactive } from 'vue'
const formInline = reactive({
user: '',
region: '',
})
const formInline1 = reactive({
username: '',
})
const onSubmit = () => {
console.log('submit!')
loading.value = true
setTimeout(()=>{
loading.value = false
},500)
}
const onSubmit = () => {
console.log('submit!')
loading.value = true
setTimeout(()=>{
loading.value = false
},500)
}
const deleteAction = (row)=>{
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
transData.value = transData.value.filter(item=>item.id!==row.id)
ElMessage.success('删除成功')
})
.catch(() => {
const deleteAction = (row)=>{
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
transData.value = transData.value.filter(item=>item.id!==row.id)
ElMessage.success('删除成功')
})
.catch(() => {
})
})
}
}
</script>
<script lang="ts">
export default { name: 'inline-table' };
</script>
<style scoped>
.edit-input {