10:11

vip 除开排课BUG

src/api/vipSeting.js

@@ -122,4 +122,75 @@ export function removeVipActive (data) {
     method: 'POST',
     data: qs.stringify(data)
   })
-}
+}
+
+// 获取vip列表
+export function getVipList (data) {
+  return request({
+    url: '/web-server/vipGroupManage/queryAll',
+    method: 'GET',
+    params: data
+  })
+}
+// 根据id获取vip详情
+export function getVipGroupDetail (data) {
+  return request({
+    url: `/web-server/vipGroupManage/getVipGroupDetail`,
+    method: 'GET',
+    params: data
+  })
+}
+
+// 根据vipid获取学员
+export function findVipGroupStudents (data) {
+  return request({
+    url: '/web-server/vipGroupManage/findVipGroupStudents',
+    method: 'GET',
+    params: data
+  })
+}
+
+// 根据vipid和学生id 退学
+export function leaveSchool (data) {
+  return request({
+    url: '/web-server/vipGroupManage/applyRefundForStudent',
+    method: 'POST',
+    data: qs.stringify(data)
+  })
+}
+
+// 获取vip教学记录
+export function findVipGroupTeachingRecord (data) {
+  return request({
+    url: '/web-server/vipGroupManage/findVipGroupTeachingRecord',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获取vip财务信息
+export function getVipGroupSalarys (data) {
+  return request({
+    url: '/web-server/vipGroupManage/findVipGroupSalarys',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获取当前课程上课学员
+export function getStudyStudents (data) {
+  return request({
+    url: '/web-server/vipGroupManage/findVipGroupAttendanceStudents',
+    method: 'get',
+    params: data
+  })
+}
+
+// vip课时调整
+export function resetVipClass (data) {
+  return request({
+    url: '/web-server/vipGroupManage/classStartDateAdjust',
+    method: 'POST',
+    params: data
+  })
+}

src/router/index.js

@@ -150,13 +150,13 @@ export const constantRoutes = [
         path: 'vipDetail',
         name: 'vipDetail',
         component: () => import('@/views/vipClass/vipDetail/index'),
-        meta: { title: '调整记录' }
+        meta: { title: 'vip课详情' }
       },
       {
         path: 'resetClass',
         name: 'resetClass',
         component: () => import('@/views/vipClass/resetClasss'),
-        meta: { title: 'vip课详情' }
+        meta: { title: '调整记录' }
       }
     ]
   },

src/views/buildVip/index.vue

@@ -197,20 +197,21 @@
         <el-form-item label="循环周次"
                       prop="week">
           <el-select v-model="maskForm.week">
-            <el-option label="周一"
-                       value="周一"></el-option>
-            <el-option label="周二"
-                       value="周二"></el-option>
-            <el-option label="周三"
-                       value="周三"></el-option>
-            <el-option label="周四"
-                       value="周四"></el-option>
-            <el-option label="周五"
-                       value="周五"></el-option>
-            <el-option label="周六"
-                       value="周六"></el-option>
-            <el-option label="周日"
-                       value="周日"></el-option>
+            <el-option label="星期日"
+                       value="0"></el-option>
+            <el-option label="星期一"
+                       value="1"></el-option>
+            <el-option label="星期二"
+                       value="2"></el-option>
+            <el-option label="星期三"
+                       value="3"></el-option>
+            <el-option label="星期四"
+                       value="4"></el-option>
+            <el-option label="星期五"
+                       value="5"></el-option>
+            <el-option label="星期六"
+                       value="6"></el-option>
+
           </el-select>
         </el-form-item>
         <el-form-item label="上课时间"
@@ -251,16 +252,18 @@
             </div>
           </div>
         </div>
+        <div style="margin:20px 0">
+          <el-date-picker v-model="maskForm.courseStart"
+                          type="date"
+                          placeholder="请选择开课时间">
+          </el-date-picker>
+        </div>
 
-        <el-date-picker v-model="maskForm.courseStart"
-                        type="date"
-                        placeholder="请选择时间">
-        </el-date-picker>
         <div slot="footer"
              class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
           <el-button type="primary"
-                     @click="dialogFormVisible = false">确 定</el-button>
+                     @click="setTimeTable">确 定</el-button>
         </div>
       </div>
     </el-dialog>
@@ -318,7 +321,9 @@ export default {
       attribute1: '',
       attribute2: '',
       lookList: [], // 展示课表
-      timeTable: [] // 真正的课表
+      timeTable: [], // 真正的课表
+      giveNum: '',
+      weekDay: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
     }
   },
   mounted () {
@@ -354,6 +359,7 @@ export default {
       let giveNum;
       if (this.hotType == 'GIVE_CLASS') {
         giveNum = parseInt((parseInt(offline) + parseInt(online)) / this.attribute1 * this.attribute2);
+        this.giveNum = giveNum || 0;
         return (parseInt(offline) + parseInt(online) + '+' + giveNum) || '';
       }
       return parseInt(offline) + parseInt(online) || ''
@@ -426,9 +432,9 @@ export default {
     // 点击确插入课表
     addWeek () {
       let courseType = this.maskForm.type;
-      let week = this.maskForm.week;
+      // let week = ;
       let startTime = this.maskForm.startTime;
-      if (!courseType || !week || !startTime) {
+      if (!courseType || !this.maskForm.week || !startTime) {
         this.$message({
           type: 'error',
           message: '请填写完成信息'
@@ -449,56 +455,83 @@ export default {
           break;
         }
       }
-      if (this.lookList.length <= 0) {
-        this.lookList.push({
-          'type': str,
-          'week': week,
-          'startTime': startTime,
-          'endTime': endTime,
-          'time': startTime + '-' + endTime,
-          'id': Date.now()
-        })
-      } else {
-        for (let i in this.lookList) {
-          console.log('进入循环')
-          // 判断周几相等
-          if (this.lookList[i].week == week) {
+      // if (this.lookList.length == 0) {
+      //   this.lookList.push({
+      //     'type': str,
+      //     'week': this.weekDay[this.maskForm.week],
+      //     'weekDay': this.maskForm.week,
+      //     'startTime': startTime,
+      //     'endTime': endTime,
+      //     'time': startTime + '-' + endTime,
+      //     'id': Date.now()
+      //   })
 
-            // 如果相等  判断时间 是否在时间段
-            if (this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) || this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime)) {
-              // 提示语 不添加
-              this.$message({
-                type: 'error',
-                message: '该时间段已排课请重选时间'
-              })
-              return
-            } else {
-              this.lookList.push({
-                'type': str,
-                'week': week,
-                'startTime': startTime,
-                'endTime': endTime,
-                'time': startTime + '-' + endTime,
-                'id': Date.now()
-              })
-            }
-          } else {
-            // 不等就直接添加
-            console.log(11111);
-            this.lookList.push({
-              'type': str,
-              'week': week,
-              'startTime': startTime,
-              'endTime': endTime,
-              'time': startTime + '-' + endTime,
-              'id': Date.now()
-            })
-          }
+      // } else {
+      //   let flag = false;
+      //   for (let i in this.lookList) {
+      //     // 判断周几相等
+      //     if (this.lookList[i].weekDay == this.maskForm.week && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime)) {
+      //       this.lookList.push({
+      //         'type': str,
+      //         'week': this.weekDay[this.maskForm.week],
+      //         'weekDay': this.maskForm.week,
+      //         'startTime': startTime,
+      //         'endTime': endTime,
+      //         'time': startTime + '-' + endTime,
+      //         'id': Date.now()
+      //       })
+      //     } else if (this.lookList[i].weekDay == this.maskForm.week && (this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) || this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime))) {
+      //       this.$message({
+      //         type: 'error',
+      //         message: '该时间段已排课请重选时间'
+      //       })
+      //       return
+      //     }
+      //     // 如果相等  判断时间 是否在时间段
+      //     // if () {
+      //     //   // 提示语 不添加
+
+      //     // } else {
 
+      //     //   console.log('周相等但时间段不等添加');
+      //     //   return
+      //     // }
+      //     // } else {
+      //     //   // 不等就直接添加
+      //     //   // 判断一下当前星期 有没有 没有就添加
+      //     //   let arr = [];
+      //     //   for (let j in this.lookList) {
+      //     //     arr.push(parseInt(this.lookList[j].weekDay))
+      //     //   }
+      //     //   // 去重
+      //     //   arr = Array.from(new Set(arr))
+      //     //   console.log(arr, this.maskForm.week);
+      //     //   if (arr.indexOf(parseInt(this.maskForm.week)) == -1) {
+      //     //     this.lookList.push({
+      //     //       'type': str,
+      //     //       'week': this.weekDay[this.maskForm.week],
+      //     //       'weekDay': this.maskForm.week,
+      //     //       'startTime': startTime,
+      //     //       'endTime': endTime,
+      //     //       'time': startTime + '-' + endTime,
+      //     //       'id': Date.now()
+      //     //     })
+      //     //   } else {
+
+      //     //   }
+
+      //     //   return
+      //     // }
+
+      //   }
+      // }
+      let flag = false;
+      for (let i in this.lookList) {
+        if (this.lookList[i].weekDay == this.maskForm.week) {
+          //  f
         }
       }
 
-
       // console.log(this.lookList);
     },
     // 分钟小时相加减
@@ -552,6 +585,106 @@ export default {
           this.lookList.splice(i, 1);
         }
       }
+    },
+    setTimeTable () {
+      // 拿到线上课数与线下课数 以及
+      let online = parseInt(this.centerForm.onlineCourseNum);
+      let offline = parseInt(this.centerForm.offlineCourseNum);
+      let giveNum = this.giveNum;
+      let giveClassType = this.centerForm.radio;
+      if (giveClassType == 'online') {
+        // 线上
+        online += giveNum;
+      } else {
+        offline += giveNum;
+      }
+
+      // 根据周算课
+      // 获取选择到的时间是周几
+      // 获取looklist里 线上课是周几上 周一 周二
+      // 线下课时周几上  周三周四
+      // 找到最近的周几的日期 排课 判断当前所排的课时线上或者线下
+      // 没生成一条上课记录 所对应的 线上线下课次数-1; 当线上 线下课都为0时 这个数组生成
+      let date = this.maskForm.courseStart;
+      let date1 = this.maskForm.courseStart;
+      let startWeekday = this.maskForm.courseStart.getDay();
+      let onlineList = [];
+      let offlineList = [];
+      for (let i in this.lookList) {
+        if (this.lookList[i].type == '线上课') {
+          onlineList.push({ week: this.lookList[i].weekDay, date: this.lookList[i] })
+        }
+        if (this.lookList[i].type == '线下课') {
+          offlineList.push({ week: this.lookList[i].weekDay, date: this.lookList[i] })
+        }
+      }
+      // 获取要排课的总数  获取每周要排多少次
+      console.log(offline)
+      console.log(online)
+      while (online >= 1) {
+        // 排线上课g
+        for (let i in onlineList) {
+          let num;
+          onlineList[i].week - date.getDay() >= 0 ? num = onlineList[i].week - date.getDay() : num = onlineList[i].week - date.getDay() + 7// +差值的天数://差值的天数+7
+          // console.log(num);
+          let dataStr = this.getThinkDate(date, num);
+          this.timeTable.push({
+            'classDate': dataStr,
+            'actualTeacherId': this.leftForm.teacher,
+            'startClassTime': dataStr + ' ' + onlineList[i].date.startTime,
+            "endClassTime": dataStr + ' ' + onlineList[i].date.endTime,
+            "teachMode": 'ONLINE'
+          })
+          online--;
+          if (online == 0) return
+        }
+        // 加一周
+        date.setDate(date.getDate() + 7);
+      }
+      while (offline >= 1) {
+        // 排线下课
+        for (let i in offlineList) {
+          let num;
+          offlineList[i].week - startWeekday > 0 ? num = offlineList[i].week - startWeekday : num = offlineList[i].week - startWeekday + 7// +差值的天数://差值的天数+7
+          let dataStr = this.getThinkDate(date1, num);
+          this.timeTable.push({
+            'classDate': dataStr,
+            'actualTeacherId': this.leftForm.teacher,
+            'startClassTime': dataStr + ' ' + offlineList[i].date.startTime,
+            "endClassTime": dataStr + ' ' + offlineList[i].date.endTime,
+            "teachMode": 'ONLINE'
+          })
+          offline--;
+          if (offline == 0) return
+        }
+        // 加一周
+        date1.setDate(date1.getDate() + 7);
+      }
+      console.log(this.timeTable);
+    },
+    getThinkDate (date, num) {
+
+      let Stamp = date;
+      Stamp.setDate(date.getDate() + num) // 获取当前月数的第几天
+      // console.log(date.getMonth() + 1)
+      // console.log(Stamp.getMonth() + 1)
+      var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
+      var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
+      var mvar = '';
+      if (month < 10) {
+        mvar = '0' + month;
+      } else {
+        mvar = month + '';
+      }
+      var day = Stamp.getDate();
+      var dvar = '';
+      if (day < 10) {
+        dvar = '0' + day;
+      } else {
+        dvar = day + '';
+      }
+      console.log(year + "-" + mvar + '-' + dvar);
+      return year + "-" + mvar + '-' + dvar;
     }
   },
 }

src/views/vipClass/vipDetail/components/fnanceInfo.vue

@@ -4,22 +4,22 @@
     <div class="headWrap">
       <div class="left">
         <div class="headItem">
-          <p>课程单价: <span> 张三，李四</span></p>
+          <p>课程总价: <span> {{ totalPrice }}</span></p>
         </div>
         <div class="headItem">
-          <p>课程收入: <span> 张三，李四</span></p>
+          <p>扣费笔数: <span> {{ feeDeductionNum }}</span></p>
         </div>
         <div class="headItem">
-          <p>课酬标准: <span> 张三，李四</span></p>
+          <p>线上课课酬: <span> {{ onlineClassesUnitPrice }}</span></p>
         </div>
         <div class="headItem">
-          <p>扣费笔数: <span> 张三，李四</span></p>
+          <p>课酬总数: <span> {{ totalSalary }}</span></p>
         </div>
         <div class="headItem">
-          <p>扣费总额: <span> 张三，李四</span></p>
+          <p>扣费总额: <span> {{ totalFeeDeduction }}</span></p>
         </div>
         <div class="headItem">
-          <p>课酬总额: <span> 张三，李四</span></p>
+          <p>线下课课酬: <span> {{offlineClassesUnitPrice}}</span></p>
         </div>
       </div>
     </div>
@@ -28,44 +28,124 @@
              :model="searchForm">
       <el-form-item label="时间范围">
         <el-date-picker v-model="searchForm.time"
-                        type="date"
-                        placeholder="选择日期">
+                        style="width:400px;"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        value-format="yyyy-MM-dd">
         </el-date-picker>
       </el-form-item>
+      <el-form-item>
+        <el-button @click="getList">搜索</el-button>
+      </el-form-item>
     </el-form>
     <div class="tableWrap">
       <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                 :data='tableList'>
-        <el-table-column label="上课时间">
-        </el-table-column>
-        <el-table-column label="星期几">
-        </el-table-column>
-        <el-table-column label="当前课次">
-        </el-table-column>
-        <el-table-column label="上课学员">
+        <el-table-column label="上课时间"
+                         prop="classDate">
         </el-table-column>
-        <el-table-column label="是否赠送">
+        <el-table-column label="课时类型"
+                         prop="teachMode">
+          <template slot-scope="scope">
+            <div>
+              {{ scope.row.teachMode | fitterteachMode }}
+            </div>
+          </template>
         </el-table-column>
-        <el-table-column label="扣费学员数">
+        <el-table-column label="扣费总额"
+                         prop="deductionFee">
         </el-table-column>
-        <el-table-column label="扣费总额">
+        <el-table-column label="老师课酬"
+                         prop="actualSalary">
         </el-table-column>
-        <el-table-column label="老师课酬">
-        </el-table-column>
-        <el-table-column label="扣费状态">
+        <el-table-column label="结算状态"
+                         prop="isSalary">
+          <template slot-scope="scope">
+            <div>
+              {{ scope.row.isSalary | fitterisSalary }}
+            </div>
+          </template>
         </el-table-column>
       </el-table>
+      <!-- 分页器 -->
+      <pagination :total="rules.total"
+                  :page.sync="rules.page"
+                  :limit.sync="rules.limit"
+                  :page-sizes="rules.page_size"
+                  @pagination="getList" />
     </div>
   </div>
 </template>
 <script>
+import pagination from '@/components/Pagination/index'
+import { getVipGroupSalarys, getVipGroupDetail } from '@/api/vipSeting'
 export default {
+  components: { pagination },
   data () {
     return {
       searchForm: {
-        time: ''
+        time: []
+      },
+      tableList: [],
+      id: '',
+      onlineClassesUnitPrice: '',
+      totalPrice: '',
+      offlineClassesUnitPrice: '',
+      totalFeeDeduction: '', // 扣费总额
+      feeDeductionNum: '', //扣费笔数
+      totalSalary: '', // 课酬总额
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
       },
-      tableList: []
+    }
+  },
+  mounted () {
+    let id = this.$route.query.id || 1;
+    this.id = id;
+    this.getList();
+    // 获取vip详情
+    getVipGroupDetail({ vipGroupId: this.id }).then(res => {
+      if (res.code == 200) {
+        // 课程总价
+        // 线上课课酬
+        // 线下课课酬
+        this.totalPrice = res.data.totalPrice;
+        this.onlineClassesUnitPrice = res.data.onlineClassesUnitPrice;
+        this.offlineClassesUnitPrice = res.data.offlineClassesUnitPrice;
+
+
+      }
+    })
+  },
+  methods: {
+    getList () {
+      getVipGroupSalarys({ vipGroupId: this.id, organId: this.$store.getters.organ, pahe: this.rules.page, rows: this.rules.limit, startTime: this.searchForm.time[0], endTime: this.searchForm.time[1] }).then(res => {
+        if (res.code == 200) {
+          this.tableList = res.data.pageInfo.rows;
+          this.totalFeeDeduction = res.data.baseInfo.totalFeeDeduction;
+          this.feeDeductionNum = res.data.baseInfo.feeDeductionNum;
+          this.totalSalary = res.data.baseInfo.totalSalary;
+        }
+      })
+    }
+  },
+  filters: {
+    fitterisSalary (val) {
+      let arr = ['未结算', '已结算']
+      return arr[val]
+    },
+    fitterteachMode (val) {
+      if (val == 'ONLINE') {
+        return '线上课'
+      } else if (val == 'OFFLINE') {
+        return '线下课'
+      }
     }
   }
 }

src/views/vipClass/vipDetail/components/teacherRecord.vue

@@ -4,16 +4,16 @@
     <div class="headWrap">
       <div class="left">
         <div class="headItem">
-          <p>未上(人):<span>12345</span></p>
+          <p>未上课时:<span>{{ totalClassTimes }}</span></p>
         </div>
         <div class="headItem">
-          <p>已上(人):<span>12345</span></p>
+          <p>已上课时:<span>{{ currentClassTimes }}</span></p>
         </div>
         <div class="headItem">
-          <p>已结算(人):<span>12345</span></p>
+          <p>已结算:<span>{{ isSalaryNum }}</span></p>
         </div>
         <div class="headItem">
-          <p>被投诉(人):<span>12345</span></p>
+          <p>被投诉:<span>{{ complaintsNum }}</span></p>
         </div>
       </div>
       <div class="right">
@@ -24,55 +24,295 @@
              class="searchForm"
              v-model="searchForm">
       <el-form-item>
-        <el-select v-model="searchForm.name"
+        <el-select v-model="searchForm.type"
                    placeholder="课程类型">
-          <el-option label="哈哈哈"
-                     value="1"></el-option>
+          <el-option label="线上课"
+                     value="ONLINE"></el-option>
+          <el-option label="线下课"
+                     value="OFFLINE"></el-option>
         </el-select>
       </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.status"
+                   placeholder="课程状态">
+          <el-option label="未开始"
+                     value="NOT_START"></el-option>
+          <el-option label="进行中"
+                     value="UNDERWAY"></el-option>
+          <el-option label="已结束"
+                     value="OVER"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-date-picker v-model="searchForm.time"
+                        style="width:400px"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList">搜索</el-button>
+      </el-form-item>
     </el-form>
-    <!-- 查询列表 -->
-    <div class="searchWrap">
-      <p>查询条件:</p>
-      <div class="searchItem"
-           @click="closeSearch(item)"
-           v-for="(item,index) in searchLsit">
-        {{ item.key }}
-        <i class="el-icon-close"></i>
-      </div>
-    </div>
     <!-- 列表 -->
     <div class="tableWrap">
       <el-table :data='tableList'>
         <el-table-column align='center'
-                         label="上课时间">
+                         label="上课时间"
+                         prop="startClassTime">
         </el-table-column>
         <el-table-column align='center'
-                         label="课程类型">
+                         label="课程类型"
+                         prop="teachMode">
+          <template slot-scope="scope">
+            <div>
+              <p>{{scope.row.teachMode | fitterTeachMode  }}</p>
+            </div>
+          </template>
         </el-table-column>
-        <el-table-column align='center'
+        <!-- <el-table-column align='center'
                          label="当前课次">
+        </el-table-column> -->
+        <el-table-column align='center'
+                         label="上课学员数"
+                         prop="attendanceNum">
         </el-table-column>
         <el-table-column align='center'
-                         label="上课学员">
+                         prop="status"
+                         label="课程状态">
+          <template slot-scope="scope">
+            <div>
+              <p>{{scope.row.status | fitterStatus  }}</p>
+            </div>
+          </template>
         </el-table-column>
         <el-table-column align='center'
-                         label="课程记录">
+                         prop="isSalary"
+                         label="结算状态">
+          <template slot-scope="scope">
+            <div>
+              <p>{{scope.row.isSalary | fitterisSalary  }}</p>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column align='center'
+                         label="操作">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text"
+                         @click="lookStudents(scope.row)">查看学员</el-button>
+              <el-button type="text"
+                         @click="resetClass(scope.row)">课程调整</el-button>
+            </div>
+          </template>
         </el-table-column>
       </el-table>
     </div>
+    <pagination :total="rules.total"
+                :page.sync="rules.page"
+                :limit.sync="rules.limit"
+                :page-sizes="rules.page_size"
+                @pagination="getList" />
+    <el-dialog title="上课学员"
+               :visible.sync="studentVisible"
+               width="30%"
+               :before-close="handleClose">
+      <span v-for="(item,index) in studentList"
+            :key="index"
+            style="margin-left:10px;">{{item}}</span>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button type="primary"
+                   @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="课时调整"
+               :visible.sync="courseVisible"
+               width="420px">
+      <el-form :model="maskForm"
+               :rules="maskrules"
+               ref='maskForm'>
+        <el-form-item label="选择上课日期"
+                      prop="date">
+          <el-date-picker type="date"
+                          value-format="yyyy-MM-dd"
+                          v-model="maskForm.date"
+                          placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="开始时间"
+                      prop="startTime">
+          <el-time-picker v-model="maskForm.startTime"
+                          format='HH:mm'
+                          value-format='HH:mm'
+                          :picker-options="{
+                          selectableRange: '00:00:00 - 23:59:00'
+                            }"
+                          placeholder="选择时间">
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="结束时间"
+                      prop="endTime">
+          <el-time-picker v-model="maskForm.endTime"
+                          format='HH:mm'
+                          value-format='HH:mm'
+                          :picker-options="{
+                          selectableRange: '00:00:00 - 23:59:00'
+                            }"
+                          placeholder="选择时间">
+          </el-time-picker>
+        </el-form-item>
+
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button type="primary"
+                   @click="resetCourse">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
+import pagination from '@/components/Pagination/index'
+import { findVipGroupTeachingRecord, getStudyStudents, resetVipClass } from '@/api/vipSeting'
 export default {
+  components: { pagination },
   name: 'teacherRecord',
   data () {
     return {
       searchForm: {
-        name: ''
+        type: '',
+        status: '',
+        timer: []
       },
       searchLsit: [],
-      tableList: []
+      tableList: [],
+      id: '',
+      complaintsNum: '', //投诉数
+      currentClassTimes: '', //当前课数
+      isSalaryNum: '', // 已结算
+      totalClassTimes: '',// 未上颗数
+      studentVisible: false, // 查看上课学员数的弹窗
+      courseVisible: false, // 课时调整弹窗
+      studentList: [],
+      maskForm: {
+        data: '',
+        startTime: '',
+        endTime: '',
+        status: '',
+        type: ''
+
+      },
+      activeId: '',
+      maskrules: {
+        date: [{ required: true, message: '请选择修改日期', trigger: 'blur' }],
+        startTime: [{ required: true, message: '请选择开始', trigger: 'blur' }],
+        endTime: [{ required: true, message: '请选择结束', trigger: 'blur' }]
+      },
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+    }
+  },
+  mounted () {
+    let id = this.$route.query.id || 1;
+    this.id = id;
+    // 获取vip教学记录
+    this.getList()
+
+  }, methods: {
+    getList () {
+      findVipGroupTeachingRecord({
+        vipGroupId: this.id,
+        page: this.rules.page,
+        rows: this.rules.limit,
+        startTime: this.searchForm.startTime,
+        endTime: this.searchForm.endTime,
+        status: this.searchForm.status,
+        teachMode: this.searchForm.type      }).then(res => {
+        if (res.code == 200) {
+          this.complaintsNum = res.data.baseInfo.complaintsNum;
+          this.currentClassTimes = res.data.baseInfo.currentClassTimes;
+          this.isSalaryNum = res.data.baseInfo.isSalaryNum;
+          this.totalClassTimes = res.data.baseInfo.totalClassTimes - this.currentClassTimes;
+          this.tableList = res.data.pageInfo.rows;
+        }
+      })
+    },
+    lookStudents (row) {
+      let id = row.id;
+      getStudyStudents({ courseScheduleId: id }).then(res => {
+        if (res.code == 200) {
+          this.studentList = res.data;
+          this.studentVisible = true;
+        }
+      })
+    },
+    handleClose () {
+      this.studentList = [];
+      this.studentVisible = false;
+    },
+    resetClass (row) {
+      this.courseVisible = true;
+      // 弹出弹窗
+      this.activeId = row.id;
+      // resetVipClass().then()
+
+    },
+    resetCourse () {
+      console.log(this.maskForm.timer);
+      // 点击弹窗效验
+      this.$refs['maskForm'].validate(valid => {
+        if (valid) {
+          // 效验成功
+          resetVipClass({ id: this.activeId, classDate: this.maskForm.date, startClassTime: this.maskForm.date + ' ' + this.maskForm.startTime, endClassTime: this.maskForm.date + ' ' + this.maskForm.endTime }).then(
+            res => {
+              if (res.code == 200) {
+                this.$message({
+                  type: 'success',
+                  message: '调整成功'
+                })
+                this.getList()
+                this.courseVisible = false;
+                this.$refs['maskForm'].resetFields();
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: res.msg
+                })
+              }
+            }
+          )
+        }
+      })
+
+    }
+  },
+  filters: {
+    fitterisSalary (val) {
+      let arr = ['未结算', '已结算'];
+      return arr[val]
+    },
+    fitterTeachMode (val) {
+      if (val == 'ONLINE') {
+        return '线上课'
+      } else if (val == 'OFFLINE') {
+        return '线下课'
+      }
+    },
+    fitterStatus (val) {
+      if (val == 'NOT_START') {
+        return '未开始'
+      } else if (val == 'UNDERWAY') {
+        return '进行中'
+      } else if (val == 'OVER') {
+        return '已结束'
+      }
     }
   }
 }

