指令权限完善

src/directive/permission/permission.js

@@ -29,7 +29,7 @@ function checkPermission(el, binding) {
       el.parentNode && el.parentNode.removeChild(el)
     }
   } else {
-    console.error(`need permissions! Like v-permission="SysMenuList:edit"`)
+    console.error(`need permissions! Like v-permission="'sys:menu:edit'"`)
     return false
   }
 }

src/utils/permission.js

@@ -27,7 +27,7 @@ export default function checkPermission(value) {
     })
     return hasPermission
   } else {
-    console.error(`need permissions! Like v-permission="SysMenuList:edit"`)
+    console.error(`need permissions! Like v-if="checkPermission('sys:menu:edit')"`)
     return false
   }
 }

src/views/sys/menus/list.vue

@@ -5,7 +5,7 @@
       <el-select v-model="listQuery.status" style="width: 140px" class="filter-item" @change="handleFilter">
         <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
       </el-select>
-      <el-button v-if="checkPermission('SysMenuList:edit')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button v-if="checkPermission('sys:menu:edit')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
         添加菜单
       </el-button>
     </div>
@@ -41,14 +41,14 @@
       <el-table-column label="设置" width="250" align="center">
         <template slot-scope="{row}">
           <el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单</el-button>
-          <el-button v-if="checkPermission('SysMenuList:edit')" plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单</el-button>
+          <el-button v-if="checkPermission('sys:menu:edit')" plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单</el-button>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150" align="center">
         <template slot-scope="{row}">
-          <el-button v-if="checkPermission('SysMenuList:edit')" size="mini" type="primary" @click="handleUpdate(row)">编辑
+          <el-button v-if="checkPermission('sys:menu:edit')" size="mini" type="primary" @click="handleUpdate(row)">编辑
           </el-button>
-          <el-button v-permission="'SysMenuList:delete'" size="mini" type="danger" @click="handleDelete(row)">删除
+          <el-button v-if="checkPermission('sys:menu:del')" size="mini" type="danger" @click="handleDelete(row)">删除
           </el-button>
         </template>
       </el-table-column>
@@ -62,12 +62,11 @@
 <script>
 import { fetchList, deleteMenu, updateSelective } from '@/api/sys/menu'
 import Pagination from '@/components/Pagination'
-import checkPermission from '@/utils/permission' // 权限判断函数
-// 当然你也可以为了方便使用，将它注册到全局
-import permission from '@/directive/permission/index.js' // 权限判断指令
+// 权限判断函数
+import checkPermission from '@/utils/permission'
+
 export default {
   name: 'SysMenuList',
-  directives: { permission },
   components: { Pagination },
   filters: {
     disableNextLevel(value) {

src/views/sys/roles/form.vue

@@ -76,7 +76,7 @@ export default {
           if (response.data.menuIds) {
             const keys = []
             response.data.menuIds.split(',').forEach(element => {
-              keys.push(element * 1)
+              keys.push(element)
             })
             console.log(keys)
             this.$refs.tree.setCheckedKeys(keys)

src/views/sys/roles/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button v-permission="'sys:role:edit'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
         添加角色
       </el-button>
     </div>
@@ -23,10 +23,8 @@
       </el-table-column>
       <el-table-column label="操作" width="250" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改
-          </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
-          </el-button>
+          <el-button v-permission="'sys:role:edit'" size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button v-permission="'sys:role:del'" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -39,9 +37,12 @@
 <script>
 import { fetchList, deleteRole } from '@/api/sys/role'
 import Pagination from '@/components/Pagination'
+// 权限判断指令
+import permission from '@/directive/permission/index.js'
 
 export default {
   name: 'SysRoleList',
+  directives: { permission },
   components: { Pagination },
   data() {
     return {

src/views/sys/users/list.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button v-permission="'sys:user:edit'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
         添加用户
       </el-button>
     </div>
@@ -28,10 +28,8 @@
       </el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改
-          </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
-          </el-button>
+          <el-button v-permission="'sys:user:edit'" size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button v-permission="'sys:user:del'" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -44,9 +42,12 @@
 <script>
 import { fetchList, deleteUser } from '@/api/sys/user'
 import Pagination from '@/components/Pagination'
+// 权限判断指令
+import permission from '@/directive/permission/index.js'
 
 export default {
   name: 'SysUserList',
+  directives: { permission },
   components: { Pagination },
   data() {
     return {