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

<template>
  <div>
    <el-form-item
      label="排课次数"
    >
      <el-input placeholder="请输入排课次数"/>
    </el-form-item>
    <el-form-item
      label="排课起始时间"
    >
      <el-input placeholder="请输入排课起始时间"/>
    </el-form-item>
    <el-form-item
      label="跳过节假日"
    >
      <el-radio-group>
        <el-radio :label="3">是</el-radio>
        <el-radio :label="6">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-table
      :data="form.cycle"
    >
      <el-table-column
        prop="date"
        label="循环周期"
        width="180">
        <template>
          <el-form-item inline-message>
            <el-input placeholder="请输入循环周期"/>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="课程时长(分)"
        width="180">
        <template>
          <el-form-item inline-message>
            <el-input placeholder="请输入课程时长"/>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="开始时间"
        width="180">
        <template>
          <el-form-item inline-message>
            <el-input placeholder="请输入课程时长"/>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="结束时间"
        width="180">
        <template>
          <el-form-item inline-message>
            <el-input  placeholder="请输入课程时长"/>
          </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
      @click="create"
      style="margin-top: 10px;width: 100%;"
    >添加循环</el-button>
  </div>
</template>
<script>
export default {
  props: ['form'],
  created() {
    if (!this.form) {
      this.form = {
        cycle: [{}]
      }
    }
  },
  methods: {
    create() {
      this.form.cycle.push({})
    },
    remove(index) {
      const list = [...this.form.cycle]
      list[index] = null
      this.form.cycle = list.map(item => !!item)
    }
  },
}
</script>
<style lang="less" scoped>
  /deep/ .close-icon{
    cursor: pointer;
    font-size: 16px;
  }
</style>