update: 调整活动时间有效期

src/components/active-config/base-config.vue

@@ -63,8 +63,9 @@ import baseConfig from '@/components/active-config/base-config.vue';
       <el-form-item
         label="活动有效期："
         prop="dateRange"
+        required
       >
-        <el-date-picker
+        <!-- <el-date-picker
           class="m-l-10"
           prefix-icon="el-icon-time"
           :disabled="$route.query.editFlag"
@@ -80,6 +81,33 @@ import baseConfig from '@/components/active-config/base-config.vue';
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+        > </el-date-picker> -->
+        <el-date-picker
+          class="m-l-10"
+          :disabled="$route.query.editFlag || startDateDisabled"
+          prefix-icon="el-icon-time"
+          v-model="activeInfoData.startDate"
+          :editable="false"
+          :value-format="'yyyy-MM-dd'"
+          type="date"
+          align="right"
+          placeholder="开始日期"
+          :picker-options="pickerOptionsStart"
+          @change="changeDate($event, true)"
+        > </el-date-picker>
+        <span style="margin:0 5px;color:#c0c4cc">-</span>
+        <el-date-picker
+          class="m-l-10"
+          :disabled="$route.query.editFlag || endDateDisabled"
+          prefix-icon="el-icon-time"
+          v-model="activeInfoData.endDate"
+          :editable="false"
+          :value-format="'yyyy-MM-dd'"
+          type="date"
+          align="right"
+          placeholder="结束日期"
+          :picker-options="pickerOptionsEnd"
+          @change="changeDate($event, false)"
         > </el-date-picker>
       </el-form-item>
       <el-form-item class="m-t-50">
@@ -110,13 +138,22 @@ export default {
   },
   data() {
     const checkDate = (rule, value, callback) => {
-      console.log(value[0].split(' ')[0] ,timeFormat.timeStampToYmd(new Date().getTime()));
-      if (!value || !value.length) {
+      // console.log(value[0].split(' ')[0] ,timeFormat.timeStampToYmd(new Date().getTime()));
+      // if (!value || !value.length) {
+      //   callback(new Error('请选择活动有效期'));
+      // } else if (value[0].split(' ')[0] == timeFormat.timeStampToYmd(new Date().getTime()) && value[0].split(' ')[0] == value[1].split(' ')[0]) {
+      //   callback(new Error('不能选择今天'));
+      // }else if (this.editDate && !!this.$route.query.activityId && (value[0].split(' ')[0] != timeFormat.timeStampToYmd(new Date().getTime()) || timeFormat.timeStampToYmd(new Date().getTime()) == value[1].split(' ')[0])) {
+      //   callback(new Error('开始时间无法改到当前时间之后，结束时间无法改到当前时间之前'));
+      // } else {
+      //   callback();
+      // }
+      if(!value || !value.length || (!value[0] && !value[1])) {
         callback(new Error('请选择活动有效期'));
-      } else if (value[0].split(' ')[0] == timeFormat.timeStampToYmd(new Date().getTime()) && value[0].split(' ')[0] == value[1].split(' ')[0]) {
-        callback(new Error('不能选择今天'));
-      }else if (this.editDate && !!this.$route.query.activityId && (value[0].split(' ')[0] != timeFormat.timeStampToYmd(new Date().getTime()) || timeFormat.timeStampToYmd(new Date().getTime()) == value[1].split(' ')[0])) {
-        callback(new Error('开始时间无法改到当前时间之后，结束时间无法改到当前时间之前'));
+      } else if(!value[0]) {
+        callback(new Error('请选择开始日期'));
+      } else if(!value[1]) {
+        callback(new Error('请选择结束日期'));
       } else {
         callback();
       }
@@ -139,10 +176,14 @@ export default {
         activityName: '',
         dateRange: [],
         editDate: false,
+        startDate: '',
+        endDate: '',
+        startDateDisabled: false,
+        endDateDisabled: false
       },
       rules: {
         activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-        dateRange: [{ validator: checkDate, trigger: 'blur' }]
+        dateRange: [{ validator: checkDate, trigger: 'change' }]
       },
       choiceDateCopy: [],
       pickerOptions: {
@@ -161,20 +202,45 @@ export default {
           }
           return time.getTime() < Date.now() - 8.64e7;
         }
-      }
+      },
+      pickerOptionsStart: {
+        disabledDate: time => {
+          let disabled = time.getTime() < Date.now() - 8.64e7;
+          // if(this.activeInfoData.endDate) {
+          //   disabled = disabled || (time.getTime() > new Date(this.activeInfoData.endDate).getTime());
+          // }
+          return disabled;
+        }
+      },
+      pickerOptionsEnd: {
+        disabledDate: time => {
+          let disabled = time.getTime() < Date.now() - 8.64e7;
+          if(this.activeInfoData.startDate) {
+            disabled = disabled || (time.getTime() < new Date(this.activeInfoData.startDate).getTime());
+          }
+          if(!this.activeInfoData.startDate || (new Date(this.activeInfoData.startDate).toDateString() === new Date().toDateString())) {
+            disabled = disabled || (time.getTime() <= new Date().setHours(0,0,0));
+          }
+          return disabled;
+        }
+      },
     };
   },
   methods: {
     /**
      * 日期
      */
-    changeDate(e) {
+    changeDate(e, isStartDate) {
       const that = this;
       that.editDate = true;
-      if (!e) {
-        that.choiceDateCopy = [];
-        that.activeInfoData.dateRange = [];
-      }
+      // if (!e) {
+      //   that.choiceDateCopy = [];
+      //   that.activeInfoData.dateRange = [];
+      // }
+      isStartDate && (this.activeInfoData.endDate = '');
+      this.activeInfoData.startDate && (this.activeInfoData.startDate = timeFormat.timeToDateTime(new Date(this.activeInfoData.startDate).setHours(0,0,0,0)));
+      this.activeInfoData.endDate && (this.activeInfoData.endDate = timeFormat.timeToDateTime(new Date(this.activeInfoData.endDate).setHours(23,59,59,999)));
+      this.activeInfoData.dateRange = [ this.activeInfoData.startDate || '', this.activeInfoData.endDate || '' ]
     },
     /**
      * 返回
@@ -260,6 +326,8 @@ export default {
             resData.result.router.sort(function(a,b){
               return (a.transId - b.transId);
             })
+            this.startDateDisabled = Date.now() > resData.result.startDate;
+            this.endDateDisabled = Date.now() > resData.result.endDate
             resData.result.startDate = timeFormat.timeToDateTime(resData.result.startDate);
             resData.result.endDate = timeFormat.timeToDateTime(resData.result.endDate);
             resData.result.dateRange = [resData.result.startDate, resData.result.endDate];