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

<template>
  <div>
    <!-- <el-form-item
      label="排课次数"
      prop="courseTimes"
    >
      <el-input v-model="form.courseTimes" placeholder="请输入排课次数"/>
    </el-form-item> -->
    <el-form-item
      label="排课起始时间"
      :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: '否跳过节假日' }]"
    >
      <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="dayOfWeek"
        label="循环周期"
        width="180">
        <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>
              <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="time"
        label="课程时长(分)"
        width="180">
        <template slot-scope="scope">
          <el-form-item
            :prop="'classs.' + type + '.cycle.' + scope.$index + '.time'"
            inline-message>
            <el-input disabled v-model="scope.row.time" placeholder="请输入课程时长"/>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="startClassTime"
        label="开始时间"
        width="180">
        <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="val => startTimeChange(val, scope.row)"
              :picker-options="{
                selectableRange: ['04:30:00 - 23:59:59']
              }">
            </el-time-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="endClassTime"
        label="结束时间"
        width="180">
        <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
        prop="date"
        label=""
        width="180">
        <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>
    <el-button
      icon="el-icon-circle-plus-outline"
      type="info"
      size="small"
      plain
      :disabled="surplustime < classTimeListByType[type]"
      @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'],
  data() {
    return {
      classTimeListByType,
    }
  },
  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: "星期日" }
      ]
    }
  },
  methods: {
    create() {
      this.form.cycle.push({
        time: classTimeListByType[this.type]
      })
    },
    remove(index) {
      this.form.cycle.splice(index, 1)
    },
    startTimeChange(val, item) {
      if (val) {
        let str = dayjs(new Date()).format('YYYY-MM-DD')
        this.$set(item, 'endClassTime', addTimerFormMinute(str, val, item.time))
      } else {
        this.$set(item, 'endClassTime', '')
      }
    }
  },
}
</script>
<style lang="less" scoped>
  /deep/ .close-icon{
    cursor: pointer;
    font-size: 16px;
  }
</style>