权限框架-2022-08-16

src/directives/index.js

@@ -0,0 +1,13 @@
+import permission from "./permission"
+//批量注册指令(现在就一个permission)
+const directives = {
+    permission
+}
+//注册的一般写法，循环遍历directives，通过vue.directive注册
+export default {
+    install(Vue){
+        Object.keys(directives).forEach(key=>{
+            Vue.directive(key,directives[key])
+        })
+    }
+}

src/directives/permission.js

@@ -0,0 +1,27 @@
+export default {
+    inserted(el,bindling){
+    	//bindling.value为指令的绑定值
+        
+        let perVal = bindling.value;
+        if(bindling.value){
+            
+            let pers=['add','details'];
+            let hasPer = pers.some(item=>{
+                return item == perVal
+            });
+            if(!hasPer){
+                
+               if(perVal.indexOf('edit')>-1){
+
+                el.children[0].children[0].disabled='true'
+          
+                // el.children[0].children[0].style.border='1px solid #C0C0C0'
+               }else{
+                el.style.display="none"
+              
+
+               }
+            }
+        }
+    }
+}

src/main.js

@@ -19,6 +19,9 @@ require('./assets/css/layout.less')
 import './icons'
 import lodash from 'lodash'
 
+import Directives from './directives/index'
+Vue.use(Directives)
+
 Vue.config.productionTip = false
 Vue.prototype.$constants = constants
 Vue.prototype.$api = api

src/views/apply/index.vue

@@ -33,12 +33,12 @@
       <el-table-column prop="createUserName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
-          <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)">
-            编辑
+          <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)" v-permission="'edit'">
+           编辑
             <el-dropdown-menu slot="dropdown" class="text-align_center">
              
-              <el-dropdown-item @click.native="handleDetails(scope.row)">详情</el-dropdown-item>
-              <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
+              <el-dropdown-item @click.native="handleDetails(scope.row)" v-permission="'details'">详情</el-dropdown-item>
+              <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided v-permission="'delete'">删除</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>

src/views/function/index.vue

@@ -12,7 +12,7 @@
     <el-table
         row-key="id"
         v-loading="loading"
-        :data="tableData"
+        :data="tableData.children"
         border
         header-row-class-name="custom-table-header"
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -20,7 +20,7 @@
       <el-table-column prop="name" label="功能名称" align="" show-overflow-tooltip></el-table-column>
       <el-table-column label="所属应用" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
-              <span >{{(applyList.filter(item=>item.id==scope.row.apply))[0].name}}</span>
+              <span >{{tableData.applyName}}</span>
             </template>
       </el-table-column>
       <el-table-column prop="describe" label="功能描述" align="center" show-overflow-tooltip></el-table-column>
@@ -205,6 +205,7 @@ export default {
       this.$api.getFunctionList(this.queryParams).then(response => {
         console.log(response)
         this.tableData = response.data
+        this.total=response.pageColumn.total
         this.loading = false
       }).catch(error => {
         this.loading = true

src/views/group/index.vue

@@ -19,7 +19,13 @@
     >
       <el-table-column prop="name" label="用户组名称" align="" show-overflow-tooltip></el-table-column>
       <!-- <el-table-column prop="user_group_up" label="上级用户组" align="center" show-overflow-tooltip></el-table-column> -->
-      <el-table-column prop="users" label="组员" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column label="组员" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span v-for="item in scope.row.users">{{item.name}}
+            
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column prop="role" label="角色" align="center" show-overflow-tooltip></el-table-column>
       <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
       <el-table-column label="操作" align="center" width="150">