完成权限界面

src/components/child/AuthorityJob.vue

@@ -1,5 +1,7 @@
 <template>
-    <div>
+    <div  v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading">
         <div class="job-box">
             <div class="job-head">
                 <div>
@@ -26,7 +28,7 @@
             </div>
             <div class="job-table">
                 <el-table :data="authorityLists.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
-                    @select="handleSelect" style="width: 100%">
+                    @select="handleSelect" @select-all="allchange" style="width: 100%">
                     <el-table-column type="selection" width="55">
                     </el-table-column>
                     <el-table-column prop="name" label="权限页面" width="180">
@@ -55,8 +57,8 @@
                     <el-table-column width="55" :label="op.functionName"  :key="op.id" v-for="op in opList">
                         <template slot-scope="scope">
                             <div>
-                                <el-checkbox v-if=" authorityLists[scope.$index].opList.indexOf(op.id) != -1">
-                                </el-checkbox>
+                                <el-checkbox @change='checkchange(authorityLists[scope.$index].id,op.id)'  v-if=" authorityLists[scope.$index].opList.indexOf(op.id) != -1" :value="authorityLists[scope.$index].selList.indexOf(op.id) != -1" >
+                                </el-checkbox >
                                 <el-checkbox  v-else :disabled="true" >
                                 </el-checkbox>
                             </div>
@@ -92,6 +94,8 @@
 </template>
 
 <script>
+import { promised, reject, resolve } from 'q';
+
 export default {
     data() {
         return {
@@ -107,23 +111,14 @@ export default {
             valueposition: '',//职位val
 
             authorityLists: [],
-            authorityList: [
-                {
-                    name: "人事权限1",
-                    moduleId: "1",
-                    ck: false,
-                    sc: false,
-                    bj: true,
-                    xz: false,
-                    scc: false
-                }
-            ],
+            authorityList: [],
             currentPage: 1, // 当前页码
             pageSize: 14,// 每页的数据条数
             stateArr: [],
             selectedAccount: [],
             PathUrl:'http://localhost:5256',
             opList :[],//操作方式
+            loading:true,
         }
     },
     methods: {
@@ -138,16 +133,17 @@ export default {
         },
         //模块下拉框
         Inquirechange() {
-            console.log(this.value)
             this.currentPage = 1;
             this.pageload(this.value);
         },
         //多选框选中方法
         handleSelect(selection, row) {
-            console.log(selection)
-            this.stateArr[this.currentPage - 1] = selection
-            this.selectedAccount = this.stateArr.flat()
-            console.log(this.selectedAccount)
+            console.log(selection,row)
+            if (selection.length > 0) {
+                row.selList = this.opList.map(x => x.id);
+            }else{
+                row.selList = [];
+            }
         },
         selectRadiocheck(index, row) {
             console.log(index)
@@ -177,13 +173,17 @@ export default {
                     'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
                 }
             }).then(resp => {
-                console.log(resp);
                 if (resp.data.code == 200) {
                     that.authority = resp.data.data.setDataResult; //模块数据
                     that.corporation = resp.data.data.companyDataResult; //公司数据
                     that.authorityList = resp.data.data.systemMenuPermissionData; //页面数据(默认权限页面)
                     that.authorityLists = that.authorityList;
                     that.opList = resp.data.data.pageOperation; //操作方式
+                    that.loading =false;
+                }
+            }).then(suc=>{
+                if(this.valueposition != ''){
+                    this.JobChange();
                 }
             })
         },
@@ -229,11 +229,87 @@ export default {
         },
         //保存权限
         saveAuth(){
+            var that = this;
+
+            if(this.valueposition == ''){
+                alert("未选择职位！");
+                return;  
+            }
 
+            var savejob = [];
+            this.authorityLists.forEach(item=>{
+                savejob.push({
+                    SmId:item.id,
+                    FIds:item.selList,
+                });
+            })
+            console.log(savejob);
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/SaveJobAuth', {
+                "Jpid": this.valueposition,
+                "Savejobs": savejob,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp);
+                if (resp.data.code == 200) {
+                    this.$message({
+                        message: '保存成功！',
+                        type: 'success'
+                    });
+                }else{
+                    this.$message.error('保存失败！'+ resp.data.msg);
+                }
+            })
         },
         //职位下拉获取权限
         JobChange(){
+            let val = this.value == '' ? 13 :this.value;
+            var that = this;
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/QueryJobAuth', {
+                "jobid": this.valueposition,
+                "moduleId":val,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp);
+                if (resp.data.code == 200) {
+                    that.authorityList = resp.data.data; //页面数据(默认权限页面)
+                    that.authorityLists = that.authorityList;
+                }
+            })
+        },
+        //全选
+        allchange(selection){
+            let that = this;
+
+            if (selection.length > 0) {
+                selection.forEach(item => {
+                    item.selList = that.opList.map(x => x.id);
+                });
 
+            }else{
+                this.authorityLists.forEach(item => {
+                    item.selList = [];
+                });
+            }
+        },
+        checkchange(rowid, linid) {
+            this.authorityLists.forEach(item => {
+                if (item.id == rowid) {
+                    if(item.selList.indexOf(linid) == -1){
+                        item.selList.push(linid);
+                    }else{
+                        item.selList.splice(item.selList.indexOf(linid), 1)
+                    }
+                }
+            });
+            console.warn(this.authorityLists);
         }
     },
     mounted() {