src/views/vipClass/vipDetail/components/vipBaseInfo.vue

@@ -1,105 +1,223 @@
 <template>
   <div class='vip-base'>
-    <el-form :inline="true"
-             :model="topForm">
-      <el-form-item label="指导老师">
-        <el-input v-model="topForm.teacherCount"></el-input>
-      </el-form-item>
-      <el-form-item label="所属分部">
-        <el-select v-model="topForm.section">
-          <el-option value="1"
-                     label="哈哈哈"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="申请时间">
-        <el-date-picker v-model="topForm.apply"
-                        type="date"
-                        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="课程名字">
-        <el-input v-model="topForm.className"></el-input>
-      </el-form-item>
-      <el-form-item label="科目名称">
-        <el-select v-model="topForm.cuorse">
-          <el-option value="1"
-                     label="哈哈哈"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开课时间">
-        <el-date-picker v-model="topForm.startTime"
-                        type="date"
-                        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="班级名称">
-        <el-input v-model="topForm.className"></el-input>
-      </el-form-item>
-      <el-form-item label="课时进度">
-        <el-input v-model="topForm.progress"></el-input>
-      </el-form-item>
-      <el-form-item label="有效期">
-        <el-date-picker v-model="topForm.validity"
-                        type="date"
-                        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="活动方案">
-        <el-select v-model="topForm.active">
-          <el-option value="1"
-                     label="哈哈哈"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="课程类型">
-        <el-input v-model="topForm.type"></el-input>
-      </el-form-item>
-      <el-form-item label="安排课时">
-        <el-input v-model="topForm.course"></el-input>
-      </el-form-item>
-      <el-form-item label="课程单价">
-        <el-input v-model="topForm.price"></el-input>
-      </el-form-item>
-    </el-form>
-    <div class="tableWrap"
-         style="width: 100%">
-      <el-table :data='tableList'>
-        <el-table-column label="学员名单"
-                         width="180">
-        </el-table-column>
-        <el-table-column label="已上课时"
-                         width="180">
-        </el-table-column>
-        <el-table-column label="操作">
-        </el-table-column>
-      </el-table>
+    <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"
+                    disabled></el-input>
+        </el-form-item>
+        <el-form-item label="课程单价(线下)">
+          <el-input v-model="rightForm.offlineClass"
+                    disabled></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>
+      <div class="tableWrap">
+        <h4>vip课学员名单</h4>
+        <el-table :data='tableList'
+                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+          <el-table-column label="学员名单"
+                           prop="userName"
+                           width="180">
+          </el-table-column>
+          <el-table-column label="操作"
+                           width="180">
+            <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="leaveSchool(scope)">确定</el-button>
+                  </div>
+                  <el-button type="text"
+                             slot="reference">退学</el-button>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
   </div>
 </template>
 <script>
