1538 lines
82 KiB
Vue
Executable File
1538 lines
82 KiB
Vue
Executable File
<template>
|
||
<div>
|
||
<div class="row">
|
||
<div class="col-md-12 col-12">
|
||
<form class="form form-vertical" @submit.prevent="StoreProduct">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Добавить</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<div class="form-body">
|
||
<p>Все поля обозначенные * обязательные</p>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="form-group">
|
||
<label for="nameru"
|
||
>Названия RU
|
||
*</label
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="
|
||
product.name.ru
|
||
"
|
||
required
|
||
id="nameru"
|
||
class="form-control"
|
||
placeholder="Названия RU *"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6">
|
||
<div class="form-group">
|
||
<label for="name"
|
||
>Названия UZ
|
||
*</label
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="
|
||
product.name.uz
|
||
"
|
||
required
|
||
id="name"
|
||
class="form-control"
|
||
placeholder="Названия UZ *"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="form-group">
|
||
<label>Категория *</label>
|
||
|
||
<multiselect
|
||
:options="categories"
|
||
v-model="category.path[0]"
|
||
label="category"
|
||
@input="selectCategoryLevel(0)"
|
||
track-by="id"
|
||
></multiselect>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="col-4"
|
||
v-for="level in categoryLevels"
|
||
:key="'category-level-' + level"
|
||
>
|
||
<div class="form-group">
|
||
<label>Суб категория *</label>
|
||
|
||
<multiselect
|
||
:options="categoryOptions(level)"
|
||
v-model="category.path[level]"
|
||
label="category"
|
||
@input="selectCategoryLevel(level)"
|
||
track-by="id"
|
||
></multiselect>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="brand"
|
||
>Бренд *</label
|
||
>
|
||
<select
|
||
class="form-control"
|
||
id="brand"
|
||
v-model="product.brand_id"
|
||
>
|
||
<option
|
||
v-for="brand in brands"
|
||
:value="brand.id"
|
||
>
|
||
{{ brand.name.ru }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="brand"
|
||
>Измерение *</label
|
||
>
|
||
<select
|
||
class="form-control"
|
||
id="measurement"
|
||
v-model="
|
||
product.measurement_id
|
||
"
|
||
>
|
||
<option
|
||
v-for="mea in measurement"
|
||
:value="mea.id"
|
||
>
|
||
{{ mea.name.ru }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="col-12">-->
|
||
<!-- <div class="form-group">-->
|
||
<!-- <label for="euro">Валюта *</label>-->
|
||
<!-- <select class="form-control" id="euro" v-model="product.currency">-->
|
||
<!-- <option value="sum">-->
|
||
<!-- So`m UZS-->
|
||
<!-- </option>-->
|
||
|
||
<!-- <option value="dollar">-->
|
||
<!-- Dollar $-->
|
||
<!-- </option>-->
|
||
|
||
<!-- <option value="euro">-->
|
||
<!-- EURO €-->
|
||
<!-- </option>-->
|
||
<!-- </select>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="price"
|
||
>Цена *</label
|
||
>
|
||
<input
|
||
type="number"
|
||
min="0.0001"
|
||
v-model="product.price"
|
||
step="0.0001"
|
||
required
|
||
id="price"
|
||
class="form-control"
|
||
placeholder="Цена"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="price_discount"
|
||
>Цена со скидкой</label
|
||
>
|
||
<input
|
||
type="number"
|
||
v-model="
|
||
product.price_discount
|
||
"
|
||
step="0.0001"
|
||
id="price_discount"
|
||
class="form-control"
|
||
placeholder="Цена со скидкой"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="col-12">-->
|
||
<!-- <div class="form-group">-->
|
||
<!-- <label for="price_credit"-->
|
||
<!-- >Цена для рассрочки</label-->
|
||
<!-- >-->
|
||
<!-- <input-->
|
||
<!-- type="number"-->
|
||
<!-- v-model="-->
|
||
<!-- product.price_credit-->
|
||
<!-- "-->
|
||
<!-- step="0.01"-->
|
||
<!-- id="price_credit"-->
|
||
<!-- class="form-control"-->
|
||
<!-- placeholder="Цена для рассрочки"-->
|
||
<!-- />-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="article_number"
|
||
>Артикул *</label
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="
|
||
product.article_number
|
||
"
|
||
id="article_number"
|
||
class="form-control"
|
||
placeholder="Артикул"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="count_product"
|
||
>Количество товаров на
|
||
складе *</label
|
||
>
|
||
<input
|
||
type="number"
|
||
v-model="product.count"
|
||
id="count_product"
|
||
class="form-control"
|
||
placeholder="Количество товаров на складе"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="power"
|
||
>Power (W)</label
|
||
>
|
||
<input
|
||
type="number"
|
||
v-model="product.power"
|
||
id="power"
|
||
class="form-control"
|
||
placeholder="405"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="col-12">-->
|
||
<!-- <div class="form-group">-->
|
||
<!-- <label for="slug"-->
|
||
<!-- >Ссылка на продукт (не-->
|
||
<!-- обязательно)</label-->
|
||
<!-- >-->
|
||
<!-- <input-->
|
||
<!-- type="text"-->
|
||
<!-- v-model="product.slug"-->
|
||
<!-- id="slug"-->
|
||
<!-- class="form-control"-->
|
||
<!-- placeholder="iphone-pro-max"-->
|
||
<!-- />-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="data_sheet"
|
||
>Data Sheet</label
|
||
>
|
||
<input
|
||
class="form-control"
|
||
@change="
|
||
dataSheetFile($event)
|
||
"
|
||
type="file"
|
||
id="data_sheet"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="data_sheet"
|
||
>Расчет</label
|
||
>
|
||
<input
|
||
class="form-control"
|
||
@change="
|
||
calcFile($event)
|
||
"
|
||
type="file"
|
||
id="calc"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-group">
|
||
<label for="poster"
|
||
>Изображения *</label
|
||
>
|
||
<input
|
||
class="form-control"
|
||
@change="posterFile($event)"
|
||
required
|
||
type="file"
|
||
id="poster"
|
||
/>
|
||
</div>
|
||
|
||
<br />
|
||
<div class="text-center">
|
||
<img
|
||
id="uploadPreview"
|
||
:src="getPosterPreview()"
|
||
style="
|
||
width: 300px;
|
||
height: auto;
|
||
"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<ul
|
||
class="nav nav-tabs"
|
||
id="myTab"
|
||
role="tablist"
|
||
>
|
||
<li
|
||
class="nav-item"
|
||
role="presentation"
|
||
>
|
||
<a
|
||
class="nav-link active"
|
||
id="ru-tab"
|
||
data-toggle="tab"
|
||
href="#ru"
|
||
role="tab"
|
||
aria-controls="ru"
|
||
aria-selected="true"
|
||
>RU</a
|
||
>
|
||
</li>
|
||
<li
|
||
class="nav-item"
|
||
role="presentation"
|
||
>
|
||
<a
|
||
class="nav-link"
|
||
id="uz-tab"
|
||
data-toggle="tab"
|
||
href="#uz"
|
||
role="tab"
|
||
aria-controls="uz"
|
||
aria-selected="false"
|
||
>UZ</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="row">
|
||
<div
|
||
class="tab-content w-100"
|
||
id="myTabContent"
|
||
>
|
||
<div
|
||
class="tab-pane fade show active"
|
||
id="ru"
|
||
role="tabpanel"
|
||
aria-labelledby="ru-tab"
|
||
>
|
||
<div
|
||
class="col-12"
|
||
>
|
||
<div
|
||
class="form-group"
|
||
>
|
||
<label
|
||
>Короткий
|
||
описания
|
||
RU
|
||
*</label
|
||
>
|
||
<textarea
|
||
cols="3"
|
||
@keyup="
|
||
remaincharRUCount
|
||
"
|
||
:class="
|
||
this
|
||
.product
|
||
.short_body
|
||
.ru
|
||
.length >
|
||
300
|
||
? 'form-control is-invalid'
|
||
: 'form-control'
|
||
"
|
||
v-model="
|
||
product
|
||
.short_body
|
||
.ru
|
||
"
|
||
></textarea>
|
||
{{
|
||
this
|
||
.short_limit
|
||
.ru
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="col-12"
|
||
>
|
||
<div
|
||
class="form-group"
|
||
>
|
||
<label
|
||
>Описания
|
||
RU
|
||
*</label
|
||
>
|
||
<ckeditor
|
||
:editor="
|
||
editor
|
||
"
|
||
v-model="
|
||
product
|
||
.body
|
||
.ru
|
||
"
|
||
:config="
|
||
editorConfig
|
||
"
|
||
></ckeditor>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tab-pane fade"
|
||
id="uz"
|
||
role="tabpanel"
|
||
aria-labelledby="uz-tab"
|
||
>
|
||
<div
|
||
class="col-12"
|
||
>
|
||
<div
|
||
class="form-group"
|
||
>
|
||
<label
|
||
>Короткий
|
||
описания
|
||
UZ
|
||
*</label
|
||
>
|
||
<textarea
|
||
cols="3"
|
||
@keyup="
|
||
remaincharUZCount
|
||
"
|
||
:class="
|
||
this
|
||
.product
|
||
.short_body
|
||
.uz
|
||
.length >
|
||
300
|
||
? 'form-control is-invalid'
|
||
: 'form-control'
|
||
"
|
||
v-model="
|
||
product
|
||
.short_body
|
||
.uz
|
||
"
|
||
></textarea>
|
||
{{
|
||
this
|
||
.short_limit
|
||
.uz
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="col-12"
|
||
>
|
||
<div
|
||
class="form-group"
|
||
>
|
||
<label
|
||
>Описания
|
||
UZ
|
||
*</label
|
||
>
|
||
<ckeditor
|
||
:editor="
|
||
editor
|
||
"
|
||
v-model="
|
||
product
|
||
.body
|
||
.uz
|
||
"
|
||
:config="
|
||
editorConfig
|
||
"
|
||
></ckeditor>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" v-if="characteristics.length > 0">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Характеристики *</h4>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<div
|
||
class="col-md-12"
|
||
v-for="(char, index) in characteristics"
|
||
:key="index"
|
||
>
|
||
<div class="row">
|
||
<div
|
||
class="col-xl-4 col-md-6 col-12 mb-1"
|
||
>
|
||
<fieldset class="form-group">
|
||
<input
|
||
type="text"
|
||
disabled
|
||
v-model="char.name.ru"
|
||
class="form-control"
|
||
/>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div
|
||
class="col-xl-4 col-md-6 col-12 mb-1"
|
||
>
|
||
<fieldset
|
||
class="form-group"
|
||
v-if="char.type != 'checkbox'"
|
||
>
|
||
<input
|
||
:type="char.type"
|
||
min="0"
|
||
v-model="char.value"
|
||
class="form-control"
|
||
/>
|
||
</fieldset>
|
||
|
||
<fieldset v-else>
|
||
<div
|
||
class="vs-checkbox-con vs-checkbox-primary"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="char.value"
|
||
/>
|
||
<span class="vs-checkbox">
|
||
<span
|
||
class="vs-checkbox--check"
|
||
>
|
||
<i
|
||
class="vs-icon feather icon-check"
|
||
></i>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" v-for="(color, index) in product.colors">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Изображения</h4>
|
||
<!-- <h4 class="card-title">Добавить Цвет *</h4>-->
|
||
<!-- <button type="button" @click="DeleteColor(index)" class="btn btn-danger"><i class="fa fa-trash"></i> Удалить</button>-->
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<div class="form-body">
|
||
<div class="row">
|
||
<!-- <div class="col-12">-->
|
||
<!-- <div class="form-group">-->
|
||
<!-- <label for="color">Цвет</label>-->
|
||
<!-- <select class="form-control" id="color" v-model="color.color_id">-->
|
||
<!-- <option selected value="null">-->
|
||
<!-- Не выбран-->
|
||
<!-- </option>-->
|
||
|
||
<!-- <option v-for="color in colors" :value="color.id">-->
|
||
<!-- {{ color.name.ru}}-->
|
||
<!-- </option>-->
|
||
<!-- </select>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="col-12">-->
|
||
<!-- <div class="form-group">-->
|
||
<!-- <label for="colorarticle_number">Артикул</label>-->
|
||
<!-- <input type="text" v-model="color.article_number" id="colorarticle_number" class="form-control" placeholder="Артикул">-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="col-md-12" v-for="(size, indexx) in color.sizes">-->
|
||
<!-- <div class="row">-->
|
||
<!-- <div class="col-xl-4 col-md-6 col-12 mb-1">-->
|
||
<!-- <fieldset class="form-group">-->
|
||
<!-- <label for="size">Размер *</label>-->
|
||
<!-- <input type="text" v-model="size.name" required class="form-control" id="size" placeholder="XS или 39">-->
|
||
<!-- </fieldset>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="col-xl-4 col-md-6 col-12 mb-1">-->
|
||
<!-- <fieldset class="form-group">-->
|
||
<!-- <label for="count">Количество *</label>-->
|
||
<!-- <input type="number" v-model="size.count" required min="0" class="form-control" id="count" placeholder="Количество">-->
|
||
<!-- </fieldset>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="col-xl-2 col-md-2 col-2 mb-1">-->
|
||
<!-- <button type="button" @click="DeleteSize(index, indexx)" class="btn btn-icon mt-1 btn-danger">-->
|
||
<!-- <i class="fa fa-trash"></i>-->
|
||
<!-- </button>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div class="col-12">-->
|
||
<!-- <button type="button" @click="AddSize(index)" class="btn btn-icon btn-info mr-1 mb-1 waves-effect waves-light">-->
|
||
<!-- <i class="fa fa-plus"></i> Добавить размер *-->
|
||
<!-- </button>-->
|
||
<!-- </div>-->
|
||
|
||
<div class="col-md-12">
|
||
<VueFileAgent
|
||
ref="vueFileAgent"
|
||
:theme="'default'"
|
||
:multiple="true"
|
||
:deletable="true"
|
||
:linkable="true"
|
||
:meta="true"
|
||
:accept="'image/*'"
|
||
:maxSize="'10MB'"
|
||
:maxFiles="14"
|
||
:helpText="'Choose images or zip files'"
|
||
:errorText="{
|
||
type: 'Invalid file type. Only images or zip Allowed',
|
||
size: 'Files should not exceed 10MB in size',
|
||
}"
|
||
@beforedelete="
|
||
onBeforeDelete(
|
||
$event,
|
||
index
|
||
)
|
||
"
|
||
@delete="
|
||
fileDeleted($event, index)
|
||
"
|
||
v-model="color.screens"
|
||
></VueFileAgent>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">SEO</h4>
|
||
</div>
|
||
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="form-group">
|
||
<label for="nameru"
|
||
>Title Seo RU *</label
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="product.title_seo.ru"
|
||
id="nameru"
|
||
class="form-control"
|
||
placeholder="Title Seo RU *"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-6">
|
||
<div class="form-group">
|
||
<label for="name"
|
||
>Title Seo UZ *</label
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="product.title_seo.uz"
|
||
id="name"
|
||
class="form-control"
|
||
placeholder="Title Seo UZ *"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="row">
|
||
<div class="col-md-6 float-left">
|
||
<fieldset
|
||
class="form-label-group"
|
||
>
|
||
<textarea
|
||
class="form-control"
|
||
v-model="
|
||
product.keywords.ru
|
||
"
|
||
id="label-keywords-ru"
|
||
rows="3"
|
||
:placeholder="
|
||
$t(
|
||
'admin.settings.keywords'
|
||
) + ' RU'
|
||
"
|
||
></textarea>
|
||
<label
|
||
for="label-keywords-ru"
|
||
>{{
|
||
$t(
|
||
"admin.settings.keywords"
|
||
)
|
||
}}
|
||
RU *</label
|
||
>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="col-md-6 float-left">
|
||
<fieldset
|
||
class="form-label-group"
|
||
>
|
||
<textarea
|
||
class="form-control"
|
||
v-model="
|
||
product.keywords.uz
|
||
"
|
||
id="label-keywords"
|
||
rows="3"
|
||
:placeholder="
|
||
$t(
|
||
'admin.settings.keywords'
|
||
) + ' UZ'
|
||
"
|
||
></textarea>
|
||
<label for="label-keywords"
|
||
>{{
|
||
$t(
|
||
"admin.settings.keywords"
|
||
)
|
||
}}
|
||
UZ *</label
|
||
>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="row">
|
||
<div class="col-md-6 float-left">
|
||
<fieldset
|
||
class="form-label-group"
|
||
>
|
||
<textarea
|
||
class="form-control"
|
||
v-model="
|
||
product.descriptions
|
||
.ru
|
||
"
|
||
id="label-description-ru"
|
||
rows="3"
|
||
:placeholder="
|
||
$t(
|
||
'admin.settings.description'
|
||
) + ' RU'
|
||
"
|
||
></textarea>
|
||
<label
|
||
for="label-description-ru"
|
||
>{{
|
||
$t(
|
||
"admin.settings.description"
|
||
)
|
||
}}
|
||
RU *</label
|
||
>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="col-md-6 float-left">
|
||
<fieldset
|
||
class="form-label-group"
|
||
>
|
||
<textarea
|
||
class="form-control"
|
||
v-model="
|
||
product.descriptions
|
||
.uz
|
||
"
|
||
id="label-description"
|
||
rows="3"
|
||
:placeholder="
|
||
$t(
|
||
'admin.settings.description'
|
||
) + ' UZ'
|
||
"
|
||
></textarea>
|
||
<label
|
||
for="label-description"
|
||
>{{
|
||
$t(
|
||
"admin.settings.description"
|
||
)
|
||
}}
|
||
UZ *</label
|
||
>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="col-12">-->
|
||
<!-- <div class="row">-->
|
||
<!-- <button type="button" @click="AddColor" class="btn btn-primary mr-1 mb-1 waves-effect waves-light">-->
|
||
<!-- <i class="fa fa-plus"></i> Добавить Цвет *-->
|
||
<!-- </button>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<div class="alert alert-danger" v-if="error">
|
||
<ul>
|
||
<li v-for="(error, index) in errors" :key="index">
|
||
<span v-for="msg in error" :key="msg">
|
||
{{ msg }}
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-content">
|
||
<div class="card-body">
|
||
<fieldset>
|
||
<div
|
||
class="vs-checkbox-con vs-checkbox-primary"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="product.is_ready_solution"
|
||
/>
|
||
<span class="vs-checkbox">
|
||
<span class="vs-checkbox--check">
|
||
<i
|
||
class="vs-icon feather icon-check"
|
||
></i>
|
||
</span>
|
||
</span>
|
||
|
||
<span class="">Готовый продукция</span>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<div
|
||
class="vs-checkbox-con vs-checkbox-primary"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="product.published"
|
||
/>
|
||
<span class="vs-checkbox">
|
||
<span class="vs-checkbox--check">
|
||
<i
|
||
class="vs-icon feather icon-check"
|
||
></i>
|
||
</span>
|
||
</span>
|
||
|
||
<span class="">Публиковать</span>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<div
|
||
class="vs-checkbox-con vs-checkbox-primary"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="product.available"
|
||
/>
|
||
<span class="vs-checkbox">
|
||
<span class="vs-checkbox--check">
|
||
<i
|
||
class="vs-icon feather icon-check"
|
||
></i>
|
||
</span>
|
||
</span>
|
||
|
||
<span class="">В наличии</span>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<div
|
||
class="vs-checkbox-con vs-checkbox-primary"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
v-model="product.leader_of_sales"
|
||
/>
|
||
<span class="vs-checkbox">
|
||
<span class="vs-checkbox--check">
|
||
<i
|
||
class="vs-icon feather icon-check"
|
||
></i>
|
||
</span>
|
||
</span>
|
||
|
||
<span class=""
|
||
>Добавить в "Лидеры продаж"
|
||
(XIT)</span
|
||
>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- <fieldset>-->
|
||
<!-- <div class="vs-checkbox-con vs-checkbox-primary">-->
|
||
<!-- <input type="checkbox" v-model="product.popular">-->
|
||
<!-- <span class="vs-checkbox">-->
|
||
<!-- <span class="vs-checkbox--check">-->
|
||
<!-- <i class="vs-icon feather icon-check"></i>-->
|
||
<!-- </span>-->
|
||
<!-- </span>-->
|
||
|
||
<!-- <span class="">Добавить в "Популярные товары"</span>-->
|
||
<!-- </div>-->
|
||
<!-- </fieldset>-->
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="col-12 mb-0">
|
||
<div class="row">
|
||
<div class="col-3">
|
||
<button
|
||
type="submit"
|
||
class="btn btn-primary mr-1 mb-1 waves-effect waves-light btn-icon"
|
||
>
|
||
<i
|
||
class="feather icon-save"
|
||
></i>
|
||
{{ $t("admin.save") }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="col-9">
|
||
<a
|
||
:href="backUrl"
|
||
class="btn btn-danger mr-1 mb-1 waves-effect waves-light btn-icon pull-right"
|
||
>
|
||
<i
|
||
class="feather icon-x-circle"
|
||
></i>
|
||
{{ $t("admin.cancel") }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
||
|
||
export default {
|
||
props: ["brands", "categories", "colors", "backUrl", "measurement"],
|
||
|
||
data: () => ({
|
||
editor: ClassicEditor,
|
||
|
||
// Toolbar customization (without image, table, and video)
|
||
editorConfig: {
|
||
toolbar: [
|
||
"heading", // Heading options
|
||
"|",
|
||
"bold", // Bold text
|
||
"italic", // Italic text
|
||
"link", // Link button
|
||
"bulletedList", // Bulleted list
|
||
"numberedList", // Numbered list
|
||
"blockQuote", // Blockquote
|
||
"alignment:left", // Align left
|
||
"alignment:center", // Align center
|
||
"alignment:right", // Align right
|
||
"|",
|
||
"undo", // Undo button
|
||
"redo", // Redo button
|
||
],
|
||
},
|
||
|
||
short_limit: {
|
||
ru: "Осталось 300 символов.",
|
||
uz: "Осталось 300 символов.",
|
||
},
|
||
|
||
product: {
|
||
name: {
|
||
ru: null,
|
||
uz: null,
|
||
},
|
||
body: {
|
||
ru: "",
|
||
uz: "",
|
||
},
|
||
|
||
short_body: {
|
||
ru: "",
|
||
uz: "",
|
||
},
|
||
|
||
// slug: null,
|
||
count: 0,
|
||
|
||
brand_id: null,
|
||
measurement_id: null,
|
||
|
||
currency: "sum",
|
||
|
||
price: null,
|
||
price_discount: null,
|
||
// price_credit: null,
|
||
poster: "",
|
||
data_sheet: "",
|
||
is_ready_solution: false,
|
||
|
||
category_id: null,
|
||
colors: [
|
||
{
|
||
color_id: null,
|
||
sizes: [],
|
||
article_number: null,
|
||
screens: [],
|
||
filesDataForUpload: [],
|
||
},
|
||
],
|
||
article_number: null,
|
||
published: true,
|
||
popular: false,
|
||
leader_of_sales: false,
|
||
power: null,
|
||
available: true,
|
||
descriptions: {
|
||
ru: "",
|
||
uz: "",
|
||
},
|
||
keywords: {
|
||
ru: "",
|
||
uz: "",
|
||
},
|
||
title_seo: {
|
||
ru: "",
|
||
uz: "",
|
||
},
|
||
},
|
||
|
||
category: {
|
||
first: {
|
||
parents: [],
|
||
},
|
||
two: {
|
||
parents: [],
|
||
},
|
||
three: {},
|
||
two_view: false,
|
||
three_view: false,
|
||
path: [],
|
||
},
|
||
|
||
characteristic: false,
|
||
characteristics: [],
|
||
|
||
error: false,
|
||
errors: [],
|
||
}),
|
||
|
||
computed: {
|
||
uploadDisabled() {
|
||
return this.files.length === 0;
|
||
},
|
||
|
||
categoryLevels() {
|
||
const levels = [];
|
||
let current = this.category.path[0];
|
||
let level = 1;
|
||
|
||
while (current && current.parents && current.parents.length > 0) {
|
||
levels.push(level);
|
||
current = this.category.path[level];
|
||
level++;
|
||
}
|
||
|
||
return levels;
|
||
},
|
||
},
|
||
|
||
watch: {
|
||
"product.category_id": function (newVal) {
|
||
if (newVal) {
|
||
this.getCharacteristics(newVal);
|
||
}
|
||
},
|
||
|
||
"category.first": function (newVal) {
|
||
this.DetectCategory();
|
||
},
|
||
|
||
"category.two": function (newVal) {
|
||
if (!newVal || !newVal.id) {
|
||
return;
|
||
}
|
||
|
||
if (newVal.parents && newVal.parents.length > 0) {
|
||
this.DetectCategoryTwo();
|
||
} else {
|
||
this.product.category_id = newVal.id;
|
||
}
|
||
},
|
||
|
||
"category.three": function (newVal) {
|
||
if (!newVal || !newVal.id) {
|
||
return;
|
||
}
|
||
|
||
this.DetectCategoryThree();
|
||
},
|
||
|
||
"category.path": {
|
||
deep: true,
|
||
handler() {
|
||
const selected = this.lastSelectedCategory();
|
||
|
||
if (!selected) {
|
||
this.product.category_id = null;
|
||
this.characteristics = [];
|
||
return;
|
||
}
|
||
|
||
this.product.category_id = selected.id;
|
||
this.getCharacteristics(selected.id);
|
||
},
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
getPosterPreview() {
|
||
if (this.product.poster instanceof File) {
|
||
return URL.createObjectURL(this.product.poster);
|
||
}
|
||
return this.product.poster;
|
||
},
|
||
async StoreProduct() {
|
||
const header = {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
};
|
||
|
||
const formData = new FormData();
|
||
formData.append("poster", this.product.poster);
|
||
// if (this.product.data_sheet)
|
||
formData.append("data_sheet", this.product.data_sheet);
|
||
formData.append("name[ru]", this.product.name.ru);
|
||
formData.append("name[uz]", this.product.name.uz);
|
||
|
||
formData.append("body[ru]", this.product.body.ru);
|
||
formData.append("body[uz]", this.product.body.uz);
|
||
|
||
formData.append("short_body[ru]", this.product.short_body.ru);
|
||
formData.append("short_body[uz]", this.product.short_body.uz);
|
||
|
||
formData.append("brand_id", this.product.brand_id);
|
||
formData.append("measurement_id", this.product.measurement_id);
|
||
formData.append(
|
||
"is_ready_solution",
|
||
this.product.is_ready_solution
|
||
);
|
||
formData.append("power", this.product.power);
|
||
formData.append("published", this.product.published);
|
||
formData.append("popular", this.product.popular);
|
||
formData.append("calc", this.product.calc);
|
||
formData.append("leader_of_sales", this.product.leader_of_sales);
|
||
formData.append("currency", this.product.currency);
|
||
formData.append("article_number", this.product.article_number);
|
||
// formData.append("slug", this.product.slug);
|
||
formData.append("available", this.product.available);
|
||
formData.append("count", this.product.count);
|
||
|
||
formData.append("descriptions[ru]", this.product.descriptions.ru);
|
||
formData.append("descriptions[uz]", this.product.descriptions.uz);
|
||
formData.append("keywords[uz]", this.product.keywords.uz);
|
||
formData.append("keywords[ru]", this.product.keywords.ru);
|
||
|
||
formData.append("title_seo[ru]", this.product.title_seo.ru);
|
||
formData.append("title_seo[uz]", this.product.title_seo.uz);
|
||
|
||
// for (var i = 0; i < this.product.category_id.length; i++) {
|
||
if (this.product.category_id) {
|
||
formData.append("category_id", this.product.category_id);
|
||
}
|
||
|
||
// }
|
||
|
||
formData.append("price", this.product.price);
|
||
formData.append("price_discount", this.product.price_discount);
|
||
// formData.append("price_credit", this.product.price_credit);
|
||
|
||
for (var i = 0; i < this.product.colors.length; i++) {
|
||
if (this.product.colors[i].color_id) {
|
||
formData.append(
|
||
"colors[" + i + "][color_id]",
|
||
this.product.colors[i].color_id
|
||
);
|
||
} else {
|
||
formData.append("colors[" + i + "][color_id]", null);
|
||
}
|
||
|
||
for (
|
||
var sizes = 0;
|
||
sizes < this.product.colors[i].sizes.length;
|
||
sizes++
|
||
) {
|
||
formData.append(
|
||
"colors[" + i + "][sizes][" + sizes + "][name]",
|
||
this.product.colors[i].sizes[sizes].name
|
||
);
|
||
formData.append(
|
||
"colors[" + i + "][sizes][" + sizes + "][count]",
|
||
this.product.colors[i].sizes[sizes].count
|
||
);
|
||
}
|
||
|
||
formData.append(
|
||
"colors[" + i + "][article_number]",
|
||
this.product.colors[i].article_number
|
||
);
|
||
|
||
for (
|
||
var screens = 0;
|
||
screens < this.product.colors[i].screens.length;
|
||
screens++
|
||
) {
|
||
if (this.product.colors[i].screens[screens].file) {
|
||
formData.append(
|
||
"colors[" + i + "][screens][" + screens + "][image]",
|
||
this.product.colors[i].screens[screens].file
|
||
);
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
for (var i = 0; i < this.characteristics.length; i++) {
|
||
formData.append(
|
||
"characteristics[" + i + "][id]",
|
||
this.characteristics[i].id
|
||
);
|
||
formData.append(
|
||
"characteristics[" + i + "][value]",
|
||
this.characteristics[i].value
|
||
);
|
||
}
|
||
|
||
axios
|
||
.post("/dashboard/products/store", formData, header)
|
||
.then((response) => {
|
||
if (response.data.status) {
|
||
window.location.href = this.backUrl;
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
if (error.response) {
|
||
this.error = true;
|
||
this.errors = error.response.data.errors || {
|
||
product: [
|
||
error.response.data.error ||
|
||
error.response.data.messages ||
|
||
error.response.data.message ||
|
||
"Ошибка при сохранении",
|
||
],
|
||
};
|
||
}
|
||
});
|
||
},
|
||
|
||
categoryOptions(level) {
|
||
const parent = this.category.path[level - 1];
|
||
|
||
return parent && parent.parents ? parent.parents : [];
|
||
},
|
||
|
||
selectCategoryLevel(level) {
|
||
this.category.path.splice(level + 1);
|
||
},
|
||
|
||
lastSelectedCategory() {
|
||
for (let i = this.category.path.length - 1; i >= 0; i--) {
|
||
if (this.category.path[i] && this.category.path[i].id) {
|
||
return this.category.path[i];
|
||
}
|
||
}
|
||
|
||
return null;
|
||
},
|
||
|
||
remaincharRUCount: function () {
|
||
if (this.product.short_body.ru.length > 300) {
|
||
this.short_limit.ru = "Превышен лимит в 300 символов.";
|
||
} else {
|
||
let remainCharacters = 300 - this.product.short_body.ru.length;
|
||
this.short_limit.ru =
|
||
"Осталось " + remainCharacters + " символов.";
|
||
}
|
||
},
|
||
|
||
remaincharUZCount: function () {
|
||
if (this.product.short_body.uz.length > 300) {
|
||
this.short_limit.uz = "Превышен лимит в 300 символов.";
|
||
} else {
|
||
let remainCharacters = 300 - this.product.short_body.uz.length;
|
||
this.short_limit.uz =
|
||
"Осталось " + remainCharacters + " символов.";
|
||
}
|
||
},
|
||
|
||
AddColor() {
|
||
this.product.colors.push({
|
||
color_id: null,
|
||
sizes: [],
|
||
screens: [],
|
||
article_number: null,
|
||
filesDataForUpload: [],
|
||
});
|
||
},
|
||
|
||
posterFile(event) {
|
||
this.product.poster = event.target.files[0];
|
||
},
|
||
calcFile(event) {
|
||
this.product.calc = event.target.files[0];
|
||
},
|
||
|
||
|
||
dataSheetFile(event) {
|
||
this.product.data_sheet = event.target.files[0];
|
||
},
|
||
|
||
AddSize(index) {
|
||
this.product.colors[index].sizes.push({
|
||
name: null,
|
||
count: 0,
|
||
});
|
||
},
|
||
|
||
DeleteColor(index) {
|
||
this.product.colors.splice(index, 1);
|
||
},
|
||
|
||
DeleteSize(index, indexx) {
|
||
this.product.colors[index].sizes.splice(indexx, 1);
|
||
},
|
||
|
||
async getCharacteristics(id) {
|
||
id = id && id.id ? id.id : id;
|
||
|
||
if (!id) {
|
||
this.characteristics = [];
|
||
return;
|
||
}
|
||
|
||
const { data } = await axios.get(
|
||
"/dashboard/products/characteristics/" + id
|
||
);
|
||
|
||
if (data.status) this.characteristics = data.characteristics;
|
||
},
|
||
|
||
DetectCategory() {
|
||
this.category.two = {
|
||
parents: [],
|
||
};
|
||
this.category.two_view = false;
|
||
this.category.three = {};
|
||
this.category.three_view = false;
|
||
|
||
if (!this.category.first || !this.category.first.id) {
|
||
this.product.category_id = null;
|
||
return;
|
||
}
|
||
|
||
this.product.category_id = this.category.first.id;
|
||
this.getCharacteristics(this.category.first.id);
|
||
|
||
if (this.category.first.parents && this.category.first.parents.length > 0) {
|
||
this.category.two_view = true;
|
||
}
|
||
},
|
||
|
||
DetectCategoryTwo() {
|
||
this.category.three = {};
|
||
this.category.three_view = false;
|
||
|
||
if (!this.category.two || !this.category.two.id) {
|
||
return;
|
||
}
|
||
|
||
this.product.category_id = this.category.two.id;
|
||
this.getCharacteristics(this.category.two.id);
|
||
|
||
if (this.category.two.parents && this.category.two.parents.length > 0) {
|
||
this.category.three_view = true;
|
||
}
|
||
},
|
||
|
||
DetectCategoryThree() {
|
||
if (!this.category.three || !this.category.three.id) {
|
||
return;
|
||
}
|
||
|
||
this.product.category_id = this.category.three.id;
|
||
},
|
||
|
||
getName(name) {
|
||
const lang = document.documentElement.lang.substr(0, 2);
|
||
let value = "";
|
||
|
||
if (lang) {
|
||
switch (lang) {
|
||
case "ru":
|
||
value = name.ru;
|
||
break;
|
||
case "uz":
|
||
value = name.uz;
|
||
break;
|
||
}
|
||
} else {
|
||
value = name.ru;
|
||
}
|
||
|
||
return value;
|
||
},
|
||
|
||
// uploadFiles: function() {
|
||
// // Using the default uploader. You may use another uploader instead.
|
||
// this.$refs.vueFileAgent.upload(this.uploadUrl, this.uploadHeaders, this.filesDataForUpload);
|
||
// this.filesDataForUpload = [];
|
||
// },
|
||
|
||
// deleteUploadedFile: function(fileData) {
|
||
// // Using the default uploader. You may use another uploader instead.
|
||
// this.$refs.vueFileAgent.deleteUpload(this.uploadUrl, this.uploadHeaders, fileData);
|
||
// },
|
||
|
||
onBeforeDelete: function (fileData, index) {
|
||
const agent = Array.isArray(this.$refs.vueFileAgent)
|
||
? this.$refs.vueFileAgent[index]
|
||
: this.$refs.vueFileAgent;
|
||
|
||
if (agent) {
|
||
agent.deleteFileRecord(fileData);
|
||
}
|
||
},
|
||
|
||
fileDeleted: function () {},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.dropzone-custom-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
}
|
||
|
||
.dropzone-custom-title {
|
||
margin-top: 0;
|
||
color: #00b782;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #314b5f;
|
||
}
|
||
</style>
|
||
|
||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|