22

src/components/stuMan/subscribe/subscribeForm.vue

@@ -13,7 +13,7 @@
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
         <div class="row col q-mr-lg q-col-gutter-md">
-          <q-field filled label="日期" stack-label class="col-6">
+          <q-field filled label="日期" stack-label class="col-12">
             <template v-slot:control>
               <div>{{ dateObj.date }}</div>
             </template>
@@ -29,11 +29,11 @@
             :options="CourseList"
             label="课程"
             :dense="false"
-            class="col-6"
+            class="col-12"
             emit-value
             map-options
             @filter="filterCourse"
-            @input="getCanTeacherClassTimeList()"
+            @input="getCanTeacherClassTimeList(),getStu()"
           />
           <q-select
             v-if="teaClassMsg.CourseId>0"
@@ -45,9 +45,21 @@
             emit-value
             map-options
             label="老师"
-            class="col-6"
+            class="col-12"
             @input="getCanTeacherClassTimeList()"
           />
+          <q-field filled label="上课时段" stack-label class="col-12" v-if="teaClassMsg.TeacherId>0">
+            <template v-slot:control>
+              <div>
+                <!-- {{ teacherTimeList }} -->
+                  <div v-for="(item,index) in teacherTimeList" :key="index">
+                      <div v-for="(_item,_index) in item.CourseTimeList" :key="_index" class="timeItem">
+                          {{item.SchoolName}} {{item.RoomName}}  {{ _item.StartTime }}-{{_item.EndTime}}
+                      </div>
+                  </div>
+              </div>
+            </template>
+          </q-field>
         </div>
       </q-card-section>
 
@@ -184,9 +196,17 @@ export default {
     //获取老师的空闲上课时段
     getCanTeacherClassTimeList() {
       this.teaClassMsg.Date=this.dateObj.date
+      if(this.teaClassMsg.TeacherId==0) return
       GetCanTeacherClassTimeList(this.teaClassMsg).then(res=>{
         console.log(187,res)
+        this.teacherTimeList=res.Data
       });
+    },
+    getStu(){
+      this.stuMsg.CourseId=this.
+      GetCanAppointmentStuList(this.stuMsg).then(res=>{
+        console.log(199,res)
+      })
     }
   },
   watch: {}
@@ -229,4 +249,7 @@ export default {
 .upload-assiatant-box .q-uploader {
   width: auto;
 }
+.timeItem{
+  margin: 10px 0;
+}
 </style>

src/pages/studyAbroad/subscribe.vue

@@ -83,6 +83,19 @@
           </template>
         </q-field>
       </div> -->
+      <div class="col-2">
+        <q-select
+          filled
+          dense
+          v-model="viewType"
+          option-value="value"
+          option-label="name"
+          :options="viewTypeList"
+          emit-value
+          map-options
+          label="显示模式"
+        />
+      </div>
     </div>
     <div class="row justify-center items-center">
       <q-btn dense flat label="上一周" @click="calendarPrev" />
@@ -91,7 +104,7 @@
     </div>
     <q-calendar
       v-model="selectedDate"
-      view="week"
+      :view="viewType"
       ref="calendar"
       locale="zh-CN"
       class="calendar-container"
@@ -134,6 +147,7 @@
                 :key="__index"
                 class="my-event justify-center ellipsis courseItem"
                 :class="badgeClasses(__item, 'body', _item.TeacherId)"
+                style="overflow:auto"
                 :style="
                   badgeStyles(
                     __item,
@@ -146,10 +160,19 @@
                 "
                 @click.stop="showDetail(__item)"
               >
-                <el-popover placement="top-start" width="200" trigger="hover">
-                  <div slot="reference" style="height:100vh">
-                    
+                <div v-if="viewType == 'day'">
+                  <div class="itemRow">{{ _item.TeacherName }}</div>
+                  <div class="itemRow">{{ __item.CourseName }}</div>
+                  <div>{{ __item.ClassName }}</div>
+                  <div>{{ __item.StartTime }}-{{ __item.EndTime }}</div>
+                  <div>
+                    进度:{{
+                      __item.TotalPlanNum < 0 ? 0 : __item.TotalPlanNum
+                    }}%
                   </div>
+                </div>
+                <el-popover placement="top-start" width="200" trigger="hover" v-if="viewType == 'week'">
+                  <div slot="reference" style="height:100vh"></div>
                   <div>
                     <div class="itemRow">{{ _item.TeacherName }}</div>
                     <div class="itemRow">{{ __item.CourseName }}</div>
@@ -168,7 +191,11 @@
         </div>
       </template>
     </q-calendar>
-    <SubscribeForm v-model="showForm" :dateObj="dateObj" :teacherList="TeacherList2"/>
+    <SubscribeForm
+      v-model="showForm"
+      :dateObj="dateObj"
+      :teacherList="TeacherList2"
+    />
   </div>
 </template>
 
@@ -185,6 +212,17 @@ import SubscribeForm from "../../components/stuMan/subscribe/subscribeForm";
 export default {
   data() {
     return {
+      viewType: "week",
+      viewTypeList: [
+        {
+          name: "天视图",
+          value: "day"
+        },
+        {
+          name: "周视图",
+          value: "week"
+        }
+      ],
       showForm: false,
       selectedDate: "",
       msg: {
@@ -247,9 +285,9 @@ export default {
         "blue-grey"
       ],
       legendList: [],
-      TeacherList2:[],
+      TeacherList2: [],
       events: [],
-      dateObj:{}
+      dateObj: {}
     };
   },
   components: {
@@ -274,7 +312,6 @@ export default {
     this.getData();
   },
   methods: {
-
     badgeClasses(event, type, TeacherId) {
       const bg = this.getColor(TeacherId);
       return {
@@ -343,7 +380,6 @@ export default {
           this.legendList.forEach((item, index) => {
             item.bg = this.colorList[index];
           });
-
         }
       });
     },
@@ -397,8 +433,8 @@ export default {
     onClickTime2(data) {
       console.log(5, data);
       this.showForm = true;
-      this.dateObj=data.scope.timestamp
-      console.log('5.1',this.dateObj);
+      this.dateObj = data.scope.timestamp;
+      console.log("5.1", this.dateObj);
     },
     onClickIntervalHeader2(data) {
       console.log(6, data);