ProgramServiceTypeList.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <div class="page">
  3. <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
  4. <!-- 搜索框-->
  5. <el-form-item prop="name">
  6. <el-input v-model="searchForm.name" placeholder="请输入业务类型" clearable></el-input>
  7. </el-form-item>
  8. <el-form-item>
  9. <el-button type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
  10. <el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
  11. </el-form-item>
  12. </el-form>
  13. <div class="jp-table" style="">
  14. <vxe-toolbar :refresh="{query: refreshList}" custom>
  15. <template #buttons>
  16. <el-button v-if="hasPermission('program_service_type:add')" type="primary" icon="el-icon-plus" @click="add()">新建</el-button>
  17. <el-button v-if="hasPermission('program_service_type:del')" type="danger" icon="el-icon-delete" @click="del()" :disabled="$refs.serviceTypeTable && $refs.serviceTypeTable.getCheckboxRecords().length === 0" plain>删除</el-button>
  18. </template>
  19. </vxe-toolbar>
  20. <div class="jp-table-body">
  21. <vxe-table
  22. border="inner"
  23. auto-resize
  24. resizable
  25. height="auto"
  26. :loading="loading"
  27. size="small"
  28. ref="serviceTypeTable"
  29. show-header-overflow
  30. show-overflow
  31. highlight-hover-row
  32. :menu-config="{}"
  33. @sort-change="sortChangeHandle"
  34. :sort-config="{remote:true}"
  35. :data="dataList"
  36. :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}"
  37. :checkbox-config="{}">
  38. <vxe-column type="seq" width="60" title="序号"></vxe-column>
  39. <vxe-column type="checkbox" width="50" ></vxe-column>
  40. <vxe-column min-width="350" title="业务类型" field="name" align="left" tree-node></vxe-column>
  41. <vxe-column min-width="50" align="center" title="序号" field="sort"></vxe-column>
  42. <vxe-column min-width="50" align="center" title="级别" field="level"></vxe-column>
  43. <vxe-column min-width="50" align="center" title="备注" field="remarks"></vxe-column>
  44. <vxe-column title="操作" width="230px" fixed="right" align="center">
  45. <template #default="scope">
  46. <el-button v-if="hasPermission('program_service_type:edit')&&scope.row.level === 1" text type="primary" @click="addChild(scope.row.id)">新建子类型</el-button>
  47. <el-button v-if="hasPermission('program_service_type:edit')" text type="primary" @click="edit(scope.row.id)">修改</el-button>
  48. <el-button v-if="hasPermission('program_service_type:del')" text type="primary" @click="del(scope.row.id)">删除</el-button>
  49. </template>
  50. </vxe-column>
  51. </vxe-table>
  52. </div>
  53. </div>
  54. <ProgramServiceTypeForm ref="programServiceTypeForm" @refreshDataList="refreshList"></ProgramServiceTypeForm>
  55. </div>
  56. </template>
  57. <script>
  58. import ProgramServiceTypeService from '@/api/program/ProgramServiceTypeService'
  59. import ProgramServiceTypeForm from './ProgramServiceTypeForm'
  60. export default {
  61. data () {
  62. return {
  63. searchForm: {
  64. name: '',
  65. sort: ''
  66. },
  67. dataList: [],
  68. tablePage: {
  69. total: 0,
  70. currentPage: 1,
  71. pageSize: 10,
  72. orders: []
  73. },
  74. loading: false
  75. }
  76. },
  77. programServiceTypeService: null,
  78. created () {
  79. this.programServiceTypeService = new ProgramServiceTypeService()
  80. },
  81. components: {
  82. ProgramServiceTypeForm
  83. },
  84. mounted () {
  85. this.refreshList()
  86. },
  87. methods: {
  88. // 新增
  89. add () {
  90. this.$refs.programServiceTypeForm.init('add', '')
  91. },
  92. addChild (id) {
  93. this.$refs.programServiceTypeForm.init('addChild', id)
  94. },
  95. // 修改
  96. edit (id) {
  97. id = id || this.$refs.serviceTypeTable.getCheckboxRecords().map(item => {
  98. return item.id
  99. })[0]
  100. this.$refs.programServiceTypeForm.init('edit', id)
  101. },
  102. // 查看
  103. view (id) {
  104. this.$refs.programServiceTypeForm.init('view', id)
  105. },
  106. // 获取数据列表
  107. refreshList () {
  108. this.loading = true
  109. this.programServiceTypeService.list({
  110. 'current': this.tablePage.currentPage,
  111. 'size': this.tablePage.pageSize,
  112. 'orders': this.tablePage.orders,
  113. ...this.searchForm
  114. }).then((data) => {
  115. this.dataList = data.records
  116. this.tablePage.total = data.total
  117. this.loading = false
  118. })
  119. },
  120. // 当前页
  121. currentChangeHandle ({ currentPage, pageSize }) {
  122. this.tablePage.currentPage = currentPage
  123. this.tablePage.pageSize = pageSize
  124. this.refreshList()
  125. },
  126. // 排序
  127. sortChangeHandle (column) {
  128. this.tablePage.orders = []
  129. if (column.order != null) {
  130. this.tablePage.orders.push({column: this.$utils.toLine(column.property), asc: column.order === 'asc'})
  131. }
  132. this.refreshList()
  133. },
  134. // 删除
  135. del (id) {
  136. let ids = id || this.$refs.serviceTypeTable.getCheckboxRecords().map(item => {
  137. return item.id
  138. }).join(',')
  139. this.$confirm(`确定删除所选项吗?`, '提示', {
  140. confirmButtonText: '确定',
  141. cancelButtonText: '取消',
  142. type: 'warning'
  143. }).then(() => {
  144. this.loading = true
  145. this.programServiceTypeService.delete(ids).then((data) => {
  146. this.$message.success(data)
  147. this.refreshList()
  148. this.loading = false
  149. })
  150. })
  151. },
  152. resetSearch () {
  153. this.$refs.searchForm.resetFields()
  154. this.refreshList()
  155. }
  156. }
  157. }
  158. </script>