添加必填校验

src/views/operation/activity/detail.vue

@@ -1,21 +1,22 @@
 <template>
   <div class='app-container'>
-    <el-form label-width="100px" :disabled="disabled">
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px" :disabled="disabled">
       <el-form-item label="活动名称：">
         <el-input v-model="form.name" placeholder="请输入活动名称" />
       </el-form-item>
-      <el-form-item label="活动图片：">
+      <el-form-item label="活动图片：" prop="pic">
         <Upload listType="picture-card" :url="form.pic" @upload="upload" />
       </el-form-item>
-      <el-form-item label="有效时间：">
-        <el-date-picker type="datetimerange" v-model="form.timeList" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
+      <el-form-item label="有效时间：" prop="timeList">
+        <el-date-picker type="datetimerange" v-model="form.timeList" start-placeholder="开始日期" end-placeholder="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss" />
       </el-form-item>
-      <el-form-item label="活动设备：" style="width: 1000px">
+      <el-form-item label="活动设备：" style="width: 1000px" prop="deviceRespList">
         <el-button type="primary" icon="el-icon-plus" @click="handlePush">添加</el-button>
         <el-table :data="form.deviceRespList">
           <el-table-column label="关联设备" align="center">
             <template slot-scope="scope">
-              <el-select v-model="scope.row.deviceId" placeholder="请选择关联设备" :disabled="disabledActivity">
+              <el-select v-model="scope.row.deviceId" filterable placeholder="请选择关联设备" :disabled="disabledActivity">
                 <el-option v-for="item in devOptions" :key="item.value" :value="item.value" :label="item.label"
                   :disabled="item.disabled" />
               </el-select>
@@ -35,7 +36,8 @@
           </el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="delete" @click="getDelete(scope.row.deviceId, scope.$index)" :disabled="disabledActivity">删除</el-button>
+              <el-button type="delete" @click="getDelete(scope.row.deviceId, scope.$index)"
+                :disabled="disabledActivity">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -64,7 +66,19 @@ export default {
       // 生效期内禁止修改活动设备
       disabledActivity: this.$route.query.activityState == 0 ? true : false,
       // 只读
-      disabled: Boolean(this.$route.query.boolean)
+      disabled: Boolean(this.$route.query.boolean),
+      // 校验
+      rules: {
+        pic: [{
+          required: true, message: '请上传活动图片', trigger: 'change'
+        }],
+        timeList: [{
+          required: true, message: '请选择有效时间', trigger: 'change'
+        }],
+        deviceRespList: [{
+          type: 'array', required: true, message: '请添加活动设备', trigger: 'change'
+        }]
+      }
     }
   },
   watch: {
@@ -126,10 +140,16 @@ export default {
 
     // 确定
     getSubmit() {
-      submit(this.form).then(res => {
-        if (res.code === 0) {
-          this.$message.success('提交成功！')
-          this.cancel()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功！')
+              this.cancel()
+            }
+          })
+        } else {
+          return false
         }
       })
     }