1

src/pages/stuMan/StudentProgress.vue

 <template>
-  <div class="column"
+  <div
+    class="column"
     style="background-color: #e3e6ed; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"
-    @click="cancleCellHandle">
+    @click="cancleCellHandle"
+  >
     <study-header @change="getStudents" ref="studyHeaderRef"></study-header>
     <div class="sptable-box col" id="sptable">
       <div class="sptable-wrap" v-loading="loading">
@@ -9,7 +11,12 @@
           <thead>
             <tr class="sticky-header">
               <th class="sticky-column stubg">学员</th>
-              <th class="stubg cursor-pointer" v-for="(x, i) in students" :key="i" @click="showStuRight(x)">
+              <th
+                class="stubg cursor-pointer"
+                v-for="(x, i) in students"
+                :key="i"
+                @click="showStuRight(x)"
+              >
                 {{ x.GuestName }}
               </th>
             </tr>
@@ -19,9 +26,6 @@
               <td class="sticky-column coursebg">课程</td>
               <td class="coursebg " v-for="(x, i) in students" :key="i">
                 <template v-if="x.CourseRate<=6">
-                  <q-tooltip anchor="top middle" :offset="[10, 10]">
-                    {{x.CourseName}}
-                  </q-tooltip>
                    {{ x.NewCourseName }}
                 </template>
                 <template v-else>
@@ -31,16 +35,27 @@
             </tr>
             <tr>
               <td class="sticky-column teacherbg">班主任</td>
-              <td class="teacherbg cursor-pointer " v-for="(x, i) in students" @click="showDialogHandle(x, 1)" :key="i">
+              <td
+                class="teacherbg cursor-pointer "
+                v-for="(x, i) in students"
+                @click="showDialogHandle(x, 1)"
+                :key="i"
+              >
                 {{ x.HeadMasterName }}
               </td>
             </tr>
             <tr>
               <td class="sticky-column studybg">方式</td>
-              <td @click="showDialogHandle(x, 2)" class="cursor-pointer " :class="{
+              <td
+                @click="showDialogHandle(x, 2)"
+                class="cursor-pointer "
+                :class="{
                   'study-online-bg': x.TeachingMethod == 2,
                   studybg: x.TeachingMethod != 2
-                }" v-for="(x, i) in students" :key="i">
+                }"
+                v-for="(x, i) in students"
+                :key="i"
+              >
                 {{ x.TeachingMethod == 2 ? "线上" : "面授" }}
               </td>
             </tr>
@@ -48,19 +63,27 @@
               <td class="sticky-column defaultBg">
                 进度<br />({{ currentCourse.ClassHours }}课时)
               </td>
-              <td @click="showDialogHandle(x, 3)" v-for="(x, i) in students" :key="i" :class="{
+              <td
+                @click="showDialogHandle(x, 3)"
+                v-for="(x, i) in students"
+                :key="i"
+                :class="{
                   stop:
                     currentCourse.ClassHours - x.ClassProgress < 0 ||
                     x.ScheduleStatus == 1
-                }" class="cursor-pointer ">
-                <div v-if="
+                }"
+                class="cursor-pointer "
+              >
+                <div
+                  v-if="
                     (currentCourse.CourseRate == 10 ||
                     currentCourse.CourseRate == 11
                       ? x.TotalTimes
                       : currentCourse.ClassHours) -
                       x.ClassProgress <
                       0 || x.ScheduleStatus == 1
-                  ">
+                  "
+                >
                   <div>暂停排课</div>
                   <div style="font-size: 12px;font-family: microsoft yahei;">
                     {{
@@ -77,20 +100,27 @@
                       : "正常排课"
                   }}
                 </div>
-                <span style="font-size: 12px;font-family: microsoft yahei;">剩余{{
+                <span style="font-size: 12px;font-family: microsoft yahei;"
+                  >剩余{{
                     (currentCourse.CourseRate == 10 ||
                     currentCourse.CourseRate == 11
-                      ? x.TotalHours
+                      ? x.TotalTimes
                       : currentCourse.ClassHours) - x.ClassProgress
-                  }}课时</span>
+                  }}课时</span
+                >
               </td>
             </tr>
             <tr>
               <td class="sticky-column studybg">备注</td>
