dy-admin-manager/src/views/vipClass/vipDetail/components/vipBaseInfo.vue

<template>
  <div class='vip-base'>
    <div class="left">
      <el-form label-position='right'
               label-width="120px"
               :model="topForm">
        <el-form-item label="指导老师">
          <el-input v-model="topForm.teacherCount"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="科目名称">
          <el-input v-model="topForm.subject"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="活动方案">
          <el-input v-model="topForm.active"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程形式">
          <el-input v-model="topForm.status"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="每班人数">
          <el-input v-model="topForm.classNum"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="每课时长">
          <el-input v-model="topForm.classTime"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="教学点名称">
          <el-input v-model="topForm.address"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="线上课数">
          <el-input v-model="topForm.onlineClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="线下课数">
          <el-input v-model="topForm.offlineClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="报名开始时间">
          <el-input v-model="topForm.startTime"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="报名结束时间">
          <el-input v-model="topForm.endTime"
                    disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <el-form label-position='right'
               label-width="120px"
               :model="rightForm">
        <el-form-item label="总课时数">
          <el-input v-model="rightForm.allClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程单价(线上)">
          <el-input v-model="rightForm.onlineClass"
                    type="number"
                    :disabled='!isreset'></el-input>
        </el-form-item>
        <el-form-item label="课程单价(线下)">
          <el-input v-model="rightForm.offlineClass"
                    type="number"
                    :disabled='!isreset'></el-input>
        </el-form-item>
        <el-form-item label="课程总价">
          <el-input v-model="rightForm.allPrice"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="当前课程进度">
          <el-input v-model="rightForm.progress"
                    disabled></el-input>
        </el-form-item>
      </el-form>
      <el-button v-if="!isreset"
                 v-permission="'vipGroupManage/updateVipBaseInfo'"
                 class="resetBtn"
                 type="primary"
                 @click="resetPrice">修改</el-button>
      <el-button class="resetBtn"
                 v-permission="'vipGroupManage/updateVipBaseInfo'"
                 v-if="isreset"
                 type="primary"
                 @click="submitBtn">确定</el-button>
    </div>
  </div>
</template>
<script>
import { getVipGroupDetail, findVipGroupStudents, leaveSchool, updateVipBaseInfo } from '@/api/vipSeting'
export default {
  data () {
    return {
      topForm: {
        teacherCount: '',
        subject: '', // 科目名称
        active: '', // 活动名称
        status: '', //课程形式
        classNum: "", // 每班人数
        classTime: '', // 每课时长
        address: '', // 教学点名称
        onlineClass: '', //线上课数
        offlineClass: '', //线下课数
        startTime: '', // 报名开始时间
        endTime: ''
      },
      rightForm: {
        allClass: '',
        onlineClass: '',
        offlineClass: '',
        allPrice: '',
        progress: ''
      },
      tableList: [],
      isreset: false
    }
  }, mounted () {
    let id = this.$route.query.id;
    this.id = id;
    // 根据id 获取vip详情
    this.getVipGroupDetail(id);
    // 根据id 获取vip学员
    this.getStudents();
  },
  methods: {
    getVipGroupDetail (id) {
      getVipGroupDetail({ vipGroupId: id }).then(res => {
        if (res.code == 200) {
          /**
           *  teacherCount: '',
          subject: '', // 科目名称
          active: '', // 活动名称
          status: '', //课程形式
          classNum: "", // 每班人数
          classTime: '', // 每课时长
          address: '', // 教学点名称
          onlineClass: '', //线上课数
          offlineClass: '', //线下课数
          startTime: '', // 报名开始时间
           * 
           */
          this.topForm.teacherCount = res.data.userName;
          this.topForm.subject = res.data.subjectName  //科目名称
          this.topForm.active = res.data.vipGroupActivityName;
          this.topForm.status = res.data.categoryName
          this.topForm.classNum = res.data.studentNum;
          // totalClassTimes; 总课时数
          this.topForm.classTime = res.data.singleClassMinutes;
          //  教学点
          this.topForm.address = res.data.teacherSchoolName
          this.topForm.onlineClass = res.data.onlineClassesNum;
          this.topForm.offlineClass = res.data.offlineClassesNum;
          // endTime
          this.topForm.startTime = res.data.registrationStartTime;
          this.topForm.endTime = res.data.paymentExpireDate;
          this.rightForm.allClass = res.data.totalClassTimes;
          this.rightForm.onlineClass = res.data.onlineClassesUnitPrice;
          this.rightForm.offlineClass = res.data.offlineClassesUnitPrice;
          this.rightForm.allPrice = res.data.totalPrice;
          this.rightForm.progress = res.data.currentClassTimes + '/' + res.data.totalClassTimes;
          this.$emit('getName', res.data.name);
          /**
           * allClass: '',
          onlineClass: '',
          offlineClass: '',
          allPrice: '',
          progress: ''
           */
        }
      });
    },
    getStudents () {
      findVipGroupStudents({ vipGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
        }
      })
    },
    leaveSchool (scope) {
      let studentId = scope.row.id;
      let vipGroupId = this.id;
      leaveSchool({ studentId, vipGroupId }).then(res => {
        if (res.code == 200) {
          this.$message.success('退学成功')
          scope._self.$refs[scope.$index].doClose();
          this.getStudents();

        }
      })

    },
    resetPrice () {
      this.isreset = true;
    },
    submitBtn () {
      // 提交 
      /**
       * this.rightForm.onlineClass = res.data.onlineClassesUnitPrice;
        this.rightForm.offlineClass = res.data.offlineClassesUnitPrice;
       */
      let onlineClassesUnitPrice = this.rightForm.onlineClass;
      let offlineClassesUnitPrice = this.rightForm.offlineClass
      updateVipBaseInfo({ id: this.id, onlineClassesUnitPrice, offlineClassesUnitPrice }).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.isreset = false;
          this.getVipGroupDetail(this.id);
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.vip-base {
  /deep/.el-select {
    width: 180px !important;
  }
  /deep/.el-date-editor.el-input,
  /deep/.el-date-editor.el-input__inner {
    width: 180px !important;
  }
  /deep/.el-input {
    width: 180px !important;
  }

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    width: 400px;
  }
  .tableWrap {
    margin-top: 40px;
    h4 {
      font-size: 16px;
      font-weight: normal;
      margin-bottom: 20px;
    }
  }
  .right {
    clear: both;
    .resetBtn {
      margin-top: 30px;
      float: right;
    }
  }
}
</style>