blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 07:27:06 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/iczer/vue-antd-admin

Browse Source 
 Conflicts:
	yarn.lock
This commit is contained in:
iczer 2022-09-21 16:26:00 +08:00
commit c0aec854af
12 changed files with 151 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/advance/authority.md
View File

@ -31,7 +31,7 @@ permission = {
operation: ['add', 'delete', 'edit', 'close'] //权限下的操作权限
}
```
你也可以设置 role 的值为字符串，比如 permission = 'form', 它等同于：
你也可以设置 permission 的值为字符串，比如 permission = 'form', 它等同于：
```js
permission = {
id: 'form'

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vue-antd-admin",
"version": "0.7.2",
"version": "0.7.4",
"homepage": "https://iczer.github.io/vue-antd-admin",
"private": true,
"scripts": {

43
src/components/menu/menu.js
View File

@ -38,6 +38,26 @@ import {getI18nKey} from '@/utils/routerUtil'
const {Item, SubMenu} = Menu
const resolvePath = (path, params = {}) => {
let _path = path
Object.entries(params).forEach(([key, value]) => {
_path = _path.replace(new RegExp(`:${key}`, 'g'), value)
})
return _path
}
const toRoutesMap = (routes) => {
const map = {}
routes.forEach(route => {
map[route.fullPath] = route
if (route.children && route.children.length > 0) {
const childrenMap = toRoutesMap(route.children)
Object.assign(map, childrenMap)
}
})
return map
}
export default {
name: 'IMenu',
props: {
@ -73,6 +93,9 @@ export default {
computed: {
menuTheme() {
return this.theme == 'light' ? this.theme : 'dark'
},
routesMap() {
return toRoutesMap(this.options)
}
},
created () {
@ -132,7 +155,8 @@ export default {
},
renderMenuItem: function (h, menu) {
let tag = 'router-link'
let config = {props: {to: menu.fullPath}, attrs: {style: 'overflow:hidden;white-space:normal;text-overflow:clip;'}}
const path = resolvePath(menu.fullPath, menu.meta.params)
let config = {props: {to: {path, query: menu.meta.query}, }, attrs: {style: 'overflow:hidden;white-space:normal;text-overflow:clip;'}}
if (menu.meta && menu.meta.link) {
tag = 'a'
config = {attrs: {style: 'overflow:hidden;white-space:normal;text-overflow:clip;', href: menu.meta.link, target: '_blank'}}
@ -200,16 +224,23 @@ export default {
})
},
updateMenu () {
const matchedRoutes = this.$route.matched.filter(item => item.path !== '')
this.selectedKeys = this.getSelectedKey(this.$route)
let openKeys = matchedRoutes.map(item => item.path)
this.selectedKeys = this.getSelectedKeys()
let openKeys = this.selectedKeys.filter(item => item !== '')
openKeys = openKeys.slice(0, openKeys.length -1)
if (!fastEqual(openKeys, this.sOpenKeys)) {
this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.sOpenKeys = openKeys
}
},
getSelectedKey (route) {
return route.matched.map(item => item.path)
getSelectedKeys() {
let matches = this.$route.matched
const route = matches[matches.length - 1]
let chose = this.routesMap[route.path]
if (chose && chose.meta && chose.meta.highlight) {
chose = this.routesMap[chose.meta.highlight]
const resolve = this.$router.resolve({path: chose.fullPath})
matches = (resolve.resolved && resolve.resolved.matched) || matches
}
return matches.map(item => item.path)
}
},
render (h) {

5
src/layouts/header/HeaderNotice.vue
View File

@ -56,9 +56,10 @@ export default {
this.loading = false
return
}
this.loadding = true
if (this.show) return
this.loading = true
setTimeout(() => {
this.loadding = false
this.loading = false
}, 1000)
}
}

14
src/layouts/tabs/TabsHead.vue
View File

@ -14,11 +14,11 @@
:type="fixedTabs ? 'lock' : 'unlock'"
/>
</a-tooltip>
<a-tab-pane v-for="page in pageList" :key="page.fullPath">
<div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.fullPath, e)">
<a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.fullPath !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
<div class="title" @click="onTabClick(page.fullPath)" >{{pageName(page)}}</div>
<a-icon v-if="!page.unclose" @click="onClose(page.fullPath)" class="icon-close" type="close"/>
<a-tab-pane v-for="page in pageList" :key="page.path">
<div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
<a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
<div class="title" @click="onTabClick(page.path)" >{{pageName(page)}}</div>
<a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
</div>
</a-tab-pane>
</a-tabs>
@ -89,7 +89,7 @@
this.$emit('close', key)
},
onRefresh(page) {
this.$emit('refresh', page.fullPath, page)
this.$emit('refresh', page.path, page)
},
onContextmenu(pageKey, e) {
this.$emit('contextmenu', pageKey, e)
@ -185,4 +185,4 @@
.virtual-tabs{
height: 48px;
}
</style>
</style>

43
src/layouts/tabs/TabsView.vue
View File

@ -13,7 +13,7 @@
<div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
<a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
<router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
<router-view v-if="!refreshing" ref="tabContent" :key="$route.path" />
</a-keep-alive>
<router-view ref="tabContent" v-else-if="!refreshing" />
</page-toggle-transition>
@ -62,10 +62,10 @@ export default {
this.loadCacheConfig(this.$router?.options?.routes)
this.loadCachedTabs()
const route = this.$route
if (this.pageList.findIndex(item => item.fullPath === route.fullPath) === -1) {
if (this.pageList.findIndex(item => item.path === route.path) === -1) {
this.pageList.push(this.createPage(route))
}
this.activePage = route.fullPath
this.activePage = route.path
if (this.multiPage) {
this.$nextTick(() => {
this.setCachedKey(route)
@ -86,10 +86,13 @@ export default {
this.loadCacheConfig(val)
},
'$route': function (newRoute) {
this.activePage = newRoute.fullPath
this.activePage = newRoute.path
const page = this.pageList.find(item => item.path === newRoute.path)
if (!this.multiPage) {
this.pageList = [this.createPage(newRoute)]
} else if (this.pageList.findIndex(item => item.fullPath === newRoute.fullPath) === -1) {
} else if (page) {
page.fullPath = newRoute.fullPath
} else if (!page) {
this.pageList.push(this.createPage(newRoute))
}
if (this.multiPage) {
@ -113,25 +116,26 @@ export default {
methods: {
changePage (key) {
this.activePage = key
this.$router.push(key)
const page = this.pageList.find(item => item.path === key)
this.$router.push(page.fullPath)
},
remove (key, next) {
if (this.pageList.length === 1) {
return this.$message.warning(this.$t('warn'))
}
//清除缓存
let index = this.pageList.findIndex(item => item.fullPath === key)
let index = this.pageList.findIndex(item => item.path === key)
this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
if (next) {
this.$router.push(next)
} else if (key === this.activePage) {
index = index >= this.pageList.length ? this.pageList.length - 1 : index
this.activePage = this.pageList[index].fullPath
this.activePage = this.pageList[index].path
this.$router.push(this.activePage)
}
},
refresh (key, page) {
page = page || this.pageList.find(item => item.fullPath === key)
page = page || this.pageList.find(item => item.path === key)
page.loading = true
this.clearCache(page)
if (key === this.activePage) {
@ -159,7 +163,7 @@ export default {
},
closeOthers (pageKey) {
// 清除缓存
const clearPages = this.pageList.filter(item => item.fullPath !== pageKey && !item.unclose)
const clearPages = this.pageList.filter(item => item.path !== pageKey && !item.unclose)
this.clearCaches = clearPages.map(item => item.cachedKey)
this.pageList = this.pageList.filter(item => !clearPages.includes(item))
// 判断跳转
@ -169,25 +173,25 @@ export default {
}
},
closeLeft (pageKey) {
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
const index = this.pageList.findIndex(item => item.path === pageKey)
// 清除缓存
const clearPages = this.pageList.filter((item, i) => i < index && !item.unclose)
this.clearCaches = clearPages.map(item => item.cachedKey)
this.pageList = this.pageList.filter(item => !clearPages.includes(item))
// 判断跳转
if (!this.pageList.find(item => item.fullPath === this.activePage)) {
if (!this.pageList.find(item => item.path === this.activePage)) {
this.activePage = pageKey
this.$router.push(this.activePage)
}
},
closeRight (pageKey) {
// 清除缓存
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
const index = this.pageList.findIndex(item => item.path === pageKey)
const clearPages = this.pageList.filter((item, i) => i > index && !item.unclose)
this.clearCaches = clearPages.map(item => item.cachedKey)
this.pageList = this.pageList.filter(item => !clearPages.includes(item))
// 判断跳转
if (!this.pageList.find(item => item.fullPath === this.activePage)) {
if (!this.pageList.find(item => item.path === this.activePage)) {
this.activePage = pageKey
this.$router.push(this.activePage)
}
@ -234,7 +238,8 @@ export default {
closePageListener(event) {
const {closeRoute, nextRoute} = event.detail
const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
this.remove(closePath, nextRoute)
const path = closePath && closePath.split('?')[0]
this.remove(path, nextRoute)
},
/**
* 页面刷新事件监听
@ -242,7 +247,8 @@ export default {
*/
refreshPageListener(event) {
const {pageKey} = event.detail
this.refresh(pageKey)
const path = pageKey && pageKey.split('?')[0]
this.refresh(path)
},
/**
* 页面 unload 事件监听器，添加页签到 session 缓存，用于刷新时保留页签
@ -255,6 +261,7 @@ export default {
return {
keyPath: route.matched[route.matched.length - 1].path,
fullPath: route.fullPath, loading: false,
path: route.path,
title: route.meta && route.meta.page && route.meta.page.title,
unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
}
@ -264,7 +271,7 @@ export default {
* @param route 页面对应的路由
*/
setCachedKey(route) {
const page = this.pageList.find(item => item.fullPath === route.fullPath)
const page = this.pageList.find(item => item.path === route.path)
page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
if (!page._init_) {
const vnode = this.$refs.tabContent.$vnode
@ -294,7 +301,7 @@ export default {
routes.forEach(item => {
const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
if (!cacheAble) {
this.excludeKeys.push(new RegExp(`${item.fullPath}\\d+$`))
this.excludeKeys.push(new RegExp(`${item.path}\\d+$`))
}
if (item.children) {
this.loadCacheConfig(item.children, cacheAble)

16
src/pages/Demo.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div>
<p>query: {{$route.query}}</p>
<p>params: {{$route.params}}</p>
</div>
</template>
<script>
export default {
name: 'Demo'
}
</script>
<style scoped>
</style>

1
src/pages/list/QueryList.vue
View File

@ -117,6 +117,7 @@
<a @click="deleteRecord(record.key)" v-auth="`delete`">
<a-icon type="delete" />删除2
</a>
<router-link :to="`/list/query/detail/${record.key}`" >详情</router-link>
</div>
<template slot="statusTitle">
<a-icon @click.native="onStatusTitleClick" type="info-circle" />

31
src/router/config.js
View File

@ -95,6 +95,15 @@ const options = {
},
component: () => import('@/pages/list/QueryList'),
},
{
path: 'query/detail/:id',
name: '查询详情',
meta: {
highlight: '/list/query',
invisible: true
},
component: () => import('@/pages/Demo')
},
{
path: 'primary',
name: '标准列表',
@ -230,6 +239,28 @@ const options = {
},
component: () => import('@/pages/form/basic')
},
{
name: '带参菜单',
path: 'router/query',
meta: {
icon: 'project',
query: {
name: '菜单默认参数'
}
},
component: () => import('@/pages/Demo')
},
{
name: '动态路由菜单',
path: 'router/dynamic/:id',
meta: {
icon: 'project',
params: {
id: 123
}
},
component: () => import('@/pages/Demo')
},
{
name: 'Ant Design Vue',
path: 'antdv',

4
src/store/modules/setting.js
View File

@ -30,8 +30,8 @@ export default {
}
return state.menuData
},
firstMenu(state) {
const {menuData} = state
firstMenu(state, getters) {
const {menuData} = getters
if (menuData.length > 0 && !menuData[0].fullPath) {
formatFullPath(menuData)
}

31
src/utils/routerUtil.js
View File

@ -44,17 +44,36 @@ function parseRoutes(routesConfig, routerMap) {
router = typeof item === 'string' ? {path: item, name: item} : item
}
// 从 router 和 routeCfg 解析路由
const meta = {
authority: router.authority,
icon: router.icon,
page: router.page,
link: router.link,
params: router.params,
query: router.query,
...router.meta
}
const cfgMeta = {
authority: routeCfg.authority,
icon: routeCfg.icon,
page: routeCfg.page,
link: routeCfg.link,
params: routeCfg.params,
query: routeCfg.query,
...routeCfg.meta
}
Object.keys(cfgMeta).forEach(key => {
if (cfgMeta[key] === undefined || cfgMeta[key] === null || cfgMeta[key] === '') {
delete cfgMeta[key]
}
})
Object.assign(meta, cfgMeta)
const route = {
path: routeCfg.path || router.path || routeCfg.router,
name: routeCfg.name || router.name,
component: router.component,
redirect: routeCfg.redirect || router.redirect,
meta: {
authority: routeCfg.authority || router.authority || routeCfg.meta?.authority || router.meta?.authority || '*',
icon: routeCfg.icon || router.icon || routeCfg.meta?.icon || router.meta?.icon,
page: routeCfg.page || router.page || routeCfg.meta?.page || router.meta?.page,
link: routeCfg.link || router.link || routeCfg.meta?.link || router.meta?.link
}
meta: {...meta, authority: meta.authority || '*'}
}
if (routeCfg.invisible || router.invisible) {
route.meta.invisible = true

4
yarn.lock
View File

@ -10425,8 +10425,8 @@ webpack-sources@*, webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sourc
webpack-theme-color-replacer@1.3.18:
version "1.3.18"
resolved "https://registry.npm.taobao.org/webpack-theme-color-replacer/download/webpack-theme-color-replacer-1.3.18.tgz#98b70eab698e40b06ea3c56a3db8590f7ccef847"
integrity sha1-mLcOq2mOQLBuo8VqPbhZD3zO+Ec=
resolved "https://registry.npmjs.org/webpack-theme-color-replacer/-/webpack-theme-color-replacer-1.3.18.tgz#98b70eab698e40b06ea3c56a3db8590f7ccef847"
integrity sha512-z7qM3opvuSjAyJd0eLMOpZhH56r+fFctczWG6xnhUSeRsvbCg/EnFdsYoGL3xYJZNANvwLlggpJxnAcuFV5a6Q==
dependencies:
webpack-sources "*"