dy-admin-manager/src/views/teamDetail/componentCourse/studentRollCall.vue

<template>
  <div>
    <el-form :inline="true" class="workForm" style="padding: 0 25px">
      <el-form-item label="学生总数" >
        <!-- <el-input disabled
                  :value="studentNum"></el-input> -->
        <div class="inputStyle">{{studentNum}}</div>
      </el-form-item>
      <el-form-item label="实际上课学生数">
        <!-- <el-input disabled
                  :value="signInNum"></el-input> -->
        <div class="inputStyle">{{signInNum}}</div>
      </el-form-item>
      <el-form-item label="请假学生数">
        <!-- <el-input disabled
                  :value="leaveNum"></el-input> -->
        <div class="inputStyle">{{leaveNum}}</div>
      </el-form-item>
      <el-form-item label="旷课学生数">
        <!-- <el-input disabled
                  :value="leaveNum"></el-input> -->
        <div class="inputStyle">{{truantNum}}</div>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table :data='tableList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align='center'
                         prop="username"
                         label="学生姓名">
          <template slot-scope="scope">
            <div>
              {{scope.row.username}}
               <span style="color: #f56c6c">({{scope.row.userId}})</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="phone"
                         label="手机号">
        </el-table-column>
        <el-table-column align='center'
                         prop="signInTime"
                         label="签到时间">
          <template slot-scope="scope">
            <div>
              {{scope.row.signInTime | dateForMinFormat}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="signOutTime"
                         label="签退时间">
          <template slot-scope="scope">
            <div>
              {{scope.row.signOutTime | dateForMinFormat}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="status"
                         label="考勤状态">
          <template slot-scope="scope">
            <div v-if="scope.row.courseSchedule && scope.row.courseSchedule.status != 'NOT_START'">
              <p v-if="scope.row.status">{{scope.row.status | studentRecord}}</p>
              <p v-else>未签到</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否回访">
          <template slot-scope="scope">
            <div>{{ scope.row.visitFlag | yesOrNo }}</div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="ctrls"
                         v-if="permission('visit/add?page=teamCourseList')"
                         label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="addVisit(scope.row)"
            >新增回访</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  @pagination="getList" />
    </div>
    <el-dialog title="新增回访" width="500px" :visible.sync="visitVisible" append-to-body>
      <visit
        v-if="visitVisible && detail"
        :detail="detail"
        :username="detail.username"
        @close="visitVisible = false"
        @submited="getList"
        :isMainGo="isMainGo"
      />
    </el-dialog>
  </div>
</template>
<script>
import { findStudentAttendance, sumStudentAttendance } from '@/api/buildTeam'
import pagination from '@/components/Pagination/index'
import { permission } from '@/utils/directivePage'
import visit from '@/views/withdrawal-application/modals/visit'
export default {
  props: ['courseScheduleId','isMainGo'],
  components: { pagination, visit },
  data () {
    return {
      tableList: [],
      visitVisible: false,
      detail: null,
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
      },
      studentNum: null,
      signInNum: null,
      leaveNum: null,
      truantNum: null
    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    permission,
    init () {
      console.log(this.courseScheduleId)
      this.getList()

      //  发请求获取学生签到信息
    },
    addVisit(row) {
      this.visitVisible = true
      this.detail = row
    },
    getList () {
      findStudentAttendance({
        search: this.courseScheduleId, rows: this.rules.limit,
        page: this.rules.page,
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total
        }
      })
      sumStudentAttendance({ courseScheduleId: this.courseScheduleId }).then(res => {
        if (res.code == 200) {
          this.studentNum = res.data.studentNum;
          this.signInNum = res.data.signInNum;
          this.leaveNum = res.data.leaveNum
          this.truantNum = res.data.truantNum
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.inputStyle {
  width: 100px;
  text-align: center;
}
.workForm {
    /deep/.el-form-item {
    margin-bottom: 10px !important;
  }
}
</style>