+import { getVipGroupDetail, findVipGroupStudents, leaveSchool } from '@/api/vipSeting'
 export default {
   data () {
     return {
       topForm: {
         teacherCount: '',
-        section: '',
-        apply: '',
-        className: '',
-        cuorse: '',
-        startTime: '',
-        progress: '',
-        validity: '',
-        active: '',
-        type: '',
-        course: '',
-        price: ''
-
+        subject: '', // 科目名称
+        active: '', // 活动名称
+        status: '', //课程形式
+        classNum: "", // 每班人数
+        classTime: '', // 每课时长
+        address: '', // 教学点名称
+        onlineClass: '', //线上课数
+        offlineClass: '', //线下课数
+        startTime: '', // 报名开始时间
+        endTime: ''
+      },
+      rightForm: {
+        allClass: '',
+        onlineClass: '',
+        offlineClass: '',
+        allPrice: '',
+        progress: ''
       },
       tableList: []
     }
-  }
+  }, mounted () {
+    let id = this.$route.query.id || 1;
+    this.id = id;
+    // 根据id 获取vip详情
+    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;
+        /**
+         * allClass: '',
+        onlineClass: '',
+        offlineClass: '',
+        allPrice: '',
+        progress: ''
+         */
+      }
+    });
+    // 根据id 获取vip学员
+    this.getStudents();
+    // console.log(this.$route)
+  },
+  methods: {
+    getStudents () {
+      findVipGroupStudents({ vipGroupId: this.id }).then(res => {
+        if (res.code == 200) {
+          this.tableList = res.data.rows;
+        }
+      })
+    },
+    leaveSchool (scope) {
+      console.log(scope.row)
+      let studentId = scope.row.id;
+      let vipGroupId = this.id;
+      leaveSchool({ studentId, vipGroupId }).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            type: 'success',
+            message: '退学成功'
+          })
+          scope._self.$refs[scope.$index].doClose();
+          this.getStudents();
+
+        }
+      })
+
+    }
+  },
 }
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .vip-base {
   .el-select {
     width: 180px !important;
@@ -111,5 +229,20 @@ export default {
   .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;
+    }
+  }
 }
 </style>

