修改

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url('~assets/css/font.css');
-@import url('//at.alicdn.com/t/font_2077629_pdphpdntjxl.css');
+@import url('//at.alicdn.com/t/font_2077629_3yray8qk6mp.css');
 
 html,
 body,

src/components/course/classinfo-form.vue

@@ -34,11 +34,10 @@
   .classinfo_Dialog .normalInner {
     color: #111111;
   }
-
 </style>
 <template>
   <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
-    <q-card style="margin-top:61px;width:800px" class="no-border-radius classinfo_Dialog">
+    <q-card style="margin-top:61px;width:850px" class="no-border-radius classinfo_Dialog">
       <div class="drawerTop">
         <div style="display:flex;align-items:center;">
           <q-avatar size="md" style="background:#d4dfff;color:#2961FE;font-weight:bold;">
@@ -83,7 +82,6 @@
         <q-tab :ripple="false" name="second" label="上课计划" />
         <q-tab :ripple="false" name="third" label="上课记录" />
         <q-tab :ripple="false" name="fourth" label="班级日志" />
-        <q-tab :ripple="false" name="fifth" label="待定" />
       </q-tabs>
       <div v-if="tabCheck=='first'" style="margin:0 15px;">
         <div style="text-align:right;">

src/components/course/lesson-form.vue

@@ -22,8 +22,8 @@
 
   .calendar-day {
     position: absolute;
-    bottom: 5px;
-    left: 15px;
+    bottom: -5px;
+    left: 5px;
   }
 
   .calenderHeader {
@@ -31,14 +31,37 @@
     justify-content: space-between;
     padding: 0 20px;
   }
-
+  .calendarTop{
+    display: flex;
+    justify-content: space-between;
+    font-size:12px;
+    margin-left:-7px;
+    align-items: center;
+    transform: scale(0.9);
+  }
+  .calendarInner{
+    font-size:12px;
+    margin:-4px 0 0 -7px;
+    transform: scale(0.9);
+  }
+  .lesson_Form .el-calendar-table .el-calendar-day{
+    padding: 5px;
+  }
+  .caldendarTeacher{
+    display: flex;
+    font-size:12px;
+    margin-left:40px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top:-2px;
+    transform: scale(0.9);
+  }
 </style><template>
   <div class="lesson_Form">
     <div class="calenderHeader">
       <div>
         <el-radio-group v-model="checkedDays" size="mini">
           <el-radio-button label="日"></el-radio-button>
-          <el-radio-button label="周"></el-radio-button>
           <el-radio-button label="月"></el-radio-button>
           <el-radio-button style="margin-left:20px;border-left:1px solid #DCDFE6;" label="今天"></el-radio-button>
         </el-radio-group>
@@ -53,7 +76,7 @@
         <!--自定义内容-->
         <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
         <div v-for="item in calendarData">
-          <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
+          <!-- <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
             <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
               <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                 <div class="is-selected">{{item.things}}</div>
@@ -61,7 +84,30 @@
             </div>
             <div v-else></div>
           </div>
+          <div v-else></div> -->
+          <div v-if="item.ClassDateStr==data.day">
+            <div class="calendarTop">
+              <div>{{item.RoomName}}</div>
+              <div><i class="iconfont icon-edit"></i></div>
+            </div>
+            <div class="calendarInner">
+              <div v-for="(subItem,subIndex) in item.TimeList">
+                {{subIndex+1}}节课 {{subItem.StartTime}}-{{subItem.EndTime}}
+              </div>
+            </div>
+            <div class="caldendarTeacher">
+              <div>{{item.TeacherName}}</div>
+              <div>
+                <q-avatar size="sm" v-if="item.UserIcon">
+                  <img :src="item.UserIcon" />
+                </q-avatar>
+                <q-avatar size="md" color="teal-10" text-color="white" v-if="!item.UserIcon">
+                  {{GetFirst(item.TeacherName)}}</q-avatar>
+              </div>
+            </div>
+          </div>
           <div v-else></div>
+
         </div>
       </template>
     </el-calendar>
@@ -82,27 +128,7 @@
     name: "calendar",
     data() {
       return {
-        calendarData: [{
-            months: ['09', '11'],
-            days: ['15'],
-            things: '看电影'
-          },
-          {
-            months: ['10', '11'],
-            days: ['02'],
-            things: '去公园野炊'
-          },
-          {
-            months: ['11'],
-            days: ['02'],
-            things: '看星星'
-          },
-          {
-            months: ['11'],
-            days: ['02'],
-            things: '看月亮'
-          }
-        ],
+        calendarData: [],
         value: new Date(),
         checkedDays: '月'
       }
@@ -111,20 +137,43 @@
 
     },
     mounted() {
-      this.getClassPlan();
+      var day2 = new Date();
+      day2.setTime(day2.getTime());
+      var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1);
+      this.getClassPlan(s2);
     },
     methods: {
+      //获取第一个字
+      GetFirst(val) {
+        if (val) {
+          return val.substr(0, 1);
+        }
+      },
       //获取班级上课计划列表
-      getClassPlan() {
+      getClassPlan(datetime) {
         var msg = {
           ClassId: this.setingObj.ClassId,
-          QMonth: "2020-12"
+          QMonth: datetime
         };
         quertClassPlan(msg).then(res => {
           console.log("res", res);
+          if(res.Code==1){
+            this.calendarData = res.Data;
+          }
         })
       }
-    }
+    },
+    watch: {
+      'value': {
+        handler(newValue) {
+          var d = new Date(newValue);
+          var datetime=d.getFullYear() + '-' + (d.getMonth() + 1);
+          this.getClassPlan(datetime);
+          console.log(datetime,'newwww');
+        },
+        deep: true
+      },
+    },
   }
 
 </script>