Files
arakrail/pages/admin/history/index.vue
T
2021-12-31 17:01:17 +03:30

124 lines
3.0 KiB
Vue

<template>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<nuxt-link :to="{name: 'admin-history-new'}">
<el-button type="success">جدید</el-button>
</nuxt-link>
</admin-title-bar>
<div class="col-12">
<admin-panel>
<el-table
:data="history"
style="width: 100%">
<el-table-column
type="index"
label="#">
</el-table-column>
<el-table-column
prop="image"
label="تصویر"
width="230">
<template slot-scope="scope">
<el-image
style="width: 100%; height: 100%"
:src="scope.row.image"
fit="fit">
</el-image>
</template>
</el-table-column>
<el-table-column
prop="year"
label="سال"
width="">
</el-table-column>
<el-table-column
prop="history_details.fa.title"
label="عنوان"
width="">
</el-table-column>
<el-table-column
label="ویرایش"
width="150"
align="left">
<template slot-scope="scope">
<el-button type="warning" plain icon="el-icon-edit" @click="edit(scope.row._id)"></el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="del(scope.row._id)"></el-button>
</template>
</el-table-column>
</el-table>
</admin-panel>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: 'تاریخچه',
history: null,
}
},
head() {
return {
title: this.title,
}
},
methods: {
edit(id) {
this.$router.push(`/admin/history/${id}`)
},
del(id) {
this.$confirm('این مورد حذف شود؟', 'هشدار', {
confirmButtonText: 'بله',
cancelButtonText: 'لغو',
type: 'warning'
}).then(() => {
this.$axios.delete(`/api/private/history/${id}`).then(response => {
this.history = this.history.filter(item => {
return item._id !== id
})
this.$message({
type: 'success',
message: 'مورد حذف شد'
});
})
}).catch(() => {
this.$message({
type: 'warning',
message: 'عملیات لغو شد'
});
});
}
},
layout: 'admin',
async asyncData({$axios, store, error}) {
try {
let history = await $axios.get(`/api/public/history`)
return {
history: history.data
}
} catch (e) {
error({status: 404, message: 'There is a problem here'})
}
}
}
</script>
<style>
.el-table .el-table__body-wrapper .el-table__row .is-left{
text-align: left !important;
}
</style>