瀏覽代碼

fix: 商品添加表单校验消除

Sun 3 年之前
父節點
當前提交
66276caba0
共有 2 個文件被更改,包括 23 次插入16 次删除
  1. 4 0
      src/components/ImageUpload/index.vue
  2. 19 16
      src/views/business/goods/components/spec.vue

+ 4 - 0
src/components/ImageUpload/index.vue

@@ -181,6 +181,7 @@
         this.fileList.splice(findex, 1);
         this.previewList.splice(findex, 1);
         this.$emit("input", this.fileList);
+        this.$emit('change')
       },
 
       // 删除图片
@@ -189,6 +190,7 @@
         this.fileList.splice(findex, 1);
         this.previewList.splice(findex, 1);
         this.$emit("input", this.fileList);
+        this.$emit('change')
       },
 
       /**
@@ -205,6 +207,7 @@
           fileType: response.fileType
         });
         this.$emit("input", this.fileList);
+        this.$emit('change')
         this.loading.close();
 
       },
@@ -270,6 +273,7 @@
             fileType: response.fileType
           });
           this.$emit("input", this.fileList);
+          this.$emit('change')
           this.loading.close();
 
 

+ 19 - 16
src/views/business/goods/components/spec.vue

@@ -20,16 +20,16 @@
           <el-form-item :prop="`specList.${index}.vals`" :rules="{ required: true, message: '请完善规格值', trigger: ['blur', 'change'] }">
             <el-col :span="24">
               <el-tag v-for="(tag, index) in spec.vals" :key="index" closable style="margin-right: 10px" @close="spec.vals.splice(index, 1)">{{ tag }}</el-tag>
-              <el-input v-if="spec.editVals" v-model="specValTmp" style="display: inline-block;width: 120px; margin-right: 10px" size="mini" @keyup.enter.native="checkSpecVal(spec)" />
+              <el-input v-if="spec.editVals" v-model="specValTmp" style="display: inline-block;width: 120px; margin-right: 10px" size="mini" @keyup.enter.native="checkSpecVal(spec, `specList.${index}.vals`)" />
               <el-button v-if="!spec.edit&&!spec.editVals" type="text" style="margin-left: 10px" icon="el-icon-plus" size="small" @click="spec.editVals = true">添加规格值</el-button>
-              <el-button v-if="spec.editVals" type="text" @click="checkSpecVal(spec)">确认</el-button>
+              <el-button v-if="spec.editVals" type="text" @click="checkSpecVal(spec, `specList.${index}.vals`)">确认</el-button>
             </el-col>
           </el-form-item>
         </el-row>
       </div>
     </el-form>
-    <el-button type="primary" size="small" plain @click="specList.push({ name: '', vals: [], edit: true, editVals: false })" :disabled="specList.find(item => item.edit)" style="margin-bottom: 10px">添加规格</el-button>
-    <el-button type="primary" size="small" style="margin-bottom: 10px;margin-left: 10px" :disabled="specList.length === 0 || specList.find(item => item.edit)" @click="genSku">重新生成SKU表格</el-button>
+    <el-button type="primary" size="small" plain @click="specList.push({ name: '', vals: [], edit: true, editVals: false })" :disabled="!!specList.find(item => item.edit)" style="margin-bottom: 10px">添加规格</el-button>
+    <el-button type="primary" size="small" style="margin-bottom: 10px;margin-left: 10px" :disabled="specList.length === 0 || !!specList.find(item => item.edit)" @click="genSku">{{ skuList.length > 0 ? '重新生成SKU表格' : '生成SKU表格' }}</el-button>
     <br>
     <el-form ref="sku" :model="{ skuList }">
       <table v-if="skuList instanceof Array && skuList.length > 0" class="spec-table" border="1" bordercolor="#CCC">
@@ -52,8 +52,8 @@
             {{ formatObj(sku.properties)[spec.name] }}
           </td>
           <td>
-            <el-form-item :prop="`skuList.${index}.picUrlArr`" :rules="{ required: true, message: '请上传SKU图片', trigger: 'blur' }">
-              <Upload v-model="sku.picUrlArr" :limit="1" :low="true" style="height: 40px;overflow: hidden" />
+            <el-form-item :prop="`skuList.${index}.picUrlArr`" :rules="{ required: true, message: '请上传SKU图片', trigger: ['blur', 'change'] }">
+              <Upload v-model="sku.picUrlArr" :limit="1" :low="true" style="height: 40px;overflow: hidden" @change="$refs.sku.validateField([`skuList.${index}.picUrlArr`])" />
             </el-form-item>
           </td>
           <td>
@@ -82,7 +82,7 @@
             </el-form-item>
           </td>
           <td style="padding: 0px 10px">
-            <el-form-item :prop="`skuList.${index}.status`" :rules="{ required: true, message: '请选择状态', trigger: 'blur' }">
+            <el-form-item :prop="`skuList.${index}.status`">
               <el-switch v-model="sku.status" active-color="#13ce66" inactive-color="#ff4949" />
             </el-form-item>
           </td>
@@ -117,8 +117,8 @@ export default {
       specValTmp: '',
       specifications: [],
       valueYRules: [{ required: true, message: '请输入价格', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额,最多两位小数", trigger: ["blur", "change"]}],
-      costYRules: [{ required: false, message: '请输入成本', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额,最多两位小数", trigger: ["blur", "change"] }],
-      // exchangeRules: [{ required: true, message: '请输入兑换价格', trigger: 'blur' },{ pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"]}]
+      costYRules: [{ required: false, message: '请输入成本', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2}\d[0])?|0|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额,最多两位小数", trigger: ["blur", "change"] }],
+      exchangeRules: [{ required: true, message: '请输入兑换价格', trigger: 'blur' },{ pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"]}]
     }
   },
   methods: {
@@ -126,10 +126,13 @@ export default {
       let specObj = {}
       sku.forEach(item => {
         item.properties.split(';').forEach(p => {
-          const key = specObj[p.split(':')[0]]
-          if (!specObj[key] instanceof Array) {
+          const key = p.split(':')[0]
+          // console.log(specObj[key] instanceof Array)
+          if (!specObj[key]) {
             specObj[key] = []
+            console.log(specObj[key])
           }
+          
           specObj[key].push(p.split(':')[1])
         })
       })
@@ -143,10 +146,9 @@ export default {
       })
       this.specListTmp = JSON.parse(JSON.stringify(this.specList))
       this.skuList = sku.map(item => {
-        const value = accDiv(item.value, 100)
-        const cost = accDiv(item.cost, 100)
-        item.value = value
-        item.cost = cost
+        this.$set(item, 'valueY', accDiv(item.value, 100))
+        this.$set(item, 'costY', accDiv(item.cost, 100))
+        this.$set(item, 'picUrlArr', item.picUrl.split(',').map(item => { return { fileName: item }}))
         return item
       })
     },
@@ -160,7 +162,7 @@ export default {
       }
       return {}
     },
-    checkSpecVal(spec) {
+    checkSpecVal(spec, prop) {
       if (!this.specValTmp) {
         this.$message.warning('请输入规格值')
         return
@@ -172,6 +174,7 @@ export default {
       spec.vals.push(this.specValTmp)
       this.specValTmp = ''
       spec.editVals = false
+      this.$refs.spec.validateField([prop])
     },
     checkSpecName(spec) {
       if (this.specList.filter(item => item.name === spec.name).length > 1) {