ngds-backend-ele/src/views/admin/role-permission.vue

<template>
    <div v-loading="loading">
      <div class="white-box admin-role-box">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="模块" width="180">
            <template slot-scope="scope">
              <el-checkbox :indeterminate="isIndeterminate[scope.row.id]" v-model="mainCheck[scope.row.id]"
                           @change="handleCheckAllChange(scope.row.id, scope.row.childPermission)">
                {{scope.row.mainPermission.name}}
              </el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="权限">
            <template slot-scope="scope">
              <el-checkbox-group v-model="checkedValue" class="checkgroup"
                                 @change="handlePermissionChange(scope.row.id, scope.row.childPermission)">
                <el-checkbox v-for="item in scope.row.childPermission" :label="item.path" :key="item.name">
                  {{item.name}}
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="primary" :loading="submitButtonStat" @click="onSubmit" style="float: right;">Submit<!-- 提交 --></el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
 
  import tool from '@/utils/tool'
  import { getRolePermission,editRolePermission } from '@/api/filter'
  
  export default {
    name: 'role-permission',
    created () {
  
    },
    data () {
      return {
        tableData: null,
        checkedValue: [],
        mainCheck: {},
        isIndeterminate: {},
        loading: true,
        submitButtonStat: false,
      }
    },
    mounted () {
        getRolePermission(this.$route.params.id).then(response => {
            this.tableData = response.data
            this.checkedValue = []
            for (let i of response.data) {
            this.mainCheck[i] = false
            for (let j of i.childPermission) {
                if (j.isChecked) {
                this.checkedValue.push(j.path)
                }
            }
            this.initCheckValue(i.id, i.childPermission)
            }
            this.loading = false
        }).catch(err => {
          console.log('err---------' + err)
        })
    },
    methods: {
      handleCheckAllChange (id, child) {
        //this.mainCheck[id] = !this.mainCheck[id];
        if (this.mainCheck[id]) {
          this.$set(this.isIndeterminate, id, false)
          for (let i in child) {
            tool.removeFromArr(this.checkedValue, child[i].path)
            this.checkedValue.push(child[i].path)
          }
        } else {
          this.$set(this.isIndeterminate, id, false)
          for (let i in child) {
            tool.removeFromArr(this.checkedValue, child[i].path)
          }
        }
  
      },
      handlePermissionChange (id, child) {
        this.initCheckValue(id, child)
      },
      onSubmit () {
        this.submitButtonStat = true
        editRolePermission(this.$route.params.id,  {
          permission: this.checkedValue
        }).then(response => {
            this.submitButtonStat = false
            this.$message({message: response.data, type: 'success'})
        }).catch(err => {
            this.submitButtonStat = false
          console.log('err---------' + err)
        })
      },
      initCheckValue (id, child) {
        let flag = true
        for (let i in child) {
          if (this.checkedValue.find(item => child[i].path === item) === undefined) {
            flag = false
          }
        }
        if (flag) {
          this.$set(this.isIndeterminate, id, false)
          this.$set(this.mainCheck, id, true)
        } else {
          this.$set(this.isIndeterminate, id, true)
          this.$set(this.mainCheck, id, false)
          let mainFlag = false
          for (let i in this.checkedValue) {
            if (child.find(item => this.checkedValue[i] === item.path) !== undefined) {
              mainFlag = true
            }
          }
          if (!mainFlag) {
            this.$set(this.isIndeterminate, id, false)
            this.$set(this.mainCheck, id, false)
          }
        }
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>