修改

src/components/course/record-form.vue

@@ -79,15 +79,46 @@
 <template>
   <div class="page-body">
     <div class="page-content recordForm">
-      <div class="row wrap" style="display:flex;justify-content:flex-end">
+      <div class="row wrap" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+        <div class="col-3">
+          <el-radio-group v-model="checkType" size="mini">
+            <el-radio-button :label="1">列表模式</el-radio-button>
+            <el-radio-button :label="2">时间轴模式</el-radio-button>
+          </el-radio-group>
+        </div>
         <div class="col-3">
           <q-select filled stack-label option-value="TId" @input="changeRecord()" option-label="TeacherName"
             v-model="TeacherId" ref="Teacher_Id" :options="TeacherList" label="关联教师" :dense="false"
-            class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
+            class="col-6" emit-value map-options />
         </div>
       </div>
       <div>
-        <div class="col-10" style="margin:20px 0 60px 0;display:flex;"
+      <template v-if="checkType==1">   
+        <q-table :pagination="msg" no-data-label="暂无相关数据" flat
+          class="sticky-column-table" separator="none" :data="dataList.resultList" :columns="columns">
+          <template v-slot:body-cell-YearStr="props">
+            <q-td auto-width :props="props" style="width:25%">
+              {{props.row.YearStr}}-{{props.row.MonthStr}}-{{props.row.DayStr}}
+            </q-td>
+          </template>
+          <template v-slot:body-cell-CheckNum="props">
+            <q-td auto-width :props="props" style="width:25%">
+              <span style="color:green;">{{props.row.CheckNum}}</span>
+            </q-td>
+          </template>
+          <template v-slot:body-cell-NoCheckNum="props">
+            <q-td auto-width :props="props" style="width:25%">
+              <span style="color:red;">{{props.row.NoCheckNum}}</span>
+            </q-td>
+          </template>
+          <template v-slot:bottom>
+            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="pageCount"
+              :input="true" @input="changePage" />
+          </template>
+        </q-table>
+      </template>
+      <template v-else>
+        <div class="col-10" style="margin-bottom:20px;display:flex;"
           v-if="dataList.resultList&&dataList.resultList.length>0">
           <div class="col-4" id="timeleft">
             <div v-for="item in dataList.resultList">
@@ -109,6 +140,10 @@
             </div>
           </div>
         </div>
+        <q-pagination class="full-width justify-end" style="margin-bottom:80px;padding-right:43px;" v-model="msg.PageIndex" color="primary" :max="pageCount"
+          :input="true" @input="changePage" />
+
+      </template>
       </div>
     </div>
   </div>
@@ -135,13 +170,41 @@
         msg: {
           TeacherId: 0,
           PageIndex: 1,
-          PageSize: 12,
+          PageSize: 10,
+          rowsPerPage: 10,
           School_Id: 0,
           ClassId: 0
         },
         TeacherId:0,
         dataList: {},
         TeacherList: [], //关联老师下拉
+        pageCount:0,
+        columns: [{
+            name: 'TeacherName',
+            label: '教师',
+            field: 'TeacherName',
+            align: 'left'
+          },
+          {
+            name: 'YearStr',
+            label: '日期',
+            field: 'YearStr',
+            align: 'left',
+          },
+          {
+            name: 'CheckNum',
+            label: '签到数',
+            field: 'CheckNum',
+            align: 'left'
+          },
+          {
+            name: 'NoCheckNum',
+            label: '缺勤数',
+            field: 'NoCheckNum',
+            align: 'left'
+          }
+        ],
+        checkType:1, //默认列表模式
       }
     },
     created() {
@@ -160,6 +223,7 @@
         GetClassPlanLogPageList(this.msg).then(res => {
           if (res.Code == 1) {
             this.dataList = res.Data.PageData;
+            this.pageCount = res.Data.PageCount;
           }
         })
       },
@@ -170,9 +234,14 @@
         GetClassPlanLogPageList(this.msg).then(res => {
           if (res.Code == 1) {
             this.dataList = res.Data.PageData;
+            this.pageCount = res.Data.PageCount;
           }
         })
-
+      },
+      //翻页
+      changePage(val) {
+        this.msg.pageIndex = val;
+        this.getRecord()
       },
       //获取教师下拉
       GetTeacherList() {