日历备注

src/views/new-plan/arrange/arrange.vue

@@ -1,7 +1,14 @@
 <template>
   <div id="arrange">
     <el-card ref="card" v-if="info.year" height="800px">
-      <table-cal :events="events" :vacation="vacation" @cellClick="eventClick" @toSave="savePlan" @toSetPlan="() => (dialog = true)"></table-cal>
+      <table-cal
+        :events="events"
+        :vacation="vacation"
+        :remark="remark"
+        @cellClick="eventClick"
+        @toSave="savePlan"
+        @toSetPlan="() => (dialog = true)"
+      ></table-cal>
     </el-card>
     <el-drawer :visible.sync="drawer" direction="rtl" title="安排计划" @close="toClose">
       <event
@@ -135,6 +142,7 @@ export default {
       options: {},
       classTypeList: [],
       eventLoading: false,
+      remark: [],
     };
   },
   async created() {
@@ -169,6 +177,7 @@ export default {
         this.$set(this, `vacation`, vac);
       }
       this.searchTemplate();
+      this.toResetRemark();
     },
     //模板事件开始
     //生成默认模板
@@ -200,6 +209,7 @@ export default {
         event = events;
       }
       this.$set(this, `events`, event);
+      this.toResetRemark();
     },
     //安排
     // start:选择的开始时间
@@ -244,7 +254,6 @@ export default {
           //判断在不在假期
           if (r) break;
           let isInRange = this.isInRange(startdate, enddate, start, end);
-          console.log(startdate, enddate, isInRange);
           let classes = [];
           //判断不在手选的时间范围内
           if (!isInRange) {
@@ -330,6 +339,7 @@ export default {
         }
       }
       this.toClose();
+      this.toResetRemark();
     },
     //列表删除事件,一定是删除批次,班级属于内部信息,期需要自己把批次都删了
     toDelete(data) {
@@ -421,6 +431,10 @@ export default {
     checkDate(date) {
       let year = JSON.parse(JSON.stringify(this.info.year));
       let res = moment(date).isBetween(`${year}-01-01`, `${year}-12-31`, null, '[]');
+      // console.log(res);
+      // let dv = _.cloneDeep(this.vacation);
+      // let vres = dv.find(f => moment(date).isBetween(f.start, f.end, null, '[]'));
+      // console.log(vres);&& !vres
       return !res;
     },
     dayPlus(date, num) {
@@ -464,6 +478,30 @@ export default {
       let er = moment(end).isBetween(rs, re, null, '[]');
       return sr && er;
     },
+    //整理remark
+    toResetRemark() {
+      let des = _.cloneDeep(this.events);
+      des = des.map(i => i.batchnum).flat();
+      des = des.map(i => {
+        i.month = moment(i.enddate).month() + 1;
+        return i;
+      });
+      let r = _.groupBy(des, 'month');
+      let remark = [];
+      for (let i = 1; i <= 12; i++) {
+        let mdata = _.get(r, i);
+        if (mdata) {
+          let obj = {};
+          let cn = mdata.reduce((p, n) => p + _.get(n.class, 'length', 0), 0);
+          obj.class = mdata.reduce((p, n) => p + _.get(n.class, 'length', 0), 0);
+          let num = mdata.reduce((p, n) => p + _.get(n, 'class', []).reduce((pc, nc) => pc + nc.number * 1, 0), 0);
+          obj.number = mdata.reduce((p, n) => p + _.get(n, 'class', []).reduce((pc, nc) => pc + nc.number * 1, 0), 0);
+          obj.month = i;
+          remark.push(obj);
+        }
+      }
+      this.$set(this, `remark`, remark);
+    },
     async getOtherList() {
       const res = await this.getClassType();
       if (this.$checkRes(res)) this.$set(this, `classTypeList`, res.data);

src/views/new-plan/arrange/arrange/table.vue

@@ -17,8 +17,8 @@
               <p>{{ item }}</p>
               <p>{{ item | getWeekDay }}</p>
             </th>
-            <th class="th"><p>备注</p></th>
-            <th class="th"><p>备注</p></th>
+            <th class="th"><p>班级数</p></th>
+            <th class="th"><p>人数</p></th>
           </tr>
           <tr v-for="(b, bi) in list[`${month}`]" :key="bi">
             <td
@@ -33,8 +33,8 @@
               {{ getContent(date, month, bi, ci) || '' }}
             </td>
             <template v-if="bi == 0">
-              <td :rowspan="getRowNumber(month)" :style="{ height: getRowNumber(month) * 15 }"></td>
-              <td :rowspan="getRowNumber(month)"></td>
+              <td :rowspan="getRowNumber(month)" :style="{ height: getRowNumber(month) * 15 }">{{ getRemark(month, 'class') }}</td>
+              <td :rowspan="getRowNumber(month)">{{ getRemark(month, 'number') }}</td>
             </template>
           </tr>
         </template>
@@ -62,6 +62,7 @@ export default {
     year: { type: Number, default: new Date().getFullYear() },
     events: { type: Array },
     vacation: { type: Array },
+    remark: { type: Array, default: () => {} },
   },
   components: {},
   data: function() {
@@ -74,6 +75,13 @@ export default {
   },
   created() {},
   methods: {
+    getRemark(month, type) {
+      console.log(month, type);
+      console.log(this.remark);
+      let res = this.remark.find(f => f.month == month);
+      console.log(res);
+      if (res) return _.get(res, type);
+    },
     makeCalendar(month = 1) {
       if (month * 1 < 10) month = `0${month}`;
       let days = moment(`${this.year}-${month}`).daysInMonth();
@@ -95,7 +103,6 @@ export default {
       return dlist;
     },
     cellClick(date, month, bi, ci) {
-      console.log(date, month, bi, ci);
       let res = this.checkEvents(date, month, bi);
       if (res) this.$emit('cellClick', res);
       else {