-              <td v-for="(x, i) in students" :key="i"
+              <td
+                v-for="(x, i) in students"
+                :key="i"
                 style="word-wrap: break-word;white-space: wrap; max-width: 150px; vertical-align: middle;"
-                @click="changeRemark(i)" @blur="setRemark(i)" :contenteditable="i == currentRemark"
-                :ref="`stu_remark_${x.GuestId}`">
+                @click="changeRemark(i)"
+                @blur="setRemark(i)"
+                :contenteditable="i == currentRemark"
+                :ref="`stu_remark_${x.GuestId}`"
+              >
               {{ x.XGRemark }}
             </td>
             </tr>
@@ -102,8 +132,12 @@
               <td class="sticky-column defaultBg" style="text-align: left;">
                 {{ x.ChapterName }}
               </td>
-              <td v-for="(y, yi) in x.assemble" @click.stop="() => resetContextmenu(i, yi)"
-                @contextmenu.prevent="e => contextMenuHandle(i, yi, e,y)" :key="yi" :class="{
+              <td
+                v-for="(y, yi) in x.assemble"
+                @click.stop="() => resetContextmenu(i, yi)"
+                @contextmenu.prevent="e => contextMenuHandle(i, yi, e,y)"
+                :key="yi"
+                :class="{
                   'disable-class': y && y.overlayer,
                   'focus-box': coor[0] == i && coor[1] == yi,
                   'unchecked':y &&y.State==1,
@@ -112,7 +146,8 @@
                   'onlineStudy':y &&y.State==3 && y.AttendanceMethod==2,
                   'notChecked':y &&y.State==3 && y.AttendanceMethod==3,
                   'study-normal':y &&y.State==3 && y.AttendanceMethod==1
-                }">
+                }"
+              >
                 <template v-if="y&&(y.State<3||y.State==6)">
                   {{ y.StateName }}
                 </template>
@@ -143,21 +178,43 @@
             </tr>
           </tbody>
         </table>
-        <q-card class="rounded-borders" v-if="locationMenu[0] > 0 && locationMenu[0] > 0"
+        <q-card
+          class="rounded-borders"
+          v-if="locationMenu[0] > 0 && locationMenu[0] > 0"
           style="width: 200px; position: absolute; z-index: 9;margin-left: -100px;"
-          :style="{ left: locationMenu[0] + 'px', top: locationMenu[1] + 'px' }">
+          :style="{ left: locationMenu[0] + 'px', top: locationMenu[1] + 'px' }"
+        >
           <q-list bordered>
-            <q-item v-close-popup clickable @click="showDialogHandle(students[coor[1]], 4)" v-if="currentMenuState==0">
+            <q-item
+              v-close-popup
+              clickable
+              @click="showDialogHandle(students[coor[1]], 4)"
+              v-if="currentMenuState==0"
+            >
               <q-item-section>立即排课</q-item-section>
             </q-item>
-            <q-item v-close-popup clickable @click="confirmSub" v-if="currentMenuState==1">
+            <q-item
+              v-close-popup
+              clickable
+              @click="confirmSub"
+              v-if="currentMenuState==1"
+            >
               <q-item-section>确认排课</q-item-section>
             </q-item>
-            <q-item v-close-popup clickable v-if="currentMenuState==1||currentMenuState==2"
-              @click="showDialogHandle(students[coor[1]], 4)">
+            <q-item
+              v-close-popup
+              clickable
+              v-if="currentMenuState==1||currentMenuState==2"
+              @click="showDialogHandle(students[coor[1]], 4)"
+            >
               <q-item-section>修改排课</q-item-section>
             </q-item>