src/views/vipClass/vipDetail/index.vue

@@ -14,12 +14,8 @@
                      name="2">
           <teacherRecord />
         </el-tab-pane>
-        <el-tab-pane label="课程调整"
-                     name="3">
-
-        </el-tab-pane>
         <el-tab-pane label="vip课程财务"
-                     name="4">
+                     name="3">
           <fnanceInfo />
         </el-tab-pane>
       </el-tabs>
@@ -35,7 +31,7 @@ export default {
   name: 'vipDetail',
   data () {
     return {
-      activeName: '1'
+      activeName: '2'
     }
   },
   methods: {
@@ -43,7 +39,10 @@ export default {
       // console.log(val, event);
       this.activeName = val.name;
     }
-  }
+  },
+  mounted () {
+
+  },
 }
 </script>
 <style lang="scss">

src/views/vipClass/vipList.vue

@@ -8,73 +8,124 @@
       <el-form :inline="true"
                class="searchForm"
                v-model="searchForm">
+        <!-- 状态 指导老师 活动方案-->
         <el-form-item>
           <el-select v-model="searchForm.teacher"
                      placeholder="指导老师">
-            <el-option label="哈哈哈"
-                       value="1"></el-option>
+            <el-option v-for="(item,index) in teacherList"
+                       :key='index'
+                       :value="item.id"
+                       :label="item.username"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-select v-model="searchForm.count"
-                     placeholder="班级人数">
-            <el-option label="哈哈哈"
-                       value="1"></el-option>
+          <el-select v-model="searchForm.active"
+                     placeholder="活动方案">
+            <el-option v-for="(item,index) in activeList"
+                       :key='index'
+                       :value="item.id"
+                       :label="item.name"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item>
+          <el-input v-model="searchForm.search"></el-input>
+
+        </el-form-item>
+        <el-form-item>
+          <el-button>搜索</el-button>
+        </el-form-item>
       </el-form>
       <!-- 查询列表 -->
