UserList.vue 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <table-page-template>
  3. <el-form :inline='true' :model='queryData' slot='form' size='mini'>
  4. <el-form-item label='用户'>
  5. <el-input v-model.trim='queryData.username'></el-input>
  6. </el-form-item>
  7. <el-form-item>
  8. <el-button type='primary' @click='query'>查询</el-button>
  9. <el-button type='primary' @click='openAdd(null)'>新增</el-button>
  10. </el-form-item>
  11. </el-form>
  12. <el-table :data='pageData.users' border stripe slot='table'>
  13. <el-table-column prop='id' label='ID'></el-table-column>
  14. <el-table-column prop='name' label='Name'></el-table-column>
  15. <el-table-column prop='remark' label='Remark'></el-table-column>
  16. <el-table-column prop='status' label='Status'></el-table-column>
  17. <el-table-column label='操作' width='150'>
  18. <template slot-scope='{row}'>
  19. <el-button type='primary' size='mini' @click='openAdd(row)'>编辑</el-button>
  20. <el-button type='danger' size='mini' @click='deleteBtnClicked(row)'>删除</el-button>
  21. </template>
  22. </el-table-column>
  23. </el-table>
  24. <base-pagination :total='pageData.total' @pageChanged='pageChanged' slot='pagination'></base-pagination>
  25. <user-add ref='addUser' @confirm='getData' slot='dialog'></user-add>
  26. </table-page-template>
  27. </template>
  28. <script>
  29. import userapi from '@/api/system/user'
  30. import UserAdd from './UserAdd'
  31. export default {
  32. name: 'UserList',
  33. data() {
  34. return {
  35. queryData: {
  36. username: null
  37. },
  38. pageData: {
  39. page: 1,
  40. size: 10,
  41. total: 0,
  42. users: []
  43. }
  44. }
  45. },
  46. methods: {
  47. openAdd(user) {
  48. this.$refs.addUser.open(user)
  49. },
  50. pageChanged(page, size) {
  51. this.pageData.page = page
  52. this.pageData.size = size
  53. this.getData(page, size)
  54. },
  55. query() {
  56. this.pageData.page = 1
  57. this.pageData.size = 10
  58. this.getData()
  59. },
  60. async getData() {
  61. let vm = this
  62. let username = this.queryData.username
  63. let criteria = {}
  64. if (username) {
  65. criteria.name = username
  66. }
  67. let request = { page: vm.pageData.page, size: vm.pageData.size, criteria: criteria }
  68. userapi.query(request).then(resp => {
  69. vm.pageData.total = resp.count
  70. vm.pageData.users = resp.content
  71. })
  72. }
  73. },
  74. created() {
  75. this.query()
  76. },
  77. components: {
  78. 'user-add': UserAdd
  79. }
  80. }
  81. </script>