lims_college/frontend_web/src/views/course/detail/editForm.vue

<template>
    <el-dialog title="课程详情"
               :visible.sync="dialogVisible"
               @opened="dialogOpen"
               @closed="dialogClose"
               width="40%"
    >
        <el-form ref="form"
                 :model="formdata"
                 label-width="110px"
                 :rules="rules"
                 size="small">
            <el-form-item prop="CourseName"
                          label="课程名">
                <el-input v-model="formdata.CourseName"></el-input>
            </el-form-item>
            <el-form-item label="授课教师" prop="Teacher">
                <el-select v-model="formdata.Teacher"
                           style="width: 100%">
                    <el-option v-for="item in TeacherList"
                               :key="item.Teacher"
                               :label="item.ItemName"
                               :value="parseInt(item.ItemValue)">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="实验地点" prop="Local">
                <el-select v-model="formdata.Local"
                           style="width: 100%">
                    <el-option v-for="item in RoomList"
                               :key="item.Id"
                               :label="item.RoomName"
                               :value="parseInt(item.Id)">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="Mark"
                          label="学分">
                <el-input v-model="formdata.Mark"></el-input>
            </el-form-item>

            <el-form-item prop="Num"
                          label="人数">
                <el-input v-model="formdata.Num"></el-input>
            </el-form-item>

            <el-form-item prop="WeekTitle"
                          label="教学周">
                <el-input v-model="formdata.WeekTitle"></el-input>
            </el-form-item>

            <el-form-item prop="DayOfWeek"
                          label="周次">
                <el-input v-model="formdata.DayOfWeek"></el-input>
            </el-form-item>

            <el-form-item label="节次">
                <el-checkbox-group style="width:100%;text-align:left" v-model="checkedTimes" @change="handleCheckedChange">
                    <el-checkbox :label="item.ItemValue" v-for="item in TimeList" :key="item.ItemValue">{{ item.ItemName }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

<!--            <el-form-item label="发布状态" prop="Status">-->
<!--                <el-switch style="width:100%;text-align:left" v-model="formdata.Status"></el-switch>-->
<!--            </el-form-item>-->

        </el-form>
        <div slot="footer"
             class="dialog-footer">
            <el-button type="primary"
                       size="mini"
                       :loading="loading"
                       @click="saveEntity">保存</el-button>
            <el-button size="mini"
                       @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
import detailApi from '@/api/course/detail'
import itemDetailApi from '@/api/sysadmin/itemdetail'
export default {
  name: 'detailEditForm',
  props: {
    id: Number,
    value: Boolean,
    CourseId: Number,
    Year: Number,
    Term: Number,
    ClassId: Number,
    RoomList: Array,
    TeacherList: Array
  },
  data () {
    return {
      loading: false,
      dialogVisible: false,
      checkedTimes: [],
      Teachers: [],
      formdata: {
        Id: '',
        CourseId: '',
        Year: '',
        Term: '',
        CourseName: '',
        Teacher: 1,
        Local: '',
        Class: '',
        Mark: '',
        Num: '',
        WeekTitle: '',
        DayOfWeek: '',
        Time: []
        // Status : 0,
      },
      rules: {
        CourseName: [{
          required: true,
          message: '课程名不能为空',
          trigger: 'blur'
        }],
        Teacher: [{
          required: true,
          message: '授课教师不能为空',
          trigger: 'blur'
        }],
        Local: [{
          required: true,
          message: '实验地点不能为空',
          trigger: 'blur'
        }],
        Mark: [{
          required: true,
          message: '学分不能为空',
          trigger: 'blur'
        }],
        Num: [{
          required: true,
          message: '人数不能为空',
          trigger: 'blur'
        }],
        WeekTitle: [{
          required: true,
          message: '教学周不能为空',
          trigger: 'blur'
        }],
        DayOfWeek: [{
          required: true,
          message: '周次不能为空',
          trigger: 'blur'
        }],
        Time: [{
          required: true,
          message: '节次不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  watch: {
    value (val) {
      this.dialogVisible = val
    },
    dialogVisible (val) {
      this.$emit('input', val)
    }
  },
  mounted () {
    this.getTimeList()
  },
  methods: {
    dialogOpen () {
      this.$refs.form.resetFields()
      this.initData()
    },
    initData () {
      let _this = this
      if (this.id > 0) {
        _this.formdata = {}
        const params = {
          Id: this.id
        }
        detailApi.getEntityById(params)
          .then(res => {
            _this.formdata = res
            // 编辑时初始化表单数据，给字段赋值
            // _this.formdata.Status = _this.formdata.Status === 1
            // 判断多选的选中状态
            if (_this.formdata.Time) {
              let subStr = _this.formdata.Time
              _this.checkedTimes = subStr.split(',').map(Number)

              console.log(_this.checkedTimes)
            } else {
              _this.checkedTimes = []
            }
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        _this.formdata.Id = ''
        _this.formdata.CourseId = _this.CourseId
        _this.formdata.Year = _this.Year
        _this.formdata.Term = _this.Term
        _this.formdata.CourseName = ''
        _this.formdata.Teacher = ''
        _this.formdata.Local = ''
        _this.formdata.Class = _this.Class
        _this.formdata.Mark = ''
        _this.formdata.Num = ''
        _this.formdata.WeekTitle = ''
        _this.formdata.DayOfWeek = ''
        _this.formdata.Time = []
        // _this.formdata.Status = 0
        _this.checkedTimes = [] // 多选选中项、
      }
    },
    saveEntity () {
      let _this = this
      _this.formdata.Id = this.id
      _this.$refs['form'].validate(valid => {
        if (valid) {
          // _this.formdata.Status = _this.formdata.Status ? 1 : 0
          _this.loading = true
          detailApi.save(_this.formdata)
            .then(data => {
              _this.loading = false
              _this.dialogVisible = false
              _this.$emit('submit')
            }).catch(err => {
              _this.loading = false
              console.error(err)
            })
        } else {
          return false
        }
      })
    },

    // 获取课程节次列表
    getTimeList (query) {
      let _this = this
      if (query !== '') {
        _this.loading = true
        itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Time' })
          .then(res => {
            _this.loading = false
            this.TimeList = res
            this.initData()
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        _this.TimeList = []
      }
    },
    handleCheckedChange (val) {
      let _this = this
      _this.formdata.Time = val
    },

    dialogClose () {
      this.$refs['form'].resetFields()
      this.dialogVisible = false
    },
    close () {
      this.dialogClose()
    }
  }
}
</script>

<style>

</style>