商品规格SKU生成 一键设置

src/views/product/info/index.vue

@@ -211,7 +211,7 @@
           </el-row>
         </div>
         <div v-show="stepNumber === 1">
-          <el-form-item label="品类" prop="ruleId">
+          <el-form-item label="品类" prop="type">
             <el-cascader
               style="width: 100%"
               v-model="categoryOptionValue"
@@ -229,7 +229,7 @@
                       <span>属性组【{{templateAttributeGroup.groupName}}】</span>
                     </div>
                     <div style="height: 200px; width: 100%;">
-                      <el-form ref="form" label-width="80px">
+                      <el-form ref="templateAttributeGroupForm" label-width="80px">
                         <el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
                           <el-input v-model="attribute.value"></el-input>
                         </el-form-item>
@@ -291,7 +291,7 @@
                   <span>属性值填写</span>
                 </div>
                 <el-row style="overflow-x: auto; height: 300px;">
-                  <el-form ref="form" :model="form" label-width="80px">
+                  <el-form ref="attributeForm" :model="form" label-width="80px">
                     <el-col :span="6" v-for="attribute in attributeCheckedList">
                       <el-form-item :label="attribute.name">
                         <el-input v-model="attribute.value"></el-input>
@@ -349,7 +349,7 @@
           </el-table>
         </div>
         <div v-show="stepNumber === 3">
-          <el-form-item label="商品描述">
+          <el-form-item label="商品描述" prop="introduction">
             <editor v-model="form.introduction" :min-height="192"/>
           </el-form-item>
         </div>
@@ -413,14 +413,34 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        createBy: [
+        name: [
-          { required: true, message: "创建人不能为空", trigger: "blur" }
+          { required: true, message: "商品名称不能为空", trigger: "blur" }
         ],
-        createTime: [
+        status: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+          { required: true, message: "商品状态不能为空", trigger: "blur" }
+        ],
+        brandId: [
+          { required: true, message: "商品品牌不能为空", trigger: "blur" }
+        ],
+        image: [
+          { required: true, message: "商品图片不能为空", trigger: "blur" }
+        ],
+        carouselImages: [
+          { required: true, message: "商品轮播图不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "商品品类不能为空", trigger: "blur" }
+        ],
+        ruleId: [
+          { required: true, message: "商品规格不能为空", trigger: "blur" }
         ],
       },
-      stepNumber: 1,
+      rulesTemplateMap: {
+        0: ["name", "status", "brandId", "image", "carouselImages"],
+        1: ["type"],
+        2: ["ruleId"],
+      },
+      stepNumber: 0,
       brandList: [],
       categoryOptions: [],
       categoryOptionValue: [],
@@ -456,7 +476,6 @@ export default {
         "image": null,
         "stock": null,
         "price": null
-
       }
     };
   },
@@ -619,7 +638,16 @@ export default {
       this.stepNumber--
     },
     next() {
-      this.stepNumber++
+      let isValidate = true;
+      this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
+        console.log(valid)
+        if (valid) {
+          isValidate = false;
+        }
+      });
+      if (isValidate){
+        this.stepNumber++
+      }
     },
     /** 查询商品信息列表 */
     getList() {