sz-kjsxy-web/src/views/course/components/addClass.vue

<template>
  <div>
    <Modal v-model="isShow" width="70" title="排课设置">
      <div class="txl">
        <div>课程名称：第六期高级科创人才研修班</div>
        <div>开课日期：2024.3.1--2024.9.1</div>
        <div>类别：正常课程</div>
      </div>
      <div class="txl">
        <div>班主任：李老师</div>
        <div>课表状态：未发布</div>
      </div>
      <div class="txl">
        <div>
          <el-button @click="addColum" type="primary" size="small">新增一行</el-button>
        </div>
        <div>
          <el-button type="primary" size="small">导入</el-button>
        </div>
        <div>
          <el-button type="primary" size="small">发布课表</el-button>
        </div>
        <div>
          <el-button type="primary" size="small">下载并打印课表</el-button>
        </div>
      </div>

      <div class="schedule">
        <el-table :data="scheduleData" border style="width: 100%" row-class-name="hover-row">
          <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"
            :width="column.width">
            <template slot-scope="scope">
              <div v-if="column.type === 'time'"  class="subjectCell" @click="openTime(scope.$index,scope.row[column.prop])">
                {{ formatTime(scope.row[column.prop]) }}
              </div>
              <div class="subjectCell" v-else @click="openSubject(scope.$index,column.prop,scope.row[column.prop])">
                <div v-if="formatSubject(scope.row[column.prop])" class="close"
                  @click.stop="delColum(scope.$index,column.prop)">X</div>
                <div v-html='formatSubject(scope.row[column.prop])'></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" :width="80">
            <template slot-scope="scope">
              <div>
                <el-button type="danger" size="small" @click="delTime(scope.$index)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template v-slot:footer>
        <el-button type="primary" style='margin-left:5px;margin-bottom:5px;' @click="submit">确认</el-button>
        <el-button plain type="primary" ghost style='margin-left:5px;margin-bottom:5px;'
          @click="isShow=false">取消</el-button>
      </template>
    </Modal>
    <!-- 时间选择 -->
    <change-time ref="changeTime" @refreshTime="updateTime"></change-time>
    <!-- 课时选择 -->
    <change-subject ref="changeSubject" @refresh="updateSubject"></change-subject>
  </div>
</template>

<script>
  import changeTime from './changeTime.vue'
  import changeSubject from './changeSubject.vue'
  export default {
    components: {
      changeTime,
      changeSubject
    },
    data() {
      return {
        isShow: false,
        hoverRowIndex: null,
        columns: [{
            type: 'time',
            prop: 'time',
            label: '时间',
            width: '120'
          },
          {
            prop: 'monday',
            label: '星期一'
          },
          {
            prop: 'tuesday',
            label: '星期二'
          },
          {
            prop: 'wednesday',
            label: '星期三'
          },
          {
            prop: 'thursday',
            label: '星期四'
          },
          {
            prop: 'friday',
            label: '星期五'
          },
          {
            prop: 'saturday',
            label: '星期六'
          },
          {
            prop: 'sunday',
            label: '星期日'
          }
        ],
        scheduleData: [{
            time: ['09:00', '10:00'],
            monday: {
              name: 0,
              name_value: '管理',
              teacher: 0,
              teacher_value: '王老师',
              room: '会议室1'
            },
            tuesday: {},
            wednesday: {},
            thursday: {},
            friday: {},
            saturday: {},
            sunday: {}
          },
          {
            time: ['10:15', '11:15'],
            monday: {},
            tuesday: {},
            wednesday: {},
            thursday: {},
            friday: {},
            saturday: {},
            sunday: {}
          },
          {
            time: ['11:15', '13:00'],
            monday:{},
            tuesday: {},
            wednesday: {},
            thursday: {},
            friday: {},
            saturday: {},
            sunday: {}
          },
          {
            time: ['13:00', '14:00'],
            monday:{},
            tuesday: {},
            wednesday: {},
            thursday: {},
            friday: {},
            saturday: {},
            sunday: {}
          },
          {
            time: ['14:15', '15:15'],
            monday:{},
            tuesday: {},
            wednesday: {},
            thursday: {},
            friday: {},
            saturday: {},
            sunday: {}
          }
        ],
      }
    },
    methods: {
      // 增加一行
      addColum(index) {
        const obj = {
          time: [],
          monday:{},
          tuesday: {},
          wednesday: {},
          thursday: {},
          friday: {},
          saturday: {},
          sunday: {}
        }
        this.scheduleData.push(obj)
      },
      //  删除一行
      delTime(index) {
        this.scheduleData.splice(index, 1)
      },
      // 更改上课时间
      formatTime(val) {
        if (val && val.length > 0) {
          return val.join("--")
        }
      },
      openTime(index, time) {
        this.$refs.changeTime.setIndex(index, time)
        this.$refs.changeTime.isShow = true
      },
      updateTime(e) {
        this.scheduleData[e.index]['time'] = e.range
      },
      // 更改课程
      formatSubject(val) {
        if (!val) {
          return ''
        }
        if (JSON.stringify(val) === '{}') {
          return ''
        } else {
          return `<div>${val.teacher_value}</div><div>${val.name_value}</div><div>${val.room}</div>`
        }
      },
      openSubject(index, prop, form) {
        this.$refs.changeSubject.setIndex(index, prop, form)
        this.$refs.changeSubject.isShow = true
      },
      updateSubject(e) {
        console.log("e1", e)
        this.scheduleData[e.index][e.prop] = e
      },
      delColum(index, prop) {
        this.scheduleData[index][prop] = {}
      },
      //
      submit() {}
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__cell {
    position: relative;
  }

  .subjectCell {
    min-height: 50px;

    .close {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #ddd;
      color: #fff;
      text-align: center;
      line-height: 20px;
      top: 5px;
      right: 5px;
      border-radius: 20px;
      cursor: pointer
    }

    &>div {
      text-align: center;
    }
  }

  .txl {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &>div {
      margin-right: 10px;
    }
  }

</style>