Files
arakrail/pages/admin/products/index.vue
T
Amir Mohamadi bc5e617778 back-end done
2020-12-10 16:36:48 +03:30

130 lines
3.5 KiB
Vue

<template>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<nuxt-link :to="{name: 'admin-products-new'}">
<el-button type="success">جدید</el-button>
</nuxt-link>
</admin-title-bar>
<div class="col-lg-12">
<admin-panel>
<el-table
:data="products"
style="width: 100%">
<el-table-column
type="index"
label="#">
</el-table-column>
<el-table-column
label="تصویر"
width="230">
<template slot-scope="scope">
<el-image
style="width: 100%; height: 100%"
:src="scope.row.cover"
fit="fit">
</el-image>
</template>
</el-table-column>
<el-table-column
prop="product_details.fa.name"
label="نام"
width="">
</el-table-column>
<el-table-column
prop="category"
label="دسته بندی"
width="">
<template slot-scope="scope">
{{categoryName(scope.row.category)}}
</template>
</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: 'لیست محصولات',
products: null,
productCategories: null
}
},
head() {
return {
title: this.title,
}
},
methods: {
categoryName(id) {
let category = this.productCategories.filter(item => {
return item._id === id
})
return category[0].category_details.fa.name
},
edit(id) {
this.$router.push(`/admin/products/${id}`)
},
del(id) {
this.$confirm('این محصول حذف شود؟', 'هشدار', {
confirmButtonText: 'بله',
cancelButtonText: 'لغو',
type: 'warning'
}).then(() => {
this.$axios.delete(`/api/private/products/${id}`)
.then(response => {
this.products = this.products.filter(item => {
return item._id !== id
})
this.$message({
type: 'success',
message: 'آیتم حذف شد'
})
})
.catch(err => {
this.$message({
type: 'error',
message: err.response.data.message
})
})
}).catch(() => {
this.$message({
type: 'warning',
message: 'عملیات لغو شد'
});
});
}
},
layout: 'admin',
async asyncData({$axios, store}) {
let products = await $axios.get(`/api/public/products`)
let productCategories = await $axios.get(`/api/public/productCategories`)
return {
products: products.data,
productCategories: productCategories.data
}
}
}
</script>