adminManager.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div class='m-container'>
  3. <h2>
  4. <div class="squrt"></div>系统角色权限管理
  5. </h2>
  6. <div class="m-core">
  7. <div @click="onAdminOperation('create')"
  8. v-permission="'/adminOperation'"
  9. class='newBand'>添加</div>
  10. <!-- 列表 -->
  11. <div class="tableWrap">
  12. <el-table :data='tableList'
  13. header-cell-class-name="headerName">
  14. <el-table-column align='center'
  15. prop="roleName"
  16. label="角色类型">
  17. </el-table-column>
  18. <el-table-column align='center'
  19. prop="roleDesc"
  20. label="角色描述">
  21. </el-table-column>
  22. <el-table-column align='center'
  23. label="操作">
  24. <template slot-scope="scope">
  25. <el-button @click="onAdminOperation('update', scope.row)"
  26. v-permission="'/adminOperation'"
  27. type="text">修改</el-button>
  28. </template>
  29. </el-table-column>
  30. </el-table>
  31. <pagination :total="pageInfo.total"
  32. :page.sync="pageInfo.page"
  33. :limit.sync="pageInfo.limit"
  34. :page-sizes="pageInfo.page_size"
  35. @pagination="getList" />
  36. </div>
  37. </div>
  38. </div>
  39. </template>
  40. <script>
  41. import pagination from '@/components/Pagination/index'
  42. import { roleQueryPage } from '@/api/systemManage'
  43. export default {
  44. components: { pagination },
  45. data () {
  46. return {
  47. tableList: [],
  48. pageInfo: {
  49. // 分页规则
  50. limit: 10, // 限制显示条数
  51. page: 1, // 当前页
  52. total: 0, // 总条数
  53. page_size: [10, 20, 40, 50] // 选择限制显示条数
  54. }
  55. }
  56. },
  57. created () {
  58. this.$route.query.page ? this.pageInfo.page = parseInt(this.$route.query.page) : this.pageInfo.page = 1
  59. },
  60. mounted () {
  61. // console.log(store.getters.permission)
  62. this.getList()
  63. },
  64. methods: {
  65. getList () {
  66. roleQueryPage({
  67. rows: this.pageInfo.limit,
  68. page: this.pageInfo.page
  69. }).then(res => {
  70. if (res.code == 200 && res.data) {
  71. this.tableList = res.data.rows
  72. this.pageInfo.total = res.data.total
  73. }
  74. })
  75. },
  76. onAdminOperation (type, row) {
  77. let params = {
  78. path: '/specialSetup/adminoperation',
  79. query: {
  80. type: type,
  81. page: this.pageInfo.page
  82. }
  83. }
  84. if (row) {
  85. params.query.id = row.id
  86. }
  87. this.$router.push(params)
  88. }
  89. }
  90. }
  91. </script>
  92. <style lang="scss">
  93. .headerName {
  94. background-color: #edeef0 !important;
  95. color: #444444;
  96. }
  97. </style>