Amir Mohamadi
450 lines
22 KiB
Vue
450 lines
22 KiB
Vue
<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-item prop="published" label="در صفحه اصلی باشد">
|
|
<el-switch v-model="formData.favorite" 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;">ابعاد تصویر باید 1010px عرض و 534px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</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,
|
|
favorite: false,
|
|
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('favorite', this.formData.favorite)
|
|
|
|
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_image2 = 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, error}) {
|
|
try {
|
|
let productCategories = await $axios.get(`/api/public/productCategories`)
|
|
return {
|
|
productCategories: productCategories.data
|
|
}
|
|
} catch (e) {
|
|
error({status: 404, message: 'There is a problem here'})
|
|
}
|
|
}
|
|
}
|
|
</script>
|