管理系统二级权限管理代码

<template>
  <div class="secondaryPermission">
    <!-- 标题 -->
    <page-title title="二级权限管理">
      您可以在此处进行二级权限的管理
    </page-title>

    <!-- 新增二级权限按钮 -->
    <el-row class="addSecondary">
      <el-col>
        <el-button type="primary" @click="dialogShow('insert')">新增二级权限</el-button>
      </el-col>
    </el-row>

    <!-- 弹出对话框 -->
    <el-dialog :visible.sync="isShow" :close-on-click-modal="false" @close="dialogClose">
      <template slot="title"><i :class="dialogData.icon" class=title></i>{{dialogData.text}}</template>
      <el-row>
        <el-col>
          <el-form :model="dialogFormData" ref="dialog" :rules="dialogRules">
            <el-formItem label="选择所属一级分类" prop="parentId">
              <el-select v-model="dialogFormData.parentId">
                <el-option
                    v-for="item in fatherNameData"
                    :value="item.permissionId"
                    :label="item.permissionName"
                >
                </el-option>
              </el-select>
            </el-formItem>
            <el-formItem label="新增二级权限名称" prop="permissionName">
              <el-input v-model="dialogFormData.permissionName" :disabled="!dialogFormData.parentId"></el-input>
            </el-formItem>
            <el-formItem label='路由地址' prop="path">
              <el-input v-model="dialogFormData.path" :disabled="!dialogFormData.parentId"></el-input>
            </el-formItem>
            <el-formItem label="路由路径" prop="pathUrl">
              <el-input v-model="dialogFormData.pathUrl" :disabled="!dialogFormData.parentId"></el-input>
            </el-formItem>
          </el-form>
        </el-col>
      </el-row>
      <template slot="footer">
        <el-button type="info" @click="isShow=false">取消</el-button>
        <el-button type="primary" @click="addOrModify">{{dialogData.buttonText}}</el-button>
      </template>
    </el-dialog>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column label="权限名称" prop="permissionName" align="center"></el-table-column>
      <el-table-column label="路由地址" prop="path" align="center"></el-table-column>
      <el-table-column label="路由路径" prop="pathUrl" align="center"></el-table-column>
      <el-table-column label="父权限" prop="parentName" align="center"></el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="sc">
          <el-button type="warning" size="mini" @click="dialogShow('modify',sc)">修改</el-button>
          <el-button type="danger" size="mini" @click="delBunClick(sc)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "secondaryPermission",
  data(){
    let nameValidate=(rule,value,callback)=>{
      if (value!==this.currentName){
        let url='/api/admin/permissionSecondaryCheck.jsp'
        let data={
          params:{
            parentId:this.dialogFormData.parentId,
            permissionName:value
          }
        }
        this.$axios.get(url,data).then(res=>{
          if(res.data.code===201){
            callback(new Error(res.data.msg))
          }
          callback()
        })
      }
    }

    return {
    //  对话框是否显示
      isShow:false,
    //  对话框绑定的标题图标按钮文本
      dialogData:{
        text:'',
        icon:'',
        buttonText:''
      },
    //  对话框图标绑定的数据
      dialogFormData:{
        parentId:'',
        permissionName:'',
        path:'',
        pathUrl:''
      },
    //  在mounted里赋值一个对话框绑定的元数据
      tempData:{},
    //  获取当前点击的那个的二级权限的名称
      currentName:'',
    //  获取当前的索引值
      currentIndex:'',
    //  获取表格数据(二级权限)
      tableData:[],
    //  找父权限
      fatherNameData:[],
    //  对话框表单验证
      dialogRules:{
        parentId:[{required:true,message:'请选择从属的一级权限',trigger:'blur'}],
        permissionName:[
          {required:true,message:'二级权限名称不得为空',trigger:'blur'},
          {validator:nameValidate,trigger:'blur'}
        ],
        path:[{required:true,message:'路由地址不得为空',trigger:'blur'}],
        pathUrl:[{required:true,message:'路由权限不得为空',trigger:'blur'}]
      }

    }
  },
  mounted(){
  //  获取一级权限
    let url='/api/admin/permissionPrimary.jsp'
    this.$axios.get(url).then(res=>{
      if (res.data.code===200){
        this.fatherNameData=res.data.data.permission
      }
    })
  //  获二级权限
    let url1='/api/admin/permissionSecondary.jsp'
    this.$axios.get(url1).then(res=>{
      if (res.data.code===200){
        this.tableData=res.data.data.permission
      }
    })
    this.tempData=Object.assign({},this.dialogFormData)
    console.log(this.tempData)
  },
  methods:{
    //点击新增或修改对话框出来
    dialogShow(status,sc){
      if (status==='insert'){
      //  点的新增
        this.dialogData.icon='el-icon-folder-add'
        this.dialogData.text='新增二级权限'
        this.dialogData.buttonText='新增'
      }else{
      //点的修改
        this.dialogData.icon='el-icon-edit'
        this.dialogData.text='修改一级权限'
        this.dialogData.buttonText='修改'
        this.currentName=sc.row.permissionName
        this.currentIndex=sc.$index
        this.dialogFormData=Object.assign({},sc.row)
      }
      this.isShow=true
    },
  //  删除的单击事件
    delBunClick(sc){
      this.$confirm('您确定删除此二级权限吗？').then(()=>{
        let url='/api/admin/permissionSecondaryDelete.jsp'
        let data={
          params:{
            permissionId:sc.row.permissionId
          }
        }
        this.$axios.get(url,data).then(res=>{
          if (res.data.code===200){
            this.tableData.splice(sc.$index,1)
            this.$message.success(res.data.msg)
          }
        })
      }).catch(()=>{})
    },
  //  对话框的关闭事件
    dialogClose(){
      this.dialogFormData=Object.assign({},this.tempData)
      this.$refs.dialog.resetFields()
    },
    //  对话框底部的新增或者修改按钮
    addOrModify(){
      if (this.dialogData.buttonText==='新增'){
      //  新增
        let url='/api/admin/permissionSecondaryInsert.jsp'
        let data={
          params:{
            permissionName:this.dialogFormData.permissionName,
            path:this.dialogFormData.path,
            pathUrl:this.dialogFormData.pathUrl,
            parentId:this.dialogFormData.parentId
          }
        }
        this.$axios.get(url,data).then(res=>{
          if (res.data.code===200){
            this.$message.success(res.data.msg)
            this.tableData.push(res.data.data)
            console.log(res.data.data)
          }
        })
      }else{
      //  修改
        let url='/api/admin/permissionSecondaryModify.jsp'
        console.log()
        let data={
          params:Object.assign({},this.dialogFormData)
        }
        this.$axios.get(url,data).then(res=>{
          if (res.data.code===200){
            this.$message.success(res.data.msg)
            this.$set(this.tableData,this.currentIndex,data.params)
          }
        })
      }
      this.isShow=false
    }
  }
}
</script>

<style scoped>
.addSecondary{
  margin:20px 0;
}
.title{
  margin-right: 10px;
}
</style>