-      <div class="searchWrap">
-        <p>查询条件:</p>
-        <div class="searchItem"
-             @click="closeSearch(item)"
-             v-for="(item,index) in searchLsit">
-          {{ item.key }}
-          <i class="el-icon-close"></i>
-        </div>
-      </div>
       <!-- tab -->
       <div class="tableWrap">
         <el-table style="width: 100%"
                   :data='tableData'>
           <el-table-column align='center'
+                           prop="id"
                            label="VIP编号">
           </el-table-column>
           <el-table-column align='center'
+                           prop="name"
                            label="课程名称">
           </el-table-column>
           <el-table-column align='center'
+                           prop="status"
                            label="课程状态">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.status | formatterStatus}}
+              </div>
+            </template>
           </el-table-column>
           <el-table-column align='center'
+                           prop="userName"
                            label="指导老师">
           </el-table-column>
           <el-table-column align='center'
+                           prop="studentNum"
                            label="班级人数">
           </el-table-column>
           <el-table-column align='center'
                            label="课程单价">
+            <template slot-scope="scope">
+              <div>
+                <p>线上课单价:{{scope.row.onlineClassesUnitPrice}}</p>
+                <p>线下课单价:{{scope.row.offlineClassesUnitPrice}}</p>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column align='center'
                            label="活动方案">
           </el-table-column>
           <el-table-column align='center'
                            label="剩余课时">
