<template>
|
<GlobalWindow :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm" width="800px"
|
v-loading="isUploading">
|
<el-form :model="form" ref="form" label-width="120px" :rules="rules">
|
<div style="font-size: 18px;font-weight: bold;">基本信息</div>
|
<el-form-item label="商品名称" prop="name">
|
<el-input v-model="form.name" maxlength="50" placeholder="请输入商品名称，不超过50个字" v-trim />
|
</el-form-item>
|
<el-form-item label="商品品牌" prop="brandId">
|
<el-select v-model="form.brandId" placeholder="请选择，单选">
|
<el-option v-for="item in brandList()" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="商品类别" prop="categoryId">
|
<el-select v-model="form.categoryId" placeholder="请选择，单选" @change="categorySelect">
|
<el-option v-for="item in categoryList()" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="指导价（元）" prop="zdPrice">
|
<el-input v-model="form.zdPrice" @input="priceCHANEG(form.zdPrice, 1)" type="number" placeholder="建议录入整数，单位元"
|
v-trim />
|
</el-form-item>
|
<el-form-item label="入手价（元）" prop="price">
|
<el-input v-model="form.price" @input="priceCHANEG(form.price, 2)" type="number" placeholder="建议录入整数，单位元"
|
v-trim />
|
</el-form-item>
|
<el-form-item label="商品主图">
|
<UploadAvatarImage :file="{ 'imgurlfull': form.imgfullurl, 'imgurl': form.imgurl }" :uploadData="uploadData"
|
tipsLabel="" @uploadSuccess="uploadReverseSuccess" @uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true" />
|
只能上传图片格式，png格式，建议尺寸140px*140px
|
</el-form-item>
|
<el-form-item label="商品图片">
|
<UploadImage :fileList="form.multifileList" :uploadData="uploadData" @beginUpload="isUploading = true" @endUpload="isUploading = false" />
|
只能上传图片格式，png格式，建议尺寸600*600px
|
</el-form-item>
|
<template v-if="form.baseGoodsParamList && form.baseGoodsParamList.length > 0">
|
<div style="font-size: 18px;font-weight: bold;">参数属性值配置 <span
|
style="font-size: 13px; font-weight: 500;">按需配置当前商品的产品参数值，单个参数值不超过30个字</span></div>
|
<el-form-item :label="item.name" v-for="(item, index) in form.baseGoodsParamList" :key="index">
|
<el-input v-model="item.val" maxlength="30" type="text" placeholder="请输入" v-trim />
|
</el-form-item>
|
</template>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
|
import UploadImage from '@/components/common/UploadImage.vue'
|
import { baseCategory, brand } from '@/api/system/common.js'
|
import { companyCreate, companyUpdateById } from '@/api/business/goods.js'
|
export default {
|
name: 'OperaGoodsWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage, UploadImage },
|
data() {
|
return {
|
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
name1: '',
|
name2: '',
|
// 表单数据
|
isUploading: false,
|
form: {
|
id: null,
|
name: '',
|
categoryId: '',
|
brandId: '',
|
zdPrice: '',
|
price: '',
|
imgurl: '',
|
imgfullurl: '',
|
multifileList: [],
|
baseGoodsParamList: [],
|
},
|
uploadData: {
|
folder: 'goods_img'
|
},
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '不能为空', trigger: 'blur' }
|
],
|
categoryId: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
brandId: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
zdPrice: [
|
{ required: true, message: '不能为空', trigger: 'blur' }
|
],
|
price: [
|
{ required: true, message: '不能为空', trigger: 'blur' }
|
]
|
},
|
options: []
|
}
|
},
|
inject: ['categoryList', 'brandList'],
|
created() {
|
this.config({
|
api: '/business/goods',
|
'field.id': 'id'
|
})
|
// this.getbrand()
|
// this.getcategory()
|
},
|
methods: {
|
open(title, target) {
|
this.title = title
|
this.visible = true
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form.imgurl = ''
|
this.form.imgfullurl = ''
|
this.form.multifileList = []
|
this.form.baseGoodsParamList = []
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.form.multifileList.forEach(item => {
|
item.url = item.filefullurl
|
})
|
})
|
},
|
priceCHANEG(val, type) {
|
if (!/^[1-9]+[0-9]*$/.test(val)) {
|
this.$message.warning('只能输入正整数')
|
if (type === 1) {
|
this.form.zdPrice = ''
|
} else {
|
this.form.price = ''
|
}
|
}
|
},
|
categorySelect(v) {
|
this.categoryList().forEach(item => {
|
if (item.id === v) {
|
this.form.baseGoodsParamList = JSON.parse(JSON.stringify(item.baseCateParamList))
|
this.form.baseGoodsParamList.forEach(item => {
|
item.pramaId = item.id
|
})
|
}
|
})
|
},
|
uploadReverseSuccess(file) {
|
this.form.imgurl = file.imgurl;
|
this.form.imgfullurl = file.imgurlfull;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-form-item__content {
|
.el-input {
|
width: 400px;
|
}
|
}
|
</style>
|
