1<template> 2 <page-default> 3 4 <section class="app-section"> 5 <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl"> 6 <div class="row no-wrap items-center q-mb-lg"> 7 <tool-bar-table :status.sync="status" :filter.sync="filter"/> 8 </div> 9 <div class="row items-center q-col-gutter-lg"> 10 <div class="col-12"> 11 <main-table 12 ref="mainTable" 13 v-bind="getTableProps({ type: 'http-middlewares' })" 14 :data="allMiddlewares.items" 15 :onLoadMore="handleLoadMore" 16 :endReached="allMiddlewares.endReached" 17 :loading="allMiddlewares.loading" 18 /> 19 </div> 20 </div> 21 </div> 22 </section> 23 24 </page-default> 25</template> 26 27<script> 28import { mapActions, mapGetters } from 'vuex' 29import GetTablePropsMixin from '../../_mixins/GetTableProps' 30import PaginationMixin from '../../_mixins/Pagination' 31import PageDefault from '../../components/_commons/PageDefault' 32import ToolBarTable from '../../components/_commons/ToolBarTable' 33import MainTable from '../../components/_commons/MainTable' 34 35export default { 36 name: 'PageHTTPMiddlewares', 37 mixins: [ 38 GetTablePropsMixin, 39 PaginationMixin({ 40 fetchMethod: 'getAllMiddlewaresWithParams', 41 scrollerRef: 'mainTable.$refs.scroller', 42 pollingIntervalTime: 5000 43 }) 44 ], 45 components: { 46 PageDefault, 47 ToolBarTable, 48 MainTable 49 }, 50 data () { 51 return { 52 filter: '', 53 status: '' 54 } 55 }, 56 computed: { 57 ...mapGetters('http', { allMiddlewares: 'allMiddlewares' }) 58 }, 59 methods: { 60 ...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }), 61 getAllMiddlewaresWithParams (params) { 62 return this.getAllMiddlewares({ 63 query: this.filter, 64 status: this.status, 65 ...params 66 }) 67 }, 68 refreshAll () { 69 if (this.allMiddlewares.loading) { 70 return 71 } 72 73 this.initFetch() 74 }, 75 handleLoadMore ({ page = 1 } = {}) { 76 return this.fetchMore({ page }) 77 } 78 }, 79 watch: { 80 'status' () { 81 this.refreshAll() 82 }, 83 'filter' () { 84 this.refreshAll() 85 } 86 }, 87 beforeDestroy () { 88 this.$store.commit('http/getAllMiddlewaresClear') 89 } 90} 91</script> 92 93<style scoped lang="scss"> 94 95</style> 96