index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!--
  2. - Copyright (c) 2018-2025, lengleng All rights reserved.
  3. -
  4. - Redistribution and use in source and binary forms, with or without
  5. - modification, are permitted provided that the following conditions are met:
  6. -
  7. - Redistributions of source code must retain the above copyright notice,
  8. - this list of conditions and the following disclaimer.
  9. - Redistributions in binary form must reproduce the above copyright
  10. - notice, this list of conditions and the following disclaimer in the
  11. - documentation and/or other materials provided with the distribution.
  12. - Neither the name of the pig4cloud.com developer nor the names of its
  13. - contributors may be used to endorse or promote products derived from
  14. - this software without specific prior written permission.
  15. - Author: lengleng (wangiegie@gmail.com)
  16. -->
  17. <template>
  18. <div class="execution">
  19. <basic-container>
  20. <avue-crud ref="crud"
  21. :page="page"
  22. :data="tableData"
  23. :table-loading="tableLoading"
  24. :option="tableOption"
  25. :permission="permissionList"
  26. @on-load="getList"
  27. @refresh-change="refreshChange"
  28. @row-update="handleUpdate"
  29. @row-save="handleSave"
  30. @row-del="handleDelete">
  31. </avue-crud>
  32. </basic-container>
  33. </div>
  34. </template>
  35. <script>
  36. import {
  37. addObj,
  38. delObj,
  39. fetchList,
  40. putObj
  41. } from '@/api/admin/client'
  42. import {tableOption} from '@/const/crud/admin/client'
  43. import {mapGetters} from 'vuex'
  44. export default {
  45. name: 'client',
  46. data() {
  47. return {
  48. tableData: [],
  49. page: {
  50. total: 0, // 总页数
  51. currentPage: 1, // 当前页数
  52. pageSize: 20 // 每页显示多少条
  53. },
  54. tableLoading: false,
  55. tableOption: tableOption
  56. }
  57. },
  58. created() {
  59. },
  60. mounted: function () {
  61. },
  62. computed: {
  63. ...mapGetters(['permissions']),
  64. permissionList() {
  65. return {
  66. addBtn: this.vaildData(this.permissions.sys_client_add, false),
  67. delBtn: this.vaildData(this.permissions.sys_client_del, false),
  68. editBtn: this.vaildData(this.permissions.sys_client_edit, false)
  69. };
  70. }
  71. },
  72. methods: {
  73. getList(page, params) {
  74. this.tableLoading = true
  75. fetchList(Object.assign({
  76. current: page.currentPage,
  77. size: page.pageSize
  78. }, params)).then(response => {
  79. this.tableData = response.data.data.records
  80. this.page.total = response.data.data.total
  81. this.tableLoading = false
  82. })
  83. },
  84. handleDelete: function (row, index) {
  85. var _this = this
  86. this.$confirm('是否确认删除ID为' + row.clientId, '提示', {
  87. confirmButtonText: '确定',
  88. cancelButtonText: '取消',
  89. type: 'warning'
  90. }).then(function () {
  91. return delObj(row.clientId)
  92. }).then(data => {
  93. _this.tableData.splice(index, 1)
  94. _this.$message({
  95. showClose: true,
  96. message: '删除成功',
  97. type: 'success'
  98. })
  99. this.refreshChange()
  100. }).catch(function (err) {
  101. })
  102. },
  103. /**
  104. * @title 数据更新
  105. * @param row 为当前的数据
  106. * @param index 为当前更新数据的行数
  107. * @param done 为表单关闭函数
  108. *
  109. **/
  110. handleUpdate: function (row, index, done) {
  111. putObj(row).then(data => {
  112. this.tableData.splice(index, 1, Object.assign({}, row))
  113. this.$message({
  114. showClose: true,
  115. message: '修改成功',
  116. type: 'success'
  117. })
  118. this.refreshChange()
  119. done()
  120. })
  121. },
  122. /**
  123. * @title 数据添加
  124. * @param row 为当前的数据
  125. * @param done 为表单关闭函数
  126. *
  127. **/
  128. handleSave: function (row, done) {
  129. addObj(row).then(data => {
  130. this.tableData.push(Object.assign({}, row))
  131. this.$message({
  132. showClose: true,
  133. message: '添加成功',
  134. type: 'success'
  135. })
  136. this.refreshChange()
  137. done()
  138. })
  139. },
  140. /**
  141. * 刷新回调
  142. */
  143. refreshChange() {
  144. this.getList(this.page)
  145. }
  146. }
  147. }
  148. </script>
  149. <style lang="scss" scoped>
  150. </style>