dy-admin-manager/src/views/vipClass/vipReset.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="goBack"
                      content='vip修改'>
      </el-page-header>
    </h2>
    <div class='newBand'
         @click="addCourse">vip加课</div>
    <div class="tableWrap">
      <el-table :data='tableList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column label="课程名称"
                         width="150"
                         align="center"
                         prop="name">
        </el-table-column>
        <el-table-column label="班级id"
                         width="150"
                         align="center"
                         prop="classGroupId">
        </el-table-column>
        <el-table-column label="上课日期"
                         align="center"
                         width="150"
                         prop="classDate">
          <template slot-scope="scope">
            <div>
              {{  scope.row.classDate | formatTimer}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程状态"
                         align="center"
                         width="150"
                         prop="status">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | coursesStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上课开始时间"
                         align="center"
                         width="150"
                         prop="startClassTimeStr">
        </el-table-column>
        <el-table-column label="上课结束时间"
                         align="center"
                         width="150"
                         prop="endClassTimeStr">
        </el-table-column>
        <el-table-column label="课程类型"
                         width="150"
                         align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.teachMode | teachMode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="教学点"
                         align="center"
                         width="300"
                         prop="schoolName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         @click="resetClass(scope.row)">调整</el-button>
              <el-button type="text"
                         @click="removeClass(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog title="课程调整"
               width="400px"
               :before-close="handleClose"
               :visible.sync="courseVisible">
      <el-form :model="maskForm"
               ref="maskForm"
               :rules="maskRules"
               label-position="right"
               label-width="80px;"
               :inline="true">
        <el-form-item label="上课日期"
                      prop="date">
          <el-date-picker v-model="maskForm.date"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="startTime">
          <el-time-select placeholder="起始时间"
                          v-model="maskForm.startTime"
                          :picker-options="{
                            start: '06:30',
                            step: '00:05',
                            end: '23:30'
                            }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-time-select placeholder="结束时间"
                          v-model="maskForm.endTime"
                          :picker-options="{
                            start: '06:30',
                            step: '00:05',
                            end: '23:30',
                            minTime: maskForm.startTime
                          }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="教学地点"
                      v-if='maskForm.teachMode == "OFFLINE"'>
          <el-select v-model="maskForm.address">
            <el-option v-for="(item,index) in schoolList"
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="courseVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitResetClass">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="课程调整"
               :visible.sync="addCourseVisible">
      <el-button type="text"
                 @click="addOneChiose">添加</el-button>
      <el-table :data='addTable'>
        <el-table-column label="上课日期"
                         align="center"
                         prop="name">
          <template slot-scope="scope">
            <div>
              <el-date-picker v-model="scope.row.classDate"
                              type="date"
                              placeholder="选择日期">
              </el-date-picker>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程开始时间"
                         align="center"
                         prop="startClassTimeStr">
          <template slot-scope="scope">
            <div>
              <el-time-select v-model="scope.row.startClassTimeStr"
                              :picker-options="{
                                start: '06:30',
                                step: '00:05',
                                end: '23:30'
                              }"
                              placeholder="选择时间">
              </el-time-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程形态"
                         align="center"
                         prop="name">
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.teachMode">
                <el-option label="线上课"
                           value="ONLINE"></el-option>
                <el-option label="线下课"
                           value="OFFLINE"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         @click="removeMarkCourse(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addCourseVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { resetCourse } from '@/api/buildTeam'
import { getSchool } from '@/api/systemManage'
import pagination from '@/components/Pagination/index'
import { findVipGroupCourseSchedules, bathDelete, appendVipGroupCourseSchedules } from '@/api/vipSeting'
export default {
  components: {
    pagination
  },
  data () {
    return {
      addCourseVisible: false,
      courseVisible: false,
      tableList: [],
      addTable: [],
      courseTime: '',
      vipid: '',
      maskForm: {
        date: '',
        startTime: '',
        endTime: '',
        id: '',
        address: '',
        teachMode: ''
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40] // 选择限制显示条数
      },
      maskRules: {
        date: [{ required: true, message: '请选择上课时间', trigger: 'blur' },],
        startTime: [{ required: true, message: '请选择上课开始时间', trigger: 'blur' },],
        endTime: [{ required: true, message: '请选择上课结束时间', trigger: 'blur' },],
      },
      schoolList: [],
      Frules: null,
      FsearchForm: null
    }
  },
  created () {
    this.vipid = this.$route.query.id;
    if (this.$route.query.rules) {
      this.Frules = this.$route.query.rules
    }
    if (this.$route.query.searchForm) {
      this.FsearchForm = this.$route.query.searchForm
    }
  },
  mounted () {
    this.getList();
    getSchool({ organId: this.$store.getters.organ }).then(res => {
      if (res.code == 200) {
        this.schoolList = res.data;
      }
    })
  },
  methods: {
    getList () {
      findVipGroupCourseSchedules({ vipGroupId: this.vipid, rows: this.rules.limit, page: this.rules.page }).then(
        res => {
          if (res.code == 200) {
            this.tableList = res.data.pageInfo.rows;
            this.rules.total = res.data.pageInfo.total;
            this.courseTime = res.data.singleClassMinutes;
          }
        }
      )
    },
    goBack () {
      this.$router.push({ path: '/business/vipList', query: { rules: this.Frules, searchForm: this.FsearchForm } })
    },
    resetClass (row) {
      this.maskForm.date = row.classDate;
      this.maskForm.startTime = row.startClassTimeStr;
      this.maskForm.endTime = row.endClassTimeStr;
      this.maskForm.id = row.id;
      this.maskForm.address = row.schoolId
      this.maskForm.teachMode = row.teachMode
      // 修改课时
      this.courseVisible = true;
    },
    handleClose () {
      this.courseVisible = false;
      this.$refs['maskForm'].resetFields()
    },
    submitResetClass () {
      let obj = {
        startClassTimeStr: this.maskForm.startTime,
        endClassTimeStr: this.maskForm.endTime,
        id: this.maskForm.id,
        classDate: this.maskForm.date,
        schoolId: this.maskForm.address || null
      }
      resetCourse(obj).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.courseVisible = false;
          this.getList();
        }
      })
    },
    removeClass (row) {
      this.$confirm('是否删除该vip课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        bathDelete({ courseScheduleIds: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getList();
          }
        })
      })

    },
    // vip 家课
    addCourse () {
      this.addCourseVisible = true;
    },
    addOneChiose () {
      this.addTable.push({
        classDate: '',
        startClassTimeStr: '',
        endClassTimeStr: '',
        teachMode: '',
        moid: new Date().getTime()
      })
    },
    removeMarkCourse (row) {
      for (let i in this.addTable) {
        if (this.addTable[i].moid == row.moid) {
          this.addTable.splice(i, 1);
        }
      }
    },
    submitAdd () {
      let endClassTimeStr = this.MinutesTest(this.addTable[0].startClassTimeStr, 90);
      let some = {
        vipGroupApplyBaseInfo: {
          id: this.vipid
        }, courseSchedules: []

      }
      for (let i in this.addTable) {
        let obj = {
          classDate: this.addTable[i].classDate,
          startClassTimeStr: this.addTable[i].startClassTimeStr,
          endClassTimeStr: this.MinutesTest(this.addTable[i].startClassTimeStr, this.courseTime),
          teachMode: this.addTable[i].teachMode
        }
        some.courseSchedules.push(obj);
      }
      // 发请求干活
      appendVipGroupCourseSchedules(some).then(res => {
        if (res.code == 200) {
          this.addCourseVisible = false;
          this.rules.page = 1;
          this.getList();

        }
      })
    },
    // 分钟小时相加减
    MinutesTest (str, interval) {
      let houer = str.split(':')[0];
      let min = str.split(':')[1];
      let sdate1 = new Date(1900, 1, 1, houer, min);
      sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));
      let H = sdate1.getHours();
      let M = sdate1.getMinutes();
      if (H < 10) H = '0' + H;
      if (M < 10) M = '0' + M;
      return H + ':' + M
    },
  },
}
</script>
<style lang="scss">
</style>