join_admin/src/views/incentives/list.vue

110 lines
2.7 KiB
Vue
Raw Normal View History

2020-01-03 12:33:47 +00:00
<template>
<div class="app-container">
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
<el-table-column min-width="300px" label="Titel">
<template slot-scope="{row}">
<router-link :to="'/incentive/edit/'+row.id" class="link-type">
<span>{{ row.title }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column align="center" label="Münzen" width="100">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column width="180px" align="center" label="Gültig bis">
<template slot-scope="scope">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column v-if="roles.includes('admin')" width="120px" align="center" label="Erstellt von">
2020-01-03 12:33:47 +00:00
<template slot-scope="scope">
<span>{{ scope.row.author }}</span>
</template>
</el-table-column>
<el-table-column v-if="roles.includes('admin')" class-name="status-col" label="Status" width="110">
2020-01-03 12:33:47 +00:00
<template slot-scope="{row}">
<el-tag :type="row.status | statusFilter">
{{ row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column v-if="roles.includes('admin')" align="center" label="Actions" width="120">
2020-01-03 12:33:47 +00:00
<template slot-scope="scope">
<router-link :to="'/incentive/edit/'+scope.row.id">
<el-button type="primary" size="small" icon="el-icon-edit">
Bearbeiten
</el-button>
</router-link>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { fetchList } from '@/api/article'
import { mapGetters } from 'vuex'
2020-01-03 12:33:47 +00:00
export default {
name: 'IncentiveList',
filters: {
statusFilter(status) {
const statusMap = {
Aktiv: 'success',
Entwurf: 'info',
Gelöscht: 'danger'
}
return statusMap[status]
}
},
data() {
return {
list: null,
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 20
}
}
},
computed: {
...mapGetters([
'roles'
])
},
2020-01-03 12:33:47 +00:00
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
})
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>