数据组建完成

1

src/views/teamDetail/components/modals/classroom-setting-item.vue

@@ -1,26 +1,6 @@
 <template>
   <div>
     <!-- <el-form-item
-      label="排课次数"
-      prop="courseTimes"
-    >
-      <el-input v-model="form.courseTimes" placeholder="请输入排课次数"/>
-    </el-form-item> -->
-    <el-form-item
-      label="排课起始时间"
-      label-width="112px"
-      :prop="'classs.' + type + '.courseTime'"
-      :rules="[{ required: true, message: '请选择排课起始时间' }]"
-    >
-      <el-date-picker v-model.trim="form.courseTime"
-        :picker-options="pickerOptions"
-        style="width:100%!important;"
-        type="date"
-        value-format="yyyy-MM-dd"
-        placeholder="选择日期">
-      </el-date-picker>
-    </el-form-item>
-    <el-form-item
       label="跳过节假日"
       :prop="'classs.' + type + '.holiday'"
       :rules="[{ required: true, message: '否跳过节假日' }]"
@@ -29,111 +9,212 @@
         <el-radio :label="true">是</el-radio>
         <el-radio :label="false">否</el-radio>
       </el-radio-group>
-    </el-form-item>
-    <el-table
-      v-if="form && form.cycle"
-      :data="form.cycle"
-    >
-      <el-table-column
-        prop="dayOfWeek"
-        label="循环周期"
-        width="160">
+    </el-form-item> -->
+    <el-table v-if="form && form.cycle" :data="form.cycle">
+      <el-table-column prop="time" label="课程时长(分)" width="160">
         <template slot-scope="scope">
           <el-form-item
+            :prop="'classs.' + type + '.cycle.' + scope.$index + '.time'"
+            :rules="[{ required: true, message: '请选择课程时长' }]"
             inline-message
-            :rules="[{ required: true, message: '请选择循环周期' }]"
-            :prop="'classs.' + type + '.cycle.' + scope.$index + '.dayOfWeek'"
           >
-            <el-select v-model.trim="scope.row.dayOfWeek"
-              style="width:100%!important"
-              placeholder="请选择循环周期"
+            <el-select
+              v-model.trim="scope.row.time"
+              style="width: 100% !important"
+              placeholder="请选择课程时长"
               clearable
-              filterable>
-              <el-option v-for="(item,index) in weekDateList"
+              :disabled="!!selectPrice"
+              @change="
+                (val) => {
+                  startTimeChange(scope, val);
+                }
+              "
+              filterable
+            >
+              <el-option
+                v-for="(item, index) in pricesArray"
                 :key="index"
-                :label="item.label"
-                :value="item.value">
+                :disabled="
+                  surplustime + (parseFloat(scope.row.time) || 0) < item
+                "
+                :label="item"
+                :value="item"
+              >
               </el-option>
             </el-select>
+            <!-- <el-input disabled v-model="scope.row.time" placeholder="请输入课程时长"/> -->
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="time"
-        label="课程时长(分)"
-        width="160">
+      <el-table-column label="预计课时数" width="160">
         <template slot-scope="scope">
+          <!--   -->
           <el-form-item
-            :prop="'classs.' + type + '.cycle.' + scope.$index + '.time'"
-            :rules="[{ required: true, message: '请选择课程时长' }]"
-            inline-message>
-            <el-select v-model.trim="scope.row.time"
-              style="width:100%!important"
-              placeholder="请选择课程时长"
+            :prop="
+              'classs.' + type + '.cycle.' + scope.$index + '.expectCourseNum'
+            "
+            :rules="[
+              { required: true, message: '请输入预计课时数' },
+              { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的正整数' },
+            ]"
+            inline-message
+          >
+            <el-input
+              type="number"
+              v-model.trim="scope.row.expectCourseNum"
+              placeholder="请输入预计课数"
+              style="width: 130px !important"
+              @input="(val)=>{getUseTime(scope.row)}"
+            >
+            </el-input>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column prop="dayOfWeek" label="循环周期" width="160">
+        <template slot-scope="scope">
+          <el-form-item
+            inline-message
+            :rules="[{ required: true, message: '请选择循环周期' }]"
+            :prop="'classs.' + type + '.cycle.' + scope.$index + '.dayOfWeek'"
+          >
+            <el-select
+              v-model.trim="scope.row.dayOfWeek"
+              style="width: 100% !important"
+              placeholder="请选择循环周期"
               clearable
-              :disabled="!!selectPrice"
-              @change="startTimeChange(scope.row)"
-              filterable>
-              <el-option v-for="(item,index) in pricesArray"
+              filterable
+              @change="(val)=>{getUseTime(scope.row)}"
+            >
+              <el-option
+                v-for="(item, index) in weekDateList"
                 :key="index"
