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

<template>
  <div>
    <!-- <el-form-item
      label="跳过节假日"
      :prop="'classs.' + type + '.holiday'"
      :rules="[{ required: true, message: '否跳过节假日' }]"
    >
      <el-radio-group v-model="form.holiday">
        <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="time" 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="请选择课程时长"
              clearable
              :disabled="!!selectPrice"
              @change="
                (val) => {
                  startTimeChange(scope, val);
                }
              "
              filterable
            >
              <el-option
                v-for="(item, index) in pricesArray"
                :key="index"
                :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 label="预计课时数" width="160">
        <template slot-scope="scope">
          <!--   -->
          <el-form-item
            :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
              filterable
              @change="(val)=>{getUseTime(scope.row)}"
            >
              <el-option
                v-for="(item, index) in weekDateList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="startClassTime" label="开始时间" width="160">
        <template slot-scope="scope">
          <el-form-item
            :prop="
              'classs.' + type + '.cycle.' + scope.$index + '.startClassTime'
            "
            :rules="[{ required: true, message: '请选择开始时间' }]"
            inline-message
          >
            <el-time-picker
              style="width: 100% !important"
              v-model.trim="scope.row.startClassTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择时间"
              @change="timeChange(scope.row)"
              :picker-options="{
                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">
        <template slot-scope="scope">
          <el-form-item
            :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"
              disabled
              value-format="HH:mm"
              placeholder="请选择时间"
              :picker-options="{
                selectableRange: [scope.row.startClassTime + ':00 - 23:59:59'],
              }"
            >
            </el-time-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
              @change="holidayChange(scope.row)"
            >
              <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 label="排课起始时间" width="170">
        <template slot-scope="scope">
          <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 prop="date" width="50px">
        <template slot-scope="scope">
          <i
            @click="remove(scope.$index, scope)"
            v-if="form.cycle.length > 1"
            class="close-icon el-icon-circle-close"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      icon="el-icon-circle-plus-outline"
      type="info"
      size="small"
      plain
      :disabled="surplustime < (selectPrice || 0 || Math.min(...pricesArray))"
      @click="create"
      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";

const classTimeListByType = {};
for (const item of classTimeList) {
  classTimeListByType[item.value] = item.label;
}

export default {
  props: ["form", "type", "surplustime", "prices", "selectPrice", "holidays"],
  data() {
    return {
      classTimeListByType,
      useTime: 0,
    };
  },
  mounted() {
    // console.log("surplustime", this.surplustime);
    // console.log(this.form.cycle);
  },
  computed: {
    pickerOptions() {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      };
    },
    weekDateList() {
      return [
        { value: "1", label: "星期一" },
        { value: "2", label: "星期二" },
        { value: "3", label: "星期三" },
        { value: "4", label: "星期四" },
        { value: "5", label: "星期五" },
        { value: "6", label: "星期六" },
        { value: "7", label: "星期日" },
      ];
    },
    pricesArray() {
      return (this.prices[this.type] || "").split(",").filter((item) => !!item);
    },
  },
  methods: {
    updateUseTime() {
      let time = 0
        for (const item of this.form.cycle) {
          time += (item.time || 0) * (item.expectCourseNum || 0)
        }

        this.$emit('setUserTime', time, this.type)
    },
    create() {
      if(this.surplustime<=this.useTime){
        this.$message.error('已排课时长使用完毕,请修改预计课时数')
        return
      }
      const initVal = {};
      if (this.selectPrice) {
        initVal.time = this.selectPrice;
      }
      this.form.cycle.push(initVal);
      this.updateUseTime()
    },

    remove(index) {
      this.form.cycle.splice(index, 1);
      this.updateUseTime()
    },
    startTimeChange(item, val) {
      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) {
        this.$set(
          item.row,
          "expectCourseNum",
          parseInt((this.surplustime - this.useTime) / val)
        );
        // this.surplusTime
      } else {
        this.$set(item.row, "expectCourseNum", 0);
      }
      this.getUseTime();
    },
    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)
        );
      } else {
        this.$set(item, "endClassTime", "");
      }
      this.updateUseTime()
    },
    holidayChange(row) {
      if(row){
          this.$set(
          row,
          "startDate",
          ''
        );
             this.$set(
          row,
          "endDate",
          ''
        );
      }
    },
    getUseTime(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.updateUseTime()
    //  this.$emit('setUserTime', this.useTime, this.type)
    },
    changeStartDate(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);
          const exp = Math.max(row.expectCourseNum - 1, 0)
          let end = dayjs(val).add(num + (exp*7), 'day')
          if (row.holiday) {
            for (const d of this.holidays) {
              if (dayjs(d).isBetween(row.startDate, end.format('YYYY-MM-DD'), null, '[]')) {
                end = end.add(7, 'day')
              }
            }
          }
          this.$set(
          row,
          "endDate",
          end.format('YYYY-MM-DD')
        );
      }else{
this.$set(
          row,
          "endDate",
         ''
        );
      }
      this.updateUseTime()
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .close-icon {
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 24px;
}
</style>