RoleList.vue 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <table-page-template>
  3. <el-form :inline='true' slot='form' size='mini'>
  4. <el-form-item label='角色'>
  5. <el-input class='input' v-model.trim='searchValue' placeholder='请输入角色名进行查询' clearable></el-input>
  6. </el-form-item>
  7. <el-form-item>
  8. <el-button v-if='hasPermission("system:role:query")' type='primary' @click='query'>查询</el-button>
  9. <el-button type='primary' @click='editRole(null)'>创建角色</el-button>
  10. </el-form-item>
  11. </el-form>
  12. <el-table :data='roles' border stripe style='width: 100%' slot='table'>
  13. <el-table-column prop='id' label='ID' width='50'></el-table-column>
  14. <el-table-column prop='name' label='Name'></el-table-column>
  15. <el-table-column prop='remark' label='备注'></el-table-column>
  16. <el-table-column label='操作' width='250'>
  17. <template slot-scope='scope'>
  18. <el-button @click='editRole(scope.row)' type='primary' size='small'>编辑</el-button>
  19. <el-button @click='editAuth(scope.row)' type='primary' size='small'>配置权限</el-button>
  20. <el-button @click='deleteRole(scope.row)' type='danger' size='small'>删除</el-button>
  21. </template>
  22. </el-table-column>
  23. </el-table>
  24. <div slot='dialog'>
  25. <role-edit ref='roleEdit' @saved='query'></role-edit>
  26. <role-manage ref='roleManage'></role-manage>
  27. </div>
  28. </table-page-template>
  29. </template>
  30. <script>
  31. import roleapi from '@/api/system/role'
  32. import RoleEdit from './RoleEdit'
  33. import RoleManage from './RoleManage'
  34. export default {
  35. name: 'RoleList',
  36. data() {
  37. return {
  38. roles: [],
  39. searchValue: ''
  40. }
  41. },
  42. methods: {
  43. query() {
  44. let criteria = {}
  45. if (this.searchValue) {
  46. criteria.name = { $like: this.searchValue + '%' }
  47. }
  48. roleapi.query({ criteria }).then(resp => {
  49. this.roles = resp.content
  50. })
  51. },
  52. editRole(row) {
  53. this.$refs['roleEdit'].show(row)
  54. },
  55. editAuth(row) {
  56. this.$refs['roleManage'].show(row.id)
  57. },
  58. deleteRole(row) {
  59. let opt = {
  60. confirmButtonText: '确定',
  61. cancelButtonText: '取消',
  62. type: 'warning'
  63. }
  64. this.$confirm('此操作将永久删除, 是否继续?', '提示', opt)
  65. .then(() => {
  66. let params = { id: row.id }
  67. roleapi.delete(params).then(res => {
  68. if (res.result == 'success') {
  69. this.$message.success('删除成功')
  70. this.query()
  71. } else {
  72. this.$message.error('删除失败: ' + res.message)
  73. }
  74. })
  75. })
  76. .catch(() => {})
  77. }
  78. },
  79. created() {
  80. this.query()
  81. },
  82. beforeRouteEnter(to, from, next) {
  83. next(vm => {
  84. vm.query()
  85. })
  86. },
  87. components: {
  88. RoleEdit,
  89. RoleManage
  90. }
  91. }
  92. </script>