运营管理 启动页 增加必填不为空提示

src/views/operation/startPage/detail.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="app-container">
-    <el-form label-width="100px">
-      <el-form-item label="启动页名称：">
+    <el-form :model="form" :rules="rules" ref="form" label-width="auto">
+      <el-form-item label="启动页名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入启动页名称" />
       </el-form-item>
-      <el-form-item label="生效期：">
-        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
-          value-format="yyyy-MM-dd HH:mm:ss" @change="getchecked" />
+      <el-form-item label="生效期：" prop="date">
+        <el-date-picker v-model="form.date" type="datetimerange" start-placeholder="开始时间"
+          end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="getchecked" />
       </el-form-item>
-      <el-form-item label="跳转方式：">
+      <el-form-item label="跳转方式：" prop="forwardType">
         <el-select v-model="form.forwardType" placeholder="请选择跳转方式">
           <el-option v-for="item in dict.type.nav_address_type" :key="item.value" :label="item.label"
             :value="Number(item.value)" />
         </el-select>
       </el-form-item>
-      <el-form-item label="持续时间：">
+      <el-form-item label="持续时间：" prop="time">
         <el-select v-model="form.time" placeholder="请选择持续时间">
           <el-option v-for="item in dict.type.time_of_duration" :key="item.value" :label="item.label"
             :value="Number(item.value)" />
         </el-select>
       </el-form-item>
-      <el-form-item label="能否跳过：">
+      <el-form-item label="能否跳过：" prop="isStep">
         <el-select v-model="form.isStep" placeholder="请选择能否跳过" :disabled="disabled">
           <el-option v-for="item in dict.type.yes_no_pass" :key="item.value" :label="item.label"
             :value="Number(item.value)" />
         </el-select>
       </el-form-item>
-      <el-form-item label="跳转地址：">
+      <el-form-item label="跳转地址：" prop="forwardUrl">
         <el-input v-model="form.forwardUrl" placeholder="请输入跳转地址" />
       </el-form-item>
-      <el-form-item label="启动页图片：">
+      <el-form-item label="启动页图片：" prop="pic">
         <Upload listType="picture-card" measure="375*812" :url="form.pic" @upload="getUpload" />
       </el-form-item>
     </el-form>
@@ -55,14 +55,37 @@ export default {
       date: [],
       // 是否禁用
       disabled: false,
+      rules: {
+        name: [{
+          required: true, message: '请输入启动页名称', trigger: 'blur'
+        }],
+        date: [{
+          required: true, message: '请选择生效期', trigger: 'change'
+        }],
+        forwardType: [{
+          required: true, message: '请选择跳转方式', trigger: 'change'
+        }],
+        time: [{
+          required: true, message: '请选择持续时间', trigger: 'change'
+        }],
+        isStep: [{
+          required: true, message: '请选择能否跳过', trigger: 'change'
+        }],
+        forwardUrl: [{
+          required: true, message: '请输入跳转地址', trigger: 'blur'
+        }],
+        pic: [{
+          required: true, message: '请上传启动页图片', trigger: 'change'
+        }]
+      }
     }
   },
   watch: {
     'form.time'(val) {
-      if(val === 0){
+      if (val === 0) {
         this.form.isStep = 0
         this.disabled = true
-      }else{
+      } else {
         this.disabled = false
       }
     }
@@ -86,25 +109,6 @@ export default {
       })
     },
 
-    // 新增
-    getSubmit() {
-      if (this.$route.query.id) {
-        edit(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('修改成功！')
-            this.cancel()
-          }
-        })
-      } else {
-        submit(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('新增成功！')
-            this.cancel()
-          }
-        })
-      }
-    },
-
     // 判断生效日期
     getchecked(e) {
       this.date = []
@@ -129,6 +133,31 @@ export default {
       this.form.pic = e.file
     },
 
+    // 提交
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.$route.query.id) {
+            edit(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('修改成功！')
+                this.cancel()
+              }
+            })
+          } else {
+            submit(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('新增成功！')
+                this.cancel()
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+
     // 取消
     cancel() {
       this.$tab.closeOpenPage("/operation/startPage");