dy-admin-manager/src/views/teamBuild/signupList.vue

<template>
  <div class="sigup-container">
    <div class="topWrap">
      <div>
        <h2>
          <div class="squrt"></div>
          {{ teamName }}报名详情
        </h2>
        <div class="btnList">
          <div class='newBand close'>停止乐团</div>
          <div class='newBand' @click="paymentStatus = true"
               v-if="status=='APPLY'">开始缴费</div>
          <div class='newBand' @click="onGoHome"
               v-if="status=='PAY'">确认开团</div>
          <div class='newBand'
               v-if="status=='PAY'">延长缴费</div>
          <div class='newBand' @click="onCreateQRCode" >生成二维码</div>
        </div>
      </div>
      <p class='msg'> <img src="@/assets/images/base/clock.png"
             alt=""> {{ status=='APPLY'?'报名中':'缴费中' }}</p>
    </div>
    <div class="searchList">
      <el-form :inline="true"
               :model="searchFrom">
        <el-form-item label="专业">
          <el-select v-model="searchFrom.subject"
                     clearable>
            <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="是否允许调剂">
          <el-select v-model="searchFrom.isAllowAdjust"
                     clearable>
            <el-option label="允许调剂"
                       value="1"></el-option>
            <el-option label="不允许调剂"
                       value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名或手机号">
          <el-input v-model="searchFrom.name"></el-input>
        </el-form-item>
        <!-- 专业actualSubjectId 调剂isAllowAdjust 手机号name -->
        <el-form-item>
          <div class='searchBtn'
               @click='getList'>搜索</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="sigup-core">
      <div class="left">
        <el-table :data='leftList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="乐团声部"
                           prop="subjectName"
                           align='center'>
          </el-table-column>
          <el-table-column label="计划招生"
                           prop="expectedStudentNum"
                           align='center'>
          </el-table-column>
          <el-table-column label="已报名"
                           prop='applyStudentNum'
                           align='center'>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <el-table :data='rightList' ref="multipleTable"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  @selection-change="handleSelectionChange">
           <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="学员姓名"
                           prop="studentName"
                           align='center'>
          </el-table-column>
          <el-table-column label="家长姓名"
                           prop="parentsName"
                           align='center'>
          </el-table-column>
          <el-table-column label="年级班级"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{scope.row.currentGrade+scope.row.currentClass}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别"
                           prop="gender"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{scope.row.gender  | sex}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="服从调剂"
                           prop="isAllowAdjust"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{ scope.row.isAllowAdjust | isAllowAdjust}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报名专业"
                           prop="subjectName"
                           align='center'>
          </el-table-column>
          <el-table-column label="调剂专业"
                           prop="actualSubjectName"
                           align='center'>
          </el-table-column>
          <el-table-column label="联系电话"
                           prop="parentsPhone"
                           align='center'>
          </el-table-column>
           <!-- v-if='status == "PAY"' -->
          <el-table-column label="学员状态"
                           prop="paymentStatus"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{ scope.row.paymentStatus | paymentStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align='center'>
            <template slot-scope="scope">
              <div>
                <el-button type='text'
                           @click='resetSubject(scope.row)'>修改专业</el-button>
                <!-- APPLY -->
                <el-popover v-if='status == "APPLY" || scope.row.remark'
                  placement="top-start"
                  title="备注"
                  width="200"
                  trigger="hover"
                  :content="scope.row.remark">
                  <el-button type="text" slot="reference">备注</el-button>
                </el-popover>
                <!-- PAY -->
                <el-button type='text'
                           v-if='status == "PAY"&&scope.row.paymentStatus==1'
                           @click='lookdetail(scope.row)'>查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px; margin-bottom: 10px;" v-if="status=='APPLY'">
          <el-button @click="onSelectAll">全选/取消</el-button>
          <el-button style="background-color: #14928a;border: 1px solid #14928a;" @click="onPartPayment" type="primary">提前缴费</el-button>
          <!-- <div class='newBand' v-if="status=='APPLY'">允许缴费</div> -->
        </div>
        <pagination :total="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title="修改专业"
               :visible.sync="subjectVisible"
               width="400px">
      <el-form :model="maskForm">
        <el-form-item label="选择专业">
          <el-select v-model="maskForm.subject"
                     clearable>
            <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>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="subjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="okReset">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="订单详情"
               :visible.sync="orderVisible"
               width="600px">
      <el-form :model="orderForm"
               :inline="true">
        <!--     name: '',
        totalAmount: '',
        subject: '',
        subjectFee: '',
        axe: '',
        axePrice: '',
        others: '',
        othersPrice: '' -->
        <el-form-item label="学员姓名">
          <el-input v-model="orderForm.name"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="实缴金额">
          <el-input v-model="orderForm.totalAmount"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="实际专业">
          <el-input v-model="orderForm.subject"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="课程费用">
          <el-input v-model="orderForm.subjectFee"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="选择乐器">
          <el-input v-model="orderForm.axe"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="乐器价格">
          <el-input v-model="orderForm.axePrice"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="教辅组合">
          <el-input v-model="orderForm.others"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="组合价格">
          <el-input v-model="orderForm.othersPrice"
                    disabled=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <!-- <el-button>取 消</el-button> -->
        <el-button type="primary"
                   @click="orderVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="开始缴费"
               :visible.sync="paymentStatus"
               width="400px">
      <el-form ref="paymentForm" :model="paymentForm" label-position="top" :rules="paymentRules">
        <el-form-item label="请设置缴费截止日期" prop="paymentExpireDate">
          <el-date-picker
            v-model="paymentForm.paymentExpireDate"
            type="date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paymentStatus = false">取 消</el-button>
        <el-button type="primary" @click="onStartPayment('paymentForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="报名二维码"
               :visible.sync="qrcodeStatus"
               width="500px">
      <div class="left-code">
        <h2>学员报名连接</h2>
        <div id="qrcode" class="qrcode code"
           ref="qrCodeUrl"></div>
        <p class="code-url" v-if="codeUrl">{{ codeUrl }}</p>
      </div>
      <div class="right-code">
        <h2>报名缴费详情</h2>
        <div id="qrcode2" class="qrcode code"
           ref="qrCodeUrl"></div>
        <p class="code-url" v-if="codeUrl2">{{ codeUrl2 }}</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getTeamRecruit, getintoClass, getStudentList, findSound, musicGroupOpenPay, openPayment, musicGroupFound } from '@/api/buildTeam'
