Vue 框架权限配置 - 前端代码实现与示例

<template>
  <div>
    <table class='table table-striped'>
      <thead>
        <tr>
          <th scope='col'>角色名称</th>
          <th scope='col'>权限名称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='(item, i) in list' :key='item.id'>
          <th scope='row'>{{ item.rname }}</th>
          <td>
            <span v-for='(p, index) in item.permissionList' :key='index'>
              {'[' + p.pname + ']'} 
            </span>
          </td>
          <td>
            <div class='btn-group btn-group-sm' role='group' aria-label='Basic example'>
              <button type='button' class='btn btn-secondary' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo' @click='setFormData(item)'>配置权限</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class='modal fade' id='exampleModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
      <div class='modal-dialog' role='document'>
        <div class='modal-content'>
          <div class='modal-header'>
            <h5 class='modal-title' id='exampleModalLabel'>配置权限</h5>
            <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
              <span aria-hidden='true'>&times;</span>
            </button>
          </div>
          <div class='modal-body'>
            <div class='col-md-12'>
              <div class='form-group'>
                <label for='recipient-name' class='col-form-label'>角色名称:</label>
                <input v-model='formData.rname' class='form-control form-control-lg' type='text' disabled>
                <label for='recipient-name' class='col-form-label'>权限名称:</label>
                <select v-model='formData.permissionList' class='custom-select custom-select-lg mb-3' multiple>
                  <option :value='p.id' v-for='p in permissionList' :key='p.id'>{{ p.pname }}</option>
                </select>
              </div>
            </div>
          </div>
          <div class='modal-footer'>
            <button type='button' class='btn btn-secondary' id='cancel' data-dismiss='modal'>取消</button>
            <button type='button' class='btn btn-primary' @click='modifyRoleByEid'>提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
      permissionList: [],
      formData: {
        rname: '',
        permissionList: []
      }
    };
  },
  mounted() {
    this.findAllRole();
    this.findAllPermission();
  },
  methods: {
    findAllRole() {
      axios.get('/role/findAllRole').then(resp => {
        this.list = resp.data;
      });
    },
    findAllPermission() {
      axios.get('/permission/findAllPermission').then(resp => {
        this.permissionList = resp.data;
      });
    },
    setFormData(item) {
      this.formData.rname = item.rname;
      this.formData.permissionList = item.permissionList.map(p => p.id);
    },
    modifyRoleByEid() {
      axios.post('/role/saveRoleAndPermission', this.formData).then(() => {
        $('#cancel').click();
        this.findAllRole();
      });
    }
  }
};
</script>