上课记录调整

src/components/school/student/class-record.vue

@@ -10,6 +10,7 @@
     color: #3470ff;
     font-weight: 700;
   }
+
   .record_cala_Num {
     height: 20px;
     padding-left: 14px;
@@ -22,7 +23,7 @@
     margin-top: -10px;
   }
 
- .record_cala_Num>span {
+  .record_cala_Num>span {
     min-width: 24px;
     height: 24px;
     padding: 4px;
@@ -32,7 +33,7 @@
     border-radius: 20px;
   }
 
- .record_cala_Num>span>i {
+  .record_cala_Num>span>i {
     min-width: 16px;
     height: 16px;
     padding: 0 2px;
@@ -46,64 +47,65 @@
     text-align: center;
     font-style: normal;
   }
+
 </style>
 <template>
   <div>
     <div>
-        <q-tabs v-model="ckedTab" @input="getTabcheck()" dense align="left" class="text-teal" style="margin-bottom:20px;">
-            <q-tab v-for="(item,index) in dataList" :key="index" :name="index" :label="item.CourseName+'('+item.OrderId+')'" />
-        </q-tabs>
+      <q-tabs v-model="ckedTab" @input="getTabcheck()" dense align="left" class="text-teal" style="margin-bottom:20px;">
+        <q-tab v-for="(item,index) in dataList" :key="index" :name="index"
+          :label="item.CourseName+'('+item.OrderId+')'" />
+      </q-tabs>
     </div>
     <div class="record_Main">
       <div style="display:flex;justify-content:space-between;align-items:center;">
         <div>课程进度：{{CourseChapterNo}}/{{TotalChapterNo}}</div>
         <div>
-          <q-select dense filled v-model="Status" @input="getStatus" style="width:160px;margin-right:10px;" :options="StatusList" option-label="Name" option-value="Id"
-            emit-value map-options label="状态" />
+          <q-select dense filled v-model="Status" @input="getStatus" style="width:160px;margin-right:10px;"
+            :options="StatusList" option-label="Name" option-value="Id" emit-value map-options label="状态" />
         </div>
       </div>
       <div>
-          <el-table :data="chapterList" v-loading="loading" ref="table" :height="tableHeight" style="width: 100%;">
-            <el-table-column prop="ChapterNo" label="章节" width="300">
-              <template slot-scope="scope">
-                <div style="display: inline-block;">
-                  <div class="flex q-ml-md">
-                    <div class="record_cala_Num">
-                      <span>
-                        <i>{{ scope.row.ChapterNo }}</i>
-                      </span>
-                    </div>
-                    <div style="margin-left: 36px;width:240px;" class="ellipsis">
-                      {{ scope.row.ChapterName }}
-                    </div>
+        <el-table :data="chapterList" v-loading="loading" ref="table" :height="tableHeight" style="width: 100%;">
+          <el-table-column prop="ChapterNo" label="章节" width="300">
+            <template slot-scope="scope">
+              <div style="display: inline-block;">
+                <div class="flex q-ml-md">
+                  <div class="record_cala_Num">
+                    <span>
+                      <i>{{ scope.row.ChapterNo }}</i>
+                    </span>
+                  </div>
+                  <div style="margin-left: 36px;width:240px;" class="ellipsis">
+                    {{ scope.row.ChapterName }}
                   </div>
                 </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="AgainNum" label="进度" width="100">
-              <template slot-scope="scope">
-                {{scope.row.CourseRateName}}({{scope.row.ChapterGradeNo}})
-                <div v-if="scope.row.ClassDate" style="font-size:13px; line-height: 13px">{{scope.row.ClassDate}}</div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="State" label="状态" width="70">
-              <template slot-scope="scope">
-                <div v-if="scope.row.State == 1">
-                  <span class="text-warning" v-if="scope.row.AppointState==1">待确认</span>
-                  <span class="text-info" v-if="scope.row.AppointState==2">待上课</span>
-                  <span class="text-positive" v-if="scope.row.AppointState==3">已上课</span>
-                </div>
-                <div class="text-warning" v-if="scope.row.State == 2">补课</div>
-                <div class="text-negative" v-if="scope.row.State == 3">缺课</div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="AgainNum" label="重学" width="60">
-              <template slot-scope="scope">
-                {{scope.row.AgainNum}}
-              </template>
-            </el-table-column>
-          </el-table>
-
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="AgainNum" label="进度" width="100">
+            <template slot-scope="scope">
+              {{scope.row.CourseRateName}}({{scope.row.ChapterGradeNo}})
+              <div v-if="scope.row.ClassDate" style="font-size:13px; line-height: 13px">{{scope.row.ClassDate}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="State" label="状态" width="70">
+            <template slot-scope="scope">
+              <div v-if="scope.row.State == 1">
+                <span class="text-warning" v-if="scope.row.AppointState==1">待确认</span>
+                <span class="text-info" v-if="scope.row.AppointState==2">待上课</span>
+                <span class="text-positive" v-if="scope.row.AppointState==3">已上课</span>
+              </div>
+              <div class="text-warning" v-if="scope.row.State == 2">补课</div>
+              <div class="text-negative" v-if="scope.row.State == 3">缺课</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="AgainNum" label="重学" width="60">
+            <template slot-scope="scope">
+              {{scope.row.AgainNum}}
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
     </div>
   </div>
@@ -129,7 +131,7 @@
         StatusList: [{
           Name: '全部',
           Id: 0
-        },{
+        }, {
           Name: '正常上课',
           Id: 1
         }, {
@@ -141,14 +143,14 @@
         }],
         dataList: [],
         loading: false,
-        Status:0,//状态
+        Status: 0, //状态
         msg: {
           StuId: ''
         },
-        chapterList:[], //章节
-        ckedTab:0,
-        CourseChapterNo:0, //当前进度
-        TotalChapterNo:0, //总进度
+        chapterList: [], //章节
+        ckedTab: 0,
+        CourseChapterNo: 0, //当前进度
+        TotalChapterNo: 0, //总进度
         tableHeight: 200,
       };
     },
@@ -170,30 +172,30 @@
           this.loading = false;
           if (res.Code == 1) {
             this.dataList = res.Data;
-            if(this.dataList.length>0){
-                this.chapterList = this.dataList[0].ChapterList;
-                this.CourseChapterNo = this.dataList[0].CourseChapterNo;
-                this.TotalChapterNo = this.dataList[0].TotalChapterNo;
+            if (this.dataList.length > 0) {
+              this.chapterList = this.dataList[0].ChapterList;
+              this.CourseChapterNo = this.dataList[0].CourseChapterNo;
+              this.TotalChapterNo = this.dataList[0].TotalChapterNo;
             }
           }
         });
       },
-      getTabcheck(){
+      getTabcheck() {
         this.chapterList = this.dataList[this.ckedTab].ChapterList;
         this.CourseChapterNo = this.dataList[this.ckedTab].CourseChapterNo;
         this.TotalChapterNo = this.dataList[this.ckedTab].TotalChapterNo;
       },
       //根据状态过滤
-      getStatus(){
+      getStatus() {
         let dataArray = [];
-        if(this.Status==0){
-            dataArray = this.dataList[this.ckedTab].ChapterList;
-        }else{
-            this.dataList[this.ckedTab].ChapterList.forEach(x=>{
-                if(x.State==this.Status){
-                    dataArray.push(x);
-                }
-            })
+        if (this.Status == 0) {
+          dataArray = this.dataList[this.ckedTab].ChapterList;
+        } else {
+          this.dataList[this.ckedTab].ChapterList.forEach(x => {
+            if (x.State == this.Status) {
+              dataArray.push(x);
+            }
+          })
         }
         this.chapterList = dataArray;
       }