관리-도구
편집 파일: Subscribers.vue
<template> <div class="main-content"> <breadcumb :page="$t('Subscribers')" :folder="$t('Store')" /> <div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div> <b-card v-else class="wrapper"> <vue-good-table mode="remote" :columns="columns" :totalRows="totalRows" :rows="rows" :pagination-options="{ enabled: true, perPage: serverParams.perPage }" :search-options="{ enabled: false }" @on-page-change="onPageChange" @on-per-page-change="onPerPageChange" @on-sort-change="onSortChange" styleClass="table-hover tableOne vgt-table" > <template slot="table-row" slot-scope="props"> <span v-if="props.column.field==='actions'"> <a v-b-tooltip.hover :title="$t('Delete')" class="ml-2" @click="remove(props.row.id)"> <i class="i-Close-Window text-20 text-danger"></i> </a> </span> <span v-else>{{ props.formattedRow[props.column.field] }}</span> </template> </vue-good-table> </b-card> </div> </template> <script> import axios from 'axios' export default { metaInfo: { title: "Store Subscribers" }, data () { return { isLoading: true, rows: [], totalRows: 0, columns: [ { label: this.$t('Email'), field: 'email', sortable: true }, { label: this.$t('Subscribed At'), field: 'created_at', sortable: true }, { label: this.$t('Actions'), field: 'actions' } ], serverParams: { page: 1, perPage: 10, sort: [{ field: 'created_at', type: 'desc' }] } } }, mounted () { this.fetch() }, methods: { async fetch () { this.isLoading = true try { const { data } = await axios.get('/store/subscribers', { params: { page: this.serverParams.page, per_page: this.serverParams.perPage, sort: this.serverParams.sort && this.serverParams.sort[0]?.field, dir: this.serverParams.sort && this.serverParams.sort[0]?.type } }) this.rows = data.data || [] this.totalRows = data.meta?.total || this.rows.length } finally { this.isLoading = false } }, onPageChange ({ currentPage }) { this.serverParams.page = currentPage; this.fetch() }, onPerPageChange ({ currentPerPage }) { this.serverParams.perPage = currentPerPage; this.fetch() }, onSortChange (params) { this.serverParams.sort = params[0] ? [params[0]] : []; this.fetch() }, remove (id) { var self = this self.$swal({ title: self.$t('Delete_Title'), text: self.$t('Delete_Text'), type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', cancelButtonText: self.$t('Delete_cancelButtonText'), confirmButtonText: self.$t('Delete_confirmButtonText') }).then(function (result) { var confirmed = !!(result && (result.value === true || result.isConfirmed === true)) if (!confirmed) return axios.delete('/store/subscribers/' + id) .then(function () { self.$swal(self.$t('Delete_Deleted'), self.$t('Deleted_in_successfully'), 'success') self.fetch() }) .catch(function () { self.$swal(self.$t('Delete_Failed'), self.$t('Delete_Therewassomethingwronge'), 'warning') }) }) } } } </script>