xiaoning
/
yoga-manager-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组件优化

Browse Source
master
zhaochencheng 3 years ago
parent fa6cba311e
commit abda707be6
3 changed files with 96 additions and 77 deletions
Show Stats Download Patch File Download Diff File

7
src/views/components/BrandSelect.vue
Unescape View File

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

2
src/views/components/ProductCategorySelect.vue
Unescape View File

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

164
src/views/pms/product/AddProduct.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save