import { resetStudentSubject, getStudentFeeDetail } from '@/api/studentManager'
import QRCode from 'qrcodejs2'
export default {
  components: {
    pagination
  },
  data () {
    return {
      multipleSelection: [], // 
      
      subjectVisible: false,
      orderVisible: false,
      leftList: [],
      rightList: [],
      searchFrom: {
        name: '',
        subject: '', // 专业
        isAllowAdjust: '' // 是否允许调剂
      },
      status: '',
      id: '',
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40] // 选择限制显示条数
      },
      teamName: '',
      maskForm: {
        subject: ''
      },
      activeId: '',
      soundList: [],
      orderForm: {
        name: '',
        totalAmount: '',
        subject: '',
        subjectFee: '',
        axe: '',
        axePrice: '',
        others: '',
        othersPrice: ''
      },
      paymentStatus: false,
      paymentForm: {
        paymentExpireDate: null,
      },
      paymentRules: {
        paymentExpireDate: [{ required: true, message: '请设置缴费截止日期', trigger: 'blur' }]
      },
      qrcodeStatus: false, // 生成二维码
      qrcodes: true,
      qrcode: null,
      codeUrl: null,
      qrcode2: null,
      codeUrl2: null,
    }
  },
  created () {
    // 通过乐团状态判断显示隐藏的东西
    this.status = this.$route.query.status;
    // 通过乐团id 获取乐团招生状态
    this.id = this.$route.query.id;
    this.teamName = this.$route.query.name

  },
  mounted () {

    // 根据乐团id获取学团情况
    getintoClass({ musicGroupId: this.id }).then(res => {
      if (res.code == 200) {
        this.leftList = res.data;
      }
    })
    // 根据乐团id获乐团声部
    findSound({ musicGroupId: this.id }).then(res => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    })
    // 通过乐团id获取乐团学生列表
    this.getList()
  },
  methods: {
    getList () {
      let obj = {
        musicGroupId: this.id,
        actualSubjectId: this.searchFrom.subject || null,
        isAllowAdjust: this.searchFrom.isAllowAdjust || null,
        name: this.searchFrom.name || null
      }
      getStudentList(obj).then(res => {
        if (res.code == 200) {
          this.rightList = res.data.rows
          this.rules.total = res.data.total;
        }
      })
    },
    onStartPayment(formName) { // 开启缴费
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicGroupOpenPay({
            musicGroupId: this.id,
            expireDate: this.paymentForm.paymentExpireDate
          }).then(res => {
            if(res.code == 200) {
              this.$message({
                type: 'success',
                message: '开启成功'
              })
              this.paymentStatus = false
              this.$router.push({
                path: '/business/signupList',
                query: {
                  status: 'PAY',
                  id: this.$route.query.id,
                  name: this.$route.query.name
                }
              })
              this.status = 'PAY'
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
      // this.id
      
    },
    onSelectAll() { // 选中全部
      this.$refs.multipleTable.toggleAllSelection()
    },
    onPartPayment() { // 部分缴费
      let selection = this.multipleSelection
      if(selection.length <= 0) {
        this.$message({
          message: '您还没有选择学生',
          type: 'warning'
        })
        return false
      }
      let ids = []
      selection.forEach(item => {
        ids.push(item.id)
      })

      openPayment({
        ids: ids.join(',')
      }).then(res => {
        if(res.code == 200) {
          this.$message({
            message: '开启成功',
            type: 'success'
          })
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onCreateQRCode() { // 生成报名二维码
      this.qrcodeStatus = true
      let id = this.$route.query.id
      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/#/login?musicGroupId=' + id)
          this.codeUrl = 'http://mstudev.dayaedu.com/#/login?musicGroupId=' + id

          this.qrcode2 = new QRCode('qrcode2', {
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
          this.qrcode2.makeCode('http://mstudev.dayaedu.com/#/login?musicGroupId=' + id)
          this.codeUrl2 = 'http://mstudev.dayaedu.com/#/login?musicGroupId=' + id
        }, 500)
      }
    },
    onGoHome() { // 确认开团
      musicGroupFound({
        musicGroupId: this.$route.query.id
      }).then(res => {
        if(res.code == 200) {
          this.$message({
            type: 'success',
            message: '开启成功'
          })
          this.$router.push({
            path: '/business/teamDetails',
            query: {
              status: 'PROGRESS',
              id: this.$route.query.id,
              name: this.$route.query.name
            }
          })
        }
      })
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    // 修改专业
    resetSubject (row) {
      this.activeId = row.studentId
      this.subjectVisible = true;
      //   resetStudentSubject().then(res=>{]})
    },
    // 确认修改
    okReset () {
      if (!this.maskForm.subject) {
        this.$message.error('请选择调剂专业');
        return
      }
      resetStudentSubject({ musicGroupId: this.id, userId: this.activeId, subId: this.maskForm.subject }).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功');
          this.subjectVisible = false;
          this.maskForm.subject = '';
          this.getList();
        }
      })

    },
    lookdetail (row) {
      console.log(row);
      this.orderVisible = true;
      this.activeId = row.studentId;
      this.orderForm.name = row.studentName;
      this.orderForm.subject = row.subjectName;
      getStudentFeeDetail({ musicGroupId: this.id, studentId: row.studentId }).then(res => {
        if (res.code == 200) {
          this.orderForm.totalAmount = res.data.totalAmount;
          this.orderForm.subjectFee = res.data.courseFee;
          for (let i in res.data.goods) {
            if (res.data.goods[i].goodsType == 'ACCESSORIES') {
              this.orderForm.axe = res.data.goods[i].goodsName;
              this.orderForm.axePrice = res.data.goods[i].musicalFee;
            } else if (res.data.goods[i].goodsType == 'INSTRUMENT') {
              this.orderForm.others = res.data.goods[i].goodsName;
              this.orderForm.othersPrice = res.data.goods[i].musicalFee;
            }
          }
        }
      })

    }
  },
}
</script>
<style lang="scss">
.sigup-container {
  margin-left: 12px;
  .topWrap {
    padding: 18px 58px;
    height: 136px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .msg {
      text-align: right;
      color: #f97215;
      font-size: 32px;
      font-weight: bold;
      padding-top: 30px;
      box-sizing: border-box;
      img {
        width: 36px;
        height: 36px;
        position: relative;
        top: 5px;
        margin-right: 8px;
      }
    }
    h2 {
      height: 48px;
      line-height: 48px;
      position: relative;
      // padding-left: 30px;
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .term {
        height: 32px;
        line-height: 32px;
        border-radius: 24px;
        width: 100px;
        color: #14928a;
        border: 1px solid rgba(20, 146, 138, 1);
        font-size: 14px;
        text-align: center;
        margin-right: 12px;
        &:nth-child(1) {
          margin-left: 47px;
        }
      }
      .term.active {
        color: #fff;
        background-color: #14928a;
      }
      .squrt {
        position: absolute;
        left: -25px;
        top: 8px;
        height: 34px;
        width: 8px;
        background-color: #14928a;
      }
    }
    .btnList {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      div {
        margin-right: 15px;
      }
    }
    .newBand.close {
      background-color: #777;
      border: 1px solid #777;
    }
  }
  .searchList {
    background-color: #fff;
    padding: 0 58px;
  }
  .sigup-core {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      width: 304px;
      background-color: #fff;
      height: 80vh;
      overflow: auto;
    }
    .right {
      margin-left: 12px;
      flex-grow: 1;
    }
  }
}
.el-dialog__body {
  overflow: hidden;
}
.left-code, .right-code {
  width: 50%;
  float: left;
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }

  .qrcode {
    img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
  }
  .code-url {
    font-size: 18px;
    text-align: center;
    padding: 15px 15px 0 15px;
  }
}

</style>