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>({{ scope.row.userId }})</span>
              <!-- style="color: #f56c6c" -->
            </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" :class="scope.row.status == 'NORMAL'?'green':'red'">
                {{ 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="leaveNum" label="本月请假次数"></el-table-column> -->
        <el-table-column
          align="center"
          prop="ctrls"
          label="操作"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                @click="addVisit(scope.row)"
                v-if="!scope.row.visitFlag&&permission('visit/add?page=teamCourseList')"
                >新增回访</el-button
              >
                <el-button
                type="text"
                @click="lookVisit(scope.row)"
                v-if="(scope.row.visitFlag)&&permission('visit/queryPage?page=teamCourseList')"
                >查看回访</el-button
              >
            </div>
          </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="true"
      />
    </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() {
      this.getList();

      //  发请求获取学生签到信息
    },
    addVisit(row) {
      this.visitVisible = true;
      this.detail = row;
    },
    lookVisit(row){
      this.$router.push({path:'/studentManager/returnVisitList',query:{search:row.id}})
    },
    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;
  }
}
.red {
  color: red;
}
.green {
  color: #14928a;
}
.orgin {
  color: #E6A23C;
}
</style>