+            <template slot-scope="scope">
+              <div>
+                <p>{{scope.row.currentClassTimes + '/' + scope.row.totalClassTimes}}</p>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column align='center'
                            label="月均消耗">
           </el-table-column>
           <el-table-column align='center'
+                           prop="coursesExpireDate"
                            label="开课时间">
+            <template slot-scope="scope">
+              <div>
+                <p>{{scope.row.coursesExpireDate | formatterTime}}</p>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column align='center'
+                           prop="paymentExpireDate"
                            label="截止时间">
+            <template slot-scope="scope">
+              <div>
+                <p>{{scope.row.paymentExpireDate | formatterTime}}</p>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column align='center'
+                           prop="createTime"
                            label="申请时间">
+            <template slot-scope="scope">
+              <div>
+                <p>{{scope.row.createTime | formatterTime}}</p>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column align='center'
                            label="操作">
+            <template slot-scope="scope">
+              <div>
+                <el-button type="text"
+                           @click="gotoVipDetail(scope.row.id)">查看</el-button>
+
+                <!-- <el-button type="text">启动</el-button>
+                <el-button type="text">暂停</el-button> -->
+              </div>
+            </template>
           </el-table-column>
         </el-table>
         <!-- 分页器 -->
@@ -90,6 +141,8 @@
 </template>
 <script>
 import pagination from '@/components/Pagination/index'
