127 lines
2.5 KiB
Vue
127 lines
2.5 KiB
Vue
<template>
|
|
<div class="netnode-page">
|
|
<div class="table-content elevation-1">
|
|
<div class="panel-header">
|
|
<h3>{{ $t('netnode.tableHeader') }}</h3>
|
|
<div class="search-input">
|
|
<v-text-field
|
|
:placeholder="$t('netnode.searchHolder')"
|
|
:value="filter"
|
|
@input="inputFilter"
|
|
append-icon="search" />
|
|
</div>
|
|
</div>
|
|
<template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="itemList"
|
|
:total-items="100"
|
|
:rows-per-page-items="pageEntity"
|
|
:loading="fetching"
|
|
class="panel-content elevation-1"
|
|
@update:pagination="nextPage"
|
|
>
|
|
<template slot="headerCell" slot-scope="props">
|
|
<span>{{ $t(props.header.text) }}</span>
|
|
</template>
|
|
<template slot="items" slot-scope="props">
|
|
<td>{{ props.item.type }}</td>
|
|
<td>{{ props.item._id }}</td>
|
|
<td>{{ props.item.tokenType }}</td>
|
|
<td>{{ props.item.amount }}</td>
|
|
<td>{{ props.item.createdAt }}</td>
|
|
</template>
|
|
<template slot="no-results">
|
|
{{ $t('netnode.tableNone') }}
|
|
</template>
|
|
</v-data-table>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
createNamespacedHelpers,
|
|
} from 'vuex'
|
|
|
|
const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('netnode')
|
|
|
|
export default {
|
|
name: 'Netnode',
|
|
|
|
computed: {
|
|
...mapState([
|
|
'headers',
|
|
'itemList',
|
|
'pageEntity',
|
|
'fetching',
|
|
]),
|
|
...mapGetters([]),
|
|
},
|
|
|
|
methods: {
|
|
...mapActions([
|
|
'queryUserInfo',
|
|
'queryOne',
|
|
'nextPage'
|
|
]),
|
|
...mapMutations([
|
|
'inputFilter',
|
|
'setIpAddress',
|
|
]),
|
|
},
|
|
|
|
mounted() {
|
|
this.queryUserInfo()
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.netnode-page {
|
|
|
|
.card-content {
|
|
display: flex;
|
|
padding: 20px;
|
|
|
|
.app-card {
|
|
flex: 1;
|
|
height: 100px;
|
|
background-color: white;
|
|
}
|
|
|
|
.app-sep {
|
|
width: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
.table-content {
|
|
flex: 1;
|
|
margin: 0 20px 20px;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0 20px;
|
|
|
|
.search-input {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
.panel-content {
|
|
margin: 0 20px 20px;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|