|
|
|
@ -1,76 +1,94 @@
|
|
|
|
<template lang="pug">
|
|
|
|
<template>
|
|
|
|
.add-product-wrapper
|
|
|
|
<div class="add-product-wrapper">
|
|
|
|
el-form.content(
|
|
|
|
<el-form class="content" label-width="108px" :model="form" ref="form">
|
|
|
|
label-width="108px"
|
|
|
|
<el-form-item label="品牌" prop="brandId">
|
|
|
|
:model="form"
|
|
|
|
<brand-select v-model="form.brandId"></brand-select>
|
|
|
|
ref="form"
|
|
|
|
</el-form-item>
|
|
|
|
)
|
|
|
|
<el-form-item label="分类" prop="categoryId">
|
|
|
|
el-form-item(label="品牌" prop="brandId")
|
|
|
|
<product-category-select class="w200" v-model="form.categoryId"></product-category-select>
|
|
|
|
brand-select(v-model="form.brandId")
|
|
|
|
</el-form-item>
|
|
|
|
el-form-item(label="分类" prop="categoryId")
|
|
|
|
<el-form-item label="商品编码" prop="outProductId">
|
|
|
|
prod-category.w200(v-model="form.categoryId")
|
|
|
|
<el-input v-model="form.outProductId" placeholder="请输入商品编码"></el-input>
|
|
|
|
el-form-item(label="商品编码" prop="outProductId")
|
|
|
|
</el-form-item>
|
|
|
|
el-input(v-model="form.outProductId" placeholder="请输入商品编码")
|
|
|
|
<el-form-item label="商品名称" prop="name">
|
|
|
|
el-form-item(label="商品名称" prop="name")
|
|
|
|
<el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
|
|
|
|
el-input(v-model="form.name" placeholder="请输入商品名称")
|
|
|
|
</el-form-item>
|
|
|
|
el-form-item(label="主图" prop="pic")
|
|
|
|
<el-form-item label="主图" prop="pic">
|
|
|
|
image-upload(v-model="form.pic" :limit="1")
|
|
|
|
<image-upload v-model="form.pic" :limit="1"></image-upload>
|
|
|
|
el-form-item(label="商品图片" prop="albumPics")
|
|
|
|
</el-form-item>
|
|
|
|
image-upload(v-model="form.albumPics" :limit="5")
|
|
|
|
<el-form-item label="商品图片" prop="albumPics">
|
|
|
|
el-form-item(label="上架状态")
|
|
|
|
<image-upload v-model="form.albumPics" :limit="5"></image-upload>
|
|
|
|
dict-select(v-model="form.publishStatus" prop-name="pms_publish_status" )
|
|
|
|
</el-form-item>
|
|
|
|
el-form-item(label="排序" prop="sort")
|
|
|
|
<el-form-item label="上架状态">
|
|
|
|
el-input(v-model="form.sort" placeholder="请输入排序")
|
|
|
|
<dict-select v-model="form.publishStatus" prop-name="pms_publish_status"></dict-select>
|
|
|
|
el-form-item(label="价格" prop="price")
|
|
|
|
</el-form-item>
|
|
|
|
el-input(v-model="form.price" placeholder="请输入PRICE")
|
|
|
|
<el-form-item label="排序" prop="sort">
|
|
|
|
el-form-item(label="单位" prop="unit")
|
|
|
|
<el-input v-model="form.sort" placeholder="请输入排序"></el-input>
|
|
|
|
el-input(v-model="form.unit" placeholder="请输入单位")
|
|
|
|
</el-form-item>
|
|
|
|
el-form-item(label="商品重量" prop="weight")
|
|
|
|
<el-form-item label="价格" prop="price">
|
|
|
|
el-input(v-model="form.weight" placeholder="商品重量,默认为克")
|
|
|
|
<el-input v-model="form.price" placeholder="请输入PRICE"></el-input>
|
|
|
|
.title 规格信息
|
|
|
|
</el-form-item>
|
|
|
|
el-form-item(label="商品规格")
|
|
|
|
<el-form-item label="单位" prop="unit">
|
|
|
|
.sku-wrapper
|
|
|
|
<el-input v-model="form.unit" placeholder="请输入单位"></el-input>
|
|
|
|
.sku_sorts
|
|
|
|
</el-form-item>
|
|
|
|
.sku_sort(v-for="(s, idx0) in skuSorts" :key="s.name")
|
|
|
|
<el-form-item label="商品重量" prop="weight">
|
|
|
|
.label.flex-center
|
|
|
|
<el-input v-model="form.weight" placeholder="商品重量,默认为克"></el-input>
|
|
|
|
.flex-one
|
|
|
|
</el-form-item>
|
|
|
|
dict-select(v-model="s.name" prop-name="sku_sort_list" value-prop="label")
|
|
|
|
<div class="title">规格信息</div>
|
|
|
|
a.red(@click="deleteSkuSort(idx0)") 删除规格类型
|
|
|
|
<el-form-item label="商品规格">
|
|
|
|
.values(v-if="s.name")
|
|
|
|
<div class="sku-wrapper">
|
|
|
|
.value(v-for="(it2, idx1) in s.options" :key="idx1")
|
|
|
|
<div class="sku_sorts">
|
|
|
|
el-input(:value="it2.name" @input="changeName(s, idx1, $event)")
|
|
|
|
<div class="sku_sort" v-for="(s, idx0) in skuSorts" :key="s.name">
|
|
|
|
a.red.no-break.ml8(v-if="idx1 < s.options.length - 1 || (s.options.length === maxOptionNum && idx1 === 3)" @click="deleteOption(s, idx1)") 删除
|
|
|
|
<div class="label flex-center">
|
|
|
|
el-button(v-if="skuSorts.length < 2" @click="addSkuSort") 添加规格类型
|
|
|
|
<div class="flex-one">
|
|
|
|
el-form-item(label=" 价格")
|
|
|
|
<dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>
|
|
|
|
el-table(:data="skus" :max-height="400")
|
|
|
|
</div><a class="red" @click="deleteSkuSort(idx0)">删除规格类型</a>
|
|
|
|
el-table-column(v-for="s in skuSorts" :label="s.name" :key="s.name" :prop="s.name")
|
|
|
|
</div>
|
|
|
|
el-table-column(label="展示图片")
|
|
|
|
<div class="values" v-if="s.name">
|
|
|
|
template(v-slot="{ row }")
|
|
|
|
<div class="value" v-for="(it2, idx1) in s.options" :key="idx1">
|
|
|
|
image-upload.img-upload-mini(v-model="row.pic" :is-show-tip="false")
|
|
|
|
<el-input :value="it2.name" @input="changeName(s, idx1, $event)"></el-input><a class="red no-break ml8" v-if="idx1 < s.options.length - 1 || (s.options.length === maxOptionNum && idx1 === 3)" @click="deleteOption(s, idx1)">删除</a>
|
|
|
|
el-table-column(label="销售价格")
|
|
|
|
</div>
|
|
|
|
template(v-slot="{ row }")
|
|
|
|
</div>
|
|
|
|
el-input(v-model="row.price")
|
|
|
|
</div>
|
|
|
|
el-table-column(label="编码")
|
|
|
|
</div>
|
|
|
|
template(v-slot="{ row }")
|
|
|
|
<el-button v-if="skuSorts.length < 2" @click="addSkuSort">添加规格类型</el-button>
|
|
|
|
el-input(v-model="row.outSkuId")
|
|
|
|
</div>
|
|
|
|
el-table-column(label="操作")
|
|
|
|
</el-form-item>
|
|
|
|
template(v-slot="{row, index}")
|
|
|
|
<el-form-item label=" 价格">
|
|
|
|
a.red 删除{{index}}
|
|
|
|
<el-table :data="skus" :max-height="400">
|
|
|
|
el-form-item(label="产品详情网页内容" prop="detailHtml")
|
|
|
|
<el-table-column v-for="s in skuSorts" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>
|
|
|
|
el-input(
|
|
|
|
<el-table-column label="展示图片">
|
|
|
|
v-model="form.detailHtml"
|
|
|
|
<template v-slot="{ row }">
|
|
|
|
placeholder="请输入内容"
|
|
|
|
<image-upload class="img-upload-mini" v-model="row.pic" :is-show-tip="false"></image-upload>
|
|
|
|
type="textarea"
|
|
|
|
</template>
|
|
|
|
)
|
|
|
|
</el-table-column>
|
|
|
|
el-form-item(label="移动端网页详情" prop="detailMobileHtml")
|
|
|
|
<el-table-column label="销售价格">
|
|
|
|
el-input(
|
|
|
|
<template v-slot="{ row }">
|
|
|
|
v-model="form.detailMobileHtml"
|
|
|
|
<el-input v-model="row.price"></el-input>
|
|
|
|
placeholder="请输入内容"
|
|
|
|
</template>
|
|
|
|
type="textarea"
|
|
|
|
</el-table-column>
|
|
|
|
)
|
|
|
|
<el-table-column label="编码">
|
|
|
|
.tc
|
|
|
|
<template v-slot="{ row }">
|
|
|
|
el-button(type="primary" @click="submitForm") 确 定
|
|
|
|
<el-input v-model="row.outSkuId"></el-input>
|
|
|
|
el-button(@click="cancel") 取 消
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<el-table-column label="操作">
|
|
|
|
|
|
|
|
<template v-slot="{row, index}"><a class="red">删除{{index}}</a></template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="产品详情网页内容" prop="detailHtml">
|
|
|
|
|
|
|
|
<el-input v-model="form.detailHtml" placeholder="请输入内容" type="textarea"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="移动端网页详情" prop="detailMobileHtml">
|
|
|
|
|
|
|
|
<el-input v-model="form.detailMobileHtml" placeholder="请输入内容" type="textarea"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<div class="tc">
|
|
|
|
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|