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

<template>
  <div class="m-container">
    <h2>
      <div class='squrt'></div>提高班报名详情
    </h2>
    <div class='m-core'>
      <div class="tableWrap">
        <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data='tableList'>
          <el-table-column label="班级名称"
                           prop="name">
          </el-table-column>
          <el-table-column label="声部"
                           prop="subjectName">
          </el-table-column>
          <el-table-column label="预计人数"
                           prop="expectStudentNum">
          </el-table-column>
          <el-table-column label="实际人数"
                           prop="studentNum">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           @click='lookDeatil(scope.row)'>查看</el-button>
                <el-button type="text"
                           @click="addstudentBtn(scope.row)">添加学员</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="添加学员"
               width="600px"
               :visible.sync="addStudentVisible">
      <el-table :data="studentList"
                ref='studentList'
                @selection-change="selectStudent"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column type="selection"
                         width="55"></el-table-column>
        <el-table-column prop='name'
                         label="学生姓名"></el-table-column>
        <el-table-column property="classGroupName"
                         label="所在班级"></el-table-column>
      </el-table>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="addStudnt">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="小班课学员详情"
               width="600px"
               :visible.sync="lookDeatilVisible">
      <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                :data='classList'>
        <el-table-column label="学员姓名"
                         prop="name">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-popover placement="top"
                          width="160"
                          :ref="scope.$index">
                <p>确定删除该学生?</p>
                <div style="text-align: right; margin-top: 20px">
                  <el-button size="mini"
                             type="text"
                             @click="scope._self.$refs[scope.$index].doClose()">取消</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="removeStudent(scope)">确定</el-button>
                </div>
                <el-button type="text"
                           slot="reference">删除</el-button>
              </el-popover>
              <el-button type="text">调整班级</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
    <el-dialog title="学员班级调整"
               width="600px"
               append-to-body
               :visible.sync="resetVisible">
      <div class="radioBox">
        <el-radio v-model="studentRadio"
                  label="1">备选项</el-radio>
        <div>预计人数:</div>
        <div>实际人数:</div>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import { highClassGroups, teamSoundStudent } from '@/api/buildTeam'
import { getClassAllStudent, addStudents } from '@/api/studentManager'
export default {
  data () {
    return {
      tableList: [],
      teamid: '',
      lookDeatilVisible: false,
      addStudentVisible: false,
      resetVisible: false,
      studentList: [], // 乐团所有学生
      activeStudentList: [], // 选中的学生集合
      activeClass: '',  // 选中的班级id
      classList: [],
      activeStudent: null,
      studentRadio: '' // 学生新选择的班级
    }
  },
  mounted () {
    this.teamid = this.$route.query.id;
    // console.log(this.teamid)

    this.getList();
    teamSoundStudent({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.studentList = res.data;
      }
    })

  },
  methods: {
    getList () {
      highClassGroups({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data;
        }
      })
    },
    lookDeatil (row) {
      this.lookDeatilVisible = true;
      console.log(row.id);
      getClassAllStudent({ classGroupId: row.id }).then(res => {
        if (res.code == 200) {
          this.classList = res.data;
        }
      })

      return

    },
    addstudentBtn (row) {
      this.activeClass = row.id;
      this.addStudentVisible = true;
    },
    addStudnt () {
      // 发请求添加学生
      let classGroupId = this.activeClass;
      let userIdsStr = this.activeStudentList.map(item => {
        return item.id
      }).join(',')
      addStudents({ userIdsStr, classGroupId }).then(res => {
        if (res.code == 200) {
          this.$message.success('添加成功')
          this.activeStudentList = [];
          this.addStudentVisible = false;
          // 取消列表的勾选
          this.$refs.studentList.clearSelection();
          this.getList();
        }
      })
    },
    selectStudent (val) {
      this.activeStudentList = val;
    },
    // 删除学生
    removeStudent (scope) {
      console.log(scope.row.id);

      scope._self.$refs[scope.$index].doClose();
    }

  },
}
</script>
<style lang="scss">
.radioBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 20px;
  div {
    margin-right: 30px;
  }
}
</style>