back-end done
This commit is contained in:
Amir Mohamadi
@@ -0,0 +1,694 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">بروزرسانی</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<el-form-item prop="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
|
||||
<el-select v-model="formData.category" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in productCategories"
|
||||
:key="item._id"
|
||||
:label="item.category_details.fa.name"
|
||||
:value="item._id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.category">{{validation.category.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="بخش دوم نمایش داده شود">
|
||||
<el-switch v-model="formData.more_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="دارای فایل های قابل دانلود باشد">
|
||||
<el-switch v-model="formData.download_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>کاور</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.cover" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="cover" @change="previewCover">
|
||||
<p class="err" v-if="validation.cover">{{validation.cover.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 470px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">فارسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.fa.name"></el-input>
|
||||
<p class="err" v-if="validation.fa_name">{{validation.fa_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.short_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_short_description">{{validation.fa_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_title">{{validation.fa_page_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_description">{{validation.fa_page_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.fa.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title1">{{validation.fa_more_title1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description1">{{validation.fa_more_description1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.fa.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title2">{{validation.fa_more_title2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description2">{{validation.fa_more_description2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.fa.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_title">{{validation.fa_chart_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_description">{{validation.fa_chart_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">انگلیسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.en.name"></el-input>
|
||||
<p class="err" v-if="validation.en_name">{{validation.en_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.short_description"></el-input>
|
||||
<p class="err" v-if="validation.en_short_description">{{validation.en_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_title"></el-input>
|
||||
<p class="err" v-if="validation.en_page_title">{{validation.en_page_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_description"></el-input>
|
||||
<p class="err" v-if="validation.en_page_description">{{validation.en_page_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.en.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title1">{{validation.en_more_title1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description1">{{validation.en_more_description1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.en.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title2">{{validation.en_more_title2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description2">{{validation.en_more_description2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.en.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_title">{{validation.en_chart_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_description">{{validation.en_chart_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>عکس اول بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image1" @change="previewMore_section_image1">
|
||||
<p class="err" v-if="validation.more_section_image1">{{validation.more_section_image1.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<h2 class="secondTitle">عکس دوم بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image2" @change="previewMore_section_image2">
|
||||
<p class="err" v-if="validation.more_section_image2">{{validation.more_section_image2.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس اول شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image1" @change="previewRender_image1">
|
||||
<p class="err" v-if="validation.render_image1">{{validation.render_image1.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form style="margin-top: 30px;">
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption1 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption1">{{validation.fa_render_caption1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption1 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption1">{{validation.en_render_caption1.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس دوم شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image2" @change="previewRender_image2">
|
||||
<p class="err" v-if="validation.render_image2">{{validation.render_image2.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form style="margin-top: 30px;">
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption2 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption2">{{validation.fa_render_caption2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption2 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption2">{{validation.en_render_caption2.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس جدول مشخصات محصول</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.chart_image" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="chart_image" @change="previewChart_image">
|
||||
<p class="err" v-if="validation.chart_image">{{validation.chart_image.msg}}</p>
|
||||
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>تصاویر دیگر محصول</h2>
|
||||
<el-divider></el-divider>
|
||||
<div class="newImg">
|
||||
<img :src="productImage" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="gallery" @change="previewGallery">
|
||||
<p class="err" v-if="validation.images && validation.images.image">{{validation.images.image.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 470px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
<el-button type="primary" @click="addImage" style="margin-top: 10px;">افزودن</el-button>
|
||||
</div>
|
||||
<div class="images">
|
||||
<div class="imgBox" v-for="item in formData.images" :key="item._id">
|
||||
<img :src="item.image" alt="">
|
||||
<el-button type="danger" plain icon="el-icon-delete" class="dlt" v-if="item._id" @click="delImage(item._id)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>افزودن فایل PDF</h2>
|
||||
<el-divider></el-divider>
|
||||
<div class="pdf">
|
||||
<input type="file" ref="pdf">
|
||||
<p class="err" style="display: inline-block" v-if="validation.pdf">{{validation.pdf.msg}}</p>
|
||||
<el-button type="primary" @click="addPDF" style="margin-top: 10px;">افزودن</el-button>
|
||||
|
||||
<el-form style="margin-top: 30px;">
|
||||
<el-form-item prop="title" :class="validation.fa_pdf ? 'is-error' : ''" label="عنوان فارسی">
|
||||
<el-input v-model="fa_pdf"></el-input>
|
||||
<p class="err" v-if="validation.fa_pdf">{{validation.fa_pdf.msg}}</p>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" :class="validation.en_pdf ? 'is-error' : ''" label="عنوان انگلیسی">
|
||||
<el-input v-model="en_pdf"></el-input>
|
||||
<p class="err" v-if="validation.en_pdf">{{validation.en_pdf.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="PDF_Files">
|
||||
<div class="file" v-for="item in formData.pdf_files" :key="item._id">
|
||||
<a :href="item.file" :download="item.pdf_details.en.name" target="_blank">
|
||||
<i class="fas fa-file-pdf"></i>
|
||||
<b>فارسی: </b>
|
||||
<span>{{item.pdf_details.fa.name}}</span>
|
||||
<br>
|
||||
<!-- -->
|
||||
<b>انگلیسی: </b>
|
||||
<span>{{item.pdf_details.en.name}}</span>
|
||||
</a>
|
||||
<el-button type="danger" plain icon="el-icon-delete" @click="delPDF(item._id)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: null,
|
||||
productImage: '',
|
||||
fa_pdf: '',
|
||||
en_pdf: '',
|
||||
productCategories: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'ویرایش محصول'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData()
|
||||
|
||||
data.append('fa_name', this.formData.product_details.fa.name)
|
||||
data.append('fa_short_description', this.formData.product_details.fa.short_description)
|
||||
data.append('fa_page_title', this.formData.product_details.fa.page_title)
|
||||
data.append('fa_page_description', this.formData.product_details.fa.page_description)
|
||||
data.append('fa_more_title1', this.formData.product_details.fa.more_title1)
|
||||
data.append('fa_more_description1', this.formData.product_details.fa.more_description1)
|
||||
data.append('fa_more_title2', this.formData.product_details.fa.more_title2)
|
||||
data.append('fa_more_description2', this.formData.product_details.fa.more_description2)
|
||||
data.append('fa_render_caption1', this.formData.product_details.fa.render_caption1)
|
||||
data.append('fa_render_caption2', this.formData.product_details.fa.render_caption2)
|
||||
data.append('fa_chart_title', this.formData.product_details.fa.chart_title)
|
||||
data.append('fa_chart_description', this.formData.product_details.fa.chart_description)
|
||||
|
||||
|
||||
data.append('en_name', this.formData.product_details.en.name)
|
||||
data.append('en_short_description', this.formData.product_details.en.short_description)
|
||||
data.append('en_page_title', this.formData.product_details.en.page_title)
|
||||
data.append('en_page_description', this.formData.product_details.en.page_description)
|
||||
data.append('en_more_title1', this.formData.product_details.en.more_title1)
|
||||
data.append('en_more_description1', this.formData.product_details.en.more_description1)
|
||||
data.append('en_more_title2', this.formData.product_details.en.more_title2)
|
||||
data.append('en_more_description2', this.formData.product_details.en.more_description2)
|
||||
data.append('en_render_caption1', this.formData.product_details.en.render_caption1)
|
||||
data.append('en_render_caption2', this.formData.product_details.en.render_caption2)
|
||||
data.append('en_chart_title', this.formData.product_details.en.chart_title)
|
||||
data.append('en_chart_description', this.formData.product_details.en.chart_description)
|
||||
|
||||
data.append('category', this.formData.category)
|
||||
data.append('download_section', this.formData.download_section)
|
||||
data.append('more_section', this.formData.more_section)
|
||||
|
||||
if (this.$refs.cover.files[0]) data.append('cover', this.$refs.cover.files[0])
|
||||
if (this.$refs.more_section_image1.files[0]) data.append('more_section_image1', this.$refs.more_section_image1.files[0])
|
||||
if (this.$refs.more_section_image2.files[0]) data.append('more_section_image2', this.$refs.more_section_image2.files[0])
|
||||
if (this.$refs.render_image1.files[0]) data.append('render_image1', this.$refs.render_image1.files[0])
|
||||
if (this.$refs.render_image2.files[0]) data.append('render_image2', this.$refs.render_image2.files[0])
|
||||
if (this.$refs.chart_image.files[0]) data.append('chart_image', this.$refs.chart_image.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$axios.put(`/api/private/products/${this.formData._id}`, data, axiosConfig)
|
||||
.then(response => {
|
||||
this.formData = response.data
|
||||
this.$message({
|
||||
message: 'محصول با موفقیت بروزرسانی شد.',
|
||||
type: 'success'
|
||||
})
|
||||
// clear file inputs
|
||||
this.$refs.cover.value = null
|
||||
this.$refs.more_section_image1.value = null
|
||||
this.$refs.more_section_image2.value = null
|
||||
this.$refs.render_image1.value = null
|
||||
this.$refs.render_image2.value = null
|
||||
this.$refs.chart_image.value = null
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
addImage() {
|
||||
this.validation.images = {}
|
||||
const data = new FormData()
|
||||
data.append('product_id', this.formData._id)
|
||||
data.append('image', this.$refs.gallery.files[0])
|
||||
|
||||
this.$axios.post(`/api/private/productImage`, data)
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'تصویر جدید با موفقیت افزوده شد.'
|
||||
})
|
||||
this.$refs.gallery.value = null
|
||||
this.productImage = ''
|
||||
this.formData = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
this.validation = err.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
delImage(id) {
|
||||
this.$confirm('این آیتم حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios.delete(`/api/private//productImage/${id}`)
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'تصویر با موفقیت حذف شد.'
|
||||
})
|
||||
this.formData.images = this.formData.images.filter(item => {
|
||||
return item._id !== id
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
})
|
||||
})
|
||||
},
|
||||
addPDF() {
|
||||
this.validation = {}
|
||||
const data = new FormData()
|
||||
data.append('product_id', this.formData._id)
|
||||
data.append('fa_pdf', this.fa_pdf)
|
||||
data.append('en_pdf', this.en_pdf)
|
||||
data.append('pdf', this.$refs.pdf.files[0])
|
||||
|
||||
this.$axios.post(`/api/private/productPDF`, data)
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'فایل جدید با موفقیت افزوده شد.'
|
||||
})
|
||||
this.fa_pdf = ''
|
||||
this.en_pdf = ''
|
||||
this.$refs.pdf.value = null
|
||||
this.formData = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) {
|
||||
this.validation = err.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
delPDF(id) {
|
||||
this.$confirm('این آیتم حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios.delete(`/api/private//productPDF/${id}`)
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'فایل با موفقیت حذف شد.'
|
||||
})
|
||||
this.formData.pdf_files = this.formData.pdf_files.filter(item => {
|
||||
return item._id !== id
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
})
|
||||
})
|
||||
},
|
||||
previewCover(event) {
|
||||
this.formData.cover = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
previewMore_section_image1(event) {
|
||||
this.formData.more_section_image1 = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
previewMore_section_image2(event) {
|
||||
this.formData.more_section_image2 = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
previewRender_image1(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
previewRender_image2(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
previewGallery(event) {
|
||||
this.productImage = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
previewChart_image(event) {
|
||||
this.formData.chart_image = URL.createObjectURL(event.target.files[0])
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, params}) {
|
||||
let product = await $axios.get(`/api/public/product/${params.product}`)
|
||||
let productCategories = await $axios.get(`/api/public/productCategories`)
|
||||
return {
|
||||
formData: product.data,
|
||||
productCategories: productCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.features {
|
||||
ul {
|
||||
li {
|
||||
padding: 45px 15px 15px;
|
||||
background: #e7e7e7;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
|
||||
h6 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.dlt {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider__text {
|
||||
background: #e7e7e7;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
background: #c8cad0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.images {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
|
||||
.imgBox {
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
width: 200px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dlt {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.PDF_Files {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin-top: 30px;
|
||||
|
||||
.file {
|
||||
margin-bottom: 20px;
|
||||
background: rgba(#000, 0.03);
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
float: right;
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">بروزرسانی</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام فارسی">
|
||||
<el-input v-model="formData.category_details.fa.name"></el-input>
|
||||
<p class="err" v-if="validation.fa_name">{{validation.fa_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام انگلیسی">
|
||||
<el-input v-model="formData.category_details.en.name"></el-input>
|
||||
<p class="err" v-if="validation.en_name">{{validation.en_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'اصلاح دسته بندی'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = {}
|
||||
const data = new FormData()
|
||||
data.append('fa_name', this.formData.category_details.fa.name)
|
||||
data.append('en_name', this.formData.category_details.en.name)
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$axios.put(`/api/private/productCategories/${this.formData._id}`, data, axiosConfig)
|
||||
.then(response => {
|
||||
this.$message({
|
||||
message: 'دسته بندی با موفقیت بروزرسانی شد.',
|
||||
type: 'success'
|
||||
})
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, params}) {
|
||||
const category = await $axios.get(`/api/public/productCategories/${params.category}`)
|
||||
return {
|
||||
formData: category.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<nuxt-link :to="{name: 'admin-products-category-new'}">
|
||||
<el-button type="success">جدید</el-button>
|
||||
</nuxt-link>
|
||||
</admin-title-bar>
|
||||
<div class="col-12">
|
||||
<admin-panel>
|
||||
<el-table
|
||||
:data="categories"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="#">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="category_details.fa.name"
|
||||
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: 'دسته بندی محصولات',
|
||||
categories: null
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit(id) {
|
||||
this.$router.push(`/admin/products/category/${id}`)
|
||||
},
|
||||
del(id) {
|
||||
this.$confirm('این آیتم حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios.delete(`/api/private/productCategories/${id}`)
|
||||
.then(response => {
|
||||
this.categories = this.categories.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}) {
|
||||
let categories = await $axios.get(`/api/public/productCategories`);
|
||||
return {
|
||||
categories: categories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">ایجاد</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام فارسی">
|
||||
<el-input v-model="formData.fa_name"></el-input>
|
||||
<p class="err" v-if="validation.fa_name">{{validation.fa_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام انگلیسی">
|
||||
<el-input v-model="formData.en_name"></el-input>
|
||||
<p class="err" v-if="validation.en_name">{{validation.en_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
fa_name: '',
|
||||
en_name: ''
|
||||
},
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'افزودن دسته بندی'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData();
|
||||
data.append('fa_name', this.formData.fa_name)
|
||||
data.append('en_name', this.formData.en_name)
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.post(`/api/private/productCategories`, data, axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'دسته بندی با موفقیت ثبت شد.',
|
||||
type: 'success'
|
||||
});
|
||||
this.$router.push({name: 'admin-products-category'})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<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>
|
||||
@@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">ایجاد</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<p style="margin-bottom: 50px;color: green;font-weight: bold;font-size: 20px;">ابتدا محصول را ثبت کرده، سپس در مرحله بعد عکس های بیشتر و ویژگی های محصول را وارد کنید.</p>
|
||||
<el-form>
|
||||
|
||||
<el-form-item prop="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
|
||||
<el-select v-model="formData.category" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in productCategories"
|
||||
:key="item._id"
|
||||
:label="item.category_details.fa.name"
|
||||
:value="item._id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.category">{{validation.category.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="بخش دوم نمایش داده شود">
|
||||
<el-switch v-model="formData.more_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="دارای فایل های قابل دانلود باشد">
|
||||
<el-switch v-model="formData.download_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>کاور</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.cover" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="cover" @change="previewCover">
|
||||
<p class="err" v-if="validation.cover">{{validation.cover.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 470px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">فارسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.fa.name"></el-input>
|
||||
<p class="err" v-if="validation.fa_name">{{validation.fa_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.short_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_short_description">{{validation.fa_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_title">{{validation.fa_page_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_description">{{validation.fa_page_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.fa.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title1">{{validation.fa_more_title1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description1">{{validation.fa_more_description1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.fa.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title2">{{validation.fa_more_title2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description2">{{validation.fa_more_description2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.fa.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_title">{{validation.fa_chart_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_description">{{validation.fa_chart_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">انگلیسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.en.name"></el-input>
|
||||
<p class="err" v-if="validation.en_name">{{validation.en_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.short_description"></el-input>
|
||||
<p class="err" v-if="validation.en_short_description">{{validation.en_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_title"></el-input>
|
||||
<p class="err" v-if="validation.en_page_title">{{validation.en_page_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_description"></el-input>
|
||||
<p class="err" v-if="validation.en_page_description">{{validation.en_page_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.en.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title1">{{validation.en_more_title1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description1">{{validation.en_more_description1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.en.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title2">{{validation.en_more_title2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description2">{{validation.en_more_description2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.en.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_title">{{validation.en_chart_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_description">{{validation.en_chart_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>عکس اول بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image1" @change="previewMore_section_image1">
|
||||
<p class="err" v-if="validation.more_section_image1">{{validation.more_section_image1.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<h2 class="secondTitle">عکس دوم بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image2" @change="previewMore_section_image2">
|
||||
<p class="err" v-if="validation.more_section_image2">{{validation.more_section_image2.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس اول شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image1" @change="previewRender_image1">
|
||||
<p class="err" v-if="validation.render_image1">{{validation.render_image1.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption1 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption1">{{validation.fa_render_caption1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption1 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption1">{{validation.en_render_caption1.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس دوم شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image2" @change="previewRender_image2">
|
||||
<p class="err" v-if="validation.render_image2">{{validation.render_image2.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption2 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption2">{{validation.fa_render_caption2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption2 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption2">{{validation.en_render_caption2.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس جدول مشخصات محصول</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.chart_image" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="chart_image" @change="previewChart_image">
|
||||
<p class="err" v-if="validation.chart_image">{{validation.chart_image.msg}}</p>
|
||||
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
cover: '',
|
||||
more_section_image1: '',
|
||||
more_section_image2: '',
|
||||
render_image1: '',
|
||||
render_image2: '',
|
||||
chart_image: '',
|
||||
category: '',
|
||||
more_section: true,
|
||||
download_section: true,
|
||||
product_details: {
|
||||
fa: {
|
||||
name: '',
|
||||
short_description: '',
|
||||
page_title: '',
|
||||
page_description: '',
|
||||
more_title1: '',
|
||||
more_description1: '',
|
||||
more_title2: '',
|
||||
more_description2: '',
|
||||
render_caption1: '',
|
||||
render_caption2: '',
|
||||
chart_title: '',
|
||||
chart_description: ''
|
||||
},
|
||||
en: {
|
||||
name: '',
|
||||
short_description: '',
|
||||
page_title: '',
|
||||
page_description: '',
|
||||
more_title1: '',
|
||||
more_description1: '',
|
||||
more_title2: '',
|
||||
more_description2: '',
|
||||
render_caption1: '',
|
||||
render_caption2: '',
|
||||
chart_title: '',
|
||||
chart_description: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
productCategories: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'افزودن محصول'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async locale(newVal, oldVal) {
|
||||
let productCategories = await this.$axios.get(`/api/public/productCategories/${newVal}`)
|
||||
this.productCategories = productCategories.data
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData();
|
||||
data.append('fa_name', this.formData.product_details.fa.name)
|
||||
data.append('fa_short_description', this.formData.product_details.fa.short_description)
|
||||
data.append('fa_page_title', this.formData.product_details.fa.page_title)
|
||||
data.append('fa_page_description', this.formData.product_details.fa.page_description)
|
||||
data.append('fa_more_title1', this.formData.product_details.fa.more_title1)
|
||||
data.append('fa_more_description1', this.formData.product_details.fa.more_description1)
|
||||
data.append('fa_more_title2', this.formData.product_details.fa.more_title2)
|
||||
data.append('fa_more_description2', this.formData.product_details.fa.more_description2)
|
||||
data.append('fa_render_caption1', this.formData.product_details.fa.render_caption1)
|
||||
data.append('fa_render_caption2', this.formData.product_details.fa.render_caption2)
|
||||
data.append('fa_chart_title', this.formData.product_details.fa.chart_title)
|
||||
data.append('fa_chart_description', this.formData.product_details.fa.chart_description)
|
||||
|
||||
|
||||
data.append('en_name', this.formData.product_details.en.name)
|
||||
data.append('en_short_description', this.formData.product_details.en.short_description)
|
||||
data.append('en_page_title', this.formData.product_details.en.page_title)
|
||||
data.append('en_page_description', this.formData.product_details.en.page_description)
|
||||
data.append('en_more_title1', this.formData.product_details.en.more_title1)
|
||||
data.append('en_more_description1', this.formData.product_details.en.more_description1)
|
||||
data.append('en_more_title2', this.formData.product_details.en.more_title2)
|
||||
data.append('en_more_description2', this.formData.product_details.en.more_description2)
|
||||
data.append('en_render_caption1', this.formData.product_details.en.render_caption1)
|
||||
data.append('en_render_caption2', this.formData.product_details.en.render_caption2)
|
||||
data.append('en_chart_title', this.formData.product_details.en.chart_title)
|
||||
data.append('en_chart_description', this.formData.product_details.en.chart_description)
|
||||
|
||||
data.append('category', this.formData.category)
|
||||
data.append('download_section', this.formData.download_section)
|
||||
data.append('more_section', this.formData.more_section)
|
||||
|
||||
data.append('cover', this.$refs.cover.files[0])
|
||||
data.append('more_section_image1', this.$refs.more_section_image1.files[0])
|
||||
data.append('more_section_image2', this.$refs.more_section_image2.files[0])
|
||||
data.append('render_image1', this.$refs.render_image1.files[0])
|
||||
data.append('render_image2', this.$refs.render_image2.files[0])
|
||||
data.append('chart_image', this.$refs.chart_image.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.post(`/api/private/products`, data, axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'محصول با موفقیت ثبت شد.',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push(`/admin/products/${response.data._id}`)
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
previewCover(event) {
|
||||
this.formData.cover = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewMore_section_image1(event) {
|
||||
this.formData.more_section_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewMore_section_image2(event) {
|
||||
this.formData.more_section_image2 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewRender_image1(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewRender_image2(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewChart_image(event) {
|
||||
this.formData.chart_image = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, store}) {
|
||||
let productCategories = await $axios.get(`/api/public/productCategories`)
|
||||
return {
|
||||
productCategories: productCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user