2023.11.24

- 修复商品编辑规格导致产品数据不响应的bug

src/components/Tinymce/components/EditorImage.vue

@@ -51,7 +51,8 @@ export default {
       listObj: {},
       fileList: [],
       headers: {
-        'Authorization-business': getToken()
+        'Authorization-business': getToken(),
+        'tenant': 'MDAwMA=='
       },
       action: uploadUrl,
       dataObj: {
@@ -59,21 +60,13 @@ export default {
       }
     }
   },
-  created() {
-    // this.headers.token = "Bearer " + db.get("TOKEN", "");
-    this.headers.tenant = 'MDAwMA=='
-  },
   methods: {
     checkAllSuccess() {
       return Object.keys(this.listObj).every((item) => this.listObj[item].hasSuccess)
     },
     handleSubmit() {
       const arr = Object.keys(this.listObj).map((v) => this.listObj[v])
-
-      if (!this.checkAllSuccess()) {
-        this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
-        return
-      }
+      if (!this.checkAllSuccess()) return this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
       this.$emit('successCBK', arr)
       this.listObj = {}
       this.fileList = []

src/views/commodity/commoditySystem/addCommodity.vue

@@ -118,7 +118,7 @@
       </div>
       <div v-if="!active" class="centerCom">
         <el-form ref="form" :model="params" label-width="80px">
-          <StyleInformation v-bind="$props" :form="params" />
+          <StyleInformation v-bind="$props" :form="params" @syncVoucherPrice="handleSyncVoucherPrice" @syncVoucherId="handleSyncVoucherId" />
         </el-form>
       </div>
     </div>
@@ -269,19 +269,20 @@ export default {
         ],
         skuList: [
           {
-            isDelete: '',
+            originalPrice: 0,
+            price: 0,
+            productId: '',
             skuAttrCodeDTOList: [
               {
                 code: '',
                 valueCode: ''
               }
             ],
-            skuAttrList: [],
-            sku: '',
-            skuImg: '',
-            price: 0,
-            originalPrice: 0,
+            skuId: '',
+            skuImage: '',
             stockNumber: 0,
+            voucherId: 0,
+            voucherPrice: 0,
             weight: 0
           }
         ],
@@ -379,6 +380,18 @@ export default {
         }
       })
     },
