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>
        <ul v-if="courseid===''">
          <li>
            <el-select v-model="CaseId" placeholder="请选择案场">
              <el-option
                v-for="item in cases"
                :key="item.CaseId"
                :label="item.CaseName"
                :value="item.CaseId">
              </el-option>
            </el-select>
          </li>
        </ul>
      </div>
      <div class="moreFilter"></div>
      <full-calendar :events="fcEvents" @changeMonth="changeMonth" locale="en" @eventClick="eventClick" @dayClick="dayClick"></full-calendar>
    </div>
    <el-dialog
      title="课时信息"
      :visible.sync="centerDialogVisible"
      width="500px"
      center>
      <div>
        <ul class="courseDetailForm">
          <li class="flex-h">
            <span>案场名称：</span>
            <span>{{currentCourseItem.CaseName}}</span>
          </li>
          <li class="flex-h">
            <span>案场地址：</span>
            <span>{{currentCourseItem.CaseAddress}}</span>
          </li>
          <li class="flex-h">
            <span>课程名称：</span>
            <span>{{currentCourseItem.CourseName}}</span>
          </li>
          <li class="flex-h">
            <span>课时名称：</span>
            <div class="flex-item">
              <div>
                <el-input
                  v-if="currentCourseItem.CourseStatus===0"
                  placeholder="请输入课时名称"
                  v-model="currentCourseItem.DetailName"
                  clearable>
                </el-input>
                <span v-else>{{currentCourseItem.DetailName}}</span>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>课时简介：</span>
            <div class="flex-item">
              <div>
                <el-input
                  v-if="currentCourseItem.CourseStatus===0"
                  type="textarea"
                  placeholder="请输入课时简介"
                  v-model="currentCourseItem.DetailDesc"
                  clearable>
                </el-input>
                <span v-else>{{currentCourseItem.DetailDesc}}</span>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>开始时间：</span>
            <!-- <div class="flex-item" v-if="currentCourseItem.CourseStatus===0">
              <div>
                <el-date-picker
                  v-if="currentCourseItem.CourseStatus===0"
                  v-model="currentCourseItem.BeginDate"
                  type="datetime"
                  placeholder="选择开始日期"
                  >
                </el-date-picker>
                <span v-else>{{this.toolClass.dateFormat(currentCourseItem.BeginDate, 'yyyy-MM-dd hh:mm')}}</span>
              </div>
            </div> -->
            <span>{{this.toolClass.dateFormat(currentCourseItem.BeginDate, 'yyyy-MM-dd hh:mm:ss')}}</span>
          </li>
          <li class="flex-h">
            <span>结束时间：</span>
            <!-- <div class="flex-item" v-if="currentCourseItem.CourseStatus===0">
              <div>
                <el-date-picker
                  v-if="currentCourseItem.CourseStatus===0"
                  v-model="currentCourseItem.EndDate"
                  type="datetime"
                  placeholder="选择结束日期">
                </el-date-picker>
                <span v-else>{{this.toolClass.dateFormat(currentCourseItem.EndDate, 'yyyy-MM-dd hh:mm')}}</span>
              </div>
            </div> -->
            <span>{{this.toolClass.dateFormat(currentCourseItem.EndDate, 'yyyy-MM-dd hh:mm:ss')}}</span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer" v-if="currentCourseItem.CourseStatus===0">
        <el-button type="danger" @click="handlDelDetail">删除该课时</el-button>
        <el-button type="primary" @click="handlUpdateDetail">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'
import fullCalendar from 'vue-fullcalendar'

const { mapState: mapScheduleState, mapActions: mapScheduleActions } = createNamespacedHelpers('schedule')

export default {
  name: '',
  data () {
    return {
      caseid: '',
      seldate: '',
      courseid: '',
      currentCourseItem: {},
      centerDialogVisible: false,
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    ...mapScheduleState({
      details: x => x.detailList
    }),
    CaseId: {
      get () {
        return this.caseid || this.defaultCaseId
      },
      set (val) {
        this.caseid = val
        this.getList()
      }
    },
    fcEvents () {
      return this.details.map(x => {
        return {
          title: x.DetailName,
          start: x.BeginDate,
          end: x.EndDate,
          id: x.DetailId,
          detail: x,
        }
      })
    },
    CurrentMonth: {
      get () {
        const now = new Date()
        return this.seldate || this.getFullDate(now)
      },
      set (val) {
        this.seldate = val
      }
    },
  },
  components: {
    fullCalendar,
  },
  methods: {
    ...mapScheduleActions([
      'GetDetailList',
      'UpdateDetail',
      'DelDetail',
      'SetListNull',
    ]),
    dayClick (day, jsEvent) { // 点击某天进入排课
      this.$router.push({ name: 'editSchedule', query: {caseid: this.CaseId, courseid: this.courseid, date: this.toolClass.dateFormat(day, 'yyyy-MM-dd')} })
    },
    eventClick (event, jsEvent, pos) { // 点击日历
      this.currentCourseItem = {...event.detail}
      this.centerDialogVisible = true
    },
    changeMonth (start, end, current) {
      this.CurrentMonth = this.toolClass.dateFormat(current, 'yyyy-MM')
      this.getList()
    },
    search () { // 搜索
      this.getList()
    },
    getList () {
      if (this.CaseId !== '' || this.courseid !== '') {
        this.GetDetailList({
          caseid: this.CaseId,
          date: this.CurrentMonth,
          courseid: this.courseid,
        })
      } else {
        this.SetListNull()
      }
    },
    handlUpdateDetail () {
      this.UpdateDetail({...this.currentCourseItem,
        // BeginDate: this.toolClass.dateFormat(this.currentCourseItem.BeginDate, 'yyyy-MM-dd hh:mm:ss'),
        // EndDate: this.toolClass.dateFormat(this.currentCourseItem.EndDate, 'yyyy-MM-dd hh:mm:ss'),
        callback: this.AfterAction})
    },
    AfterAction () {
      this.$message({
        type: 'success',
        message: '操作成功！'
      })
      this.search()
      this.centerDialogVisible = false
    },
    handlDelDetail () {
      this.$confirm('确认删除此课时?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.DelDetail({id: this.currentCourseItem.DetailId, callback: this.AfterAction})
        })
    }
  },
  mounted () {
    this.$nextTick(function () {
      const { id } = this.$route.query
      if (id && id !== '') {
        this.courseid = id
      }
      this.getList()
    })
  }
}
</script>

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