-                :disabled="(surplustime + (parseFloat(scope.row.time) || 0)) < item"
-                :label="item"
-                :value="item">
+                :label="item.label"
+                :value="item.value"
+              >
               </el-option>
             </el-select>
-            <!-- <el-input disabled v-model="scope.row.time" placeholder="请输入课程时长"/> -->
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="startClassTime"
-        label="开始时间"
-        width="160">
+
+      <el-table-column prop="startClassTime" label="开始时间" width="160">
         <template slot-scope="scope">
           <el-form-item
-            :prop="'classs.' + type + '.cycle.' + scope.$index + '.startClassTime'"
+            :prop="
+              'classs.' + type + '.cycle.' + scope.$index + '.startClassTime'
+            "
             :rules="[{ required: true, message: '请选择开始时间' }]"
-            inline-message>
-            <el-time-picker style="width: 100%!important;"
+            inline-message
+          >
+            <el-time-picker
+              style="width: 100% !important"
               v-model.trim="scope.row.startClassTime"
-              format='HH:mm'
-              value-format='HH:mm'
+              format="HH:mm"
+              value-format="HH:mm"
               placeholder="请选择时间"
-              @change="startTimeChange(scope.row)"
+              @change="timeChange(scope.row)"
               :picker-options="{
-                selectableRange: ['04:30:00 - 23:59:59']
-              }">
+                selectableRange: ['04:30:00 - 23:59:59'],
+              }"
+            >
+              <!--   @change="startTimeChange(scope.row)" -->
             </el-time-picker>
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="endClassTime"
-        label="结束时间"
-        width="160">
+      <el-table-column prop="endClassTime" label="结束时间" width="160">
         <template slot-scope="scope">
           <el-form-item
-            :prop="'classs.' + type + '.cycle.' + scope.$index + '.endClassTime'"
-            inline-message>
-            <el-time-picker style="width: 100%!important;"
+            :prop="
+              'classs.' + type + '.cycle.' + scope.$index + '.endClassTime'
+            "
+            inline-message
+          >
+            <el-time-picker
+              style="width: 100% !important"
               v-model.trim="scope.row.endClassTime"
-              format='HH:mm'
+              format="HH:mm"
               disabled
-              value-format='HH:mm'
+              value-format="HH:mm"
               placeholder="请选择时间"
               :picker-options="{
-                selectableRange: [scope.row.startClassTime + ':00 - 23:59:59']
-              }">
+                selectableRange: [scope.row.startClassTime + ':00 - 23:59:59'],
+              }"
+            >
             </el-time-picker>
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="date"
-        label=""
-        >
+      <el-table-column label="排课起始时间" width="170">
         <template slot-scope="scope">
-          <i @click="remove(scope.$index)" v-if="form.cycle.length > 1" class="close-icon el-icon-circle-close"></i>
+          <el-form-item
+            inline-message
+            :prop="'classs.' + type + '.cycle.' + scope.$index + '.startDate'"
+            :rules="[{ required: true, message: '请选择排课起始时间' }]"
+          >
+            <el-date-picker
+              v-model.trim="scope.row.startDate"
+              :picker-options="pickerOptions"
+              style="width: 100% !important"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              @change="
+                (val) => {
+                  changeStartDate(val, scope.row);
+                }
+              "
+            >
+            </el-date-picker>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="排课结束时间" width="170">
+        <template slot-scope="scope">
+          <el-form-item
+            inline-message
+            :prop="'classs.' + type + '.cycle.' + scope.$index + '.endDate'"
+            :rules="[{ required: true, message: '请选择排课结束时间' }]"
+          >
+            <el-date-picker
+              v-model.trim="scope.row.endDate"
+              :disabled="true"
+              :picker-options="pickerOptions"
+              style="width: 100% !important"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="是否跳过节假日" width="160">
+        <template slot-scope="scope">
+          <el-form-item
+            :prop="'classs.' + type + '.cycle.' + scope.$index + '.holiday'"
+            :rules="[{ required: true, message: '请选择是否跳过节假日' }]"
+            inline-message
+          >
+            <el-select
+              v-model.trim="scope.row.holiday"
+              style="width: 100% !important"
+              placeholder="是否跳过节假日"
+              filterable
+            >
+              <el-option label="是" :value="true"></el-option>
+              <el-option label="否" :value="false"> </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column prop="date" width="50px">
+        <template slot-scope="scope">
+          <i
+            @click="remove(scope.$index)"
+            v-if="form.cycle.length > 1"
+            class="close-icon el-icon-circle-close"
+          ></i>
         </template>
       </el-table-column>
     </el-table>
