|
|
@@ -1,12 +1,6 @@
|
|
|
<template>
|
|
|
<div v-loading="isLoading" class="addProduct">
|
|
|
- <el-form
|
|
|
- ref="addFormRef"
|
|
|
- label-width="120px"
|
|
|
- class="addForm"
|
|
|
- :model="formData"
|
|
|
- :rules="rules"
|
|
|
- >
|
|
|
+ <el-form ref="addFormRef" label-width="120px" class="addForm" :model="formData" :rules="rules">
|
|
|
<el-form-item label="商品名称:" prop="productName">
|
|
|
<el-input v-model="formData.productName" placeholder="请输入商品名称" />
|
|
|
</el-form-item>
|
|
|
@@ -16,12 +10,7 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="shopType === 2" label="所属品牌:" prop="brandId">
|
|
|
- <el-select
|
|
|
- v-model="formData.brandId"
|
|
|
- placeholder="请选择品牌"
|
|
|
- style="width: 100%"
|
|
|
- filterable
|
|
|
- >
|
|
|
+ <el-select v-model="formData.brandId" placeholder="请选择品牌" style="width: 100%" filterable>
|
|
|
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
@@ -35,30 +24,12 @@
|
|
|
<el-input v-model="formData.certificateImage" class="hiddenInput" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="相关参数:" prop="paramList">
|
|
|
- <div
|
|
|
- v-for="(item, index) in formData.paramList"
|
|
|
- :key="index"
|
|
|
- class="form-group paramsItem"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="item.paramName"
|
|
|
- class="param-title"
|
|
|
- placeholder="参数名称"
|
|
|
- maxlength="10"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-model="item.paramContent"
|
|
|
- class="param-info"
|
|
|
- placeholder="请输入参数信息"
|
|
|
- maxlength="50"
|
|
|
- />
|
|
|
- <span v-if="paramsCount>4" class="closed el-icon-close" @click="handleRemoveParam(index)" />
|
|
|
+ <div v-for="(item, index) in paramList" :key="index" class="form-group paramsItem">
|
|
|
+ <el-input v-model="item.paramName" class="param-title" placeholder="参数名称" maxlength="10" />
|
|
|
+ <el-input v-model="item.paramContent" class="param-info" placeholder="请输入参数信息" maxlength="50" />
|
|
|
+ <span v-if="paramsCount > 4" class="closed el-icon-close" @click="handleRemoveParam(index)" />
|
|
|
</div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- @click="handleAddParam"
|
|
|
- >添加参数</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="handleAddParam">添加参数</el-button>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="上线状态:">
|
|
|
<el-select
|
|
|
@@ -102,13 +73,17 @@ export default {
|
|
|
snCode: '', // 商品SN码
|
|
|
brandId: ''
|
|
|
},
|
|
|
+ paramList: [],
|
|
|
brandList: [],
|
|
|
rules: {
|
|
|
certificateImage: [{ required: true, message: '授权牌照不能为空' }],
|
|
|
paramList: [{ required: true, message: '参数不能为空' }],
|
|
|
productImage: [{ required: true, message: '商品图片不能为空' }],
|
|
|
snCode: [{ required: true, message: 'SN码不能为空' }],
|
|
|
- productName: [{ required: true, message: '商品名称不能为空' }, { max: 50, message: '字数在50字符以内' }]
|
|
|
+ productName: [
|
|
|
+ { required: true, message: '商品名称不能为空' },
|
|
|
+ { max: 50, message: '字数在50字符以内' }
|
|
|
+ ]
|
|
|
},
|
|
|
fileList1: [],
|
|
|
fileList2: []
|
|
|
@@ -117,6 +92,14 @@ export default {
|
|
|
computed: {
|
|
|
...mapGetters(['authUserId', 'proxyInfo', 'shopType', 'brandId'])
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ paramList: {
|
|
|
+ deep: true,
|
|
|
+ handler: function() {
|
|
|
+ this.formData.paramList = this.setParamToFormData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
this.formData.productId = parseInt(this.$route.query.id)
|
|
|
this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
@@ -132,6 +115,7 @@ export default {
|
|
|
methods: {
|
|
|
// 提交
|
|
|
submit() {
|
|
|
+ this.formData.paramList = this.setParamToFormData()
|
|
|
this.$refs.addFormRef.validate(valide => {
|
|
|
if (valide) {
|
|
|
this.save()
|
|
|
@@ -146,10 +130,14 @@ export default {
|
|
|
// const { authId, certificateImage, paramList, productId, productImage, productName, snCode, status } = res.data
|
|
|
for (const key in res.data) {
|
|
|
if (Object.hasOwnProperty.call(res.data, key)) {
|
|
|
- this.formData[key] = res.data[key]
|
|
|
+ if (key !== 'paramList') {
|
|
|
+ this.formData[key] = res.data[key]
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- this.paramsCount = this.formData.paramList.length
|
|
|
+ // 初始化参数
|
|
|
+ this.paramList = res.data.paramList
|
|
|
+ this.paramsCount = this.paramList.length
|
|
|
if (this.paramsCount < 4) {
|
|
|
this.initParamList(4 - this.paramsCount)
|
|
|
}
|
|
|
@@ -182,24 +170,30 @@ export default {
|
|
|
this.isLoading = true
|
|
|
this.formData.createBy = this.proxyInfo?.authUserId || this.authUserId
|
|
|
this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
- saveProduct(this.formData).then(res => {
|
|
|
- if (res.code !== 0) return
|
|
|
- const h = this.$createElement
|
|
|
- this.$notify.success({
|
|
|
- title: '修改商品',
|
|
|
- message: h('i', { style: 'color: #333' }, `已修改商品："${this.formData.productName}"`),
|
|
|
- duration: 2000
|
|
|
+ saveProduct(this.formData)
|
|
|
+ .then(res => {
|
|
|
+ if (res.code !== 0) return
|
|
|
+ const h = this.$createElement
|
|
|
+ this.$notify.success({
|
|
|
+ title: '修改商品',
|
|
|
+ message: h('i', { style: 'color: #333' }, `已修改商品："${this.formData.productName}"`),
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ this.$store.dispatch('tagsView/delView', this.$route)
|
|
|
+ this.$router.back()
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.isLoading = false
|
|
|
})
|
|
|
- this.$store.dispatch('tagsView/delView', this.$route)
|
|
|
- this.$router.back()
|
|
|
- }).finally(() => {
|
|
|
- this.isLoading = false
|
|
|
- })
|
|
|
+ },
|
|
|
+ // 保存参数到formdata
|
|
|
+ setParamToFormData() {
|
|
|
+ return this.paramList.filter(item => item.paramContent !== '' && item.paramName !== '')
|
|
|
},
|
|
|
// 添加一栏参数
|
|
|
handleAddParam() {
|
|
|
this.paramsCount += 1
|
|
|
- this.formData.paramList.push({
|
|
|
+ this.paramList.push({
|
|
|
paramContent: '',
|
|
|
paramName: ''
|
|
|
})
|
|
|
@@ -207,7 +201,7 @@ export default {
|
|
|
// 删除一栏参数
|
|
|
handleRemoveParam(index) {
|
|
|
this.paramsCount -= 1
|
|
|
- this.formData.paramList.splice(index, 1)
|
|
|
+ this.paramList.splice(index, 1)
|
|
|
},
|
|
|
// 图片上传成功 产品图片
|
|
|
imageUploadSuccess1(data) {
|
|
|
@@ -217,10 +211,13 @@ export default {
|
|
|
imageUploadSuccess2(data) {
|
|
|
this.formData.certificateImage = data.data
|
|
|
},
|
|
|
+ setParamList(data) {
|
|
|
+ this.paramList = data.paramList
|
|
|
+ },
|
|
|
// 初始化参数列表
|
|
|
initParamList(count) {
|
|
|
for (let i = 0; i < count; i++) {
|
|
|
- this.formData.paramList.push({
|
|
|
+ this.paramList.push({
|
|
|
paramContent: '',
|
|
|
paramName: ''
|
|
|
})
|
|
|
@@ -255,24 +252,22 @@ export default {
|
|
|
width: 140px;
|
|
|
}
|
|
|
}
|
|
|
-.paramsItem{
|
|
|
+.paramsItem {
|
|
|
position: relative;
|
|
|
- .closed{
|
|
|
+ .closed {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
right: -20px;
|
|
|
cursor: pointer;
|
|
|
color: #ddd;
|
|
|
- &:hover{
|
|
|
+ &:hover {
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .hiddenInput{
|
|
|
- height: 0;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
+.hiddenInput {
|
|
|
+ height: 0;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
喻文俊