+    // 同步代金券抵扣额度
+    handleSyncVoucherPrice() {
+      this.params.skuList.forEach((element) => {
+        element.voucherPrice = element.price
+      })
+    },
+    // 统一选择代金券
+    handleSyncVoucherId(e) {
+      this.params.skuList.forEach((element) => {
+        element.voucherId = e
+      })
+    },
     // 点击新增商品时表单数据重置
     reset() {
       // this.form.productText = ''
@@ -460,19 +473,20 @@ export default {
         ],
         skuList: [
           {
-            isDelete: '',
+            originalPrice: 0,
+            price: 0,
+            productId: '',
             skuAttrCodeDTOList: [
               {
                 code: '',
                 valueCode: ''
               }
             ],
-            skuAttrList: [],
-            sku: '',
-            skuImg: '',
-            price: 0,
-            originalPrice: 0,
+            skuId: '',
+            skuImage: '',
             stockNumber: 0,
+            voucherId: 0,
+            voucherPrice: 0,
             weight: 0
           }
         ],

src/views/commodity/commoditySystem/addComponent.vue

@@ -33,7 +33,7 @@
       </el-upload>
     </div>
     <el-form-item label="款式设置">
-      <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">
+      <el-radio-group v-model="form.attrStyle">
         <el-radio :label="0">单款式</el-radio>
         <el-radio :label="1">多款式</el-radio>
       </el-radio-group>
@@ -48,52 +48,47 @@
           </el-table-column>
           <el-table-column label="售价">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
               <el-input-number
                 v-model="scope.row.price" :controls="false" :max="999999999" :min="0"
                 :precision="2"
-                :step="0.01"
+                :step="0.01" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="原价">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
               <el-input-number
                 v-model="scope.row.originalPrice" :controls="false" :max="999999999" :min="0"
-                :precision="2" :step="0.01"
+                :precision="2" :step="0.01" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="库存">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->
               <el-input-number
                 v-model="scope.row.stockNumber" :controls="false" :max="999999999" :min="0"
-                :precision="0"
+                :precision="0" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="重量(KG)">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
               <el-input-number
                 v-model="scope.row.weight" :controls="false" :max="999" :min="0"
                 :precision="2"
-                :step="0.01"
+                :step="0.01" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="代金卷最大抵扣额度(一般设置全额抵扣)">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
-              <el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01" />
+              <el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01" style="width: auto;" />
             </template>
           </el-table-column>
           <el-table-column label="商品绑定的代金卷">
             <template slot-scope="scope">
               <el-select v-model="scope.row.voucherId" placeholder="请选择商品绑定的代金卷">
-                <el-option v-for="item in voucherList" :key="item.createTime" :label="item.voucherName" :value="item.id">
+                <el-option v-for="item in voucherList" :key="item.id" :label="item.voucherName" :value="item.id">
                 </el-option>
               </el-select>
             </template>
@@ -150,61 +145,67 @@
         <el-table :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
           <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
             <template slot-scope="scope">
-              {{
-                scope.row.skuAttrCodeDTOList &&
-                  scope.row.skuAttrCodeDTOList[index]
-                  | attrValueFilter(form.skuAttrList)
-              }}
+              {{ scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index] | attrValueFilter(form.skuAttrList) }}
             </template>
           </el-table-column>
           <el-table-column label="售价">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
+              {{ String(scope.row.price) }}
               <el-input-number
                 v-model="scope.row.price" :controls="false" :max="999999999" :min="0"
                 :precision="2"
-                :step="0.01"
+                :step="0.01" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="原价">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
               <el-input-number
                 v-model="scope.row.originalPrice" :controls="false" :max="999999999" :min="0"
-                :precision="2" :step="0.01"
+                :precision="2" :step="0.01" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="库存">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->
               <el-input-number
                 v-model="scope.row.stockNumber" :controls="false" :max="999999999" :min="0"
-                :precision="0"
+                :precision="0" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="重量(KG)">
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
               <el-input-number
                 v-model="scope.row.weight" :controls="false" :max="999" :min="0"
                 :precision="6"
-                :step="0.01"
+                :step="0.01" style="width: auto;"
               />
             </template>
           </el-table-column>
           <el-table-column label="代金卷最大抵扣额度(一般设置全额抵扣)">
+            <template #header="scope">
+              <div>代金卷最大抵扣额度(一般设置全额抵扣)<el-button type="warning" size="mini" @click="$emit('syncVoucherPrice')">同步售价</el-button></div>
+            </template>
             <template slot-scope="scope">
-              <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
-              <el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01" />
+              {{ String(scope.row.voucherPrice) }}<el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01" style="width: auto;" />
             </template>
           </el-table-column>
           <el-table-column label="商品绑定的代金卷">
+            <template #header="scope">
+              <div>
+                商品绑定的代金卷
+                <el-dropdown size="mini" split-button type="primary" @command="(e) => $emit('syncVoucherId', e)">
+                  统一选择
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item v-for="item in voucherList" :key="item.id" :command="item.id">{{ item.voucherName }}</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </template>
             <template slot-scope="scope">
               <el-select v-model="scope.row.voucherId" placeholder="请选择商品绑定的代金卷">
-                <el-option v-for="item in voucherList" :key="item.createTime" :label="item.voucherName" :value="item.id">
+                <el-option v-for="item in voucherList" :key="item.id" :label="item.voucherName" :value="item.id">
                 </el-option>
               </el-select>
             </template>
