admin/src/pages/system/courseManager/scheduleManager/edit.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="primary" @click="goLast">继续排课</el-button>
        </div>
        <ul>
          <li>
            <el-input
              placeholder="请输入课程名称"
              v-model="postData.name"
            >
            </el-input>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary" @click="search">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table
        :data="schedules.list"
        stripe
        style="width: 100%">
        <el-table-column
          prop="CourseName"
          label="课程名称">
        </el-table-column>
        <el-table-column
          prop="Price"
          label="课程价格">
        </el-table-column>
        <el-table-column
          prop="CourseNum"
          label="课时数">
        </el-table-column>
        <el-table-column
          prop="ScheduleNum"
          label="已排课时数">
        </el-table-column>
        <el-table-column
          label="课程类别"
          width="150">
          <template slot-scope="scope">
            <label>{{getLocationName(scope.row.LocationId)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          label="所在案场"
          width="150">
          <template slot-scope="scope">
            <label>{{getCaseName(scope.row.CaseId)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="setCourseDate(scope.row)">设置课程时间</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="postData.page"
      :page-size="postData.pagesize"
      layout="prev, pager, next, jumper"
      :total="schedules.pagenum">
    </el-pagination>
    <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-time-picker
                  v-model="currentCourseItem.BeginDate"
                  value-format="HH:mm:ss"
                  placeholder="选择开始日期">
                </el-time-picker>
              </div>
            </div>
          </li>
          <li class="flex-h">
            <span>结束时间：</span>
            <div class="flex-item">
              <div>
                <el-time-picker
                  v-model="currentCourseItem.EndDate"
                  value-format="HH:mm:ss"
                  placeholder="选择结束日期">
                </el-time-picker>
              </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>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDetailSave">确 定</el-button>
        <el-button type="danger" @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

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

export default {
  name: '',
  data () {
    return {
      currentCourseItem: { // 当前设置课程时间
        BeginDate: null,
        EndDate: null,
        DetailName: null,
        DetailDesc: null,
        CourseId: '',
      },
      centerDialogVisible: false,
      postData: { // 表格搜索条件
        caseid: '', // 案场id
        page: 1, // 当前页码
        pagesize: 10, // 请求数据量
        name: '', // 课程名称
        date: '',
        courseid: '',
      },
    }
  },
  mounted () {
    const { date, caseid, courseid } = this.$route.query
    if (!date || date === '') {
      this.$message({
        type: 'error',
        message: '请先选择排课时间'
      })
      this.$router.push({ name: 'scheduleManager', query: { courseid: courseid } })
    }
    if ((!courseid && courseid === '') && (!caseid || caseid === '')) {
      this.$message({
        type: 'error',
        message: '请先选择排课案场'
      })
      this.$router.push({ name: 'scheduleManager' })
    }
    this.postData.date = date
    this.postData.caseid = caseid
    this.postData.courseid = courseid
    this.updateLocationInfo()
    this.$nextTick(function () {
      this.getList()
    })
  },
  computed: {
    ...mapScheduleState({
      schedules: x => x.scheduleList
    }),
    ...mapState({
      cases: x => x.app.cases.list,
      orgid: x => x.app.user.OrgId,
    }),
    ...mapLocationState({
      location: x => x.location
    }),
  },
  methods: {
    ...mapScheduleActions([
      'GetScheduleList',
      'AddDetail'
    ]),
    ...mapLocationActions([
      'updateLocationInfo',
    ]),
    getLocationName (id) {
      return (this.location.filter(x => x.LocationId === id)[0] || {}).LocationName
    },
    getCaseName (id) {
      return (this.cases.filter(x => x.CaseId === id)[0] || {}).CaseName
    },
    setCourseDate (row) { // 设置课程时间
      this.currentCourseItem.CourseId = row.CourseId
      this.currentCourseItem.BeginDate = null
      this.currentCourseItem.EndDate = null
      this.currentCourseItem.DetailName = null
      this.currentCourseItem.DetailDesc = null
      this.centerDialogVisible = true
    },
    search () { // 搜索
      this.postData.page = 1
      this.getList()
    },
    getList () { // 获取列表
      this.GetScheduleList({...this.postData})
    },
    handleCurrentChange (val) { // 跳转到分页
      this.getList()
    },
    handleDetailSave () {
      const item = {...this.currentCourseItem,
        OrgId: this.orgid,
        CaseId: this.postData.caseid,
        BeginDate: this.postData.date + 'T' + this.currentCourseItem.BeginDate,
        EndDate: this.postData.date + 'T' + this.currentCourseItem.EndDate,
        callback: this.afterSave
      }
      this.AddDetail(item)
    },
    afterSave () {
      this.$message({
        type: 'success',
        message: '操作成功！'
      })
      this.search()
      this.centerDialogVisible = false
    },
    goLast () {
      const { courseid } = this.$route.query
      this.$router.push({name: 'scheduleManager', query: {id: courseid}})
    }
  }
}
</script>

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