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

<template >
  <div>
    <!-- 头部展示 -->
    <div class="headWrap">
      <div class="left">
        <div class="headItem">
          <p>未上课时:<span>{{ totalClassTimes }}</span></p>
        </div>
        <div class="headItem">
          <p>已上课时:<span>{{ currentClassTimes }}</span></p>
        </div>
        <div class="headItem">
          <p>已结算:<span>{{ isSalaryNum }}</span></p>
        </div>
        <div class="headItem">
          <p>被投诉:<span>{{ complaintsNum }}</span></p>
        </div>
      </div>
      <div class="right">
      </div>
    </div>
    <!-- 搜索标题 -->
    <el-form :inline="true"
             label-position="right"
             label-width="120px"
             class="searchForm"
             v-model="searchForm">
      <el-form-item>
        <el-select v-model="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="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="searchForm.time"
                        style="width:400px"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data='tableList'>
        <el-table-column align='center'
                         label="上课时间"
                         width="300px"
                         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 }}-{{ 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.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="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-permission="'vipGroupManage/findVipGroupAttendanceStudents'"
                         @click="lookStudents(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 :total="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"
                          v-model="maskForm.date"
                          placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="startTime">
          <el-time-picker v-model="maskForm.startTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
                          selectableRange: '00:00:00 - 23:59:00'
                            }"
                          placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-time-picker v-model="maskForm.endTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
                          selectableRange: '00: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="maskForm.cooperation">
            <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>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getSchool } from '@/api/systemManage'
import { findVipGroupTeachingRecord, getStudyStudents, resetVipClass } from '@/api/vipSeting'
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: ''

      },
      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] // 选择限制显示条数
      },
    }
  },
  mounted () {
    let id = this.$route.query.id;
    this.id = id;
    // 获取vip教学记录
    this.getList()
    // 获取分部教学点
    getSchool({ organId: null }).then(res => {
      if (res.code == 200) {
        this.cooperationList = res.data;
      }
    })
  }, methods: {
    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
        }
      })
    },
    lookStudents (row) {
      let id = row.id;
      getStudyStudents({ courseScheduleId: id }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data;
          this.studentVisible = true;
        }
      })
    },
    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]
      } else {
        return val
      }
    }
  }
}
</script>
<style lang="scss" scope>
</style>