Role authorization --- complete the addition and deletion of secondary menus by adding and deleting primary menus

Purpose ：

Click on the first level menu , Finish adding the first level menu , meanwhile , The secondary menu can also be checked and added synchronously , Click Finish delete again . Click on the secondary menu , Finish adding or deleting

Detailed code

1,RoleFunctionsController

@RestController
public class RoleFunctionsController {
    

    @Autowired
    private IRoleFunService roleFunService;

    /** *  Add role permissions  * @param roleFun * @return */
    @PostMapping("/role-functions")
    public JsonResult addRoleFunctions(@RequestBody RoleFun roleFun){
    
        roleFunService.save(roleFun);
        return new JsonResult(1,roleFun);
    }

    /** *  Delete role permissions  * @param roleId * @param functionsId * @return */
    @DeleteMapping("/role-functions/{roleId}/{functionsId}")
    public JsonResult deleteRoleFunctions(@PathVariable String roleId,@PathVariable String functionsId){
    
        roleFunService.remove(new QueryWrapper<RoleFun>().lambda()
                .eq(RoleFun::getRoleId,roleId)
                .eq(RoleFun::getFunId,functionsId));
        // Consider the situation of superior authority 
        return new JsonResult(1,null);
    }
}

2,role-list.html

Here I only list HTML Part of the code

	<el-dialog title=" Role authorization " :visible.sync="dialogTreeVisible">
        <el-tree :data="functions" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current @check="checkTreeNode" :props="defaultProps">
        </el-tree>
    </el-dialog>
    
<script> new Vue({
      el:"#app", data() {
      return {
      roles:null, rolefunctionslist:null, // Permission tree  current:null, dialogTreeVisible:false,// Display the permission tree dialog  functions:null, // Authority data  defaultProps:{
      // Modify the name of the tree attribute  children:'subFunctions', label:'name' } } }, methods:{
      // Click a line in the list  changeCurrent(row){
      this.current = row; // Cancel all selection effects  this.$refs.roleTable.clearSelection(); // Select the current row  this.$refs.roleTable.toggleRowSelection(row); }, // Select a single line ,data Is the data of the current row ,row Is the object of the current line  selectOne(data,row){
      // Cancel all selection effects  this.$refs.roleTable.clearSelection(); // Select the current row  this.$refs.roleTable.toggleRowSelection(row); }, // Deselect all roles  selectAll(){
      this.$refs.roleTable.clearSelection(); }, // Show authorization tree  showTreeDialog(){
      if (this.current){
      this.dialogTreeVisible = true; // Query permissions related to roles  axios.get("/functions/role/"+this.current.id).then(value => {
      if (value.data.code == 1){
      this.rolefunctionslist = value.data.data; this.$refs.tree.setCheckedKeys(value.data.data); } }) }else{
      this.$message(" Please select a role "); } }, // Add the permission node on the tree  checkTreeNode(arg1,arg2){
      console.log(arg1) console.log(arg2) // Determine the current permission id It's enough to choose key in  if (arg1.subFunctions != null){
      if (arg2.checkedKeys.length > this.rolefunctionslist.length){
      // Add the selected first level menu and the following second level menu  // Add first level menu  axios.post("/role-functions", {
     roleId:this.current.id,funId:arg1.id}).then(value => {
      if (value.data.code == 1){
      this.$message(" Permission added successfully "); } }) // Traverse and add the secondary menu  for (let i = 0; i < arg1.subFunctions.length ; i++) {
      axios.post("/role-functions", {
     roleId:this.current.id,funId:arg1.subFunctions[i].id}) .then(value => {
      if (value.data.code == 1){
      this.$message(" Permission added successfully "); } }) } }else if (arg2.checkedKeys.length <= this.rolefunctionslist.length){
      // Delete the selected primary menu and the following secondary menu  // Delete the first level menu  axios.delete("/role-functions/"+this.current.id+"/"+arg1.id) .then(value => {
      if (value.data.code == 1){
      this.$message(" Permission deleted successfully "); } }); // Traverse and delete the secondary menu  for (let i = 0; i < arg1.subFunctions.length; i++) {
      axios.delete("/role-functions/"+this.current.id+"/"+arg1.subFunctions[i].id) .then(value => {
      if (value.data.code == 1){
      this.$message(" Permission deleted successfully "); } }); } } }else {
      // Single add secondary menu  if (arg2.checkedKeys.indexOf(arg1.id) != -1){
      axios.post("/role-functions", {
     roleId:this.current.id,funId:arg1.id}) .then(value => {
      if (value.data.code == 1){
      this.$message(" Permission added successfully "); } }) }else {
      axios.delete("/role-functions/"+this.current.id+"/"+arg1.id) // Pass on the current character id And current permissions id .then(value => {
      if (value.data.code == 1){
      this.$message(" Permission deleted successfully "); } }) } } }, }, mounted(){
      // Hook function  // Load all permissions  axios.get("/functions").then(value => {
      if (value.data.code == 1){
      this.functions = value.data.data; } }) } }); </script>