-            <q-item v-close-popup clickable v-if="currentMenuState==1||currentMenuState==2" @click="getPlan">
+            <q-item
+              v-close-popup
+              clickable
+              v-if="currentMenuState==1||currentMenuState==2"
+              @click="getPlan"
+            >
               <q-item-section class="text-negative">取消排课</q-item-section>
             </q-item>
             <!-- <q-item
@@ -173,49 +230,83 @@
       </div>
       <div class="cusor-tools row">
         <div class="col row">
-          <div class="item" @click="changeCourseHandle(x)" :class="{ active: x.CourseId == currentCourse.CourseId }"
-            v-for="(x, i) in list" :key="i">
+          <div
+            class="item"
+            @click="changeCourseHandle(x)"
+            :class="{ active: x.CourseId == currentCourse.CourseId }"
+            v-for="(x, i) in list"
+            :key="i"
+          >
             {{ x.CourseName }}
           </div>
         </div>
-        <scroll-bar targetBox="sptable" targetWrap="sptableWrap" @scrollChange="scrollHandle" ref="scrollBar">
-        </scroll-bar>
+        <scroll-bar
+          targetBox="sptable"
+          targetWrap="sptableWrap"
+          @scrollChange="scrollHandle"
+          ref="scrollBar"
+        ></scroll-bar>
         <div class="q-ml-md row items-center">
           <span>{{ Math.ceil(zoom * 100) }}%</span>
-          <q-btn @click="resetZoom" color="primary" v-show="zoom != 1"
+          <q-btn
+            @click="resetZoom"
+            color="primary"
+            v-show="zoom != 1"
             style="padding: 0; font-size: 11px !important;font-family: microsoft yahei !important; font-weight: 400;"
-            flat label="重置" />
+            flat
+            label="重置"
+          />
         </div>
       </div>
       <q-dialog v-if="showDialog != 0" v-model="dialogVisible" persistent>
-        <set-student-teacher :stuInfo="currentStu" @close="() => (showDialog = 0)" v-if="showDialog == 1"
-          @success="setTeacherHandle"></set-student-teacher>
-        <set-study-method :stuInfo="currentStu" @close="() => (showDialog = 0)" v-if="showDialog == 2"
-          @success="setStudyHandle"></set-study-method>
-        <set-study-status :stuInfo="currentStu" @close="() => (showDialog = 0)" v-if="showDialog == 3"
-          @success="settGuestScheduleHandle"></set-study-status>
-        <set-study-plan :stuInfo="currentStu" :sourceList="sourceStudents" :chapters="chapters" :rate="currentCourse"
-          :coor="coor" @close="() => (showDialog = 0)" v-if="showDialog == 4" @success="setStudyPlayHandle"
-          :planTime="currentSchedu"></set-study-plan>
+        <set-student-teacher
+          :stuInfo="currentStu"
+          @close="() => (showDialog = 0)"
+          v-if="showDialog == 1"
+          @success="setTeacherHandle"
+        ></set-student-teacher>
+        <set-study-method
+          :stuInfo="currentStu"
+          @close="() => (showDialog = 0)"
+          v-if="showDialog == 2"
+          @success="setStudyHandle"
+        ></set-study-method>
+        <set-study-status
+          :stuInfo="currentStu"
+          @close="() => (showDialog = 0)"
+          v-if="showDialog == 3"
+          @success="settGuestScheduleHandle"
+        ></set-study-status>
+        <set-study-plan
+          :stuInfo="currentStu"
+          :sourceList="sourceStudents"
+          :chapters="chapters"
+          :rate="currentCourse"
+          :coor="coor"
+          @close="() => (showDialog = 0)"
+          v-if="showDialog == 4"
+          @success="setStudyPlayHandle"
+          :planTime="currentSchedu"
+        ></set-study-plan>
       </q-dialog>
     </div>
-    <studentRight-form v-if="stuInfoVisible" :save-obj="stuOption" @close="() => (stuInfoVisible = false)">
-    </studentRight-form>
+    <studentRight-form
+      v-if="stuInfoVisible"
+      :save-obj="stuOption"
+      @close="() => (stuInfoVisible = false)"
+    ></studentRight-form>
     <q-dialog v-model="cancelConfirm" persistent>
       <q-card>
         <q-card-section class="row items-center">
           <div>你正在执行取消已确认学员的上课计划，请确认以下操作</div>
           <div class="q-mt-sm">
