创建广告开始和结束时间验证

src/pages/content-manage/components/DrawerForm.vue

@@ -101,7 +101,7 @@
           {{form.enclosure_uri_name}}
           <span class="upload-file-bar">
             <i :class="isFilePreview(form.enclosure_uri_name) ? 'el-icon-view':'el-icon-download'" @click="handleDownloadFile('enclosure_uri')"></i>
-            <i class="el-icon-circle-close" @click="handleClearFile('enclosure_uri')"></i>
+            <i v-if="!isDetails" class="el-icon-circle-close" @click="handleClearFile('enclosure_uri')"></i>
           </span>
         </div>
       </el-form-item>
@@ -120,16 +120,22 @@
           {{form.video_uri_name}}
           <span class="upload-file-bar">
             <i class="el-icon-view" @click="handleDownloadFile('video_uri')"></i>
-            <i class="el-icon-circle-close" @click="handleClearFile('video_uri')"></i>
+            <i v-if="!isDetails" class="el-icon-circle-close" @click="handleClearFile('video_uri')"></i>
           </span>
         </div>
       </el-form-item>
-      <el-form-item label="开始时间：" prop="start_time">
+      <el-form-item label="开始时间：" prop="start_time" :rules="[{required: true, message: '请选择开始时间', trigger: 'change'}]">
         <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择开始时间" size="small" clearable :disabled="isDetails"/>
       </el-form-item>
       <el-form-item label="结束时间：" :required="form.hasEndDate===1" class="mb-15">
-        <el-switch v-model="form.hasEndDate" :active-value="1" :inactive-value="0" active-text="有" inactive-text="无" :disabled="isDetails"></el-switch>
-        <el-date-picker v-if="form.hasEndDate" v-model="form.end_time" type="datetime" placeholder="选择结束时间" size="small" clearable :disabled="isDetails"/>
+        <el-col :span="7">
+          <el-switch v-model="form.hasEndDate" :active-value="1" :inactive-value="0" active-text="有" inactive-text="无" :disabled="isDetails"></el-switch>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item v-if="form.hasEndDate" prop="end_time" :rules="[{required: true, message: '请选择结束时间', trigger: 'change'}, { type: 'date', validator: endDateChecked, trigger: 'change' }]">
+            <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择结束时间" size="small" clearable :disabled="isDetails" :picker-options="dateOptions"/>
+          </el-form-item>
+        </el-col>
       </el-form-item>
       <!-- <template>
         <el-form-item label="发布状态：" class="mb-15">
@@ -270,6 +276,19 @@ export default {
     },
     isEdit() {
       return this.options.type === 'edit'
+    },
+    startTimestamp() {
+      return formatToDate(this.form.start_time).getTime()
+    },
+    endTimestamp() {
+      return formatToDate(this.form.end_time).getTime()
+    },
+    dateOptions() {
+      return {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 8.64e7
+        }
+      }
     }
   },
   watch: {
@@ -310,8 +329,18 @@ export default {
     }
   },
   methods: {
+    endDateChecked(rule, value, callback) {
+      if (value) {
+        if (this.endTimestamp < Date.now()) {
+          callback(new Error('结束时间必须大于当前时间'))
+        } else if (this.endTimestamp < this.startTimestamp) {
+          callback(new Error('结束时间必须大于开始时间'))
+        } else {
+          callback()
+        }
+      }
+    },
     beforeUpload(file, target) {
-      console.log(file)
       let errorMsg = ''
       const suffix = splitStrLast(file.name, '.')
       if (target === 'web_img_uri' || target === 'mobile_terminal_img_uri') {
@@ -369,13 +398,11 @@ export default {
       this.$refs[formName].validate(valid => {
         const form = { ...this.form }
         if (valid) {
-          if (form.start_time) {
-            form.start_time = this.toUnitTimestamp(form.start_time) || 0
-          }
+          form.start_time = this.toUnitTimestamp(form.start_time) || 0
           if (form.hasEndDate === 1) {
             form.end_time = this.toUnitTimestamp(form.end_time) || 0
           } else {
-            delete form.end_time
+            form.end_time = 0
           }
           delete form.hasEndDate
           this.$emit('drawFormSubmit', form)