update indexOf rewrite to includes

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 : '' } })
+    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 ])
-            ]
-          )
-        ]
-      )
+    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])
+        ])
+      ])
     },
-    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
   }
@@ -73,4 +73,4 @@ const permission = {
   }
 }
 
-export default permission
+export default permission

src/views/account/center/Index.vue

@@ -1,12 +1,11 @@
 <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,202 +92,198 @@
         </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 { mapGetters } from 'vuex'
-
-  export default {
-    components: {
-      RouteView,
-      PageLayout,
-      AppPage,
-      ArticlePage,
-      ProjectPage
+import PageLayout from '@/components/page/PageLayout'
+import RouteView from '@/components/layouts/RouteView'
+import { AppPage, ArticlePage, ProjectPage } from './page'
+
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    RouteView,
+    PageLayout,
+    AppPage,
+    ArticlePage,
+    ProjectPage
+  },
+  data() {
+    return {
+      tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
+
+      tagInputVisible: false,
+      tagInputValue: '',
+
+      teams: [],
+      teamSpinning: true,
+
+      tabListNoTitle: [
+        {
+          key: 'article',
+          tab: '文章(8)'
+        },
+        {
+          key: 'app',
+          tab: '应用(8)'
+        },
+        {
+          key: 'project',
+          tab: '项目(8)'
+        }
+      ],
+      noTitleKey: 'app'
+    }
+  },
+  mounted() {
+    this.getTeams()
+  },
+  methods: {
+    ...mapGetters(['nickname', 'avatar']),
+
+    getTeams() {
+      this.$http.get('/workplace/teams').then(res => {
+        this.teams = res.result
+        this.teamSpinning = false
+      })
     },
-    data() {
-      return {
-        tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
-
-        tagInputVisible: false,
-        tagInputValue: '',
-
-        teams: [],
-        teamSpinning: true,
 
-        tabListNoTitle: [{
-            key: 'article',
-            tab: '文章(8)',
-          }, {
-            key: 'app',
-            tab: '应用(8)',
-          }, {
-            key: 'project',
-            tab: '项目(8)',
-          }
-        ],
-        noTitleKey: 'app',
-      }
-    },
-    mounted () {
-      this.getTeams()
+    handleTabChange(key, type) {
+      this[type] = key
     },
-    methods: {
-      ...mapGetters(['nickname', 'avatar']),
 
-      getTeams() {
-        this.$http.get('/workplace/teams')
-          .then(res => {
-            this.teams = res.result
-            this.teamSpinning = false
-          })
-      },
-
-      handleTabChange (key, type) {
-        this[type] = key
-      },
-
-      handleTagClose (removeTag) {
-        const tags = this.tags.filter(tag => tag != removeTag)
-        this.tags = tags
-      },
-
-      showTagInput () {
-        this.tagInputVisible = true
-        this.$nextTick(() => {
-          this.$refs.tagInput.focus()
-        })
-      },
+    handleTagClose(removeTag) {
+      const tags = this.tags.filter(tag => tag != removeTag)
+      this.tags = tags
+    },
 
-      handleInputChange (e) {
-        this.tagInputValue = e.target.value
-      },
+    showTagInput() {
+      this.tagInputVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
+      })
+    },
 
-      handleTagInputConfirm () {
-        const inputValue = this.tagInputValue
-        let tags = this.tags
-        if (inputValue && tags.indexOf(inputValue) === -1) {
-          tags = [...tags, inputValue]
-        }
+    handleInputChange(e) {
+      this.tagInputValue = e.target.value
+    },
 
-        Object.assign(this, {
-          tags,
-          tagInputVisible: false,
-          tagInputValue: ''
-        })
+    handleTagInputConfirm() {
+      const inputValue = this.tagInputValue
+      let tags = this.tags
+      if (inputValue && !tags.includes(inputValue)) {
+        tags = [...tags, inputValue]
       }
-    },
+
+      Object.assign(this, {
+        tags,
+        tagInputVisible: false,
+        tagInputValue: ''
+      })
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .page-header-wrapper-grid-content-main {
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    transition: .3s;
-
-    .account-center-avatarHolder {
-      text-align: center;
-      margin-bottom: 24px;
-
-      & > .avatar {
-        margin: 0 auto;
-        width: 104px;
-        height: 104px;
-        margin-bottom: 20px;
-        border-radius: 50%;
-        overflow: hidden;
-        img {
-          height: 100%;
-          width: 100%;
-        }
-      }
-
-      .username {
-        color: rgba(0, 0, 0, 0.85);
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 500;
-        margin-bottom: 4px;
+.page-header-wrapper-grid-content-main {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+
+  .account-center-avatarHolder {
+    text-align: center;
+    margin-bottom: 24px;
+
+    & > .avatar {
+      margin: 0 auto;
+      width: 104px;
+      height: 104px;
+      margin-bottom: 20px;
+      border-radius: 50%;
+      overflow: hidden;
+      img {
+        height: 100%;
+        width: 100%;
       }
     }
 
-    .account-center-detail {
-
-      p {
-        margin-bottom: 8px;
-        padding-left: 26px;
-        position: relative;
-      }
+    .username {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+  }
 
-      i {
-        position: absolute;
-        height: 14px;
-        width: 14px;
-        left: 0;
-        top: 4px;
-        background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
-      }
+  .account-center-detail {
+    p {
+      margin-bottom: 8px;
+      padding-left: 26px;
+      position: relative;
+    }
 
-      .title {
-        background-position: 0 0;
-      }
-      .group {
-        background-position: 0 -22px;
-      }
-      .address {
-        background-position: 0 -44px;
-      }
+    i {
+      position: absolute;
+      height: 14px;
+      width: 14px;
+      left: 0;
+      top: 4px;
+      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
     }
 
-    .account-center-tags {
-      .ant-tag {
-        margin-bottom: 8px;
-      }
+    .title {
+      background-position: 0 0;
+    }
+    .group {
+      background-position: 0 -22px;
     }
+    .address {
+      background-position: 0 -44px;
+    }
+  }
 
-    .account-center-team {
+  .account-center-tags {
+    .ant-tag {
+      margin-bottom: 8px;
+    }
+  }
 
-      .members {
-        a {
-          display: block;
-          margin: 12px 0;
+  .account-center-team {
+    .members {
+      a {
+        display: block;
+        margin: 12px 0;
+        line-height: 24px;
+        height: 24px;
+        .member {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.65);
           line-height: 24px;
-          height: 24px;
-          .member {
-            font-size: 14px;
-            color: rgba(0, 0, 0, .65);
-            line-height: 24px;
-            max-width: 100px;
-            vertical-align: top;
-            margin-left: 12px;
-            transition: all 0.3s;
-            display: inline-block;
-          }
-          &:hover {
-            span {
-              color: #1890ff;
-            }
+          max-width: 100px;
+          vertical-align: top;
+          margin-left: 12px;
+          transition: all 0.3s;
+          display: inline-block;
+        }
+        &:hover {
+          span {
+            color: #1890ff;
           }
         }
       }
     }
-
-    .tagsTitle, .teamTitle {
-      font-weight: 500;
-      color: rgba(0,0,0,.85);
-      margin-bottom: 12px;
-    }
-
   }
 
+  .tagsTitle,
+  .teamTitle {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+  }
+}
 </style>