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

<template>
  <el-dialog title="新增课程表信息"
             :visible.sync="dialogvisible"
             @opened="dialogOpen"
             @closed="dialogClose"
             width="65%">
    <el-form size="mini"
             :model="course"
             label-width="100px"
             ref="courseForm">
      <el-row :gutter="24"
              class="donorsaddformcss">

        <el-col :span="6">
          <el-form-item label="学年"
                        prop="content">
            <el-input v-model="course.Year"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="班级"
                        prop="title">
            <el-input v-model="course.Class"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学期"
                        prop="title">
            <el-input v-model="course.Term"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="multipleTable"
              :data="activities"
              border
              fit
              tooltip-effect="dark"
              style="width: 100%"
              @sort-change="orderby"
              height="100%">
      <el-table-column prop="title"
                       fit
                       min-width="80px"
                       label="教学周"
                       align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="content"
                       label="周次"
                       align="center"
                       min-width="160px"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="content"
                       label="节次"
                       align="center"
                       min-width="160px"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="content"
                       label="实验课程名称"
                       align="center"
                       min-width="160px"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="status"
                       align="center"
                       min-width="40px"
                       label="学分"
                       show-overflow-tooltip
                       :formatter="formatStatus"></el-table-column>
      <el-table-column prop="createdtime"
                       align="center"
                       min-width="120px"
                       label="授课老师"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="createdtime"
                       align="center"
                       min-width="120px"
                       label="人数"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="createdtime"
                       align="center"
                       min-width="120px"
                       label="实验地点"
                       show-overflow-tooltip></el-table-column>
    </el-table>

    <span slot="footer">
      <el-button size="mini"
                 @click="save(0)">保存</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: {
    informationId: Number
  },
  data () {
    return {
      dialogvisible: false,
      course: {
        CourseId: '',
        Year: '',
        Term: '',
        CourseName: '',
        Teacher: '',
        Local: '',
        Class: '',
        Mark: '',
        Num: '',
        WeekTitle: '',
        DayOfWeek: '',
        Time: '',
        Status: ''
      },

    }
  },
  created () {
    this.getData()
  },
  methods: {
    dialogOpen () {
      this.course = {}
      console.log("informationId:" + this.informationId)
      this.$refs.courseForm.resetFields()
      this.getData()
    },
    dialogClose () {
      this.course = {}
      console.log("informationId:" + this.informationId)
      this.$refs.courseForm.resetFields()
      this.$emit('handleClose')
      this.dialogVisible = false
    },
    save (flag) {
      this.$refs.courseForm.validate(valid => {
        if (valid) {
          this.course.status = flag
          InformationApi.save(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.informationId > 0) {
        var id = {
          id: this.informationId
        }
        InformationApi.getById(id)
          .then(res => {
            this.course = res
          })
      }
    }
  }
}

</script>

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

.donorsaddformcss .el-col-8 {
  height: 58px;
}
</style>