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 size="mini"
             :model="information"
             :rules="rulesinformationForm"
             label-width="100px"
             ref="informationForm">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="信息标题222"
                        label-width="120px">
            <el-input v-model="information.title"
                      :disabled="true"
                      style="width:100%;font-size:20px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="2333"
                        label-width="120px">
            <el-input v-model="information.content"
                      type="textarea"
                      :rows=3
                      :disabled="true"
                      style="width:100%;font-size:20px"></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%"
              height="100%">
      <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="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>
    <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 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: ''
      },
      RoomList: [],
      TeacherList: [],
      activities: [],
      dialogvisible: false,
      information: {},
      rulesinformationForm: {
        title: [{
          required: true,
          message: '请输入信息标题',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入信息内容',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
    this.getData()

  },
  methods: {
    dialogOpen () {
      this.information = {}
      // this.$refs.informationForm.resetFields()
      this.getData()
    },
    dialogClose () {
      this.information = {}
      // 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 = []
      }
    },
    // 获取教师列表
    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 = []
      }
    },
    // 授课老师
    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
        }
      }
    },
    getData () {
      this.getTeacherList()
      this.getRoomList()
      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 : []
          _this.page.current = res.current
          _this.page.size = res.size
          _this.page.total = res.total
        })
        .catch(err => {
          console.error(err)
        })
    }

  }
}
</script>