签到记录

src/views/courseQr/components/signList.vue

@@ -95,14 +95,17 @@
 
     <!-- 数据表格 -->
     <div class="table-section">
-      <h3><i class="el-icon-s-grid" /> 签到记录</h3>
+      <h3><i class="el-icon-s-grid" /> 签到记录
+        <span style="color: #999;font-size: 16px;margin-left: 10px;">已签到<span style="color: #409EFF;">{{ course_content_check_count }}</span>人，未签到<span style="color: red;">{{ course_content_check_count_no }}</span>人</span>
+      </h3>
       <xy-table
         ref="signTable"
         :height="400"
-        :action="getSignList"
+        :list="list"
         :req-opt="tableReqOpt"
         :table-item="tableColumns"
         :is-page="true"
+        :total="total"
       />
     </div>
   </el-dialog>
@@ -135,7 +138,11 @@ export default {
   data() {
     return {
       isShow: false,
+      course_content_check_count:0,
+      course_content_check_count_no:0,
       searchForm: {
+        page: 1,
+        page_size: 10,
         name: '',
         mobile: '',
         has_check: ''
@@ -144,6 +151,8 @@ export default {
         course_id: this.courseId,
         course_content_id: this.courseContentId || ''
       },
+      list:[],
+      total:0,
       tableColumns: [
         {
           prop: 'user.name',
@@ -176,7 +185,7 @@ export default {
         {
           prop: 'course_content_check.created_at',
           label: '签到时间',
-          align: 'center',
+          align: 'center'
         //   width: 180
         }
       ]
@@ -271,6 +280,8 @@ export default {
     // 重置表单
     resetForm() {
       this.searchForm = {
+        page: 1,
+        page_size: 10,
         name: '',
         mobile: '',
         has_check: ''
@@ -279,14 +290,20 @@ export default {
 
     // 刷新表格
     refreshTable() {
-      if (this.$refs.signTable) {
-        this.$refs.signTable.getTableData(true)
-      }
+      this.fetchSignList()
     },
 
     // 获取签到列表数据
-    getSignList(params) {
-      return getSignList(params)
+    async fetchSignList(params) {
+      const res = await getSignList({
+        ...this.searchForm,
+        course_id: this.courseId,
+        course_content_id: this.courseContentId || '',
+      })
+      this.list = res.list.data
+      this.course_content_check_count = res.course_content_check_count
+      this.course_content_check_count_no = res.list.total - res.course_content_check_count
+      this.total = res.list.total
     }
   }
 }