@@ -294,9 +295,9 @@ export default {
       dialogVideoUrl: '',
       dialogVisible: false,
       previewVideoVisible: false,
-      newform: this.form,
       headers: {
-        'Authorization-business': getToken()
+        'Authorization-business': getToken(),
+        'tenant': 'MDAwMA=='
       },
       action: uploadUrl,
       dataObj: {
@@ -345,48 +346,17 @@ export default {
         if (this.form.attrStyle === 1 && hasChilds.length) {
           this.skuFormat()
         }
-        // console.log(newVal);
-        // console.log(oldVal);
       },
       deep: true
     },
     'form.skuList': {
       handler(newVal, oldVal) {
-        // console.log(newVal);
-        // console.log(oldVal);
       },
       deep: true
     }
   },
-  created() {
-    // console.log(this.voucherList)
-    this.headers.tenant = 'MDAwMA=='
-  },
   methods: {
     isVideo,
-    // proving1(e) {
-    //   var keynum = window.event ? e.keyCode : e.which // 获取键盘码
-    //   // var keychar = String.fromCharCode(keynum) // 获取键盘码对应的字符
-    //   console.log(
-    //     e.key
-    //       .replace(/[^\d^\.]+/g, '')
-    //       .replace('.', '$#$')
-    //       .replace(/\./g, '')
-    //       .replace('$#$', '.')
-    //   )
-    //   console.log(keynum)
-    //   if (
-    //     e.key
-    //       .replace(/[^\d^\.]+/g, '')
-    //       .replace('.', '$#$')
-    //       .replace(/\./g, '')
-    //       .replace('$#$', '.') === '' &&
-    //     keynum !== 8
-    //   ) {
-    //     this.$message.warning('禁止输入中文或空')
-    //     e.target.value = ' '
-    //   }
-    // },
     playVideo(url) {
       this.dialogVideoUrl = url
       this.previewVideoVisible = true
@@ -415,20 +385,16 @@ export default {
       const url = response.data.url
       fileList[0].image = url
     },
-    del(row, index, arr) {
-      console.log(row, index)
-      // this.form.skuList.splice(index, 1);
-      // console.log(this.form.skuAttrList);
-      // console.log(this.form.skuList);
-      console.log(arr)
-    },
-    //
-    changeAttrStyle(index) {
-      console.log(index)
+    addAttrValue(index) {
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.skuAttrList[index].values.push({
+        skuId: '',
+        valueCode: '',
+        skuValue: '',
+        image: ''
+      })
+      console.log(JSON.parse(JSON.stringify(this.form)))
       console.log(this.form)
-      // if (index === 0) {
-      //   this.form.skuAttrList = []
-      // }
     },
     addSkuAttrList() {
       // eslint-disable-next-line vue/no-mutating-props
@@ -449,14 +415,6 @@ export default {
         sortOrder: 0
       })
     },
-    addAttrValue(index) {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.form.skuAttrList[index].values.push({
-        skuValue: '',
-        valueCode: '',
-        image: ''
-      })
-    },
     // 删除规格值
     delValue(index, index1) {
       const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
@@ -487,13 +445,12 @@ export default {
       // eslint-disable-next-line vue/no-mutating-props
       this.form.skuAttrList.splice(index, 1)
     },
-    delAttrValue1(row, index, arr) {
-
-    },
+    delAttrValue1(row, index, arr) { },
     skuFormat() {
       const skuListArray = []
       const result = {
-        isDelete: 0,
+        originalPrice: 0,
+        price: 0,
         productId: '',
         skuAttrCodeDTOList: [
           {
@@ -501,11 +458,11 @@ export default {
             valueCode: ''
           }
         ],
-        sku: '',
-        skuImg: '',
-        price: 0,
-        originalPrice: 0,
+        skuId: '',
+        skuImage: '',
         stockNumber: 0,
+        voucherId: 0,
+        voucherPrice: 0,
         weight: 0
       }
       const doExchange = (arr, depth) => {
@@ -587,178 +544,178 @@ export default {
 @import url("../../../styles/elDialog.scss");
 
 .style-information-component {
-  width: 100%;
-  min-height: 300px;
-  padding: 24px;
-  background-color: rgb(255, 255, 255);
-
-  .el-form-item {
-    margin-bottom: 10px;
-  }
-
-  .attr-value-list {
-    display: flex;
-    flex-wrap: wrap;
-
-    .main-diagram {
-      position: relative;
-      width: 180px;
-
-      .span-wrap {
-        position: relative;
-        display: inline-block;
-        margin-top: 10px;
-
-        .attr-actions {
-          line-height: 100px;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          left: 0;
-          top: 0;
-          cursor: default;
-          text-align: center;
-          color: #fff;
-          opacity: 0;
-          font-size: 20px;
-          background-color: rgba(0, 0, 0, 0.5);
-          -webkit-transition: opacity 0.3s;
-          transition: opacity 0.3s;
-          z-index: 1;
-
-          &:hover {
-            opacity: 1;
-
-            .attr-preview {
-              display: inline-block;
-            }
-
-            i {
-              color: #fff;
-              font-size: 20px;
-            }
-          }
-        }
-
-        .attr-preview {
-          display: none;
-          cursor: pointer;
-          font-size: 20px;
-          color: #fff;
-        }
-
-        .attr-delete {
-          margin-left: 15px;
-          color: #fff;
-        }
-      }
-
-      .attr-value-img {
-        width: 100%;
-        height: 100%;
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-      }
-    }
-  }
-
-  .m-8 {
-    margin-right: 8px;
-  }
-
-  .upload-btn {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 110px;
-    cursor: pointer;
-    border: 2px dashed #2e60f8;
-    border-radius: 2px;
-    background-color: #f8f9fb;
-    text-align: center;
-    font-size: 20px;
-    color: #2e60f8;
-
-    i {
-      color: #2e60f8;
-      font-size: 20px;
-    }
-
-    .upload-title {
-      margin-left: 10px;
-      font-size: 14px;
-    }
-  }
-
-  .upload-wrap {
-    margin-bottom: 25px;
-
-    .el-upload-list__item {
-      transition: none !important;
-    }
-
-    .el-upload,
-    .el-upload-list__item {
-      width: 100px;
-      height: 100px;
-      line-height: 100px;
-    }
-
-    .el-progress,
-    .el-progress-circle {
-      width: 80px !important;
-      height: 80px !important;
-    }
-  }
-
-  .sku-attr-list {
-    .el-input {
-      width: 180px;
-    }
-  }
-
-  .single-style {
-    .el-input {
-      max-width: 180px;
-    }
-  }
-
-  .add-attr-btn {
-    margin-bottom: 25px;
-  }
-
-  .check-image-dialog {
-    .el-dialog {
-      margin-top: 25px;
-
-      .el-dialog__body {
-        img {
-          max-width: 100%;
-          max-height: 100%;
-          height: 500px;
-          object-fit: contain;
-        }
-      }
-    }
-  }
-
-  .delImg {
-    position: absolute;
-    top: 12px;
-    margin-left: -24px
-  }
-
-  .delImg:hover {
-    border-radius: 50%;
-    color: #ffffff;
-    background: #2e60f8;
-    cursor: pointer;
-  }
+	width: 100%;
+	min-height: 300px;
+	padding: 24px;
+	background-color: rgb(255, 255, 255);
+
+	.el-form-item {
+		margin-bottom: 10px;
+	}
+
+	.attr-value-list {
+		display: flex;
+		flex-wrap: wrap;
+
+		.main-diagram {
+			position: relative;
+			width: 180px;
+
+			.span-wrap {
+				position: relative;
+				display: inline-block;
+				margin-top: 10px;
+
+				.attr-actions {
+					line-height: 100px;
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					top: 0;
+					cursor: default;
+					text-align: center;
+					color: #fff;
+					opacity: 0;
+					font-size: 20px;
+					background-color: rgba(0, 0, 0, 0.5);
+					-webkit-transition: opacity 0.3s;
+					transition: opacity 0.3s;
+					z-index: 1;
+
+					&:hover {
+						opacity: 1;
+
+						.attr-preview {
+							display: inline-block;
+						}
+
+						i {
+							color: #fff;
+							font-size: 20px;
+						}
+					}
+				}
+
+				.attr-preview {
+					display: none;
+					cursor: pointer;
+					font-size: 20px;
+					color: #fff;
+				}
+
+				.attr-delete {
+					margin-left: 15px;
+					color: #fff;
+				}
+			}
+
+			.attr-value-img {
+				width: 100%;
+				height: 100%;
+
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+
+	.m-8 {
+		margin-right: 8px;
+	}
+
+	.upload-btn {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 110px;
+		cursor: pointer;
+		border: 2px dashed #2e60f8;
+		border-radius: 2px;
+		background-color: #f8f9fb;
+		text-align: center;
+		font-size: 20px;
+		color: #2e60f8;
+
+		i {
+			color: #2e60f8;
+			font-size: 20px;
+		}
+
+		.upload-title {
+			margin-left: 10px;
+			font-size: 14px;
+		}
+	}
+
+	.upload-wrap {
+		margin-bottom: 25px;
+
+		.el-upload-list__item {
+			transition: none !important;
+		}
+
+		.el-upload,
+		.el-upload-list__item {
+			width: 100px;
+			height: 100px;
+			line-height: 100px;
+		}
+
+		.el-progress,
+		.el-progress-circle {
+			width: 80px !important;
+			height: 80px !important;
+		}
+	}
+
+	.sku-attr-list {
+		.el-input {
+			width: 180px;
+		}
+	}
+
+	.single-style {
+		.el-input {
+			max-width: 180px;
+		}
+	}
+
+	.add-attr-btn {
+		margin-bottom: 25px;
+	}
+
+	.check-image-dialog {
+		.el-dialog {
+			margin-top: 25px;
+
+			.el-dialog__body {
+				img {
+					max-width: 100%;
+					max-height: 100%;
+					height: 500px;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+
+	.delImg {
+		position: absolute;
+		top: 12px;
+		margin-left: -24px
+	}
+
+	.delImg:hover {
+		border-radius: 50%;
+		color: #ffffff;
+		background: #2e60f8;
+		cursor: pointer;
+	}
 }
 </style>

src/views/commodity/commoditySystem/index.vue

@@ -8,7 +8,7 @@
             <el-input v-model="formInline.search" maxlength="20" placeholder="请输入商品名称" />
           </el-form-item>
           <el-form-item label="商品型号">
-            <el-input v-model="formInline.productMarque"  placeholder="请输入商品型号" />
+            <el-input v-model="formInline.productMarque" placeholder="请输入商品型号" />
           </el-form-item>
           <el-form-item label="上架状态">
             <el-select v-model="formInline.shelveState" placeholder="请选择上架状态">
@@ -163,7 +163,10 @@
       top="10vh"
       :close-on-click-modal="false" @before-close="closeModal" @close="closeModal"
     >
-      <CommAdd ref="child" :voucher-list="voucherList" :show-tinymce="showTinymce" :product-id="commId" @cancel="cancelForm" />
+      <CommAdd
+        ref="child" :voucher-list="voucherList" :show-tinymce="showTinymce" :product-id="commId"
+        @cancel="cancelForm"
+      />
     </el-dialog>
   </div>
 </template>
@@ -187,6 +190,7 @@ import {
   getVoucher
 } from '@/api/commodity'
 export default {
+  name: 'CommoditySystem',
   components: {
     CommAdd
   },
@@ -242,7 +246,7 @@ export default {
         updateTime: '123123123123',
         ratio: 'xxx',
         enabled: '666',
-        id: '0',
+        id: 0,
         desc: '不支持代金卷'
       })
     })