图片上传调整+页面校验

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -23,13 +23,12 @@
                 </el-form-item>
               </div>
               <el-form-item label="商品主图" prop="productMainImage">
-
-                <ImageUpload v-model="formInline.productMainImage" :limit="1" />
+                <ImageUpload v-model="formInline.productMainImage" :http-request="handleImageSuccess" :limit="1" />
               </el-form-item>
               <el-form-item label="商品图" prop="productImageArr">
                 <div style="display: flex;">
-                  <ImageUpload v-model="formInline.productImageArr" :limit="6" @input="onUpload($event)"
-                    tipText="建议上传商品图，最多6张" />
+                  <ImageUpload v-model="formInline.productImageArr" :http-request="handleImageSuccess" :limit="6"
+                    @input="onUpload($event)" tipText="建议上传商品图，最多6张" />
                 </div>
 
               </el-form-item>
@@ -42,7 +41,7 @@
                 <el-input v-model="formInline.summary" placeholder="请输入商品描述"></el-input>
               </el-form-item>
               <el-form-item label="商品详情描述" prop="detail">
-                <Tinymce :height="'280px'" :width="'100%'" v-model="formInline.detail"></Tinymce>
+                <Tinymce v-if="dialogVisible" :height="'280px'" :width="'100%'" v-model="formInline.detail"></Tinymce>
               </el-form-item>
             </div>
             <!-- 售卖信息 -->
@@ -65,7 +64,8 @@
                     <template v-slot:image="scope">
                       <el-form-item :prop="`skuList[${scope.$index}].image`"
                         :rules="{ required: true, message: '请上传图片', trigger: 'blur' }">
-                        <ImageUpload :isShowTip="false" v-model="scope.row.image" :limit="1" />
+                        <ImageUpload :isShowTip="false" :http-request="handleImageSuccess" v-model="scope.row.image"
+                          :limit="1" />
                       </el-form-item>
 
                     </template>
@@ -161,6 +161,7 @@
 import tableCompontent from "@/components/tableCompontent/index.vue";
 import Tinymce from "@/components/tinymce/index.vue";
 import { productSpecSetup, productGenerateProductNo, productSpecCombinations, productUpdate } from "@/api/points/pointsMall_api";
+import { upload } from "@/api/public";
 import { setTimeout } from "core-js";
 export default {
   components: {
@@ -198,13 +199,14 @@ export default {
           //{ specCombo: "白色、加粗、大号", image: "", pricePoint: '', originPrice: 2, stock: 6 },
         ],
       },
+      productImage: '',
       formInline: {
         name: '',
         detail: '',
         categoryId: '',
         productNo: '',
         productMainImage: '',
-        productImage: '',
+
         productImageArr: [],
         paymentType: 1,
         freight: '',
@@ -286,10 +288,13 @@ export default {
         if (this.title == '详情' || this.title == '编辑') {
           let newForm = JSON.parse(JSON.stringify(params))
           newForm.productImageArr = params.productImage
-          newForm.productImage = params.productImage.toString()
           newForm.dateRange = [params.saleStartTime, params.saleEndTime]
           this.formInline = newForm
-          console.log(this.formInline,'this.formInline')
+          this.productImage = params.productImage
+          this.formInline.detail = params.detail
+          console.log(this.productImage, 'this.productImage')
+          console.log(this.formInline, 'this.formInline')
+          console.log(this.formInline.detail, 'this.detail')
           if (newForm.specComboVOList.length) {
             this.specDataReorganizeFun(JSON.parse(JSON.stringify(newForm.specComboVOList)))
           }
@@ -297,7 +302,19 @@ export default {
       })
 
     },
-    ////新增、编辑、详情商品 ----保存
+    // 图片
+    handleImageSuccess(file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      console.log(formData, 'formData')
+      upload(formData).then(response => {
+        // this.changeImg = process.env.VUE_APP_BASE_API + response.fileName;
+        // this.imgList.push(response.fileName);
+        // this.updataImg1.push(process.env.VUE_APP_BASE_API + response.fileName)
+        // this.updataImg11.push(response.fileName)
+      })
+    },
+    //新增、编辑、详情商品 ----保存
     addOrEditOrDetailSave() {
       console.log(this.formInline, 'formInline')
       console.log(this.tableForm, 'tableForm')
@@ -308,42 +325,34 @@ export default {
             return
           }
           this.$refs.tableFormRef.validate((valid1) => {
-            console.log(this.tableForm.skuList,'this.tableForm.skuList')
-            console.log(valid1,'valid1')
             if (valid1) {
               let params = JSON.parse(JSON.stringify(this.formInline))
               params.saleStartTime = this.formInline.dateRange[0]
               params.saleEndTime = this.formInline.dateRange[1]
-              params.productImage=this.formInline.productImageArr
+              params.productImage = this.productImage
               // params.delete.dateRange
               // params.delete.productImageArr
               //组装规格列表数据
               params.specList = this.specListReorganizeFun(this.formInline.specList)
               params.skuList = this.tableForm.skuList
-              console.log(params,'params')
+              console.log(params, 'params')
               productUpdate(params).then(res => {
                 this.$message.success(res.msg)
                 this.dialogVisible = false
                 this.$emit("getList");
               })
-
-
             } else {
-              this.$message.error("请完善信息!");
+              this.$message.error("请完善规格明细信息!");
             }
           })
         } else {
-          this.$message.error("请完善信息!");
+          this.$message.error("请完善表单信息!");
         }
       });
-    },
-    //校验table
-    validateTable(table) {
-
     },
     // 上传事件
     onUpload(e) {
-      this.formInline.productImage = e.toString().split(',')
+      this.productImage = e.toString().split(',')
 
     },
     //商品分类
@@ -380,14 +389,11 @@ export default {
         }
         flag = true
       }
-      console.log(specListTime, 'specListTime')
-      console.log(this.list2, 'list2')
-      console.log(flag, 'flag')
       if (!flag) return
       let specListTime = this.specListReorganizeFun(this.list2)
 
       //新增商品规格接口
-      productSpecSetup({ specList: specListTime }).then((res) => {
+      productSpecSetup({ productNo: this.formInline.productNo, specList: specListTime }).then((res) => {
         if (res.code == 200) {
           //新增完成后查询规格组合
           setTimeout(() => {
@@ -418,8 +424,9 @@ export default {
       let arr = data
       const map = new Map();
       arr.forEach(item => {
-        let obj = { specCombo: null, image:'', pricePoint: null, originPrice: null, stock: null }
+        let obj = { specCombo: null, image: '', pricePoint: null, originPrice: null, stock: null }
         obj.specCombo = item.specValueText
+        obj.image = item.image
         //生成规格明细table数据
         this.tableForm.skuList.push(obj)
 
@@ -462,9 +469,12 @@ export default {
         for (let key in item) {
           if (key !== 'specName') {
             let obj2 = { specValue: '', sort: '' }
-            obj2.specValue = item[key]
-            obj2.sort = Number(key.split("specValue")[1])
-            obj.specValues.push(obj2)
+            if (item[key].trim() !== '') {
+              obj2.specValue = item[key]
+              obj2.sort = Number(key.split("specValue")[1])
+              obj.specValues.push(obj2)
+            }
+
           }
         }
         list.push(obj)