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

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel"
                      content="基础技能班报名详情"></el-page-header>
      <!-- <div class='squrt'></div>  -->
      <!-- <span @click="onCreateQRCode" style="font-size: 16px; padding-left: 20px; font-weight: 400;cursor: pointer; ">查看报名连接</span> -->
      <span @click="onApply"
            v-permission="'musicGroup/pushMessage'"
            style="font-size: 16px; padding-left: 20px; font-weight: 400;cursor: pointer; color: #409eff;">开启报名</span>
    </h2>
    <div class='m-core'>
      <div class="tableWrap">
        <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data='tableList'>
          <el-table-column label="班级名称"
                           align="center"
                           prop="name">
          </el-table-column>
          <el-table-column label="声部"
                           align="center"
                           prop="subjectName">
          </el-table-column>
          <el-table-column label="预计人数"
                           align="center"
                           prop="expectStudentNum">
          </el-table-column>
          <el-table-column label="实际人数"
                           align="center"
                           prop="studentNum">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-permission="'classGroupStudent/findAllStudent'"
                           @click='lookDeatil(scope.row)'>查看</el-button>
                <el-button type="text"
                           v-permission="'classGroupStudent/addStudents'"
                           @click="addstudentBtn(scope.row)">添加学员</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="报名二维码"
               :visible.sync="qrcodeStatus"
               width="300px">
      <div class="left-code"
           style="display: flex; flex-direction: column; align-items: center;">
        <h2>小班课报名连接</h2>
        <div id="qrcode"
             class="qrcode code"
             ref="qrCodeUrl"></div>
        <p class="code-url"
           style="width: 220px"
           v-if="codeUrl">{{ codeUrl }}</p>
      </div>
    </el-dialog>
    <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"
                   v-permission="'classGroupStudent/addStudents'"
                   @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"
                          v-permission="'classGroupStudent/del'"
                          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"
                         v-permission="'classGroupStudent/adjustClassGroup'"
                         @click="resetClass(scope.row)">调整班级</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"
           v-for="(item,index) in tableList"
           :key="index">
        <el-radio v-model.trim="studentRadio"
                  style="width:120px;"
                  :label="item.id">{{ item.name }}</el-radio>
        <div>预计人数:{{ item.expectStudentNum }}</div>
        <div>实际人数:{{ item.studentNum }}</div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="resetStudent">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { highClassGroups, teamSoundStudent, resetHighClass, pushMessage } from '@/api/buildTeam'
import { getClassAllStudent, addStudents, removeStudents } from '@/api/studentManager'
// import QRCode from 'qrcodejs2'
export default {
  name: 'setImprovement',
  data () {
    return {
      tableList: [],
      teamid: '',
      lookDeatilVisible: false,
      addStudentVisible: false,
      resetVisible: false,
      studentList: [], // 乐团所有学生
      activeStudentList: [], // 选中的学生集合
      activeClass: '',  // 选中的班级id
      classList: [],
      activeStudent: null,
      studentRadio: '', // 学生新选择的班级
      qrcodeStatus: false, // 生成二维码
      qrcodes: true,
      qrcode: null,
      codeUrl: null,
      Fsearch: null,
      Frules: null
    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.teamid = this.$route.query.id;
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules
      }
      this.getList();
      teamSoundStudent({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data;
        }
      })
    },
    onApply () {
      this.$confirm('您确定开启报名吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pushMessage({ musicGroupId: this.teamid }).then(res => {
          let result = res.data
          if (res.code == 200) {
            this.$message.success('开启成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => { })

    },
    // onCreateQRCode () { // 生成报名二维码
    //   this.qrcodeStatus = true
    //   let id = this.$route.query.id
    //   let teamName = this.$route.query.name
    //   if (this.qrcodes) {
    //     this.qrcodes = false
    //     setTimeout(() => {
    //       this.qrcode = new QRCode('qrcode', {
    //         width: 200,
    //         height: 200,
    //         colorDark: '#000000',
    //         colorLight: '#ffffff',
    //         correctLevel: QRCode.CorrectLevel.H
    //       })
    //       this.qrcode.makeCode('http://mstudev.dayaedu.com/#/smallLogin?musicGroupId=' + id)
    //       this.codeUrl = 'http://mstudev.dayaedu.com/#/smallLogin?musicGroupId=' + id
    //     }, 500)
    //   }

    // },
    getList () {
      highClassGroups({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data;
        }
      })
    },
    lookDeatil (row) {
      this.lookDeatilVisible = true;
      this.activeClass = row.id;
      getClassAllStudent({ classGroupId: this.activeClass }).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.userId
      }).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) {
      removeStudents({ classGroupId: this.activeClass, userId: scope.row.userId }).then(res => {
        if (res.code == 200) {
          this.$message.success('恭喜你删除成功');
          scope._self.$refs[scope.$index].doClose();
          getClassAllStudent({ classGroupId: this.activeClass }).then(res => {
            if (res.code == 200) {
              this.classList = res.data;
              this.getList();
            }
          })
        }
      })

    },
    onCancel () {
      this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
    },
    resetClass (row) {
      this.activeStudent = row.userId;
      this.resetVisible = true;
    },
    resetStudent () {
      // this.studentRadio; // 选中的班级
      // this.activeClass; // 要调整的班级
      // this.activeStudent // 学生id
      resetHighClass({ classGroupId: this.studentRadio, oldClassGroupId: this.activeClass, userId: this.activeStudent }).then(res => {
        if (res.code == 200) {
          this.$message.success('调剂成功')
          this.resetVisible = false;
          this.getList();
        }
      })
    }

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