dy-admin-manager/src/views/teamDetail/components/classList.vue

<template>
  <div class="c-container">
    <!-- 搜索标题 -->
    <!-- <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-select v-model.trim="searchForm.name"
                   placeholder="课程类型">
          <el-option label="哈哈哈"
                     value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form> -->
    <!-- 列表 -->
    <!-- <div class="newBand"
         @click="resetClass">班级调整</div> -->
    <div class="newBand"
         v-permission="'courseSchedule/coursePostpone'"
         @click="postpone">课程顺延</div>
    <div class="tableWrap">
      <el-table :data='tableList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column align='center'
                         prop="classGroupName"
                         label="班级名称">
        </el-table-column>
        <el-table-column align='center'
                         label="班级类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.classGroupType | classType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="masterTeacher"
                         label="主教老师">
        </el-table-column>
        <el-table-column align='center'
                         prop='subTeacher'
                         label="助教老师">
        </el-table-column>
        <el-table-column align='center'
                         prop="currentClassTimes"
                         label="当前课次">
          <template slot-scope="scope">
            <div>
              {{ scope.row.currentClassTimes+'/'+scope.row.totalClassTimes}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="studyNum"
                         label="在读人数">
        </el-table-column>
        <el-table-column align='center'
                         v-if="permission('courseSchedule/coursePostpone')"
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type='text'
                         @click="signPostpone(scope.row)">顺延课程</el-button>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align='center'
                         prop="quitNum"
                         label="退团人数">

        </el-table-column> -->
        <!-- <el-table-column align='center'
                         label="新增人数">
        </el-table-column> -->
        <!-- <el-table-column align='center'
                         label="退团人数">
          <template slot-scope="scope">
            <div>
              <el-button type='text'>添加学员</el-button>
              <el-button type='text'>老师修改</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
      sync
      save-key='teamDetails-classList'
      :total.sync="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog title="课程顺延"
               :visible.sync="postponeVisible"
               width="600px"
               :before-close="handleClose">
      <el-form :model="postponeForm"
               ref="postponeForm"
               :rules='postponeRules'>
        <el-form-item label="开始日期"
                      prop="stopTime">
          <el-date-picker v-model.trim="postponeForm.stopTime"
                          type="date"
                          :picker-options="bigin"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="顺延日期"
                      prop="resetTime">
          <el-date-picker v-model.trim="postponeForm.resetTime"
                          type="date"
                          :picker-options="options"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="跳过节假日">
          <el-checkbox v-model.trim="postponeForm.holiday"></el-checkbox>
        </el-form-item>
      </el-form>
      <span style='color:#F56C6C;'>注意:将会把所选班级的课表，「开始日期」之后的全部未开始课程；
        调整到「顺延日期」之后重新排课，可以勾选跳过节假日；</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="postponeVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getClassList, coursePostpone } from '@/api/buildTeam'
import { permission } from '@/utils/directivePage'
export default {
  name: 'tclassList',
  data () {
    return {
      postponeVisible: false,
      searchLsit: [],
      searchForm: {
        name: '',
        status: ''
      },
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      postponeForm: {
        stopTime: '',
        resetTime: '',
        holiday: false
      },
      postponeRules: {
        stopTime: [{ required: true, message: '请选择开始日期', trigger: 'blur' },],
        resetTime: [{ required: true, message: '请选择顺延日期', trigger: 'blur' },],
      },
      activeClass: '',
      activeList: [],
      options: this.processDate(),
      bigin: this.beginDate()
    }
  },
  components: {
    pagination
  },
  created () {

  },
  mounted () {
    this.getList();
  },
  activated () {
    this.getList();
  },
  methods: {
    permission (str) {
      return permission(str)
    },
    getList () {
      this.teamid = this.$route.query.id;
      // search: this.teamid
      getClassList({ search: this.teamid, page: this.rules.page, rows: this.rules.limit }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total
        }
      })
    },
    resetClass () {
      // 跳转到班级详情页
      this.$router.push({ path: '/business/resetClass', query: { id: this.teamid } })
    },
    postpone () {
      if (this.activeList.length <= 0) {
        this.$message.error('请至少选择一个班级');
        return
      }
      this.postponeVisible = true;
    },
    signPostpone (row) {
      this.activeClass = row.classGroupId;
      this.postponeVisible = true;
    },
    handleClose () {
      // 弹窗关闭之前
      this.postponeVisible = false;
      this.$refs['postponeForm'].resetFields();
    },
    handleSelectionChange (val) {
      this.activeList = val;
      let arr = val.map(item => {
        return item.classGroupId
      })
      this.activeClass = arr.join(',')
    },
    submitInfo () {
      this.$refs['postponeForm'].validate(res => {
        if (res) {
          let classGroupIds = this.activeClass;
          let pauseDate = this.postponeForm.stopTime;
          let recoveryDate = this.postponeForm.resetTime;
          let skipHoliday = this.postponeForm.holiday;
          let obj = {
            classGroupIds,
            pauseDate,
            recoveryDate,
            skipHoliday
          }
          coursePostpone(obj).then(res => {
            if (res.code == 200) {
              this.$message.success('修改成功')
            }
          })
        }
      })

    },
    processDate () {//提出结束时间必须大于提出开始时间
      let self = this
      return {
        firstDayOfWeek: 1,
        disabledDate (time) {
          if (self.postponeForm.stopTime) {
            return new Date(self.postponeForm.stopTime).getTime() > time.getTime()
          } else {
            return time.getTime() > Date.now()
            //开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    beginDate () {
      let self = this
      return {
        firstDayOfWeek: 1,
        disabledDate (time) {
          return time.getTime() + 86400000 <= new Date().getTime()//开始时间不选时，结束时间最大值小于等于当天
        }
      }
    },
  }
}
</script>
<style lang="scss" scope>
</style>