@@ -142,37 +223,43 @@
       type="info"
       size="small"
       plain
-      :disabled="surplustime < ((selectPrice || 0) || Math.min(...pricesArray))"
+      :disabled="surplustime < (selectPrice || 0 || Math.min(...pricesArray))"
       @click="create"
-      style="margin-top: 10px;width: 100%;"
-    >添加循环</el-button>
+      style="margin-top: 10px; width: 100%"
+      >添加循环</el-button
+    >
   </div>
 </template>
 <script>
-import { diffTimerFormMinute, addTimerFormMinute } from '@/utils/date'
-import { classTimeList } from '@/utils/searchArray'
-import dayjs from 'dayjs'
+import { diffTimerFormMinute, addTimerFormMinute } from "@/utils/date";
+import { classTimeList } from "@/utils/searchArray";
+import dayjs from "dayjs";
 
-const classTimeListByType = {}
+const classTimeListByType = {};
 for (const item of classTimeList) {
-  classTimeListByType[item.value] = item.label
+  classTimeListByType[item.value] = item.label;
 }
 
 export default {
-  props: ['form', 'type', 'surplustime', 'prices', 'selectPrice'],
+  props: ["form", "type", "surplustime", "prices", "selectPrice"],
   data() {
     return {
       classTimeListByType,
-    }
+      useTime: 0,
+    };
+  },
+  mounted() {
+    // console.log("surplustime", this.surplustime);
+    console.log(this.form.cycle);
   },
   computed: {
     pickerOptions() {
       return {
         firstDayOfWeek: 1,
-        disabledDate (time) {
+        disabledDate(time) {
           return time.getTime() + 86400000 <= new Date().getTime();
-        }
-      }
+        },
+      };
     },
     weekDateList() {
       return [
@@ -182,39 +269,125 @@ export default {
         { value: "4", label: "星期四" },
         { value: "5", label: "星期五" },
         { value: "6", label: "星期六" },
-        { value: "7", label: "星期日" }
-      ]
+        { value: "7", label: "星期日" },
+      ];
     },
     pricesArray() {
-      return (this.prices[this.type] || '').split(',').filter(item => !!item)
-    }
+      return (this.prices[this.type] || "").split(",").filter((item) => !!item);
+    },
   },
   methods: {
     create() {
-      const initVal = {}
+      console.log(this.surplustime,this.useTime)
+      if(this.surplustime<=this.useTime){
+        this.$message.error('已排课时长使用完毕,请修改预计课时数')
+        return
+      }
+      const initVal = {};
       if (this.selectPrice) {
-        initVal.time = this.selectPrice
+        initVal.time = this.selectPrice;
       }
-      this.form.cycle.push(initVal)
+      this.form.cycle.push(initVal);
     },
+
     remove(index) {
-      this.form.cycle.splice(index, 1)
+      this.form.cycle.splice(index, 1);
+    },
+    startTimeChange(item, val) {
+      if(item.$index == 0){
+        this.useTime = 0
+      }
+      if (item.row.time && item.row.startClassTime) {
+        let str = dayjs(new Date()).format("YYYY-MM-DD");
+        this.$set(
+          item,
+          "endClassTime",
+          addTimerFormMinute(str, item.row.startClassTime, item.row.time)
+        );
+      } else {
+        this.$set(item.row, "endClassTime", "");
+      }
+      if (val) {
+        console.log(
+          this.surplustime,
+          this.useTime,
+          parseInt((this.surplustime - this.useTime) / val)
+        );
+        this.$set(
+          item.row,
+          "expectCourseNum",
+          parseInt((this.surplustime - this.useTime) / val)
+        );
+        // this.surplusTime
+      } else {
+        this.$set(item.row, "expectCourseNum", 0);
+      }
+      this.getUseTime();
     },
-    startTimeChange(item) {
+    timeChange(item) {
       if (item.time && item.startClassTime) {
-        let str = dayjs(new Date()).format('YYYY-MM-DD')
-        this.$set(item, 'endClassTime', addTimerFormMinute(str, item.startClassTime, item.time))
+        let str = dayjs(new Date()).format("YYYY-MM-DD");
+        this.$set(
+          item,
+          "endClassTime",
+          addTimerFormMinute(str, item.startClassTime, item.time)
+        );
       } else {
-        this.$set(item, 'endClassTime', '')
+        this.$set(item, "endClassTime", "");
+      }
+    },
+    getUseTime(row) {
+      console.log(row)
+      if(row){
+          this.$set(
+          row,
+          "startDate",
+          ''
+        );
+             this.$set(
+          row,
+          "endDate",
+          ''
+        );
+      }
+      this.useTime = 0;
+      this.form.cycle.forEach((item) => {
+        this.useTime +=
+          (item.expectCourseNum ? parseInt(item.expectCourseNum) : 0) *
+          parseInt(item.time);
+      });
+     this.$emit('setUserTime',this.useTime,this.type)
+    },
+    changeStartDate(val, row) {
+      console.log(val, row);
+      if (row.dayOfWeek && val&&row.expectCourseNum) {
+        let num;
+        let dayjs = this.$helpers.dayjs
+        let date = dayjs(val).toDate();
+        row.dayOfWeek - date.getDay() >= 0
+          ? (num = row.dayOfWeek - date.getDay())
+          : (num = row.dayOfWeek - date.getDay() + 7);
+          this.$set(
+          row,
+          "endDate",
+         dayjs(val).add(num+(row.expectCourseNum*7), 'day').format('YYYY-MM-DD')
+        );
+      }else{
+this.$set(
+          row,
+          "endDate",
+         ''
+        );
       }
-    }
+
+    },
   },