+import { getVipList, vipGroupActivity } from '@/api/vipSeting'
+import { getTeacher } from '@/api/buildTeam'
 export default {
   components: { pagination },
   name: 'vipList',
@@ -98,8 +151,11 @@ export default {
       searchLsit: [],
       searchForm: {
         teacher: '',
-        count: ''
+        active: '',
+        search: ''
       },
+      teacherList: [],
+      activeList: [],
       tableData: [],
       rules: {
         // 分页规则
@@ -110,8 +166,44 @@ export default {
       },
     }
   },
+  mounted () {
+    this.getList();
+    //   <!-- 状态 指导老师 活动方案-->
+    getTeacher().then(res => {
+      if (res.code == 200) {
+        this.teacherList = res.data.rows;
+      }
+    })
+    // 获取活动方案
+    vipGroupActivity().then(res => {
+      if (res.code == 200) {
+        this.activeList = res.data.rows;
+      }
+    })
+  },
   methods: {
-    getList () { }
+    getList () {
+      // 'organId': this.$store.getters.organ,
+      getVipList({ 'page': this.rules.page, 'rows': this.rules.limit, }).then(res => {
+        if (res.code == 200) {
+          this.tableData = res.data.rows
+        }
+      })
+    },
+    // 跳转到vip详情
+    gotoVipDetail (id) {
+      this.$router.push({ path: '/vipClass/vipDetail', query: { id } })
+    }
+
+  },
+  filters: {
+    formatterTime (val) {
+      return val.split(' ')[0];
+    },
+    formatterStatus (val) {
+      let arr = ["未开始", "报名中", "取消"]
+      return arr[val];
+    }
   }
 }
 </script>