10/10

vip排课假完成

src/api/vipSeting.js

@@ -88,6 +88,15 @@ export function vipGroupActivity (data) {
   })
 }
 
+// 根据课程类型获取活动方案
+export function vipGroupActivityFind (data) {
+  return request({
+    url: '/web-server/vipGroupActivity/findByVipGroupCategory',
+    method: 'get',
+    params: data
+  })
+}
+
 // 新增vip课活动方案
 export function addVipActive (data) {
   return request({
@@ -111,6 +120,6 @@ export function removeVipActive (data) {
   return request({
     url: '/web-server/vipGroupActivity/delete',
     method: 'POST',
-    data
+    data: qs.stringify(data)
   })
 }

src/router/index.js

@@ -254,7 +254,7 @@ export const constantRoutes = [
       path: 'vipNewActive',
       meta: { title: 'vip新增活动方案' },
       component: () => import('@/views/categroyManager/vipNewActive')
-    }
+    },
     ]
   },
   // {

src/utils/index.js

@@ -8,7 +8,7 @@
  * @param {string} cFormat
  * @returns {string}
  */
-export function parseTime(time, cFormat) {
+export function parseTime (time, cFormat) {
   if (arguments.length === 0) {
     return null
   }
@@ -37,7 +37,7 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
     let value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
     if (result.length > 0 && value < 10) {
       value = '0' + value
     }
@@ -51,7 +51,7 @@ export function parseTime(time, cFormat) {
  * @param {string} option
  * @returns {string}
  */
-export function formatTime(time, option) {
+export function formatTime (time, option) {
   if (('' + time).length === 10) {
     time = parseInt(time) * 1000
   } else {
@@ -93,18 +93,45 @@ export function formatTime(time, option) {
  * @param {string} url
  * @returns {Object}
  */
-export function param2Obj(url) {
+export function param2Obj (url) {
   const search = url.split('?')[1]
   if (!search) {
     return {}
   }
   return JSON.parse(
     '{"' +
-      decodeURIComponent(search)
-        .replace(/"/g, '\\"')
-        .replace(/&/g, '","')
-        .replace(/=/g, '":"')
-        .replace(/\+/g, ' ') +
-      '"}'
+    decodeURIComponent(search)
+      .replace(/"/g, '\\"')
+      .replace(/&/g, '","')
+      .replace(/=/g, '":"')
+      .replace(/\+/g, ' ') +
+    '"}'
   )
 }
+
+export function countDown (time) {
+  var s = 0;
+  var hour = time.split(':')[0];
+  var min = time.split(':')[1];
+  var sec = time.split(':')[2];
+  s = Number(hour * 3600) + Number(min * 60) + Number(sec);
+  return s;
+}
+
+export function formatDuring (mss) {
+
+  var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+
+  var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
+
+  var seconds = (mss % (1000 * 60)) / 1000;
+
+  hours = hours < 10 ? ('0' + hours) : hours;
+
+  minutes = minutes < 10 ? ('0' + minutes) : minutes;
+
+  seconds = seconds < 10 ? ('0' + seconds) : seconds;
+
+  return hours + ":" + minutes + ":" + seconds;
+
+}

src/views/buildVip/components/vipBaseInfo.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class='vipinfo-container'>
-    <el-form :inline="true"
-             :model="vipForm">
-      <el-form-item label="指导老师">
-        <el-input v-model="vipForm.teacher"
-                  disabled></el-input>
-      </el-form-item>
-      <el-form-item label="课程名称">
-        <el-input v-model="vipForm.course"></el-input>
-      </el-form-item>
-      <el-form-item label="班级人数">
-        <el-input v-model="vipForm.classnum"></el-input>
-      </el-form-item>
-      <el-form-item label="每课时长">
-        <el-select v-model="vipForm.classtime">
-          <el-option label="30"
-                     value="1"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="科目名称">
-        <el-select v-model="vipForm.classname">
-          <el-option label="30"
-                     value="1"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="报名时间">
-        <el-date-picker v-model="vipForm.goTime"
-                        type="date"
-                        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="开始时间">
-        <el-date-picker v-model="vipForm.startTime"
-                        type="date"
-                        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="截止时间">
-        <el-date-picker v-model="vipForm.endTime"
-                        type="date"
-                        placeholder="选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="活动方案">
-        <el-select v-model="vipForm.active">
-          <el-option label="30"
-                     value="1"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="课程类型">
-        <el-select v-model="vipForm.classType">
-          <el-option label="30"
-                     value="1"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="课时安排">
-        <el-input v-model="vipForm.plan"></el-input>
-      </el-form-item>
-      <el-form-item label="教学点">
-        <el-input v-model="vipForm.address"></el-input>
-      </el-form-item>
-      <el-form-item label="老师课酬(节)">
-        <el-input v-model="vipForm.money"></el-input>
-      </el-form-item>
-      <el-form-item label="购买价格(节)">
-        <el-input v-model="vipForm.price"></el-input>
-      </el-form-item>
-      <br />
-      <el-form-item label="线上">
-        <el-input v-model="vipForm.online"></el-input>
-      </el-form-item>
-      <br />
-      <el-form-item label="线下">
-        <el-input v-model="vipForm.offline"></el-input>
-      </el-form-item>
-    </el-form>
-    <div class="btnWrap">
-      <div class="closeBtn">取消</div>
-      <div class="nextBtn">下一步</div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data () {
-    return {
-      vipForm: {
-        teacher: '',
-        course: '',
-        classnum: '',
-        classtime: '',
-        classname: '',
-        goTime: '',
-        startTime: '',
-        endTime: '',
-        active: '',
-        classType: '',
-        plan: '',
-        address: '',
-        money: '',
-        price: '',
-        online: '',
-        offline: ''
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scope>
-.vipinfo-container {
-  .el-select {
-    width: 180px !important;
-  }
-  .el-date-editor.el-input,
-  .el-date-editor.el-input__inner {
-    width: 180px !important;
-  }
-  .el-input {
-    width: 180px !important;
-  }
-  .btnWrap {
-    justify-content: center;
-    margin-top: 300px;
-  }
-}
-</style>

src/views/buildVip/components/vipPlan.vue

@@ -1,349 +0,0 @@
-<template>
-  <div class='course-container'>
-    <div class="left">
-      <el-form :model="leftFrom"
-               :inline="true">
-
-        <el-form-item label="排课起始时间">
-          <el-date-picker v-model="leftFrom.time"
-                          align="right"
-                          type="date"
-                          placeholder="选择日期"
-                          :picker-options="pickerOptions">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="循环方式">
-          <el-input v-model="leftFrom.loop"></el-input>
-        </el-form-item>
-        <el-form-item label="排课次数">
-          <el-input type="number"
-                    v-model="leftFrom.num"></el-input>
-        </el-form-item>
-      </el-form>
-      <p>周次循环<span style="margin-left:10px;">上课时间</span></p>
-      <div class="checkWrap">
-        <el-checkbox-group v-model="checkList">
-          <div class="chioseday">
-            <el-checkbox label="周一"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Monday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-
-            <el-time-select placeholder="结束"
-                            v-model="week.Monday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Monday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-          <div class="chioseday">
-            <el-checkbox label="周二"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Tuesday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-            <el-time-select placeholder="结束"
-                            v-model="week.Tuesday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Tuesday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-          <div class="chioseday">
-            <el-checkbox label="周三"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Wednesday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-
-            <el-time-select placeholder="结束"
-                            v-model="week.Wednesday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Monday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-          <div class="chioseday">
-            <el-checkbox label="周四"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Thursday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-
-            <el-time-select placeholder="结束"
-                            v-model="week.Thursday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Thursday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-          <div class="chioseday">
-            <el-checkbox label="周五"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Friday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-
-            <el-time-select placeholder="结束"
-                            v-model="week.Friday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Friday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-          <div class="chioseday">
-            <el-checkbox label="周六"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Saturday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-
-            <el-time-select placeholder="结束"
-                            v-model="week.Saturday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Saturday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-          <div class="chioseday">
-            <el-checkbox label="周日"></el-checkbox>
-            <el-time-select placeholder="起始"
-                            v-model="week.Sunday.startTime"
-                            :picker-options="{
-                             start: '06:30',
-                             step: '00:05',
-                             end: '18:30'
-                                            }">
-            </el-time-select>
-
-            <el-time-select placeholder="结束"
-                            v-model="week.Sunday.endTime"
-                            :picker-options="{
-                            start: '08:30',
-                            step: '00:15',
-                            end: '23:30',
-                            minTime: week.Sunday.startTime
-                                            }">
-            </el-time-select>
-          </div>
-        </el-checkbox-group>
-        <div class="holidayWrap">
-          <el-checkbox v-model="isholiday">跳过节假日</el-checkbox>
-        </div>
-        <div class="btnWrap">
-          <div class="closeBtn">取消排课</div>
-          <div class="okBtn">一件排课</div>
-        </div>
-      </div>
-
-    </div>
-    <div class="right">
-      <el-calendar>
-        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
-        <template slot="dateCell"
-                  slot-scope="{date, data}">
-          <p :class="data.isSelected ? 'is-selected' : ''">
-            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
-          </p>
-        </template>
-      </el-calendar>
-      <div class="btnWrap">
-        <div class="nextBtn">下一步</div>
-        <div class="okBtn">确定</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data () {
-    return {
-      leftFrom: {
-        loop: '', // 循环方式
-        time: '',
-        num: ''
-      },
-      pickerOptions: {
-        disabledDate (time) {
-          return time.getTime() > Date.now();
-        },
-        shortcuts: [{
-          text: '今天',
-          onClick (picker) {
-            picker.$emit('pick', new Date());
-          }
-        }, {
-          text: '昨天',
-          onClick (picker) {
-            const date = new Date();
-            date.setTime(date.getTime() - 3600 * 1000 * 24);
-            picker.$emit('pick', date);
-          }
-        }, {
-          text: '一周前',
-          onClick (picker) {
-            const date = new Date();
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', date);
-          }
-        }]
-      },
-      checkList: [],
-      week: {
-        Monday: {
-          startTime: '',
-          endTime: ''
-        },
-        Tuesday: {
-          startTime: '',
-          endTime: ''
-        },
-        Wednesday: {
-          startTime: '',
-          endTime: ''
-        },
-        Thursday: {
-          startTime: '',
-          endTime: ''
-        },
-        Friday: {
-          startTime: '',
-          endTime: ''
-        },
-        Saturday: {
-          startTime: '',
-          endTime: ''
-        },
-        Sunday: {
-          startTime: '',
-          endTime: ''
-        }
-      },
-      isholiday: false
-    }
-  }
-
-}
-</script>
-<style lang="scss">
-.course-container {
-  padding: 47px 58px;
-  background-color: #fff;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  .left {
-    width: 300px;
-    min-width: 300px;
-    margin-right: 90px;
-    .chioseday {
-      margin-top: 20px;
-      .el-date-editor.el-input,
-      .el-date-editor.el-input__inner {
-        width: 100px;
-        margin-left: 20px;
-      }
-    }
-    .holidayWrap {
-      margin-top: 34px;
-      margin-bottom: 40px;
-      display: flex;
-      flex-direction: column;
-      justify-items: center;
-      align-items: center;
-    }
-    .btnWrap {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-      div {
-        width: 120px;
-        height: 40px;
-        border-radius: 4px;
-        text-align: center;
-        line-height: 40px;
-        cursor: pointer;
-        color: #fff;
-      }
-      .closeBtn {
-        background-color: #777;
-      }
-      .okBtn {
-        background-color: #14928a;
-      }
-    }
-  }
-  .right {
-    .is-selected {
-      color: #1989fa;
-    }
-    .el-calendar {
-      max-width: 950px;
-    }
-    .btnWrap {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      div {
-        width: 120px;
-        height: 40px;
-        line-height: 40px;
-        text-align: center;
-        color: #fff;
-        border-radius: 4px;
-        margin-right: 20px;
-        cursor: pointer;
-      }
-      .nextBtn {
-        background-color: #444;
-      }
-      .okBtn {
-        background-color: #f97215;
-      }
-    }
-  }
-}
-</style>

src/views/buildVip/index.vue

@@ -5,43 +5,633 @@
       VIP课申请
     </h2>
     <div class="m-core">
-      <el-tabs v-model="activeIndex"
-               type="card"
-               @tab-click="handleClick">
-        <el-tab-pane label="基本信息"
-                     name="1">
-          <vipbase />
-        </el-tab-pane>
-        <el-tab-pane label="排班设置"
-                     name="2">
-          <vipplan />
-        </el-tab-pane>
-      </el-tabs>
+      <div class="vipLeft">
+        <h4>课程信息</h4>
+        <el-form ref='leftForm'
+                 :label-position='labelPosition'
+                 label-width="100px"
+                 :model="leftForm">
+          <el-form-item label="科目名称">
+            <el-select v-model="leftForm.subject">
+              <el-option v-for='(item,index) in subjectList'
+                         :key='index'
+                         :value="item.id"
+                         :label="item.name"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="指导老师">
+            <el-select v-model="leftForm.teacher"
+                       :disabled="!leftForm.subject">
+              <el-option v-for="(item,index) in teacherList"
+                         :key="index"
+                         :label="item.username"
+                         :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="课程形式">
+            <el-select v-model="leftForm.courseType"
+                       @change="changeType">
+              <el-option v-for="(item,index) in courseTypeList"
+                         :key="index"
+                         :label="item.name"
+                         :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="活动方案">
+            <el-select v-model="leftForm.activeType"
+                       :disabled="!leftForm.courseType"
+                       @change='chioseActive'>
+              <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 label="每班人数">
+            <el-input type='number'
+                      disabled
+                      v-model="leftForm.classNum"></el-input>
+          </el-form-item>
+          <el-form-item label="每课时长">
+            <el-input type='number'
+                      disabled
+                      v-model="leftForm.classTime"></el-input>
+          </el-form-item>
+          <el-form-item label="报名开始时间"
+                        v-if="leftForm.signUpStart">
+            <el-date-picker v-model="leftForm.signUpStart"
+                            disabled
+                            type="date"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="请选择时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="报名结束时间"
+                        v-if="leftForm.signUpEnd">
+            <el-date-picker v-model="leftForm.signUpEnd"
+                            disabled
+                            type="date"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="请选择时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="课程开始时间"
+                        v-if="leftForm.courseStart">
+            <el-date-picker v-model="leftForm.courseStart"
+                            disabled
+                            type="date"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="请选择时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="课程结束时间"
+                        v-if="leftForm.courseEnd">
+            <el-date-picker v-model="leftForm.courseEnd"
+                            disabled
+                            type="date"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="请选择时间">
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="center">
+        <h4>排课设置</h4>
+        <el-form :model='centerForm'
+                 label-width="100px"
+                 :label-position="labelPosition">
+          <el-form-item label="线上课数"
+                        v-if="hasOnline">
+            <el-input type='number'
+                      v-model="centerForm.onlineCourseNum"></el-input>
+          </el-form-item>
+          <el-form-item label="线下课数"
+                        v-if="hasOffline">
+            <el-input type='number'
+                      v-model="centerForm.offlineCourseNum"></el-input>
+          </el-form-item>
+          <el-form-item label="待排课数">
+            <el-input disabled
+                      v-model="allCourseCount"></el-input>
+          </el-form-item>
+          <el-form-item label="赠课课程类型"
+                        v-if="hotType=='GIVE_CLASS'">
+            <el-radio v-model="centerForm.radio"
+                      label="online">线上课</el-radio>
+            <el-radio v-model="centerForm.radio"
+                      label="offline">线下课</el-radio>
+          </el-form-item>
+          <!-- <el-form-item label="排课开始时间">
+            <el-date-picker v-model="centerForm.planStart"
+                            type="date"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="请选择时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="排课结束时间">
+            <el-date-picker v-model="centerForm.planEnd"
+                            type="date"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            placeholder="请选择时间">
+            </el-date-picker>
+          </el-form-item> -->
+        </el-form>
+        <!-- 排课列表开始 -->
+        <div class="planList">
+          <div class="planTop">
+            <p>已排课程</p>
+            <el-button type='text'
+                       @click="dialogFormVisible = true">点击排课</el-button>
+          </div>
+          <div class="planCore">
+            <div class="row">
+              <div class="name">线上课</div>
+              <div class="week">周一</div>
+              <div class="time">14:00-15:00</div>
+              <div class="operation">
+                <el-button type='text'>删除</el-button>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <div class="right">
+        <h4>课酬设置</h4>
+        <el-form :model="rightForm"
+                 label-width="100px"
+                 :label-position="labelPosition">
+          <el-form-item label="线上课课酬">
+            <el-input v-model="rightForm.onlineCourse"></el-input>
+          </el-form-item>
+          <el-form-item label="线下课课酬">
+            <el-input v-model="rightForm.offlineCourse"></el-input>
+          </el-form-item>
+          <el-form-item label="线上课单价">
+            <el-input v-model="rightForm.onlinePrice"></el-input>
+          </el-form-item>
+          <el-form-item label="线下课单价">
+            <el-input v-model="rightForm.offlinePrice"></el-input>
+          </el-form-item>
+          <el-form-item label="课程总价">
+            <el-input v-model="rightForm.allPrice"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <!-- 弹窗 -->
+    <el-dialog title="VIP排课"
+               width="500px"
+               :visible.sync="dialogFormVisible">
+      <el-form :model="maskForm">
+        <el-form-item label="课程类型"
+                      prop="type">
+          <el-radio v-model="maskForm.type"
+                    v-if="hasOnline"
+                    label="online">线上课</el-radio>
+          <el-radio v-model="maskForm.type"
+                    v-if="hasOffline"
+                    label="offline">线下课</el-radio>
+        </el-form-item>
+
+        <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-select>
+        </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>
+      <div class="btnWrap">
+        <div class="okBtn"
+             @click='addWeek'>确认</div>
+      </div>
+
+      <div class="planList">
+        <div class="planTop">
+          <p>已排课程</p>
+          <!-- <el-button type='text'>点击排课</el-button> -->
+          <!--   'type': str,
+        'week': week,
+        'time': stratTime + '-' + endtime,
+        'id': Date.now() -->
+        </div>
+        <div class="planCore">
+          <div class="row"
+               v-for="(item,index) in this.lookList">
+            <div class="name">{{ item.type }}</div>
+            <div class="week">{{ item.week }}</div>
+            <div class="time">{{ item.time }}</div>
+            <div class="operation">
+              <el-button type='text'
+                         @click="removeWeekCourse(item.id)">删除</el-button>
+            </div>
+          </div>
+        </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>
+        </div>
+      </div>
+    </el-dialog>
+    <div class="btnWrap">
+      <div class="closeBtn">取消</div>
+      <div class="okBtn">确定</div>
     </div>
   </div>
 </template>
 <script>
-import vipbase from '@/views/buildVip/components/vipBaseInfo'
-import vipplan from '@/views/buildVip/components/vipPlan'
+import { getTeacher, getSubject } from '@/api/buildTeam'
+import { vipGroupCategory, vipGroupActivityFind } from '@/api/vipSeting'
 export default {
-  components: {
-    vipbase,
-    vipplan
-  },
   data () {
     return {
-      activeIndex: '1'
+      dialogFormVisible: false,
+      labelPosition: 'right',
+      leftForm: {
+        teacher: '',
+        subject: '',
+        courseType: '',
+        activeType: '',
+        classNum: '',
+        classTime: '',
+
+        signUpStart: '',
+        signUpEnd: '',
+        courseStart: '',
+        courseEnd: ''
+      },
+      centerForm: {
+        allCourseNum: '',
+        onlineCourseNum: 0,
+        offlineCourseNum: 0,
+        radio: ''
+      },
+      maskForm: {
+        type: '',
+        week: '',
+        startTime: ''
+      },
+      rightForm: {
+        onlineCourse: '',
+        offlineCourse: '',
+        onlinePrice: '',
+        allPrice: ''
+      },
+      subjectList: [], // 科目列表
+      teacherList: [], // 老师列表
+      courseTypeList: [], // 课程类型集合
+      activeList: [], //活动集合
+      hasOnline: false,
+      hasOffline: false,
+      hotType: '',
+      attribute1: '',
+      attribute2: '',
+      lookList: [], // 展示课表
+      timeTable: [] // 真正的课表
+    }
+  },
+  mounted () {
+    // 获取所有科目的接口
+    getSubject().then(res => {
+      if (res.code == 200) {
+        this.subjectList = res.data.rows;
+      }
+
+    })
+    // 获取所有老师的接口
+    getTeacher({ subjectId: this.leftForm.subject }).then(res => {
+      if (res.code == 200) {
+        this.teacherList = res.data.rows;
+      }
+    })
+    // 获取课程类型的接口
+    vipGroupCategory({ organId: this.$store.getters.organ }).then(res => {
+      if (res.code == 200) {
+        this.courseTypeList = res.data;
+      }
+    })
+
+
+  },
+  computed: {
+    allCourseCount () {
+
+      let online, offline;
+      this.centerForm.onlineCourseNum ? online = this.centerForm.onlineCourseNum : online = 0;
+      this.centerForm.offlineCourseNum ? offline = this.centerForm.offlineCourseNum : offline = 0;
+
+      let giveNum;
+      if (this.hotType == 'GIVE_CLASS') {
+        giveNum = parseInt((parseInt(offline) + parseInt(online)) / this.attribute1 * this.attribute2);
+        return (parseInt(offline) + parseInt(online) + '+' + giveNum) || '';
+      }
+      return parseInt(offline) + parseInt(online) || ''
     }
   },
   methods: {
-    handleClick (val) {
-      this.activeIndex = val.name;
+    // 选择课程类型
+    changeType (val) {
+
+      for (let i in this.courseTypeList) {
+        if (this.courseTypeList[i].id == val) {
+          // 学生人数
+          this.leftForm.classNum = this.courseTypeList[i].studentNum;
+          // 每课时长
+          this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
+          // 线上课单节价格
+          this.rightForm.onlinePrice = this.courseTypeList[i].onlineClassesUnitPrice;
+          // 线下课单节价格
+          this.rightForm.offlinePrice = this.courseTypeList[i].offlineClassesUnitPrice;
+        }
+      }
+      // 根据课程类型获取活动方案
+      if (this.leftForm.courseType) {
+        vipGroupActivityFind({ 'categoryId': this.leftForm.courseType }).then(res => {
+          if (res.code == 200) {
+            this.activeList = res.data;
+          }
+        })
+      }
+
+    },
+    // 选择活动方案
+    chioseActive (val) {
+      this.attribute1 = ''
+      this.attribute2 = '';
+      // console.log(val);
+      // 根须活动id获取 相应的值
+      for (let i in this.activeList) {
+        if (this.activeList[i].id == val) {
+          // 报名开始 报名结束 课程开始 课程结束 // 判断是否有线上,线下课 并同步状态
+          this.leftForm.signUpStart = this.activeList[i].startTime;
+          this.leftForm.signUpEnd = this.activeList[i].endTime;
+          this.leftForm.courseStart = this.activeList[i].coursesStartTime;
+          this.leftForm.courseEnd = this.activeList[i].coursesEndTime
+          // 获取活动种类并保存
+          this.hotType = this.activeList[i].type;
+          // 获取买赠必要参数
+          this.attribute1 = this.activeList[i].attribute1;
+          this.attribute2 = this.activeList[i].attribute2;
+          //  hasOnline: false, hasOffline: false 还需要判断type类型 根据活动id获取
+          if (this.activeList[i].salarySettlementJson) {
+            let obj = JSON.parse(this.activeList[i].salarySettlementJson)
+            if (obj && obj.onlineSalarySettlement) {
+              // 有线上课
+              this.hasOnline = true;
+            } else {
+              this.hasOnline = false;
+            }
+            if (obj && obj.offlineSalarySettlement) {
+              // 有线下课
+              this.hasOffline = true;
+            } else {
+              this.hasOffline = false;
+            }
+          }
+
+        }
+      }
+    },
+    // 点击确插入课表
+    addWeek () {
+      let courseType = this.maskForm.type;
+      let week = this.maskForm.week;
+      let startTime = this.maskForm.startTime;
+      if (!courseType || !week || !startTime) {
+        this.$message({
+          type: 'error',
+          message: '请填写完成信息'
+        })
+        return;
+      }
+      // 拿到相应的值插入数组
+      let endTime = this.MinutesTest(startTime, this.leftForm.classTime);
+
+      let str;
+      switch (courseType) {
+        case 'online': {
+          str = '线上课'
+          break;
+        }
+        case 'offline': {
+          str = '线下课'
+          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.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()
+            })
+          }
+
+        }
+      }
+
+
+      // console.log(this.lookList);
+    },
+    // 分钟小时相加减
+    MinutesTest (str, interval) {
+      let houer = str.split(':')[0];
+      let min = str.split(':')[1];
+      let sdate1 = new Date(1900, 1, 1, houer, min);
+      sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));
+      let H = sdate1.getHours();
+      let M = sdate1.getMinutes();
+      if (H < 10) H = '0' + H;
+      if (M < 10) M = '0' + M;
+      return H + ':' + M
+    },
+    // 判断时间是否在时间段内
+    timeIsrange (beginTime, endTime, nowTime) {
+      console.log(beginTime, endTime, nowTime)
+      var strb = beginTime.split(":");
+      if (strb.length != 2) {
+        return false;
+      }
+      var stre = endTime.split(":");
+      if (stre.length != 2) {
+        return false;
+      }
+      var strn = nowTime.split(":");
+      if (stre.length != 2) {
+        return false;
+      }
+      var b = new Date();
+      var e = new Date();
+      var n = new Date();
+      b.setHours(strb[0]);
+      b.setMinutes(strb[1]);
+      e.setHours(stre[0]);
+      e.setMinutes(stre[1]);
+      n.setHours(strn[0]);
+      n.setMinutes(strn[1]);
+
+      if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {
+        // 在时间范围内
+        return true;
+      } else {
+        // 不在时间范围内
+        return false;
+      }
+    },
+    removeWeekCourse (id) {
+      for (let i in this.lookList) {
+        if (this.lookList[i].id == id) {
+          this.lookList.splice(i, 1);
+        }
+      }
     }
   },
 }
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .m-core {
   margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  .el-input {
+    width: 180px;
+  }
+  h4 {
+    font-size: 16px;
+    background-color: #ccc;
+    color: #fff;
+    text-align: center;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 20px;
+  }
+  .vipLeft {
+    width: 400px;
+    // h4 {
+    //   font-size: 16px;
+    //   background-color: #ccc;
+    //   color: #fff;
+    //   text-align: center;
+    //   width: 100%;
+    //   height: 40px;
+    //   line-height: 40px;
+    //   margin-bottom: 20px;
+    // }
+  }
+  .center {
+    width: 400px;
+  }
+  .right {
+    width: 400px;
+  }
+}
+.planList {
+  padding: 0 25px;
+  .planTop {
+    height: 40px;
+    line-height: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    margin-top: 20px;
+    > p {
+      font-size: 14px;
+    }
+  }
+  .planCore {
+    .row {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+    }
+  }
+}
+.okBtn {
+  width: 120px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  color: #fff;
+  border-radius: 4px;
+  margin-right: 20px;
+  cursor: pointer;
+  background-color: #f97215;
+  float: right;
 }
 </style>

src/views/categroyManager/vipActiveList.vue

@@ -82,7 +82,7 @@
                 <el-popover placement="top"
                             width="160"
                             :ref="scope.$index">
-                  <p>您确定删除该周期循环吗?</p>
+                  <p>确定删除?</p>
                   <div style="text-align: right; margin: 0">
                     <el-button size="mini"
                                type="text"