admin/src/pages/system/courseManager/scheduleManager/index.vue

<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click="addSchedule">新增排课</el-button>
        </div>
      </div>
      <div class="moreFilter"></div>
      <full-calendar :events="fcEvents" locale="zh" @eventClick="eventClick"></full-calendar>
    </div>
    <el-dialog
      title="课时信息"
      :visible.sync="centerDialogVisible"
      width="500px"
      center>
      <div>
        <ul class="courseDetailForm">
          <li class="flex-h">
            <span>课程名称：</span>
            <div class="flex-item">
              <div>
                <el-input
                  placeholder="请输入课程名称"
                  v-model="currentCourseItem.CourseName"
                  clearable>
                </el-input>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>课时名称：</span>
            <div class="flex-item">
              <div>
                <el-input
                  placeholder="请输入课时名称"
                  v-model="currentCourseItem.DetailName"
                  clearable>
                </el-input>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>课时简介：</span>
            <div class="flex-item">
              <div>
                <el-input
                  type="textarea"
                  placeholder="请输入课时简介"
                  v-model="currentCourseItem.DetailDesc"
                  clearable>
                </el-input>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>案场名称：</span>
            <div class="flex-item">
              <div>
                <el-input
                  placeholder="请输入案场名称"
                  v-model="currentCourseItem.CaseName"
                  clearable>
                </el-input>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>案场地址：</span>
            <div class="flex-item">
              <div>
                <el-input
                  placeholder="请输入案场地址"
                  v-model="currentCourseItem.CaseAddress"
                  clearable>
                </el-input>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>开始时间：</span>
            <div class="flex-item">
              <div>
                <el-date-picker
                  v-model="currentCourseItem.BeginDate"
                  type="date"
                  placeholder="选择开始日期">
                </el-date-picker>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>结束时间：</span>
            <div class="flex-item">
              <div>
                <el-date-picker
                  v-model="currentCourseItem.EndDate"
                  type="date"
                  placeholder="选择结束日期">
                </el-date-picker>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="centerDialogVisible = false">删除该课时</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fullCalendar from 'vue-fullcalendar'

export default {
  name: '',
  data () {
    return {
      currentCourseItem: {
        CourseName: 'xxx', // 课程名称
        DetailName: 'xxx', // 课时名称
        DetailDesc: 'xxx', // 课时简介
        CaseName: 'xxx', // 案场名称
        CaseAddress: 'xxx', // 案场地点
        BeginDate: 'xxx', // 开始时间
        EndDate: 'xxx', // 结束时间
      },
      centerDialogVisible: false,
      fcEvents: [{
        title: '课程名称',
        start: '2018-09-25',
        end: '2018-09-25',
      }, {
        title: '课程名称1',
        start: '2018-09-25',
        end: '2018-09-25',
      }]
    }
  },
  components: {
    fullCalendar,
  },
  methods: {
    addSchedule () { // 新增排课
      this.$router.push({name: 'editSchedule', query: {}})
    },
    eventClick (event, jsEvent, pos) { // 点击日历
      console.log(event, jsEvent, pos)
      this.centerDialogVisible = true
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>