lims_college/frontend_web/src/views/demo/page1/components/courseInfoDialog.vue

<template>
  <el-dialog title="课程详情"
             :visible.sync="dialogvisible"
             @opened="dialogOpen"
             @closed="dialogClose"
             width="75%">
    <el-form label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="标题"
                        label-width="120px">
            {{courselist.Title}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学年"
                        label-width="120px">
            {{courselist.Year}}年
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学期"
                        label-width="120px">
            {{this.termName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班级"
                        label-width="120px">
            {{this.className}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="multipleTable"
              :data="activities"
              border
              fit
              tooltip-effect="dark"
              style="width: 100%"
              height="300px">
      <el-table-column prop="CourseName"
                       align="center"
                       min-width="120px"
                       label="课程名称"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="Teacher"
                       align="center"
                       min-width="120px"
                       label="授课老师"
                       show-overflow-tooltip
                       :formatter="teacherFormatter"></el-table-column>
      <el-table-column prop="Local"
                       align="center"
                       min-width="120px"
                       label="实验地点"
                       show-overflow-tooltip
                       :formatter="localFormatter"></el-table-column>
      <el-table-column prop="Num"
                       align="center"
                       min-width="80px"
                       label="人数"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="DayOfWeek"
                       align="center"
                       min-width="180px"
                       :formatter="dayOfWeekFormatter"
                       label="周次"></el-table-column>
      <el-table-column prop="Section"
                       align="center"
                       min-width="180px"
                       label="节次"></el-table-column>
    </el-table>
    <template slot="footer">
      <el-pagination style="margin: -10px;"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page.current"
                     :page-size="page.size"
                     :total="page.total"
                     :page-sizes="[10, 20]"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </template>
  </el-dialog>
</template>

<script>
import ClassApi from '@/api/class'
import detailApi from '@/api/course/detail'
import itemDetailApi from '@/api/sysadmin/itemdetail'
import { searchmanagingroomdata } from '@/api/instrumentroom'
export default {
  name: 'informationDialog',
  props: {
    courselist: { // 当前样本存在位置
      type: Array
    }
  },
  data () {
    return {
      page: {
        current: 1,
        size: 10,
        total: 1
      },
      sort: {
        prop: '',
        order: ''
      },
      TimeList: [], // 节次
      RoomList: [],
      className: [], // 班级名称
      DayOfWeekList: [], // 周次列表
      TeacherList: [],
      termName: '',
      activities: [],
      dialogvisible: false,
      information: {},
      rulesinformationForm: {
        title: [{
          required: true,
          message: '请输入信息标题',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入信息内容',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
    this.getTimeList()
  },
  methods: {
    dialogOpen () {
      this.information = {}
      // this.$refs.informationForm.resetFields()
      this.getData()
    },
    dialogClose () {
      this.activities = []
      // this.$refs.informationForm.resetFields()
      // this.$emit('handleClose')
      this.dialogVisible = false
    },
    // 分页-改变分页大小
    handleSizeChange (value) {
      this.page.size = value
      this.page.current = 1
      this.getData()
    },
    // 分页-改变当前页
    handleCurrentChange (value) {
      this.page.current = value
      this.getData()
    },
    // 获取实验室地点
    getRoomList () {
      let _this = this
      let params = {
        _currentPage: 1,
        _size: 9999
      }
      if (params !== '') {
        _this.loading = true
        searchmanagingroomdata(params)
          .then(res => {
            _this.loading = false
            this.RoomList = res.info.items
          })
          .catch(function (error) {
            console.log(error)
          })
      } else {
        _this.RoomList = []
      }
    },
    // 获取班级列表
    getClassList () {
      let params = {
        _currentPage: 1,
        _size: 9999
      }
      ClassApi.getAllClass(params)
        .then(res => {
          this.getClassName(res.records)
        })
    },
    // 获取教师列表
    getTeacherList (query) {
      let _this = this
      if (query !== '') {
        _this.loading = true
        itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Teacher' })
          .then(res => {
            _this.loading = false
            this.TeacherList = res
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        _this.TeacherList = []
      }
    },
    // 周次
    getDayOfWeekList () {
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'DayOfWeek' })
              .then(res => {
                this.DayOfWeekList = res
              })
              .catch(err => {
                console.error(err)
              })
    },
    // 授课老师
    teacherFormatter (row, column) {
      for (var i = 0; i < this.TeacherList.length; i++) {
        if (parseInt(this.TeacherList[i].ItemValue) === row.Teacher) {
          return this.TeacherList[i].ItemName
        }
      }
    },
    // 实验地点
    localFormatter (row, column) {
      for (var i = 0; i < this.RoomList.length; i++) {
        if (parseInt(this.RoomList[i].Id) === row.Local) {
          return this.RoomList[i].RoomName
        }
      }
    },
    // 周次
    dayOfWeekFormatter (row, column) {
      for (var i = 0; i < this.DayOfWeekList.length; i++) {
        if (parseInt(this.DayOfWeekList[i].ItemValue) === row.DayOfWeek) {
          return this.DayOfWeekList[i].ItemName
        }
      }
    },
    // 获取课程节次列表
    getTimeList (query) {
      let _this = this
      if (query !== '') {
        itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Time' })
          .then(res => {
            _this.TimeList = res
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        _this.TimeList = []
      }
    },
    // 获取学期名称
    getTermName (termList) {
      let _this = this
      termList.forEach(function (value, key) {
        if (_this.courselist.Term == value.ItemValue) {
          _this.termName = value.ItemName
        }
      })
    },
    // 获取学期
    getTerm () {
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Term' })
        .then(res => {
          this.getTermName(res)
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 获取学期名称
    getClassName (termList) {
      let _this = this
      termList.forEach(function (value, key) {
        if (_this.courselist.ClassId === value.Id) {
          _this.className = value.Name
        }
      })
    },
    getData () {
      this.getTeacherList()
      this.getRoomList()
      this.getTerm()
      this.getClassList()
      this.getDayOfWeekList()
      let _this = this
      let query = {
        // 分页信息
        size: this.page.size,
        current: this.page.current,
        CourseId: this.courselist.CourseId // 课程ID
      }
      detailApi.getList(query)
        .then(res => {
          _this.activities = res.records ? res.records : []
          for (var i = 0; i < _this.activities.length; i++) {
            _this.activities[i].Section = ''
            if (_this.activities[i].Time != '') {
              var section = _this.activities[i].Time.split(",")
              for (var a = 0; a < _this.TimeList.length; a++) {
                if (section.indexOf(_this.TimeList[a].ItemValue) > -1) {
                  if (_this.activities[i].Section === '') {
                    _this.activities[i].Section = _this.TimeList[a].ItemName
                  } else {
                    _this.activities[i].Section = _this.activities[i].Section + ',' + _this.TimeList[a].ItemName
                  }
                }
              }
            }
          }
          _this.page.current = res.current
          _this.page.size = res.size
          _this.page.total = res.total
        })
        .catch(err => {
          console.error(err)
        })
    }

  }
}
</script>