Skip to content

A
ant-design-pro-vue
Commit 55d26ac5 by musnow
Options

update indexOf rewrite to includes

parent 0b6fbe66
Showing with 93 additions and 102 deletions
src/components/menu/index.js
......@@ -26,7 +26,7 @@ export default {
default: false
}
},
data () {
data() {
return {
openKeys: [],
selectedKeys: [],
......@@ -34,17 +34,17 @@ export default {
}
},
computed: {
rootSubmenuKeys: (vm) => {
rootSubmenuKeys: vm => {
const keys = []
vm.menu.forEach(item => keys.push(item.path))
return keys
}
},
created () {
created() {
this.updateMenu()
},
watch: {
collapsed (val) {
collapsed(val) {
if (val) {
this.cachedOpenKeys = this.openKeys
this.openKeys = []
......@@ -52,94 +52,79 @@ export default {
this.openKeys = this.cachedOpenKeys
}
},
'$route': function () {
$route: function() {
this.updateMenu()
}
},
methods: {
renderIcon: function (h, icon) {
return icon === 'none' || icon === undefined ? null
: h(Icon, { props: { type: icon !== undefined ? icon : '' } })
},
renderMenuItem: function (h, menu, pIndex, index) {
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index },
[
h(
'router-link',
{ attrs: { to: { name: menu.name } } },
[
renderIcon: function(h, icon) {
return icon === 'none' || icon === undefined ? null : h(Icon, { props: { type: icon !== undefined ? icon : '' } })
},
renderMenuItem: function(h, menu, pIndex, index) {
return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [
h('router-link', { attrs: { to: { name: menu.name } } }, [
this.renderIcon(h, menu.meta.icon),
h('span', [ menu.meta.title ])
]
)
]
)
h('span', [menu.meta.title])
])
])
},
renderSubMenu: function (h, menu, pIndex, index) {
renderSubMenu: function(h, menu, pIndex, index) {
const this2_ = this
const subItem = [ h('span',
{ slot: 'title' },
[
this.renderIcon(h, menu.meta.icon),
h('span', [ menu.meta.title ])
]
) ]
const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])]
const itemArr = []
const pIndex_ = pIndex + '_' + index
if (!menu.alwaysShow) {
menu.children.forEach(function (item, i) {
menu.children.forEach(function(item, i) {
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
})
}
return h(
SubMenu,
{ key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index },
subItem.concat(itemArr)
)
return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr))
},
renderItem: function (h, menu, pIndex, index) {
renderItem: function(h, menu, pIndex, index) {
if (!menu.hidden) {
return menu.children && !menu.alwaysShow ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
return menu.children && !menu.alwaysShow
? this.renderSubMenu(h, menu, pIndex, index)
: this.renderMenuItem(h, menu, pIndex, index)
}
},
renderMenu: function (h, menuTree) {
renderMenu: function(h, menuTree) {
const this2_ = this
const menuArr = []
menuTree.forEach(function (menu, i) {
menuTree.forEach(function(menu, i) {
if (!menu.hidden) {
menuArr.push(this2_.renderItem(h, menu, '0', i))
}
})
return menuArr
},
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
onOpenChange(openKeys) {
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
this.openKeys = openKeys
} else {
this.openKeys = latestOpenKey ? [ latestOpenKey ] : []
this.openKeys = latestOpenKey ? [latestOpenKey] : []
}
},
updateMenu () {
updateMenu() {
const routes = this.$route.matched.concat()
if (routes.length >= 4 && this.$route.meta.hidden) {
routes.pop()
this.selectedKeys = [ routes[2].path ]
this.selectedKeys = [routes[2].path]
} else {
this.selectedKeys = [ routes.pop().path ]
this.selectedKeys = [routes.pop().path]
}
const openKeys = []
if (this.mode === 'inline') {
routes.forEach((item) => {
routes.forEach(item => {
openKeys.push(item.path)
})
}
this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
}
},
render (h) {
render(h) {
return h(
Menu,
{
......@@ -151,12 +136,13 @@ export default {
},
on: {
openChange: this.onOpenChange,
select: (obj) => {
select: obj => {
this.selectedKeys = obj.selectedKeys
this.$emit('select', obj)
}
}
}, this.renderMenu(h, this.menu)
},
this.renderMenu(h, this.menu)
)
}
}
src/store/modules/permission.js
......@@ -9,10 +9,10 @@ import { asyncRouterMap, constantRouterMap } from '@/config/router.config'
*/
function hasPermission(permission, route) {
if (route.meta && route.meta.permission) {
let flag = -1
let flag = false
for (let i = 0, len = permission.length; i < len; i++) {
flag = route.meta.permission.indexOf(permission[i])
if (flag >= 0) {
flag = route.meta.permission.includes(permission[i])
if (flag) {
return true
}
}
......@@ -31,7 +31,7 @@ function hasPermission(permission, route) {
// eslint-disable-next-line
function hasRole(roles, route) {
if (route.meta && route.meta.roles) {
return route.meta.roles.indexOf(roles.id)
return route.meta.roles.includes(roles.id)
} else {
return true
}
......
src/views/account/center/Index.vue
<template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
<a-row :gutter="24">
<a-col :md="24" :lg="7">
<a-card :bordered="false">
<div class="account-center-avatarHolder">
<div class="avatar">
<img :src="avatar()"/>
<img :src="avatar()">
</div>
<div class="username">{{ nickname() }}</div>
<div class="bio">海纳百川，有容乃大</div>
......@@ -19,21 +18,30 @@
<i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
</p>
<p>
<i class="address"></i><span>浙江省</span><span>杭州市</span>
<i class="address"></i>
<span>浙江省</span>
<span>杭州市</span>
</p>
</div>
<a-divider />
<a-divider/>
<div class="account-center-tags">
<div class="tagsTitle">标签</div>
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
<a-tag
:key="tag"
:closable="index !== 0"
:afterClose="() => handleTagClose(tag)"
>{{ `${tag.slice(0, 20)}...` }}</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleTagClose(tag)">{{ tag }}</a-tag>
<a-tag
v-else
:key="tag"
:closable="index !== 0"
:afterClose="() => handleTagClose(tag)"
>{{ tag }}</a-tag>
</template>
<a-input
v-if="tagInputVisible"
......@@ -47,11 +55,11 @@
@keyup.enter="handleTagInputConfirm"
/>
<a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
<a-icon type="plus" /> New Tag
<a-icon type="plus"/>New Tag
</a-tag>
</div>
</div>
<a-divider :dashed="true" />
<a-divider :dashed="true"/>
<div class="account-center-team">
<div class="teamTitle">团队</div>
......@@ -60,7 +68,7 @@
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<a-avatar size="small" :src="item.avatar"/>
<span class="member">{{ item.name }}</span>
</a>
</a-col>
......@@ -84,20 +92,17 @@
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
import PageLayout from '@/components/page/PageLayout'
import RouteView from '@/components/layouts/RouteView'
import { AppPage, ArticlePage, ProjectPage } from './page'
import PageLayout from '@/components/page/PageLayout'
import RouteView from '@/components/layouts/RouteView'
import { AppPage, ArticlePage, ProjectPage } from './page'
import { mapGetters } from 'vuex'
import { mapGetters } from 'vuex'
export default {
export default {
components: {
RouteView,
PageLayout,
......@@ -115,58 +120,60 @@
teams: [],
teamSpinning: true,
tabListNoTitle: [{
tabListNoTitle: [
{
key: 'article',
tab: '文章(8)',
}, {
tab: '文章(8)'
},
{
key: 'app',
tab: '应用(8)',
}, {
tab: '应用(8)'
},
{
key: 'project',
tab: '项目(8)',
tab: '项目(8)'
}
],
noTitleKey: 'app',
noTitleKey: 'app'
}
},
mounted () {
mounted() {
this.getTeams()
},
methods: {
...mapGetters(['nickname', 'avatar']),
getTeams() {
this.$http.get('/workplace/teams')
.then(res => {
this.$http.get('/workplace/teams').then(res => {
this.teams = res.result
this.teamSpinning = false
})
},
handleTabChange (key, type) {
handleTabChange(key, type) {
this[type] = key
},
handleTagClose (removeTag) {
handleTagClose(removeTag) {
const tags = this.tags.filter(tag => tag != removeTag)
this.tags = tags
},
showTagInput () {
showTagInput() {
this.tagInputVisible = true
this.$nextTick(() => {
this.$refs.tagInput.focus()
})
},
handleInputChange (e) {
handleInputChange(e) {
this.tagInputValue = e.target.value
},
handleTagInputConfirm () {
handleTagInputConfirm() {
const inputValue = this.tagInputValue
let tags = this.tags
if (inputValue && tags.indexOf(inputValue) === -1) {
if (inputValue && !tags.includes(inputValue)) {
tags = [...tags, inputValue]
}
......@@ -176,16 +183,16 @@
tagInputValue: ''
})
}
},
}
}
</script>
<style lang="scss" scoped>
.page-header-wrapper-grid-content-main {
.page-header-wrapper-grid-content-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: .3s;
transition: 0.3s;
.account-center-avatarHolder {
text-align: center;
......@@ -214,7 +221,6 @@
}
.account-center-detail {
p {
margin-bottom: 8px;
padding-left: 26px;
......@@ -227,7 +233,7 @@
width: 14px;
left: 0;
top: 4px;
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
}
.title {
......@@ -248,7 +254,6 @@
}
.account-center-team {
.members {
a {
display: block;
......@@ -257,7 +262,7 @@
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
color: rgba(0, 0, 0, 0.65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
......@@ -274,12 +279,11 @@
}
}
.tagsTitle, .teamTitle {
.tagsTitle,
.teamTitle {
font-weight: 500;
color: rgba(0,0,0,.85);
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment