dy-admin-manager/src/views/teamBuild/teamSeting/components/improvementClass.vue

<template>
  <div class='imc'>
    <el-form :inline="true"
             :model="topForm"
             ref='topForm'
             :rules="topFormRules">
      <el-form-item>
        <div class="addBtn"
             @click="addClass">添加班级</div>
      </el-form-item>
      <el-form-item label="基础技能班参考数量">
        <el-input disabled
                  v-model="topForm.improventClassesNum"></el-input>
      </el-form-item>
      <el-form-item label="排课数量"
                    prop="count">
        <el-input v-model="topForm.count"></el-input>
      </el-form-item>
      <el-form-item label="排课开始时间"
                    prop="timer">
        <el-date-picker v-model="topForm.timer"
                        align="right"
                        style="width:220px!important;"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table :data="tableList">
        <el-table-column prop="name"
                         align="center"
                         label="基础技能班名称">
        </el-table-column>
        <el-table-column prop="subjectIdList"
                         align="center"
                         label="声部">
          <template slot-scope="scope">
            <div>
              {{ scope.row.subjectIdList | fitterSound }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userId"
                         align="center"
                         label="主教老师">
          <template slot-scope="scope">
            <div>
              {{ scope.row.userId | fitterTeacher }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="expectStudentNum"
                         align="center"
                         label="班级人数">
        </el-table-column>
        <el-table-column prop="date"
                         align="center"
                         label="上课时间">
          <template slot-scope="scope">
            <div>
              <p>{{scope.row.startClassTime+'-'+scope.row.endClassTime}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date"
                         align="center"
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         @click="removeClass(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 确认取消 -->
    <div class="btnWrap"
         style="margin-top:40px;">
      <div class="nextBtn"
           @click='gotoNext'>下一步</div>
      <!-- <div class="okBtn">返回</div> -->
    </div>
    <el-dialog title="基础技能班"
               :visible.sync="raiseVisible"
               width="40%">
      <el-form :model="maskForm"
               ref='maskForm'
               :rules="maskRules"
               :label-position="labelPosition"
               label-width="100px">
        <el-form-item label="名称"
                      prop="name">
          <el-input v-model="maskForm.name"
                    style='width:180px;'></el-input>
        </el-form-item>
        <el-form-item label="声部"
                      prop="sound">
          <el-select v-model="maskForm.sound"
                     multiple>
            <el-option v-for="(item,index) in soundList"
                       :key='index'
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主教老师"
                      prop="teacher">
          <el-select v-model="maskForm.teacher">
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :label="item.name"
                       :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级人数"
                      prop="studentNum">
          <el-input v-model="maskForm.count"
                    type="number"
                    style='width:180px;'></el-input>
        </el-form-item>
        <el-form-item label="星期几"
                      prop="week">
          <el-select v-model="maskForm.week">
            <el-option value="1"
                       label="星期一"></el-option>
            <el-option value="2"
                       label="星期二"></el-option>
            <el-option value="3"
                       label="星期三"></el-option>
            <el-option value="4"
                       label="星期四"></el-option>
            <el-option value="5"
                       label="星期五"></el-option>
            <el-option value="6"
                       label="星期六"></el-option>
            <el-option value="7"
                       label="星期天"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间段"
                      prop="startTime">
          <el-time-select placeholder="起始时间"
                          value-format='HH:mm:ss'
                          v-model="maskForm.startTime"
                          :picker-options="{
                            start: '06:30',
                            step: '00:15',
                            end: '23:30'
                          }">
          </el-time-select>
          <el-time-select placeholder="结束时间"
                          v-model="maskForm.endTime"
                          value-format='HH:mm:ss'
                          :picker-options="{
                            start: '06:30',
                            step: '00:15',
                            end: '23:30',
                            minTime: maskForm.startTime
                          }">
          </el-time-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="raiseVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addraiseClass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { findSound, findMusicGroupClassTeacher, getTeacher, getTeamDetail, addHighClass, highClassGroups } from '@/api/buildTeam'
let that;
export default {
  props: {
    teamid: {
      type: String,
      required: true
    }
  },
  beforeCreate () {
    that = this;
  },
  data () {
    return {
      labelPosition: 'right',
      topForm: {
        count: '',
        improventClassesNum: '',
        timer: ''
      },
      maskForm: {
        name: '',
        sound: [],
        count: '',
        teacher: '',
        startTime: '',
        endTime: '',
        week: ''
      },
      raiseVisible: false,
      tableList: [],
      soundList: [],
      teacherList: [],
      maskRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        sound: [{ required: true, message: '请选择声部', trigger: 'blur' },],
        count: [{ required: true, message: '请输入学生数', trigger: 'blur' }],
        teacher: [{ required: true, message: '请选择老师', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        endTime: '',
        week: [{ required: true, message: '请选择星期几', trigger: 'blur' }]
      },
      topFormRules: {
        count: [{ required: true, message: '请输入排课数量', trigger: 'blur' }],
        timer: [{ required: true, message: '请选择开课时间', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    // 获取乐团声部
    findSound({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    })
    findMusicGroupClassTeacher({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data
        // console.log(res.data);
      }
    })
    // 获取乐团老师
    // findMusicGroupClassTeacher({ musicGroupId: this.teamid }).then()
    getTeamDetail({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.topForm.improventClassesNum = res.data.improventClassesNum;
      }
    });
    // 获取提高班列表
    highClassGroups({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.tableList = res.data;
        // for (let i in this.tableList) {
        //   this.tableList[i].endClassTime = this.tableList[i].endClassTime.substring(0, this.tableList[i].endClassTime.length - 3);
        //   this.tableList[i].startClassTime = this.tableList[i].startClassTime.substring(0, this.tableList[i].startClassTime.length - 3);
        // }
      }
    })
  },
  methods: {
    addraiseClass () {
      this.$refs['maskForm'].validate(res => {
        if (res) {
          // 验证成功组成数组
          let obj = {
            'userId': this.maskForm.teacher, // 老师id
            'dayOfWeek': this.maskForm.week, // 周几
            'startClassTime': this.maskForm.startTime,
            'endClassTime': this.maskForm.endTime,
            'courseTimes': this.topForm.count,
            'type': 'HIGH',
            'expectStudentNum': this.maskForm.count,
            'musicGroupId': this.teamid,
            'teachMode': 'OFFLINE',
            'name': this.maskForm.name,
            'subjectIdList': this.maskForm.sound.join(','),
            'moid': new Date().getTime(),
            'startDate': this.topForm.timer
          }
          this.tableList.push(obj);
          this.raiseVisible = false;
          this.$refs['maskForm'].resetFields();
          this.maskForm.endTime = '';
        } else {
          this.$message.error('请填写必要信息')
        }
        console.log(this.tableList);
      })

    },
    removeClass (row) {
      for (let i in this.tableList) {
        if (this.tableList[i].moid == row.moid) {
          this.tableList.splice(i, 1);
        }
        if (this.tableList[i].id == row.id) {
          this.tableList.splice(i, 1);
        }
      }
    },
    addClass () {
      this.raiseVisible = true;

    },
    gotoNext () {
      this.$refs['topForm'].validate(res => {
        if (res) {
          for (let i in this.tableList) {
            this.tableList[i].startDate = this.topForm.timer;
            this.tableList[i].courseTimes = this.topForm.count;
          }

          let count = this.tableList.length;
          if (count > this.topForm.improventClassesNum) {
            this.$message.error(`基础技能班不能超过${this.topForm.improventClassesNum}个`)
            return
          }
          addHighClass(this.tableList).then(res => {
            if (res.code == 200) {
              this.$message.success('恭喜您创建成功')
              this.$emit('gotoNav', 4)
            }
          })
        } else {
          this.$message.error('请先输入排课数量和开始时间')
        }
      })

    }
  },
  filters: {
    fitterSound (val) {
      let arr = val.split(',');
      if (that.soundList) {
        let str = ''
        for (let i in that.soundList) {
          for (let j in arr) {

            if (that.soundList[i].id == arr[j]) {

              str += that.soundList[i].name + ','
            }
          }
        }
        return str.substring(0, str.length - 1);
      } else {
        return ''
      }
    },
    fitterTeacher (val) {
      if (that.teacherList) {
        for (let i in that.teacherList) {
          if (that.teacherList[i].userId == val) {

            return that.teacherList[i].name
          }
        }
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.imc {
  box-sizing: border-box;
  padding: 30px 42px;
  background-color: #fff;
  min-height: 80vh;
  .addBtn {
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
    width: 120px;
    height: 40px;
    background-color: #4eada7;
  }
}
</style>