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

<template>
  <div class="sigup-container">
    <div class="topWrap">
      <div>
        <h2>
          <!-- <div class="squrt"></div> -->
          <el-page-header @back="onCancel"
                          :content="teamName + '报名详情'"></el-page-header>
          <!-- {{ teamName }}报名详情 -->
        </h2>
        <div class="btnList">
          <div class='newBand close' v-permission="'musicGroup/cancelMusicGroup'"
               @click="onClose">停止乐团</div>
          <div class='newBand'
               @click="payStart" v-permission="'musicGroup/openPay'"
               v-if="status=='APPLY'">开始缴费</div>
          <div class='newBand' v-permission="'musicGroup/found'"
               @click="onGoHome"
               v-if="status=='PAY'">确认开团</div>
          <div class='newBand' v-permission="'musicGroup/extensionPayment'"
               @click="extendPaymentStatus = true"
               v-if="status=='PAY'">延长缴费</div>
          <div class='newBand'
               @click="onCreateQRCode">报名链接</div>
          <div class='newBand'
               @click="onCreateQRCode2">缴费详情</div>
        </div>
      </div>
      <!--  stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      }, -->
      <p class='msg'
         :class="status=='PAY'? 'pay' : '' "> <img :src="status=='APPLY'?stepImgs.APPLY:stepImgs.PAY"
             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='search'>搜索</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'>
            <template slot-scope="scope">
              <div>
                <p v-if="!isEdit">{{ scope.row.expectedStudentNum }}</p>

                <el-input v-if="isEdit"
                          v-model="scope.row.expectedStudentNum"></el-input>

              </div>
            </template>
          </el-table-column>
          <el-table-column label="已报名"
                           prop='applyStudentNum'
                           align='center'>
          </el-table-column>
          <el-table-column label="已缴费"
                           prop='payNum'
                           align='center'>
          </el-table-column>
        </el-table>
        <div class="btnWrap"
             style="margin-right:20px;  margin-top:20px;">
          <el-button v-if="!isEdit" v-permission="'musicGroup/updateExpectedStudentNum'"
                     @click="isEdit = true">编辑</el-button>
          <el-button v-if="isEdit" v-permission="'musicGroup/updateExpectedStudentNum'"
                     @click="saveIsEdit">保存</el-button>
        </div>
      </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' v-permission="'studentRegistration/batchUpdateSubject'"
                           v-if="scope.row.paymentStatus != 2"
                           @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-permission="'studentRegistration/queryFeeDetail'"
                           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" v-permission="'studentRegistration/openPayment'"
                     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="extendPaymentStatus"
               width="400px">
      <el-form :model="extendForm"
               ref="extendForm"
               :rules="extendRule">
        <el-form-item label="延长时间"
                      prop="expireDate">
          <el-date-picker v-model="extendForm.expireDate"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="extendPaymentStatus = false">取 消</el-button>
        <el-button type="primary"
                   @click="onExtendPayment('extendForm')">确 定</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="300px">
      <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>
    </el-dialog>
    <el-dialog title="缴费详情二维码"
               :visible.sync="qrcodeStatus2"
               width="300px">
      <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 { getintoClass, getStudentList, findSound, musicGroupOpenPay, openPayment, musicGroupFound, extensionPayment, resetPlanNum, cancelMusicGroup } from '@/api/buildTeam'
import { resetStudentSubject, getStudentFeeDetail } from '@/api/studentManager'
import QRCode from 'qrcodejs2'
export default {
  components: {
    pagination
  },
  data () {
    return {
      multipleSelection: [], // 
      isEdit: false,
      subjectVisible: false,
      orderVisible: false,
      leftList: [],
      rightList: [],
      searchFrom: {
        name: '',
        subject: '', // 专业
        isAllowAdjust: '' // 是否允许调剂
      },
      stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      },
      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' }]
      },
      paymentNum: 0, // 缴费了多少人
      qrcodeStatus: false, // 生成二维码
      qrcodes: true,
      qrcode: null,
      codeUrl: null,
      qrcodeStatus2: false, // 生成二维码
      qrcodes2: true,
      qrcode2: null,
      codeUrl2: null,
      extendPaymentStatus: false,
      extendForm: {
        expireDate: null,
      },
      extendRule: {
        expireDate: [{ required: true, message: '请选择延长时间', trigger: 'change' }]
      }
    }
  },
  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: {
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onCancel () {
      this.$router.push('/business/teamDetail')
    },
    payStart () {
      this.paymentStatus = true;
      this.getList();
    },
    getList () {
      let obj = {
        musicGroupId: this.id,
        actualSubjectId: this.searchFrom.subject || null,
        isAllowAdjust: this.searchFrom.isAllowAdjust || null,
        name: this.searchFrom.name || null,
        page: this.rules.page,
        rows: this.rules.limit
      }
      getStudentList(obj).then(res => {
        if (res.code == 200) {
          res.data.rows.forEach(item => {
            // '未开启缴费', '开启缴费', '已缴费'
            if (item.paymentStatus == 2) {
              this.paymentNum += 1
            }
          })
          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.success('开启成功')
              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.success('您还没有选择学生')
        return false
      }
      let ids = []
      selection.forEach(item => {
        ids.push(item.id)
      })

      openPayment({
        ids: ids.join(',')
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('开启成功')
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    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/#/login?musicGroupId=' + id)
          this.codeUrl = 'http://mstudev.dayaedu.com/#/login?musicGroupId=' + id
        }, 500)
      }
    },
    onCreateQRCode2 () { // 生成报名二维码
      this.qrcodeStatus2 = true
      let id = this.$route.query.id
      let teamName = this.$route.query.name
      if (this.qrcodes2) {
        this.qrcodes2 = false
        setTimeout(() => {
          this.qrcode2 = new QRCode('qrcode2', {
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
          this.qrcode2.makeCode('http://mteadev.dayaedu.com/#/order?musicGroupId=' + id + '&musicGroupName=' + teamName)
          this.codeUrl2 = 'http://mteadev.dayaedu.com/#/order?musicGroupId=' + id + '&musicGroupName=' + teamName
        }, 500)
      }
    },
    onGoHome () { // 确认开团
      // 判断是否有学生缴费
      if (this.paymentNum <= 0) {
        this.$message.error('当前缴费人数为0，无法开团')
        return
      }
      this.$confirm(`是否确认开团?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        musicGroupFound({
          musicGroupId: this.$route.query.id
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('开启成功')
            this.$router.push({
              path: '/business/teamSeting',
              query: {
                status: 'PREPARE',
                id: this.$route.query.id,
                name: this.$route.query.name
              }
            })
          }
        })
      }).catch(() => {
      })
    },
    onClose () { // 停止乐团
      this.$confirm('您确定停止乐团吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelMusicGroup({
          musicGroupId: this.$route.query.id
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('停止成功')
            this.$router.push({
              path: '/business/teamDetail'
            })
          }
        })
      }).catch(() => {
      })
    },
    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 = '';
          getintoClass({ musicGroupId: this.id }).then(res => {
            if (res.code == 200) {
              this.leftList = res.data;
            }
          })
          this.getList();
        }
      })

    },
    onExtendPayment (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          extensionPayment({
            musicGroupId: this.id,
            expireDate: this.extendForm.expireDate
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('延长缴费成功')
              this.extendPaymentStatus = false
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      })
    },
    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;
            }
          }
        }
      })

    },
    saveIsEdit () {
      // 提交数据
      // console.log(this.leftList);
      this.isEdit = false;
      resetPlanNum(this.leftList).then(res => {

      })

    }
  },
}
</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.pay {
      color: #f85043;
    }
    .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: 340px;
      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>