dy-admin-manager/src/views/vipClass/vipDetail/components/teacherRecord.vue

<template >
  <div>
    <!-- 头部展示 -->
    <statistic>
      <statistic-item>
        <span>未上课时</span>
        <span>{{ totalClassTimes }}</span>
      </statistic-item>
      <statistic-item>
        <span>已上课时</span>
        <span>{{ currentClassTimes }}</span>
      </statistic-item>
      <statistic-item>
        <span>已结算</span>
        <span>{{ isSalaryNum }}</span>
      </statistic-item>
      <statistic-item>
        <span>被投诉</span>
        <span>{{ complaintsNum }}</span>
      </statistic-item>
    </statistic>
    <!-- 搜索标题 -->
    <save-form
      save-key='vipDetail-record'
      :inline="true"
      label-position="right"
      label-width="120px"
      class="searchForm"
      @submit="search"
      :model="searchForm"
    >
      <el-form-item>
        <el-select
          v-model.trim="searchForm.type"
          clearable
          placeholder="课程类型"
        >
          <el-option label="线上课" value="ONLINE"></el-option>
          <el-option label="线下课" value="OFFLINE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model.trim="searchForm.status"
          clearable
          placeholder="课程状态"
        >
          <el-option label="未开始" value="NOT_START"></el-option>
          <el-option label="进行中" value="UNDERWAY"></el-option>
          <el-option label="已结束" value="OVER"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model.trim="searchForm.time"
          style="width: 400px"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="课程开始日期"
          end-placeholder="课程结束日期"
          :picker-options="{
            firstDayOfWeek: 1,
          }"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="primary">搜索</el-button>
      </el-form-item>
    </save-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data="tableList" :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center" label="课程编号" prop="id">
        </el-table-column>
        <el-table-column
          align="center"
          label="上课时间"
          width="250px"
          prop="startClassTime"
        >
          <template slot-scope="scope">
            <!--  {{ scope.row.classDate }} {{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 5) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(0, 5) : '' }} -->
            <div>
              <p>
                {{ scope.row.startClassTime | dateForMinFormat }}-{{
                  scope.row.endClassTime | endTime
                }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课程类型" prop="teachMode">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.teachMode | fitterTeachMode }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="教学点" prop="schoolName">
          <template slot-scope="scope">
            <div>
              {{ scope.row.schoolName ? scope.row.schoolName : "网络教室" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上课学员数" prop="attendanceNum">
        </el-table-column>
        <el-table-column align="center" prop="status" label="签到状态">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.signInStatus | attendanceType }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="签退状态">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.signOutStatus | attendanceOutType }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="课程状态">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.status | fitterStatus }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="isSalary" label="结算状态">
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.isSalary | fitterisSalary }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                v-if="scope.row.attendanceNum"
                permission="'vipGroupManage/findVipGroupAttendanceStudents'"
                @click="lookStudents(scope.row)"
                >查看学员</el-button
              >

              <!-- 未结算没有点击功能 -->
              <el-button
                v-if="
                  scope.row.status == 'OVER' &&
                  !scope.row.isSalary &&
                  permission('teacherAttendance/updateTeacherAttendance')
                "
                type="text"
                @click="onMarkAttendance(scope.row)"
                >补考勤</el-button
              >
              <el-button
                v-if="
                  scope.row.status == 'OVER' &&
                  permission('studentAttendance/updateStudentAttendances')
                "
                type="text"
                @click="onCallName(scope.row)"
                >点名表</el-button
              >
              <!-- <el-button type="text" v-permission="'vipGroupManage/classStartDateAdjust'"
                         @click="resetClass(scope.row)">课程调整</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      save-key='vipDetail-record'
      sync
      :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />
    <el-dialog
      title="上课学员"
      :visible.sync="studentVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span
        v-for="(item, index) in studentList"
        :key="index"
        style="margin-left: 10px"
        >{{ item }}</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="studentVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-dialog title="课程调整"
               :visible.sync="courseVisible"
               width="420px">
      <el-form :model="maskForm"
               :rules="maskrules"
               label-width="120px"
               label-position="right"
               ref='maskForm'>
        <el-form-item label="选择上课日期"
                      prop="date">
          <el-date-picker type="date"
                          value-format="yyyy-MM-dd"
                          :picker-options="{
                            firstDayOfWeek:1
                          }"
                          v-model.trim="maskForm.date"
                          placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="startTime">
          <el-time-picker v-model.trim="maskForm.startTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
                          selectableRange: '04:00:00 - 23:59:00'
                            }"
                          placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-time-picker v-model.trim="maskForm.endTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
              selectableRange:`${maskForm.startTime ? maskForm.startTime+':00' : '04:00:00'}-23:59:00`
  }"
                          placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="教学点"
                      prop="cooperation"
                      v-if='activeRow&&activeRow.teachMode == "OFFLINE"'>
          <el-select v-model.trim="maskForm.cooperation"
                     clearable
                     filterable>
            <el-option v-for='(item,index) in cooperationList'
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="resetCourse">确 定</el-button>
      </span>
    </el-dialog> -->

    <el-dialog
      title="补考勤"
      width="400px"
      :visible.sync="markAttendance.status"
    >
      <el-form>
        <el-form-item label="签到状态"
          >{{ markAttendance.dataInfo.signInStatus | attendanceType }}
        </el-form-item>
        <el-form-item label="签到时间">{{
          markAttendance.dataInfo.signInTime
        }}</el-form-item>
        <el-form-item label="签退状态"
          >{{ markAttendance.dataInfo.signOutStatus | attendanceOutType }}
        </el-form-item>
        <el-form-item label="签退时间">{{
          markAttendance.dataInfo.signOutTime
        }}</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="markAttendance.status = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="
            markAttendance.dataInfo.signOutStatus == 1 &&
            markAttendance.dataInfo.signInStatus == 1
              ? true
              : false
          "
          @click="batchAdjustmentTime"
          >确定补卡</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="点名表" width="800px" :visible.sync="rollCall.status">
      <el-table :data="rollCall.gridData" :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column
          align="center"
          property="userName"
          label="学员姓名"
        ></el-table-column>
        <el-table-column
          align="center"
          property="phone"
          label="手机号"
        ></el-table-column>
        <el-table-column
          align="center"
          property="subjectName"
          label="学员声部"
        ></el-table-column>
        <el-table-column align="center" label="到课状态">
          <template slot-scope="scope">
            {{ scope.row.status | studentCallName }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          v-if="!rollCall.selectItem.isSalary"
          label="操作"
          width="240px"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="onChangeRollCall('TRUANT', scope.row)"
              type="primary"
              round
              >未到</el-button
            >
            <el-button
              size="small"
              @click="onChangeRollCall('LEAVE', scope.row)"
              type="warning"
              round
              >请假</el-button
            >
            <el-button
              size="small"
              @click="onChangeRollCall('NORMAL', scope.row)"
              type="success"
              round
              >到课</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="rollCall.total"
        :page.sync="rollCall.page"
        :limit.sync="rollCall.limit"
        :page-sizes="rollCall.page_size"
        @pagination="getCallName"
      />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { getSchool } from "@/api/systemManage";
import {
  findVipGroupTeachingRecord,
  getStudyStudents,
  resetVipClass,
} from "@/api/vipSeting";
import {
  findAttendanceStudentByCourseWithPage,
  updateStudentAttendances,
  updateTeacherAttendance,
} from "@/api/buildTeam";
import { permission } from "@/utils/directivePage";
export default {
  components: { pagination },
  name: "teacherRecord",
  data() {
    return {
      searchForm: {
        type: "",
        status: "",
        time: [],
      },
      searchLsit: [],
      tableList: [],
      id: "",
      complaintsNum: "", //投诉数
      currentClassTimes: "", //当前课数
      isSalaryNum: "", // 已结算
      totalClassTimes: "", // 未上课数
      studentVisible: false, // 查看上课学员数的弹窗
      courseVisible: false, // 课时调整弹窗
      studentList: [],
      cooperationList: [],
      maskForm: {
        data: "",
        startTime: "",
        endTime: "",
        status: "",
        type: "",
        cooperation: "",
      },
      markAttendance: {
        // 考勤状态
        status: false,
        dataInfo: {},
      },
      activeId: "",
      activeRow: null, //
      maskrules: {
        date: [{ required: true, message: "请选择修改日期", trigger: "blur" }],
        startTime: [{ required: true, message: "请选择开始", trigger: "blur" }],
        endTime: [{ required: true, message: "请选择结束", trigger: "blur" }],
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      rollCall: {
        // 点名表
        status: false,
        gridData: [],
        selectItem: {}, // 选中状态
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    };
  },
  mounted() {
    this.__init();
  },
  activated() {
    this.__init();
  },
  methods: {
    __init() {
      let id = this.$route.query.id;
      this.id = id;
      this.rules.page = 1;
      // 获取vip教学记录
      this.getList();
      // 获取分部教学点
      getSchool({ organId: null }).then((res) => {
        if (res.code == 200) {
          this.cooperationList = res.data;
        }
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    getList() {
      let startTime;
      let endTime;
      if (this.searchForm.time) {
        startTime = this.searchForm.time[0];
        endTime = this.searchForm.time[1];
      } else {
        startTime = "";
        endTime = "";
      }
      let obj = {
        vipGroupId: this.id,
        page: this.rules.page,
        rows: this.rules.limit,
        status: this.searchForm.status || null,
        teachMode: this.searchForm.type || null,
        startTime,
        endTime,
      };
      findVipGroupTeachingRecord(obj).then((res) => {
        if (res.code == 200) {
          this.complaintsNum = res.data.baseInfo.complaintsNum;
          // 当前课数
          this.currentClassTimes = res.data.baseInfo.courseEndNum;
          this.isSalaryNum = res.data.baseInfo.isSalaryNum;
          // 未上课数
          this.totalClassTimes = res.data.baseInfo.courseNoStartNum;
          // this.totalClassTimes = res.data.baseInfo.totalClassTimes - this.currentClassTimes;
          this.tableList = res.data.pageInfo.rows;
          this.rules.total = res.data.pageInfo.total;
        }
      });
    },
    batchAdjustmentTime() {
      let tempData = this.markAttendance.dataInfo;
      let params = {
        courseScheduleId: tempData.id,
        signInStatus: 1,
        signOutStatus: 1,
      };
      updateTeacherAttendance(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("补卡成功");
          this.markAttendance.status = false;
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    onMarkAttendance(item) {
      // 补考勤
      this.markAttendance = {
        status: true,
        dataInfo: item,
      };
    },
    onCallName(item) {
      // 点名表
      this.rollCall.page = 1;
      this.rollCall.selectItem = item;
      this.getCallName();
    },
    getCallName() {
      let rollCall = this.rollCall;
      let params = {
        page: rollCall.page,
        rows: rollCall.limit,
        courseScheduleId: rollCall.selectItem.id,
      };
      findAttendanceStudentByCourseWithPage(params).then((res) => {
        let result = res.data;
        rollCall.status = true;
        if (res.code == 200) {
          rollCall.gridData = result.rows;
          rollCall.total = result.total;
        }
      });
    },
    onChangeRollCall(type, row) {
      let rollCall = this.rollCall;
      let params = {
        courseScheduleId: rollCall.selectItem.id,
        studentAttendances: [
          {
            userId: row.studentId,
            status: type,
          },
        ],
      };
      updateStudentAttendances(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          row.status = type;
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    lookStudents(row) {
      let id = row.id;
      getStudyStudents({ courseScheduleId: id }).then((res) => {
        if (res.code == 200) {
          this.studentList = res.data;
          this.studentVisible = true;
        }
      });
    },
    permission(str) {
      return permission(str);
    },
    handleClose() {
      this.studentList = [];
      this.studentVisible = false;
    },
    resetClass(row) {
      this.courseVisible = true;
      // 弹出弹窗
      this.activeId = row.id;
      this.activeRow = row;
      // resetVipClass().then()
    },
    resetCourse() {
      // 点击弹窗效验
      this.$refs["maskForm"].validate((valid) => {
        if (valid) {
          // 效验成功
          resetVipClass({
            id: this.activeId,
            classDate: this.maskForm.date,
            startClassTime: this.maskForm.date + " " + this.maskForm.startTime,
            endClassTime: this.maskForm.date + " " + this.maskForm.endTime,
            schoolId: this.maskForm.cooperation,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("调整成功");
              this.getList();
              this.courseVisible = false;
              this.$refs["maskForm"].resetFields();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
  filters: {
    fitterisSalary(val) {
      let arr = ["未结算", "已结算"];
      return arr[val];
    },
    fitterTeachMode(val) {
      if (val == "ONLINE") {
        return "线上课";
      } else if (val == "OFFLINE") {
        return "线下课";
      }
    },
    fitterStatus(val) {
      if (val == "NOT_START") {
        return "未开始";
      } else if (val == "UNDERWAY") {
        return "进行中";
      } else if (val == "OVER") {
        return "已结束";
      }
    },
    endTime(val) {
      if (val) {
        return val.split(" ")[1].substring(0, 5);
      } else {
        return val;
      }
    },
    studentCallName: (value) => {
      let template = {
        NORMAL: "到课",
        TRUANT: "未到",
        LEAVE: "请假",
        DROP_OUT: "退学",
        "": "未到",
      };
      return template[value];
    },
  },
};
</script>
<style lang="scss" scope>
</style>