修改角色功能选择

src/api/admin.js

@@ -133,6 +133,12 @@ export default {
   getFunctionList(params) {
     return axios.get('/permission/api/function/queryPageList', { params })
   },
+   /**
+   * 查询类型为展示的功能
+   */
+    getFuncListByTypeIsShow(params) {
+      return axios.get('/permission/api/function/getFuncListByTypeIsShow', { params })
+    },
   /**
    * 编辑功能
    */

src/views/function/index.vue

@@ -25,6 +25,11 @@
       </el-table-column>
       <el-table-column prop="describe" label="功能描述" align="center" show-overflow-tooltip></el-table-column>
       <el-table-column prop="sign" label="路径" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column label="是否可选" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+              <span >{{scope.row.functionType==1?'是':'否'}}</span>
+            </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
           <el-dropdown split-button type="primary" size="small" >
@@ -71,6 +76,12 @@
         <el-form-item label="功能标识" prop="sign">
           <el-input type="textarea" v-model="ruleForm.sign" placeholder="请输入功能标识"></el-input>
         </el-form-item>
+        <el-form-item label="是否可选" prop="ismore">
+           <el-radio-group v-model="ruleForm.functionType">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="功能描述" prop="describe">
           <el-input v-model="ruleForm.describe" placeholder="请输入" type="textarea" maxlength="100" show-word-limit></el-input>
         </el-form-item>
@@ -174,8 +185,9 @@ export default {
         this.show=false
         this.disabled=true
          this.ruleForm = {
-        apply:this.queryParams.apply,
-        function: id
+          apply:this.queryParams.apply,
+          function: id,
+          functionType:1
       }
       }else{
         this.show=true
@@ -183,9 +195,10 @@ export default {
         // this.functionName=name
          this.ruleForm = {
            sign:row.sign,
-        function: id,
-        apply:applyid,
-        path:row.path
+          function: id,
+          apply:applyid,
+          path:row.path,
+          functionType:1
       }
       if(row.path==0){
         this.ruleForm.last=name

src/views/role/index.vue

@@ -75,9 +75,10 @@
                         
                         @selection-change="handleSelectionChange"
                       >
+
                       <el-table-column label="功能名称" align="left" prop="name">
                         <template slot-scope="scope">
-                          <el-checkbox-group v-model="checkList" style="display:inline-block" @change="handleCheckedCitiesChange">
+                          <el-checkbox-group v-model="checkList" style="display:inline-block" @change="handleCheckedCitiesChange(scope.row)">
                             <el-checkbox :label="scope.row.id" @change="getFunInfo(scope.row.id)"
                             >
                               {{scope.row.name}}
@@ -145,6 +146,10 @@ export default {
   },
   data() {
     return {
+      defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
       fun: [],
       functionName: '',
       functionInfo: [],
@@ -238,8 +243,67 @@ export default {
       }
     },
     handleCheckedCitiesChange(value) {
-        // console.log(value)
+        // console.log(value,this.checkList.includes(71),this.checkList.includes(value.id))
+      
+        if(this.checkList.includes(value.id)){
+          // console.log(value.hasOwnProperty('children'))
+          if(value.hasOwnProperty('children') == true){
+            this.addCheck(value.children)
+          }
+          if(value.path!==0){
+            var aa = value.path.split(",")
+            aa.splice(0,1)
+            // console.log(aa)
+            for(var j=0;j<aa.length;j++){
+              // console.log(Number(aa[j]))
+              // console.log(this.checkList.indexOf(Number(aa[j])))
+              if(this.checkList.indexOf(Number(aa[j]))>-1){
+
+              }else{
+                this.checkList.push(Number(aa[j]))
+                this.getFunInfo(Number(aa[j]))
+              }
+              // this.checkList.push(Number(aa[j]))
+              // this.getFunInfo(Number(aa[j]))
+            }
+          }
+         
+        }else if(!this.checkList.includes(value.id)){
+          // console.log(this.checkList.includes(value.id),value.id)
+          if(value.hasOwnProperty('children') == true){
+            this.delCheck(value.children)
+          }
+        }
+      
+        // console.log(this.checkList,this.permissionData)
+        // this.checkList
+    },
+    delCheck(vals){
+      for(var i = 0 ; i<vals.length ; i++){
+           this.checkList.splice(this.checkList.indexOf(vals[i].id),1)
+           this.getFunInfo(vals[i].id)
+           if(vals[i].hasOwnProperty('children') == true){
+             this.delCheck(vals[i].children)
+           }
+         }
     },
+    addCheck(vals){
+        //  console.log(vals)
+         for(var i = 0 ; i<vals.length ; i++){
+          // console.log(this.checkList.indexOf(vals[i].id))
+          if(this.checkList.indexOf(vals[i].id)>-1){
+
+          }else{
+            this.checkList.push(vals[i].id)
+            this.getFunInfo(vals[i].id)
+          }
+           
+           if(vals[i].hasOwnProperty('children') == true){
+             this.addCheck(vals[i].children)
+           }
+         }
+         
+       } ,
     handleSelectionChange(val) {
       // console.log(val,this.$refs.multipleTable.selection)
       this.multipleSelection = val;
@@ -294,7 +358,7 @@ export default {
     },
     
     getFunctionList() {
-      this.$api.getFunctionList().then(response => {
+      this.$api.getFuncListByTypeIsShow().then(response => {
         this.functionList = response.data
       })
     },
@@ -325,7 +389,6 @@ export default {
               this.btnLoading = false
             })
           } else {
-            
 
             this.$api.addRole(this.ruleForm).then(response => {
               this.$message.success('新增成功')