新增图片相册校验

src/views/pms/product/components/ProductAttrDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="margin-top: 50px">
-    <el-form :model="value" ref="productAttrForm" label-width="120px" style="width: 720px" size="small">
+    <el-form :model="value" ref="productAttrForm" :rules="rules" label-width="120px" style="width: 720px" size="small">
       <!-- <el-form-item label="属性类型：">
         <el-select v-model="value.productAttributeCategoryId"
                    placeholder="请选择属性类型"
@@ -131,7 +131,7 @@
           </div>
         </el-card>
       </el-form-item> -->
-      <el-form-item label="商品相册：">
+      <el-form-item label="商品相册：" prop="selectProductPics">
         <multi-upload v-model="selectProductPics"></multi-upload>
       </el-form-item>
       <el-form-item label="规格参数：">
@@ -172,6 +172,7 @@
     },
     data() {
       return {
+
         //编辑模式时是否初始化成功
         hasEditCreated:false,
         //商品属性分类下拉选项
@@ -185,7 +186,12 @@
         //可手动添加的商品属性
         addProductAttrValue: '',
         //商品富文本详情激活类型
-        activeHtmlName: 'pc'
+        activeHtmlName: 'pc',
+        rules: {
+          selectProductPics: [
+            {required: true, message: '请上传商品图片', trigger: 'blur'}
+          ],
+        }
       }
     },
     computed: {
@@ -602,7 +608,16 @@
         this.mergeProductAttrPics();
         this.$emit('nextStep')
       },
-      handleFinishCommit(){       
+      handleFinishCommit(){
+        debugger;
+        if(!this.selectProductPics || (this.selectProductPics || []).length==0){
+          this.$message({
+            message: '请上传商品相册',
+            type: 'error',
+            duration:1000
+          });
+          return;
+        }
         this.$emit('finishCommit',this.isEdit);
       }
     }