dy-admin-manager/src/views/categroyManager/insideSetting/adminManager.vue

<template>
  <div class='m-container'>
    <h2>
      <div class="squrt"></div>角色管理
    </h2>
    <div class="m-core">
      <el-button  style="margin-bottom: 20px;" type="primary" v-permission="'role/add'" @click="onAdminOperation('create')" icon="el-icon-plus">添加</el-button>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data='tableList'
                  header-cell-class-name="headerName">
          <el-table-column align='center'
                           prop="roleName"
                           label="角色类型">
          </el-table-column>
          <el-table-column align='center'
                           prop="roleDesc"
                           label="角色描述">
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <el-button @click="onAdminOperation('update', scope.row)"
                         v-permission="'role/update'"
                         type="text">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total.sync="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { roleQueryPage } from '@/api/systemManage'
export default {
  name: 'adminManager',
  components: { pagination },
  data () {
    return {
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    }
  },
  created () {
    this.init()
  },
  activated () {
    this.init()
  },
  mounted () {


  },
  methods: {
    init () {
      this.$route.query.page ? this.pageInfo.page = parseInt(this.$route.query.page) : this.pageInfo.page = 1
      this.getList()
    },
    getList () {
      roleQueryPage({
        rows: this.pageInfo.limit,
        page: this.pageInfo.page
      }).then(res => {
        if (res.code == 200 && res.data) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total

        }
      })
    },
    onAdminOperation (type, row) {
      let params = {
        path: '/systemManager/adminOperation',
        query: {
          type: type,
          page: this.pageInfo.page
        }
      }
      let tagTitle = '新建'
      if (row) {
        params.query.id = row.id
        tagTitle = '修改'
      }
      this.$router.push(params, (route) => {
        route.meta.title = tagTitle + '系统角色权限'
      })
    }
  }
}
</script>
<style lang="scss">
.headerName {
  background-color: #edeef0 !important;
  color: #444444;
}
</style>