组件优化

master
zhaochencheng 3 years ago
parent fa6cba311e
commit abda707be6

@ -1,6 +1,7 @@
<template lang="pug"> <template>
el-select(v-model="value1") <el-select v-model="value1" placeholder="选择品牌">
el-option(v-for="it in options" :key="it.id" :value="it.id" :label="it.name") {{it.name}} <el-option v-for="it in options" :key="it.id" :value="it.id" :label="it.name">{{it.name}}</el-option>
</el-select>
</template> </template>
<script> <script>

@ -3,7 +3,7 @@
v-model="value1" v-model="value1"
:options="menuOptions" :options="menuOptions"
:props="{ checkStrictly: true }" :props="{ checkStrictly: true }"
placeholder="选择上级类目" placeholder="选择类目"
/> />
</template> </template>

@ -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 &lt; s.options.length - 1 || (s.options.length === maxOptionNum &amp;&amp; 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 &lt; 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>

Loading…
Cancel
Save