examcloud-admin-web/src/modules/basic/view/privilege_group_list.vue

<template>
  <div>
    <section class="content" style="margin-top: -10px;">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">鉴权管理 &gt; 权限组管理</h3>
        </div>

        <!-- 正文信息 -->
        <div class="box-body">
          <el-table
            :data="privilegeGroupList"
            border
            resizable
            stripe
            style="width: 100%;text-align:center;"
          >
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="code" label="权限组编码" />
            <el-table-column prop="name" label="权限组名称" />
            <el-table-column prop="appName" label="应用名称" />
            <el-table-column width="300" label="操作">
              <div slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="editPrivilege(scope.row);"
                >
                  权限配置
                </el-button>
              </div>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { core_api } from "@/constants/constants.js";

export default {
  data() {
    return {
      privilegeGroupList: []
    };
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    async queryAppList() {
      var url = core_api + "/rolePrivilege/getPrivilegeGroupList";
      const response = await this.$http.get(url);
      this.privilegeGroupList = response.data;
    },
    editPrivilege(row) {
      this.$router.replace({ path: "/index/privilege_tree/" + row.id });
    }
  },
  created() {
    this.queryAppList();
  }
};
</script>

<style scoped></style>