菜单 角色选择更改为树形选择

web/src/view/superAdmin/authority/authority.vue

@@ -27,20 +27,14 @@
     <el-dialog :visible.sync="dialogFormVisible" :title="dialogTitle">
       <el-form :model="form" :rules="rules" ref="authorityForm">
         <el-form-item label="父级角色"  prop="parentId">
-           <el-select
+           <el-cascader
               :disabled="dialogType=='add'"
-            placeholder="请选择"
               v-model="form.parentId"
-            filterable
-          >
-            <el-option
-              :disabled="canSelect(item)"
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in AuthorityOption"
-            ></el-option>
-          </el-select>
+              :options="AuthorityOption"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
         </el-form-item>
         <el-form-item label="角色ID" prop="authorityId">
           <el-input autocomplete="off" :disabled="dialogType=='edit'" v-model="form.authorityId"></el-input>
@@ -218,60 +212,58 @@ export default {
         }
       })
     },
-    getAuthorityList(AuthorityData){
-      AuthorityData.map(item=>{
-        this.AuthorityOption.push({
+    setOptions(){
+       this.AuthorityOption = [{
+          authorityId:"0",
+          authorityName:"根角色"
+        }]
+      this.setAuthorityOptions(this.tableData,this.AuthorityOption,false)
+    },
+    setAuthorityOptions(AuthorityData,optionsData,disabled){
+      AuthorityData&&AuthorityData.map(item=>{
+        if(item.children.length){
+          const option = {
             authorityId:item.authorityId,
-          authorityName:item.authorityName
-        })
-        if(item.children){
-          this.getAuthorityList(item.children)
+            authorityName:item.authorityName,
+            disabled:disabled||item.authorityId == this.form.authorityId,
+            children:[]
         }
-      })
-    },
-    findAuthoritySelf(authority,authData,outData){
-      authData.some(item=>{
-        if(item.authorityId == authority.authorityId){
-          outData.push(item)
-          return true
+          this.setAuthorityOptions(item.children,option.children,disabled||item.authorityId == this.form.authorityId)
+          optionsData.push(option)
+        }else{
+          const option = {
+              authorityId:item.authorityId,
+              authorityName:item.authorityName,
+              disabled:disabled||item.authorityId == this.form.authorityId,
+          }
+          optionsData.push(option)
         }
-        this.findAuthoritySelf(authority,item.children,outData)
-      })
-    },
-    findAllChild(authority,array){
-      authority&&authority.map(item=>{
-        array.push(item.authorityId)
-        this.findAllChild(item.children,array)
       })
     },
-    canSelect(authority){
-      const array = []
-      const arrayIds = []
-      this.findAuthoritySelf({authorityId:this.form.authorityId},this.tableData,array)
-      this.findAllChild(array,arrayIds)
-      return arrayIds.indexOf(authority.authorityId)>-1
-    },
     // 增加角色
     addAuthority(parentId) {
       this.dialogTitle = "新增角色"
       this.dialogType = "add"
       this.form.parentId = parentId
+      this.setOptions()
       this.dialogFormVisible = true
+      
     },
-    // 增加角色
+    // 编辑角色
     editAuthority(row) {
+      this.setOptions()
       this.dialogTitle = "编辑角色"
       this.dialogType = "edit"
       for(let key in this.form){
         this.form[key] = row[key]
       }
+      this.setOptions()
       this.dialogFormVisible = true
     }
   },
   async created() {
     this.pageSize = 999
     await this.getTableData()
-    this.getAuthorityList(this.tableData)
   }
 }
 </script>

web/src/view/superAdmin/menu/menu.vue

@@ -47,21 +47,14 @@
           </el-select>
         </el-form-item>
         <el-form-item label="父节点Id">
-           <el-select
-            placeholder="请选择"
-            v-model="form.parentId"
+           <el-cascader
               :disabled="!this.isEdit"
-            filterable 
-          >
-            <el-option
-              :disabled="canSelect(item)"
-              :key="item.ID"
-              :label="item.title"
-              :value="item.ID"
-              v-for="item in menuOption"
-            >
-            </el-option>
-          </el-select>
+              v-model="form.parentId"
+              :options="menuOption"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
         </el-form-item>
         <el-form-item label="文件路径" prop="component">
           <el-input autocomplete="off" v-model="form.component"></el-input>
@@ -143,6 +136,34 @@ export default {
     }
   },
   methods: {
+    setOptions(){
+       this.menuOption = [{
+          ID:"0",
+          title:"根目录"
+        }]
+      this.setMenuOptions(this.tableData,this.menuOption,false)
+    },
+    setMenuOptions(menuData,optionsData,disabled){
+      menuData&&menuData.map(item=>{
+        if(item.children.length){
+          const option = {
+            title:item.meta.title,
+            ID:String(item.ID),
+            disabled:disabled||item.ID == this.form.ID,
+            children:[]
+        }
+          this.setMenuOptions(item.children,option.children,disabled||item.ID == this.form.ID)
+          optionsData.push(option)
+        }else{
+          const option = {
+              title:item.meta.title,
+              ID:String(item.ID),
+              disabled:disabled||item.ID == this.form.ID,
+          }
+          optionsData.push(option)
+        }
+      })
+    },
     handleClose(done) {
       this.initForm()
       done()
@@ -239,6 +260,7 @@ export default {
       this.dialogTitle = "新增菜单"
       this.form.parentId = String(id)
       this.isEdit = false
+      this.setOptions()
       this.dialogFormVisible = true
     },
     // 修改菜单方法
@@ -246,41 +268,9 @@ export default {
       this.dialogTitle = "编辑菜单"
       const res = await getBaseMenuById({ id })
       this.form = res.data.menu
-      this.dialogFormVisible = true
       this.isEdit = true
-    },
-    getMenuList(MenuData){
-      MenuData.map(item=>{
-        this.menuOption.push({
-          ID:String(item.ID),
-          title:item.meta.title
-        })
-        if(item.children){
-          this.getMenuList(item.children)
-        }
-      })
-    },
-    findAuthoritySelf(mune,muneData,outData){
-      muneData&&muneData.some(item=>{
-        if(item.ID == mune.ID){
-          outData.push(item)
-          return true
-        }
-        this.findAuthoritySelf(mune,item.children,outData)
-      })
-    },
-    findAllChild(menu,array){
-      menu&&menu.map(item=>{
-        array.push(String(item.ID))
-        this.findAllChild(item.children,array)
-      })
-    },
-    canSelect(authority){
-      const array = []
-      const arrayIds = []
-      this.findAuthoritySelf({ID:this.form.ID},this.tableData,array)
-      this.findAllChild(array,arrayIds)
-      return arrayIds.indexOf(authority.ID)>-1
+      this.setOptions()
+      this.dialogFormVisible = true
     },
   },
    async created() {

web/src/view/superAdmin/user/user.vue

@@ -16,18 +16,14 @@
       <el-table-column label="昵称" min-width="150" prop="nickName"></el-table-column>
       <el-table-column label="用户角色" min-width="150">
         <template slot-scope="scope">
-          <el-select
+          <el-cascader
             @change="changeAuthority(scope.row)"
-            placeholder="请选择"
               v-model="scope.row.authority.authorityId"
-          >
-            <el-option
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in authOptions"
-            ></el-option>
-          </el-select>
+              :options="authOptions"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
         </template>
       </el-table-column>
       <el-table-column label="操作" min-width="150">
@@ -82,14 +78,14 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="用户角色" label-width="80px" prop="authorityId">
-          <el-select placeholder="请选择" v-model="userInfo.authorityId">
-            <el-option
-              :key="item.authorityId"
-              :label="item.authorityName"
-              :value="item.authorityId"
-              v-for="item in authOptions"
-            ></el-option>
-          </el-select>
+          <el-cascader
+            @change="changeAuthority(scope.row)"
+              v-model="userInfo.authorityId"
+              :options="authOptions"
+              :show-all-levels="false"
+              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+              filterable>
+              </el-cascader>
         </el-form-item>
       </el-form>
       <div class="dialog-footer" slot="footer">
@@ -142,23 +138,35 @@ export default {
     ...mapGetters('user', ['token'])
   },
   methods: {
+     setOptions(authData){
+      this.authOptions = []
+      this.setAuthorityOptions(authData,this.authOptions)
+    },
+    setAuthorityOptions(AuthorityData,optionsData){
+      AuthorityData&&AuthorityData.map(item=>{
+        if(item.children.length){
+          const option = {
+            authorityId:item.authorityId,
+            authorityName:item.authorityName,
+            children:[]
+        }
+          this.setAuthorityOptions(item.children,option.children)
+          optionsData.push(option)
+        }else{
+          const option = {
+              authorityId:item.authorityId,
+              authorityName:item.authorityName,
+          }
+          optionsData.push(option)
+        }
+      })
+    },
     async deleteUser(row){
       const res = await deleteUser({id:row.ID})
       if(res.code == 0){
         this.getTableData()
         row.visible = false
       }
-    },
-     getAuthorityList(AuthorityData){
-      AuthorityData.map(item=>{
-        this.authOptions.push({
-          authorityId:item.authorityId,
-          authorityName:item.authorityName
-        })
-        if(item.children){
-          this.getAuthorityList(item.children)
-        }
-      })
     },
     async enterAddUserDialog() {
       this.$refs.userForm.validate(async valid => {
@@ -195,8 +203,7 @@ export default {
   async created() {
     this.getTableData()
     const res = await getAuthorityList({ page: 1, pageSize: 999 })
-    this.authOptions = res.data.list
-    
+    this.setOptions(res.data.list)
   }