修改选择日期控件为:一年内且除假期外

src/views/plan/detail.vue

@@ -35,7 +35,7 @@
       </el-row>
     </detail-frame>
     <el-drawer :visible.sync="drawer" direction="rtl" title="安排计划" @close="toClose">
-      <event :data="form" :isNew="formIsNew" :predefineColors="predefineColors" @save="saveForm"></event>
+      <event :vacation="vacation" :year="info.year" :data="form" :isNew="formIsNew" :predefineColors="predefineColors" @save="saveForm"></event>
     </el-drawer>
     <el-dialog title="设置假期" :visible.sync="dialog">
       <vacation-form :list="vacation" @update="setVacation"></vacation-form>
@@ -65,7 +65,6 @@ export default {
           batchnum: [],
         },
       },
-
       form: { color: '#409EFF' },
       formIsNew: true,
       rules: {
@@ -129,21 +128,6 @@ export default {
     async search() {
       const res = await this.fetch(this.id);
       console.log(res);
-      // if (this.$checkRes(res)) this.$set(this, `info`, res.data);
-      // this.loading = false;
-      // let events = [];
-      // events = _.flatten(
-      //   this.axiosData.termnum.map(item => {
-      //     item.batchnum.map(i => {
-      //       i.term = item.term;
-      //       return i;
-      //     });
-      //     return item.batchnum;
-      //   })
-      // );
-      // let { termnum, year, title } = this.axiosData;
-      // this.$set(this, `events`, events);
-      // this.$set(this, `info`, { title, year });
     },
     //拖拽选择事件
     selectDate(object) {
@@ -159,7 +143,7 @@ export default {
       this.drawer = true;
       this.formIsNew = true;
     },
-    //日历事件点击事件
+    //日历事件点击事件 缺少删除
     eventClick({ event }) {
       let arr = this.events.filter(fil => fil.id == event.id);
       if (arr.length > 0) {
@@ -181,16 +165,15 @@ export default {
     },
     //列表删除事件
     toDelete({ data, index }) {
-      this.events.splice(index, 1);
+      this.selectList.splice(index, 1);
+      let newEvents = this.events.filter(fil => fil.id !== data.id);
+      this.$set(this, `events`, newEvents);
     },
     //保存计划事件
     savePlan({ isNew }) {
       //全年计划内容
-
       let data = JSON.parse(JSON.stringify(this.info));
-
       data.year = this.info.year;
-      console.log(data.year);
       let termnum = [];
       //1,获取所有期数
       //2,按期数将events内数据分组
@@ -300,31 +283,15 @@ export default {
       for (const vac of this.vacation) {
         let vacS = new Date(vac.start).getTime();
         let vacE = new Date(vac.end).getTime();
-        // console.log(`start:${new Date(start)}`);
-        // console.log(`end:${new Date(end)}`);
-        // console.log(`vstart:${new Date(vac.start)}`);
-        // console.log(`vend:${new Date(vac.end)}`);
-        //case1 事件开始时间<假期开始时间 => 事件结束时间 <= 假期开始时间 ? 事件没碰到假期,没事 : 事件碰到假期了.不行了
-        //case2 事件开始时间>=假期开始时间 => 事件开始时间 <= 假期结束时间 ? GG return false: return true;
-        //case2
-        // console.log(`startTime:${startTime}`);
-        // console.log(`vacS:${vacS}`);
-        // console.log(startTime >= vacS);
+        //case1 事件开始时间<假期开始时间 => 事件结束时间 > 假期开始时间 ? 事件碰到假期了.不行了 : 事件没碰到假期,没事
+        //case2 事件开始时间>=假期开始时间 => 事件开始时间 < 假期结束时间 ? GG return false: return true;
         if (startTime >= vacS) {
-          // console.log(`in if`);
-          // console.log(`startTime:${startTime}`);
-          // console.log(`vacE:${vacE}`);
-          // console.log(startTime < vacE);
           if (startTime < vacE) {
             res = false;
             console.warn(`case2`);
             break;
           }
         } else {
-          //case1
-          // console.log(`in else`);
-          // console.log(`endTime:${endTime}`);
-          // console.log(`vacS:${vacS}`);
           if (endTime > vacS) {
             res = false;
             console.warn(`case1`);

src/views/plan/parts/event.vue

@@ -2,10 +2,10 @@
   <div id="event">
     <el-form :model="form" ref="form" :rules="formRules" label-width="80px" size="small" @submit.native.prevent style="padding: 15px;">
       <el-form-item label="开始时间" prop="start" required>
-        <el-date-picker v-model="form.start" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+        <el-date-picker v-model="form.start" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker>
       </el-form-item>
       <el-form-item label="结束时间" prop="end" required>
-        <el-date-picker v-model="form.end" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+        <el-date-picker v-model="form.end" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker>
       </el-form-item>
       <el-form-item label="期数" prop="term" required> <el-input v-model="form.term"></el-input> </el-form-item>
       <el-form-item label="班级类型" prop="type" required>
@@ -43,18 +43,25 @@ export default {
     data: { type: Object, default: () => {} }, //数据
     isNew: { type: Boolean, default: true }, //是不是修改
     predefineColors: { type: Array, default: () => [] }, //颜色列表
+    year: { type: null, default: new Date().getFullYear() },
+    vacation: { type: Array, default: () => [] },
   },
   components: {},
-  data: () => ({
-    form: { color: '#409EFF' },
-    formRules: {
-      start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
-      end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
-      term: [{ required: true, message: '请输入期数' }],
-      number: [{ required: true, message: '请输入每班人数' }],
-      type: [{ required: true, message: '请选择班级类型' }],
-    },
-  }),
+  data() {
+    return {
+      form: { color: '#409EFF' },
+      formRules: {
+        start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+        term: [{ required: true, message: '请输入期数' }],
+        number: [{ required: true, message: '请输入每班人数' }],
+        type: [{ required: true, message: '请选择班级类型' }],
+      },
+      pickerOptions: {
+        disabledDate: time => this.setDisabledDate(time),
+      },
+    };
+  },
   created() {},
   methods: {
     //保存表单函数
@@ -73,6 +80,32 @@ export default {
     resetForm() {
       this.$refs.form.resetFields();
     },
+    //禁用时间
+    setDisabledDate(time) {
+      let thisTime = time.getTime();
+      let start = new Date(`${this.year}-01-01`).getTime();
+      let end = new Date(`${this.year}-12-31`).getTime();
+      if (thisTime < start) return true;
+      else if (thisTime > end) return true;
+      else {
+        //循环假期列表,判断这个时间是不是在假期时间外:
+        // 此刻=假期开始时间||此刻=假期结束时间 return true(不能选)
+        // 此刻<假期开始时间 => return false(继续判断下个假期)
+        // 此刻>假期开始时间 => 此刻<假期结束时间 ? 在假期中,return true(不允许选择): return false(继续判断下个假期)
+        let res = false;
+        for (const vac of this.vacation) {
+          let vacS = new Date(vac.start).setDate(new Date(vac.start).getDate() - 1); //减一天匹配日历
+          let vacE = new Date(vac.end).setDate(new Date(vac.end).getDate() - 1);
+          if (thisTime > vacS) {
+            if (thisTime < vacE) {
+              res = true;
+              break;
+            }
+          }
+        }
+        return res;
+      }
+    },
   },
   watch: {
     data: {