-            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-              val="yes" label="扣除学员课时按缺勤处理" />
-            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-              val="no" label="无损取消" />
+            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="yes" label="扣除学员课时按缺勤处理" />
+            <q-radio v-model="adminCancelChosenOpera" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="no" label="无损取消" />
           </div>
         </q-card-section>
         <q-card-actions align="right">
           <q-btn flat label="不执行此次操作" color="primary" v-close-popup />
-          <q-btn unelevated label="确认选择" @click="checkRemoveChosenHandle" :disable="adminCancelChosenOpera==''"
-            color="primary" v-close-popup />
+          <q-btn unelevated label="确认选择" @click="checkRemoveChosenHandle" :disable="adminCancelChosenOpera==''" color="primary" v-close-popup />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -223,32 +314,23 @@
 </template>
 
 <script>
-  import scrollBar from "src/components/common/scrollBar.vue";
-  import {
+import scrollBar from "src/components/common/scrollBar.vue";
+import {
   queryCoursePage,
   queryChapterTree,
   queryScheduleCourseStu
-  } from "../../api/course/index";
-  import {
-    SetSureAppointment
-  } from "../../api/studyabroad/subscribe.js";
-  import {
-    getStudentInfo
-  } from "src/api/school/index";
-  import {
-    setGuestRemark
-  } from "src/api/studentmsg/index";
-  import setStudentTeacher from "./components/setStudentTeacher.vue";
-  import SetStudyMethod from "./components/setStudyMethod.vue";
-  import SetStudyStatus from "./components/setStudyStatus.vue";
-  import StudyHeader from "./components/studyHeader.vue";
-  import studentRightForm from "src/components/school/student/studentRight-form.vue";
-  import SetStudyPlan from "./components/setStudyPlan.vue";
-  import {
-    getStuAppointPlan,
-    cancelStuAppointment
-  } from 'src/api/scheduling/schedu'
-  export default {
+} from "../../api/course/index";
+import { SetSureAppointment } from "../../api/studyabroad/subscribe.js";
+import { getStudentInfo } from "src/api/school/index";
+import { setGuestRemark } from "src/api/studentmsg/index";
+import setStudentTeacher from "./components/setStudentTeacher.vue";
+import SetStudyMethod from "./components/setStudyMethod.vue";
+import SetStudyStatus from "./components/setStudyStatus.vue";
+import StudyHeader from "./components/studyHeader.vue";
+import studentRightForm from "src/components/school/student/studentRight-form.vue";
+import SetStudyPlan from "./components/setStudyPlan.vue";
+import {getStuAppointPlan,cancelStuAppointment} from 'src/api/scheduling/schedu'
+export default {
   components: {
     scrollBar,
     setStudentTeacher,
@@ -298,11 +380,11 @@
       },
       coor: [-1, -1],
       locationMenu: [0, 0],
-        currentMenuState: 0,
-        currentSchedu: null,
-        cancelConfirm: false,
-        adminCancelChosenOpera: '',
-        updatePlan: {}
+      currentMenuState:0,
+      currentSchedu:null,
+      cancelConfirm:false,
+      adminCancelChosenOpera:'',
+      updatePlan:{}
     };
   },
   methods: {
@@ -326,9 +408,7 @@
     getChapters() {
       if (!this.currentCourse || !this.currentCourse.CourseId) return;
       this.loading = true;
-        queryChapterTree({
-            CourseId: this.currentCourse.CourseId
-          })
+      queryChapterTree({ CourseId: this.currentCourse.CourseId })
         .then(res => {
           this.loading = false;
           this.chapters = res.Data;
@@ -345,7 +425,7 @@
     changeRemark(i) {
       this.currentRemark = i;
     },
-      setStudyPlayHandle() {
+    setStudyPlayHandle(){
       this.showDialog = 0;
       this.getStudentByStoreage()
     },
@@ -354,10 +434,7 @@
       this.loading = true;
 
       if (playload)
-          this.queryParemeter = {
-            ...this.queryParemeter,
-            ...playload
-          };
+        this.queryParemeter = { ...this.queryParemeter, ...playload };
       if (this.currentCourse.CourseRate != this.queryParemeter.CourseRate) {
         this.queryParemeter.CourseRate = this.currentCourse.CourseRate;
         this.getStudentByStoreage();
@@ -424,7 +501,7 @@
             this.chapters.push({
               ChapterId: i + 1,
               ChapterName: `第${i + 1}次`,
-                ChapterGradeNo: i + 1
+              ChapterGradeNo: i+1
             });
           }
           this.currentCourse.ClassHours = maxTemp;
@@ -445,9 +522,7 @@
               this.currentCourse.CourseRate == 11) &&
             stu.TotalTimes < i + 1
           ) {
-              x.assemble.push({
-                overlayer: true
-              });
+            x.assemble.push({ overlayer: true });
           } else {
             x.assemble.push(r);
           }
@@ -512,14 +587,8 @@
         x => x.GuestId == this.currentStu.GuestId
       );
       if (i < 0) return;
-        this.students[i] = {
-          ...this.students[i],
-          ...playload
-        };
-        this.sourceStudents[j] = {
-          ...this.sourceStudents[j],
-          ...playload
-        };
+      this.students[i] = { ...this.students[i], ...playload };
+      this.sourceStudents[j] = { ...this.sourceStudents[j], ...playload };
     },
     resetContextmenu(i, yi) {
       this.locationMenu = [-1, -1];
@@ -547,9 +616,7 @@
       if (obj) {
         this.$q.loading.show();
         console.log(obj.StuId);
-          getStudentInfo({
-              StuId: obj.StuId
-            })
+        getStudentInfo({ StuId: obj.StuId })
           .then(r => {
             this.stuOption = r.Data;
             this.stuOption.noEdit = true;
@@ -581,88 +648,84 @@
 
       });
     },
-      contextMenuHandle(i, yi, e, y) {
-        this.currentMenuState = y ? y.State : 0
+    contextMenuHandle(i, yi, e,y) {
+      this.currentMenuState = y?y.State:0
       this.currentSchedu = y
       const tips = this.$refs[`plantime_${i}_${yi}`]
-        if (tips && tips.length > 0) {
+      if(tips && tips.length>0){
         tips[0].hide()
       }
       this.coor = [i, yi];
       const t = e.target;
       let top = t.offsetTop + t.offsetHeight;
       top =
-          document.querySelector(".sptable-wrap").offsetHeight < top + 48 ?
-          t.offsetTop - 48 :
-          top;
+        document.querySelector(".sptable-wrap").offsetHeight < top + 48
+          ? t.offsetTop - 48
+          : top;
       //sptable-wrap
-        this.locationMenu = [(t.offsetLeft + t.offsetWidth / 2) * this.zoom, top * this.zoom];
+      this.locationMenu = [(t.offsetLeft + t.offsetWidth / 2)*this.zoom, top*this.zoom];
     },
     cancleCellHandle() {
       this.coor = [-1, -1];
       this.locationMenu = [-1, -1];
     },
-      getPlan() {
+    getPlan(){
       const y = this.currentSchedu
       this.$q.loading.show()
-        getStuAppointPlan({
-          AccountId: y.AccountId,
-          Date: y.Date,
-          ShiftSort: y.ShiftSort
-        }).then(r => {
-          if (r.Code == 1) {
+      getStuAppointPlan({AccountId:y.AccountId,Date:y.Date,ShiftSort:y.ShiftSort}).then(r=>{
+        if(r.Code==1){
           const d = r.Data
           this.updatePlan = d
           this.canclePlanClassHandler()
-          } else {
+        }else{
           this.$q.loading.hide()
         }
       })
     },
-      canclePlanClassHandler() {
-        if (this.currentSchedu.State == 2) {
+    canclePlanClassHandler(){
+      if(this.currentSchedu.State==2){
         this.adminCancelChosenOpera = ''
-          this.cancelConfirm = true
-        } else if (this.currentSchedu.State == 1) {
+        this.cancelConfirm=true
+      }else if(this.currentSchedu.State==1){
         this.adminCancelChosenOpera = 'no'
-          this.cancelConfirm = false
+        this.cancelConfirm=false
         this.removePlanHandle()
       }
       this.$q.loading.hide()
     },
-      checkRemoveChosenHandle() {
-        if (this.adminCancelChosenOpera == '') {
+    checkRemoveChosenHandle(){
+      if(this.adminCancelChosenOpera==''){
         this.errorMsgHandle('请选择执行的内容')
         return
       }
       this.cancelConfirm = false
       this.removePlanHandle()
     },
-      errorMsgHandle(msg) {
+    errorMsgHandle(msg){
       this.$q.notify({
         color: "negative",
         message: msg,
         position: "top"
       });
     },
-      removePlanHandle() {
+    removePlanHandle(){
       this.$q.loading.show()
       var chosenList = []
-        this.updatePlan.ChooseStuList.forEach(x => {
+      this.updatePlan.ChooseStuList.forEach(x=>{
         chosenList.push({
-            AppointId: x.AppointmentId,
-            IsCalcStuCheck: this.adminCancelChosenOpera == 'yes' ? 1 : 0
+          AppointId:x.AppointmentId,
+          IsCalcStuCheck: this.adminCancelChosenOpera=='yes'?1:0
         })
       })
 
       cancelStuAppointment({
-          AccountId: this.currentSchedu.AccountId,
-          Date: this.updatePlan.Date,
-          ShiftSort: this.updatePlan.ShiftSort,
-          ChooseStuList: chosenList
-        }).then(r => {
+        AccountId:this.currentSchedu.AccountId,
+        Date:this.updatePlan.Date,
+        ShiftSort:this.updatePlan.ShiftSort,
+        ChooseStuList:chosenList
+      }).then(r=>{
         this.$q.loading.hide()
-          if (r.Code == 1) {
+        if(r.Code==1){
           this.getStudentByStoreage();
           this.$q.notify({
             icon: "iconfont icon-chenggong",
@@ -681,60 +744,50 @@
     this.getCourse();
   },
   mounted() {
-      document.addEventListener("wheel", this.handleWheel, {
-        passive: false
-      });
+    document.addEventListener("wheel", this.handleWheel, { passive: false });
   },
   beforeDestroy() {
-      document.removeEventListener("wheel", this.handleWheel, {
-        passive: false
-      });
+    document.removeEventListener("wheel", this.handleWheel, { passive: false });
   }
-  };
-
+};
 </script>
 
 <style>
-  .sptable-box {
+.sptable-box {
   width: 100%;
   height: 100%;
   overflow-y: auto;
   padding-bottom: 20px;
   /* user-select: none; */
   background: #fff;
-  }
-
-  .sptable-box .sptable-wrap {
+}
+.sptable-box .sptable-wrap {
   position: relative;
-  }
+}
 
-  .sptable-box::-webkit-scrollbar {
+.sptable-box::-webkit-scrollbar {
   width: 6px;
   height: 6px;
-  }
-
-  .sptable-box::-webkit-scrollbar-thumb {
+}
+.sptable-box::-webkit-scrollbar-thumb {
   background-color: #888;
   border-radius: 6px;
-  }
+}
 
-  .sptable-box::-webkit-scrollbar-thumb:hover {
+.sptable-box::-webkit-scrollbar-thumb:hover {
   background-color: #555;
-  }
-
-  .sptable-box::-webkit-scrollbar-track {
+}
+.sptable-box::-webkit-scrollbar-track {
   background-color: #f1f1f1;
-  }
-
-  .sptable {
+}
+.sptable {
   border-collapse: collapse;
   border: 1px solid #2a363b;
   border-top: none;
   min-width: 100%;
-  }
-
-  .sptable td,
-  .sptable th {
+}
+.sptable td,
+.sptable th {
   border-right: 1px solid #2a363b;
   border-bottom: 1px solid #2a363b;
   padding: 6px 15px;
@@ -744,10 +797,9 @@
   color: #000;
   outline: none;
   position: relative;
-  }
-
-  .sptable td.focus-box::before,
-  .sptable td:focus::before {
+}
+.sptable td.focus-box::before,
+.sptable td:focus::before {
   position: absolute;
   content: " ";
   display: block;
@@ -758,37 +810,32 @@
   z-index: 15;
   border: 3px solid #418f1f;
   pointer-events: none;
-  }
-
-  .sptable tr td:last-child {
+}
+.sptable tr td:last-child {
   border-right: none;
-  }
-
-  .sptable tr:last-child td:last-child {
+}
+.sptable tr:last-child td:last-child {
   border: none;
-  }
-
-  .sptable .sticky-header th {
+}
+.sptable .sticky-header th {
   position: sticky;
   top: 0px;
   background: #fff;
   z-index: 2;
   border-bottom: none;
-  }
-
-  .sptable .sticky-column {
+}
+.sptable .sticky-column {
   position: sticky;
   left: 0px;
   background: #fff;
   box-shadow: inset -4px -2px 0px -3px #1fbb7d;
   border-right: 0;
   z-index: 1;
-  }
-
-  .sptable .sticky-header th::before,
-  .sptable .sticky-header th::after,
-  .sptable-box::before,
-  .sptable .sticky-column::before {
+}
+.sptable .sticky-header th::before,
+.sptable .sticky-header th::after,
+.sptable-box::before,
+.sptable .sticky-column::before {
   position: absolute;
   content: "";
   display: block;
@@ -799,35 +846,30 @@
   bottom: 0;
   z-index: 15;
   height: 100%;
-  }
-
-  .sptable-box::before {
+}
+.sptable-box::before {
   left: 0;
   top: 55px;
-  }
-
-  .sptable .sticky-header th::before {
+}
+.sptable .sticky-header th::before {
   top: 0;
   left: 0;
   width: 100%;
   height: 1px;
-  }
-
-  .sptable .sticky-header th::after {
+}
+.sptable .sticky-header th::after {
   top: unset;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background: #1fbb7d;
-  }
-
-  .sptable .sticky-header .sticky-column {
+}
+.sptable .sticky-header .sticky-column {
   z-index: 3;
   border-right: 0;
-  }
-
-  .sptable-box .cusor-tools {
+}
+.sptable-box .cusor-tools {
   position: absolute;
   left: 0;
   right: 0;
@@ -840,9 +882,8 @@
   border-right: 1px solid #2a363b;
   z-index: 9;
   padding: 0 30px;
-  }
-
-  .sptable-box .cusor-tools .item {
+}
+.sptable-box .cusor-tools .item {
   height: 22px;
   line-height: 22px;
   border: 1px solid transparent;
@@ -854,13 +895,11 @@
   padding: 0 15px;
   cursor: pointer;
   position: relative;
-  }
-
-  .sptable-box .cusor-tools .item:hover {
+}
+.sptable-box .cusor-tools .item:hover {
   background: #cfcfcf;
-  }
-
-  .sptable-box .cusor-tools .item.active {
+}
+.sptable-box .cusor-tools .item.active {
   background: #fff !important;
   cursor: default !important;
   border-color: #c9ccd2;
@@ -870,63 +909,48 @@
   color: #007a6b;
   height: 23px;
   line-height: 23px;
-  }
-
-  .sptable .coursebg {
+}
+.sptable .coursebg {
   background: #f5cd79;
-  }
-
-  .sptable .stubg {
+}
+.sptable .stubg {
   background: #26de81;
-  }
-
-  .sptable .teacherbg {
+}
+.sptable .teacherbg {
   background: #778beb;
-  }
-
-  .sptable .studybg {
+}
+.sptable .studybg {
   background: #cf6a87;
-  }
-
-  .sptable .study-online-bg {
+}
+.sptable .study-online-bg {
   background: #fa8231;
-  }
-
-  .sptable .stop {
+}
+.sptable .stop {
   background: #fc427b;
-  }
-
-  .sptable .defaultBg {
+}
+.sptable .defaultBg {
   background: #dfe4ea;
-  }
-
-  .sptable .study-normal {
+}
+.sptable .study-normal {
   background: #20bf6b;
-  }
-
-  .sptable .disable-class {
+}
+.sptable .disable-class {
   background: #e3e6ed;
   cursor: not-allowed;
-  }
-
-  .sptable .unchecked {
-    background: #778ca3;
-  }
-
-  .sptable .unstudy {
-    background: #58B19F;
-  }
-
-  .sptable .onlineStudy {
+}
+.sptable .unchecked {
+  background: red;
+}
+.sptable .unstudy {
+  background: yellow;
+}
+.sptable .onlineStudy{
   background: #8854d0;
-  }
-
-  .sptable .notChecked {
+}
+.sptable .notChecked{
   background: #eb3b5a;
-  }
-
-  .sptable .notFreeCancle {
+}
+.sptable .notFreeCancle{
   background: #acacac;
-  }
-
+}
 </style>

src/pages/stuMan/studentManage.vue

@@ -16,13 +16,14 @@
     <div class="page-search row items-center ">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         <div class="col-3 Sysuser_Date">
-          <q-field filled label="日期" stack-label>
+          <q-field filled>
             <template v-slot:control>
-              <div class="self-center full-width no-outline" tabindex="0">{{ daterangeTimes }}</div>
-                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
-                    <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
-                    @range-end="dateRangeHandler"></q-date>
-                </q-popup-proxy>
+             <el-date-picker v-model="msg.StartDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
+               size="small" style="width:47%;" @change="refreshPage" clear-icon="iconfont icon-guanbi">
+             </el-date-picker>至
+             <el-date-picker v-model="msg.EndDate" type="date" placeholder="结束日期" value-format="yyyy-MM-dd"
+               size="small" style="width:47%;" @change="refreshPage" clear-icon="iconfont icon-guanbi">
+             </el-date-picker>
            </template>
          </q-field>
         </div>
@@ -52,6 +53,11 @@
             {{props.row.GuestName}}
           </q-td>
         </template>
+        <template v-slot:body-cell-StartTime="props">
+          <q-td :props="props" style="padding-right:0px">
+            {{props.row.StartTime}}~{{props.row.EndTime}}
+          </q-td>
+        </template>
         <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改上课方式"
@@ -163,13 +169,6 @@
             align: "left",
             field: row => row.StartTime
           },
-          {
-            name: "EndTime",
-            required: true,
-            label: "下课时间",
-            align: "left",
-            field: row => row.EndTime
-          },
           {
             name: "AttendanceMethodName",
             required: true,
@@ -324,20 +323,6 @@
             this.GuestCheckLoading = false;
           });
       },
-      optionsFn(cd) {
-        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY-MM-DD')
-      },
-      dateRangeHandler(e) {
-        this.msg.StartDate = `${e.from.year}-${e.from.month>9?e.from.month:'0'+e.from.month}-${e.from.day>9?e.from.day:'0'+e.from.day}`
-        this.msg.EndDate = `${e.to.year}-${e.to.month>9?e.to.month:'0'+e.to.month}-${e.to.day>9?e.to.day:'0'+e.to.day}`
-        this.daterangeTimes = `${this.msg.StartDate} / ${this.msg.EndDate} `
-
-        this.dateRange.to = `${e.from.year}/${e.from.month}/${e.from.day}`
-        this.dateRange.from =  `${e.to.year}/${e.to.month}/${e.to.day}`
-
-        if (this.$refs.qDateProxy) this.$refs.qDateProxy.hide()
-        this.resetSearch()
-      },
       //获取校区列表
       getSchool() {
         getSchoolDropdown({}).then(res => {