|
@@ -6,19 +6,27 @@
|
|
ref="form"
|
|
ref="form"
|
|
v-bind="formItemLayout"
|
|
v-bind="formItemLayout"
|
|
@submit="handleSubmit">
|
|
@submit="handleSubmit">
|
|
|
|
+ <a-form-item label="首页图" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
|
+ <Upload
|
|
|
|
+ class="upload"
|
|
|
|
+ id="goodsEdit-homeImage"
|
|
|
|
+ v-decorator="[ 'formData.homeImage', { initialValue: formData.homeImage, rules: [{ required: true, message: '请上传首页图' }] } ]"
|
|
|
|
+ ref="homeImage"
|
|
|
|
+ :fileSize="0.25"
|
|
|
|
+ @change="changeHomeImage"
|
|
|
|
+ listType="picture-card" ></Upload>
|
|
|
|
+ <span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。</span>
|
|
|
|
+ </a-form-item>
|
|
<a-form-item label="商品图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
<a-form-item label="商品图片" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
<Upload
|
|
<Upload
|
|
|
|
+ class="upload"
|
|
id="goodsEdit-images"
|
|
id="goodsEdit-images"
|
|
- v-decorator="[
|
|
|
|
- 'formData.images',
|
|
|
|
- { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] }
|
|
|
|
- ]"
|
|
|
|
|
|
+ v-decorator="[ 'formData.images', { initialValue: formData.images, rules: [{ required: true, message: '请上传商品图片' }] } ]"
|
|
ref="goodsImage"
|
|
ref="goodsImage"
|
|
:maxNums="6"
|
|
:maxNums="6"
|
|
:fileSize="0.25"
|
|
:fileSize="0.25"
|
|
@change="changeImage"
|
|
@change="changeImage"
|
|
- listType="picture-card"
|
|
|
|
- ></Upload>
|
|
|
|
|
|
+ listType="picture-card" ></Upload>
|
|
<span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。(最多可上传6张)</span>
|
|
<span class="upload-desc">请上传200*150尺寸的图片,大小不超过0.25MB,png、jpg、jpeg格式。(最多可上传6张)</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="商品名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
<a-form-item label="商品名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
@@ -51,7 +59,7 @@
|
|
class="inpNumber-unit"
|
|
class="inpNumber-unit"
|
|
:min="0"
|
|
:min="0"
|
|
:max="999999"
|
|
:max="999999"
|
|
- :precision="2"
|
|
|
|
|
|
+ :precision="0"
|
|
v-decorator="[ 'formData.sellGold', { initialValue: formData.sellGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
|
|
v-decorator="[ 'formData.sellGold', { initialValue: formData.sellGold, rules: [{ required: true, message: '请输入商品价格(0~999999)' }] } ]"
|
|
placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
|
|
placeholder="请输入商品价格(0~999999)。10个乐豆等值于1元"
|
|
allowClear />
|
|
allowClear />
|
|
@@ -64,7 +72,10 @@
|
|
allowClear
|
|
allowClear
|
|
id="goodsEdit-state"
|
|
id="goodsEdit-state"
|
|
placeholder="请选择商品状态"
|
|
placeholder="请选择商品状态"
|
|
- v-decorator="['formData.state', { initialValue: formData.state, rules: [{ required: true, message: '请选择商品状态' }] }]"
|
|
|
|
|
|
+ v-decorator="['formData.state', { initialValue: formData.state, rules: [
|
|
|
|
+ { required: true, message: '请选择商品状态' },
|
|
|
|
+ { validator: stateValidator }
|
|
|
|
+ ] }]"
|
|
></v-select>
|
|
></v-select>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="库存数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
<a-form-item label="库存数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
@@ -73,8 +84,11 @@
|
|
class="inpNumber"
|
|
class="inpNumber"
|
|
:min="0"
|
|
:min="0"
|
|
:max="999999"
|
|
:max="999999"
|
|
- :precision="2"
|
|
|
|
- v-decorator="['formData.inventoryQty', { initialValue: formData.inventoryQty, rules: [{ required: true, message: '请输入库存数量(0~999999)' }] }]"
|
|
|
|
|
|
+ :precision="0"
|
|
|
|
+ v-decorator="['formData.inventoryQty', { initialValue: formData.inventoryQty, rules: [
|
|
|
|
+ { required: true, message: '请输入库存数量' },
|
|
|
|
+ { validator: inventoryQtyValidator }
|
|
|
|
+ ] }]"
|
|
placeholder="请输入库存数量(0~999999)。当库存数量为0时显示为已售罄且无法下单"
|
|
placeholder="请输入库存数量(0~999999)。当库存数量为0时显示为已售罄且无法下单"
|
|
allowClear />
|
|
allowClear />
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -120,6 +134,7 @@ export default {
|
|
wrapperCol: { span: 16 }
|
|
wrapperCol: { span: 16 }
|
|
},
|
|
},
|
|
formData: {
|
|
formData: {
|
|
|
|
+ homeImage: '', // 首页图
|
|
images: '', // 商品图
|
|
images: '', // 商品图
|
|
name: '', // 商品名称
|
|
name: '', // 商品名称
|
|
goodsTypeNo: undefined, // 商品分类
|
|
goodsTypeNo: undefined, // 商品分类
|
|
@@ -135,16 +150,32 @@ export default {
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
isEdit () {
|
|
isEdit () {
|
|
- console.log(this.$route)
|
|
|
|
return this.$route.name === 'goodsListEdit'
|
|
return this.$route.name === 'goodsListEdit'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ // 商品状态自定义校验
|
|
|
|
+ stateValidator (rule, value, callback) {
|
|
|
|
+ if (value == 1 && String(this.form.getFieldValue('formData.inventoryQty')) && this.form.getFieldValue('formData.inventoryQty') == 0) {
|
|
|
|
+ callback(new Error('库存为0的商品不能上架'))
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 输入库存数量调起商品状态校验
|
|
|
|
+ inventoryQtyValidator (rule, value, callback) {
|
|
|
|
+ this.form.validateFields(['formData.state'], (errors, values) => {
|
|
|
|
+ if (!errors) {
|
|
|
|
+ callback()
|
|
|
|
+ } else {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 获取商品详情
|
|
// 获取商品详情
|
|
getGoodsDetail () {
|
|
getGoodsDetail () {
|
|
goodsFind({ id: this.$route.params.id }).then(res => {
|
|
goodsFind({ id: this.$route.params.id }).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.status == 200) {
|
|
this.formData = Object.assign(this.formData, res.data)
|
|
this.formData = Object.assign(this.formData, res.data)
|
|
|
|
+ this.$refs.homeImage.setFileList(res.data.homeImage)
|
|
this.$refs.goodsImage.setFileList(res.data.images)
|
|
this.$refs.goodsImage.setFileList(res.data.images)
|
|
this.$refs.editor.setHtml(this.formData.desc)
|
|
this.$refs.editor.setHtml(this.formData.desc)
|
|
}
|
|
}
|
|
@@ -176,6 +207,7 @@ export default {
|
|
const _this = this
|
|
const _this = this
|
|
console.log(this.formData, '----表单上传')
|
|
console.log(this.formData, '----表单上传')
|
|
this.form.validateFields((err, values) => {
|
|
this.form.validateFields((err, values) => {
|
|
|
|
+ console.log(err, values, '-上传')
|
|
if (!err) {
|
|
if (!err) {
|
|
const formData = values.formData
|
|
const formData = values.formData
|
|
formData.desc = _this.formData.desc
|
|
formData.desc = _this.formData.desc
|
|
@@ -195,10 +227,14 @@ export default {
|
|
close () {
|
|
close () {
|
|
this.$router.push({ path: '/shop/goods/list' })
|
|
this.$router.push({ path: '/shop/goods/list' })
|
|
},
|
|
},
|
|
- // 图片上传
|
|
|
|
|
|
+ // 商品图上传
|
|
changeImage (file) {
|
|
changeImage (file) {
|
|
this.formData.images = file
|
|
this.formData.images = file
|
|
},
|
|
},
|
|
|
|
+ // 首页图上传
|
|
|
|
+ changeHomeImage (file) {
|
|
|
|
+ this.formData.homeImage = file
|
|
|
|
+ },
|
|
// 商品详情 文本编辑器
|
|
// 商品详情 文本编辑器
|
|
editorChange (html, text) {
|
|
editorChange (html, text) {
|
|
this.formData.desc = html
|
|
this.formData.desc = html
|
|
@@ -219,6 +255,9 @@ export default {
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
.goodsEdit-table-page-wrapper{
|
|
.goodsEdit-table-page-wrapper{
|
|
|
|
+ .upload{
|
|
|
|
+ width: 100%!important;
|
|
|
|
+ }
|
|
// 商品图片描述
|
|
// 商品图片描述
|
|
.upload-desc{
|
|
.upload-desc{
|
|
font-size: 12px;
|
|
font-size: 12px;
|