-}
+};
 </script>
 <style lang="less" scoped>
-  /deep/ .close-icon{
-    cursor: pointer;
-    font-size: 16px;
-    margin-bottom: 24px;
-  }
+/deep/ .close-icon {
+  cursor: pointer;
+  font-size: 16px;
+  margin-bottom: 24px;
+}
 </style>

src/views/teamDetail/components/modals/classroom-setting.vue

@@ -93,11 +93,15 @@
           <template #title>
             <p class="title">
               {{ courseTypeListByName[key] }},
-              <span>可排课时长{{ musicCourseSettings[key] }}分钟</span>
+              <span>可排课时长:{{ musicCourseSettings[key] }}分钟</span>
+              <span style="color: #333"
+                >已排课时长:{{ musicSurplus[key] }}分钟</span
+              >
             </p>
           </template>
           <courseItem
             :surplustime="surplustime[key]"
+            @setUserTime="setUserTime"
             :type="key"
             :form="item"
             :prices="prices"
@@ -188,6 +192,7 @@ export default {
       courseTypeListByName: {},
       classTimeListByType,
       musicCourseSettings: {},
+      musicSurplus: {},
     };
   },
   watch: {
@@ -207,9 +212,11 @@ export default {
       for (const key in this.form.classs) {
         if (this.form.classs.hasOwnProperty(key)) {
           const item = this.form.classs[key];
-          _[key] = item.courseTotalMinuties - plusNum(item.cycle, "time");
+          // - plusNum(item.cycle, "time");
+          _[key] = item.courseTotalMinuties;
         }
       }
+      console.log("_", _);
       return _;
     },
     isEmpty() {
@@ -239,6 +246,7 @@ export default {
         courseTypeListByName[item.value] = item.label;
       }
       this.courseTypeListByName = courseTypeListByName;
+      console.log(this.courseTypeListByName);
     },
     async formatClasss() {
       if (this.detail) {
@@ -282,7 +290,9 @@ export default {
       // console.log(res);
       if (Object.keys(res).length <= 0) return;
       this.musicCourseSettings = res.data;
-
+      for (let key in this.musicCourseSettings) {
+        this.musicSurplus[key] = 0;
+      }
       const classs = {};
       for (const item of this.courseTypeList) {
         const key = item.value;
@@ -335,10 +345,14 @@ export default {
                 students: this.studentSubmitedData?.seleched,
                 courseTimes: item.cycle.length,
                 courseTimeDtoList: item.cycle.map((_) => ({
+
                   courseType: key,
                   dayOfWeek: _.dayOfWeek,
                   endClassTime: _.endClassTime,
                   startClassTime: _.startClassTime,
+                  startDate:_.startDate,
+                  endDate:_.endDate,
+                  expectCourseNum:_.expectCourseNum
                 })),
               });
             }
@@ -410,7 +424,19 @@ export default {
       this.collapses = val;
     },
     changecoreTeacher(val) {},
-  },
+    setUserTime(time, type) {
+
+      this.$nextTick(res=>{
+        this.musicSurplus[type] = time;
+            console.log(this.musicSurplus[type])
+      })
+
+    },
+  },watch:{
+    musicSurplus(){
+      deep
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

src/views/teamDetail/components/resetClass.vue

@@ -230,8 +230,8 @@
     </el-dialog>
     <!-- 老师以及课程设置 -->
     <el-dialog
-      title="班级设置"
-      width="950px"
+      title="班级排课"
+      width="1400px"
       :visible.sync="infoVisible"
       :modal-append-to-body="false"
     >