lims_college/frontend_web/src/views/course/components/courseInfoDialog.vue

<template>
  <el-dialog :title="!course.Id ? '新增课程表信息' : '编辑课程表信息'"
             :visible.sync="dialogvisible"
             @opened="dialogOpen"
             @closed="dialogClose"
             width="30%">
    <el-form size="mini"
             :model="course"
             label-width="80px"
             ref="courseForm">
      <el-form-item label="标题"
                    prop="Title">
        <el-input v-model="course.Title"
                  placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="教学周"
                    prop="CourseWeek">
        <el-input v-model="course.CourseWeek"
                  placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="学年"
                    prop="Year">
        <el-select v-model="course.Year"
                   placeholder="请选择年级学年">
          <el-option v-for="item in years"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学期"
                    prop="Term">
        <el-select v-model="course.Term">
          <el-option v-for="item in termList"
                     :key="parseInt(item.ItemValue)"
                     :label="item.ItemName"
                     :value="parseInt(item.ItemValue)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级"
                    prop="ClassId">
        <el-select v-model="course.ClassId"
                   filterable
                   placeholder="请选择班级">
          <el-option v-for="item in classList"
                     :key="item.Id"
                     :label="item.Name"
                     :value="item.Id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-radio-group v-model="course.Status">

          <el-radio class="radio"
                    v-for="item in statusList"
                    :label="item.ItemValue"
                    :key="item.ItemName">{{item.ItemName}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button size="mini"
                 @click="save()">保存</el-button>
      <el-button size="mini"
                 @click="dialogClose">关闭</el-button>

    </span>
  </el-dialog>
</template>

<script>

import CourseApi from '@/api/course'

export default {
  name: 'courseInfoDialog',
  props: {
    termList: Array,
    courseId: Number,
    statusList: Array,
    classList: Array
  },
  data () {
    return {
      years: [],
      checkAll: false,
      dialogvisible: false,
      course: {}
    }
  },
  created () {
    let myDate = new Date()
    let year = myDate.getFullYear() + 1 // 获取当前年
    this.initSelectYear(year)
    this.getData()
  },
  methods: {
    initSelectYear (year) {
      this.years = []
      for (let i = 0; i < 5; i++) {
        this.years.push({ value: (year - i), label: (year - i) + '年' })
      }
    },
    dialogOpen () {
      this.course = {}
      this.$refs.courseForm.resetFields()
      this.getData()
    },
    dialogClose () {
      this.course = {}
      this.$refs.courseForm.resetFields()
      this.$emit('handleClose')
      this.dialogVisible = false
    },
    save () {
      this.$refs.courseForm.validate(valid => {
        if (valid) {
          CourseApi.addCourse(this.course, {})
            .then(res => {
              this.$emit('handleClose')
              this.dialogvisible = false
            })
            .catch(err => {
              // handle error
              console.error(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编辑修改
    getData () {
      if (this.courseId > 0) {
        var id = {
          id: this.courseId
        }
        CourseApi.getById(id)
          .then(res => {
            this.course = res
          })
      }
    }

  }
}

</script>

<style lang="scss">
.button {
  padding: 0;
  float: right;
}
</style>