lims_college/frontend_web/src/views/demo/page1/index.vue

<template>
  <d2-container>
    <!-- <img class="page_logo"
           src="./image/logo.png"
           width="100%"
           height="115"
           style="margin:0px"> -->
    <div class="background_css">
      <el-row style="height:100%">
        <el-col :span="20">
          &nbsp;
        </el-col>
        <el-col :span="4">
          <div class="login_bg5x">
            <a href="/#/login"
               alt="logo">
              <img src="./image/button.png"
                   class="intelligent1-img" /> </a>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="15">
      <el-card style="width: 100%">
        <div style="font-size:25px">
          公告
        </div>
        <el-table ref="multipleTable"
                  :data="activities"
                  border
                  fit
                  @row-click="openDetails"
                  tooltip-effect="light">
          <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="createdtime"
                           align="center"
                           min-width="50px"
                           label="发布时间"></el-table-column>
        </el-table>
        <el-pagination style="margin: 10px;float:right;"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="search.page.current"
                       :page-sizes="[10, 15, 20]"
                       :page-size="search.page.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="search.page.total">
        </el-pagination>
      </el-card>
    </el-row>

    <el-row :gutter="15"
            style="margin-top: 10px;">
      <el-card>
        <div style="font-size:25px">
          课程表
        </div>
        <template style="padding: 15px;">
          <el-form size="mini"
                   ref="form"
                   :inline="true"
                   class="sbutton_padding"
                   style="margin-top: 7px;text-align:right;">
            <el-form-item label="学年">
              <el-select v-model="searchcourse.Year"
                         style="width: 140px;"
                         filterable>
                <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="班级"
                          class="sbutton_margin">
              <el-select ref="reftube"
                         v-model="searchcourse.ClassId"
                         filterable
                         placeholder="请选择"
                         style="width:100%">
                <el-option v-for="item in classList"
                           :key="item.Id"
                           :label="item.Name"
                           :value="parseInt(item.Id)">
                </el-option>
              </el-select>
            </el-form-item>
            <el-button size="mini"
                       type="primary"
                       @click="initDatasCourse()"
                       style="margin-left:10px"
                       @command="searchCommand"
                       class="sbutton_margin">查 询</el-button>
            <el-button size="mini"
                       type="primary"
                       @click="clearSearch"
                       class="sbutton_margin">重 置</el-button>
          </el-form>
        </template>
        <el-table ref="multipleTable"
                  :data="activitiescourse"
                  border
                  @row-click="openCourseDetails"
                  fit
                  tooltip-effect="dark"
                  style="width: 100%"
                  height="280px">>

          <el-table-column prop="Year"
                           fit
                           min-width="80px"
                           label="学年"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="Term"
                           label="学期"
                           align="center"
                           min-width="160px"
                           show-overflow-tooltip
                           :formatter="formatTerm"></el-table-column>
          <el-table-column prop="Title"
                           label="标题"
                           align="center"
                           min-width="160px"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="ClassId"
                           label="班级"
                           align="center"
                           min-width="160px"
                           show-overflow-tooltip
                           :formatter="formatClass"></el-table-column>
          <el-table-column prop="CreatedTime"
                           align="center"
                           min-width="120px"
                           label="创建时间"
                           show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination style="margin: 10px;float:right;"
                       @size-change="handleSizeChange_course"
                       @current-change="handleCurrentChange_course"
                       :current-page="searchcourse.page.current"
                       :page-sizes="[10, 15, 20]"
                       :page-size="searchcourse.page.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="searchcourse.page.total">
        </el-pagination>
      </el-card>
    </el-row>

    <el-row :gutter="15"
            style="margin-top: 10px;">
      <el-card>
        <div style="font-size:25px">
          值班表
        </div>
        <template style="padding: 15px;">
          <el-form size="mini"
                   ref="form"
                   :inline="true"
                   class="sbutton_padding"
                   style="margin-top: 7px;text-align:right;">
            <el-form-item label="学年"
                          class="sbutton_margin">

              <el-select v-model="searchduty.Year"
                         placeholder="请选择年级学年"
                         filterable>
                <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="学期"
                          class="sbutton_margin">
              <el-select v-model="searchduty.Term"
                         style="width: 140px;"
                         filterable>
                <el-option v-for="item in termList"
                           :key="item.ItemValue"
                           :label="item.ItemName"
                           :value="parseInt(item.ItemValue)">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题"
                          class="sbutton_margin">
              <el-input style="width: 140px;"
                        v-model="searchduty.Title"
                        placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-button size="mini"
                       type="primary"
                       @click="initDatas_duty()"
                       style="margin-left:10px"
                       class="sbutton_margin">查 询</el-button>
            <el-button size="mini"
                       type="primary"
                       @click="clearSearchduty"
                       class="sbutton_margin">重 置</el-button>
          </el-form>
        </template>
        <el-table :data="activitiesduty"
                  border
                  fit
                  @row-click="openDutyDetails"
                  tooltip-effect="dark"
                  style="width: 100%;margin-top: 5px;"
                  height="280px">
          <el-table-column prop="Year"
                           fit
                           min-width="160px"
                           label="学年"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="Term"
                           label="学期"
                           align="center"
                           min-width="160px"
                           show-overflow-tooltip
                           :formatter="formatTerm"></el-table-column>
          <el-table-column prop="Title"
                           label="标题"
                           align="center"
                           min-width="120px"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="CreatedTime"
                           label="创建日期"
                           align="center"
                           min-width="120px"
                           show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination style="margin: 10px;float:right;"
                       @size-change="handleSizeChangeduty"
                       @current-change="handleCurrentChangeduty"
                       :current-page="searchduty.page.current"
                       :page-sizes="[10, 15, 20]"
                       :page-size="searchduty.page.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="searchduty.page.total">
        </el-pagination>
      </el-card>
    </el-row>

    <!-- 信息发布 -->
    <informationInfoDialog ref="informationDialog"
                           :informationId="informationId"
                           width="75"></informationInfoDialog>
    <!-- 课程管理 -->
    <courseInfoDialog ref="courseDialog"
                      :courselist="courselist"
                      width="75"></courseInfoDialog>
    <!-- 值班表 -->
    <dutyInfoDialog ref="dutyDialog"
                    :dutydetail="dutydetail"
                    width="75"></dutyInfoDialog>
  </d2-container>
</template>

<script>
import itemDetailApi from '@/api/sysadmin/itemdetail'
import ClassApi from '@/api/class'
import InformationApi from '@/api/information'
import CourseApi from '@/api/course'
import DutyApi from '@/api/duty'
import informationInfoDialog from './components/informationInfoDialog'
import courseInfoDialog from './components/courseInfoDialog'
import dutyInfoDialog from './components/dutyInfoDialog'
export default {
  name: 'informationIndex',
  components: {
    informationInfoDialog,
    courseInfoDialog,
    dutyInfoDialog
  },
  data () {
    return {
      dialogvisible: false,
      years: [],
      details: false,
      classList: [], // 班级列表
      statusList: [], // 状态列表
      termList: [], // 学期
      activities: [],
      activitiescourse: [],
      courselist: [],
      dutydetail: [],
      activitiesduty: [],
      activitiesclass: [],
      informationId: -1,
      search: {
        title: '',
        status: 1,
        content: '',
        page: {
          total: 0,
          current: 1,
          size: 10
        }
      },
      searchduty: {
        Term: '',
        Year: '',
        Title: '',
        page: {
          total: 0,
          current: 1,
          size: 10
        }
      },
      searchcourse: {
        Term: '',
        Year: '',
        ClassId: '',
        page: {
          total: 0,
          current: 1,
          size: 10
        }
      },
      status: [{
        key: '全部',
        value: -1
      },
      {
        key: '草稿',
        value: 0
      },
      {
        key: '已发布',
        value: 1
      }
      ],
      // 列表排序
      Column: {
        Order: '',
        Prop: ''
      }
    }
  },
  mounted () {
    this.getTerm()
    this.initDatas()
    this.initDatasCourse()
    this.initSelectYear()
    this.initDatas_duty()
    // this.initDatas_class()
    this.getClassList()
  },
  methods: {
    openDetails (row) {
      this.informationId = row.id
      this.$refs.informationDialog.dialogvisible = true
    },
    // 课程
    openCourseDetails (row) {
      this.courselist.CourseId = row.Id
      this.courselist.Year = row.Year
      this.courselist.Title = row.Title
      this.courselist.Term = row.Term
      this.courselist.ClassId = row.ClassId
      this.$refs.courseDialog.dialogvisible = true
    },
    openDutyDetails (row) {
      this.dutydetail = []
      this.dutydetail.Id = row.Id
      this.dutydetail.Title = row.Title
      this.dutydetail.Year = row.Year
      this.dutydetail.Term = row.Term
      this.$refs.dutyDialog.dialogvisible = true
    },
    // class
    // initDatas_class () {
    //   let params = {
    //     _currentPage: this.currpage,
    //     _size: this.size
    //   }
    //   ClassApi.getAllClass(params)
    //     .then(res => {
    //       for (let i = 0; i < res.records.length; i++) {
    //         this.activitiesclass.push({ value: (res.records[i].Id), label: (res.records[i].Year + '_' + res.records[i].Name) })
    //       }
    //     })
    // },
    // 发布状态
    getStatus () {
      let _this = this
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'PublishStatus' })
        .then(res => {
          _this.statusList = res
          // this.initDatas()
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 匹配状态
    formatStatus (row, column) {
      for (var i = 0; i < this.statusList.length; i++) {
        if (parseInt(this.statusList[i].ItemValue) === parseInt(row.Status)) {
          return this.statusList[i].ItemName
        }
      }
    },
    // 匹配班级
    formatClass (row, column) {
      for (var i = 0; i < this.classList.length; i++) {
        if (parseInt(this.classList[i].Id) === row.ClassId) {
          return this.classList[i].Name
        }
      }
    },
    // 获取学期
    getTerm () {
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Term' })
        .then(res => {
          this.termList = res
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 匹配学期
    formatTerm (row, column) {
      for (var i = 0; i < this.termList.length; i++) {
        if (parseInt(this.termList[i].ItemValue) === parseInt(row.Term)) {
          return this.termList[i].ItemName
        }
      }
    },
    // 获取班级列表
    getClassList () {
      let params = {
        _currentPage: 1,
        _size: 9999
      }
      ClassApi.getAllClass(params)
        .then(res => {
          this.classList = res.records
        })
    },
    initSelectYear (year) {
      var myDate = new Date()
      var year = myDate.getFullYear() + 1 // 获取下年
      for (let i = 0; i < 5; i++) {
        this.years.push({ value: (year - i), label: (year - i) + '年' })
      }
    },
    // 初始化列表数据,值班管理列表
    initDatas_duty () {
      let _this = this
      // let params = {
      //   _currentPage: this.currpage,
      //   _size: this.size,
      //   Year: this.search.Year,
      //   Term: this.search.Term,
      //   Title: this.search.Title,
      //   Order: this.search.Order,
      //   Prop: this.search.Prop
      // }
      DutyApi.getPageList(this.searchduty)
        .then(res => {
          _this.activitiesduty = res.records
          _this.searchduty.page.total = res.total
        })
    },
    // 初始化列表数据课程
    initDatasCourse () {
      CourseApi.getPageList(this.searchcourse)
        .then(res => {
          this.activitiescourse = res.records
          this.searchcourse.page.total = res.total
        })
    },
    formatStatus (row, column) {
      for (var i = 0; i < this.status.length; i++) {
        if (this.status[i].value === row.status) {
          return this.status[i].key
        }
      }
    },
    initSearchInfo () {
      this.search = {
        Title: '',
        Status: -1,
        Content: ''
      }
    },
    // 初始化分页分页对象
    initPageInfo () {
      this.search.page = {
        total: 0,
        current: 1,
        size: 10
      }
    },
    // // 打开 添加弹窗
    // openinformationadd () {
    //   this.$refs.informationDialog.dialogvisible = true
    // },
    // // 打开 编辑弹窗
    // informationedit (informationId) {
    //   this.informationId = informationId
    //   this.$refs.informationDialog.dialogvisible = true
    // },
    // 新增修改弹窗关闭 返回页面
    // handleClose () {
    //   this.informationId = -1
    //   this.$refs.informationDialog.dialogvisible = false
    //   this.initPageInfo()
    //   this.initDatas()
    // },
    publish (information) {
      information.status = 1
      InformationApi.save(information)
    },
    // 初始化列表数据
    initDatas () {
      InformationApi.getList(this.search)
        .then(res => {
          this.activities = res.records
          this.search.page = res
        })
    },
    // 信息发布
    handleSizeChange (val) {
      this.search.page.size = val
      this.search.page.current = 1
      this.initDatas()
    },
    handleCurrentChange (val) {
      this.search.page.current = val
      this.initDatas()
    },
    // 课程管理
    handleSizeChange_course (val) {
      this.searchcourse.page.size = val
      this.searchcourse.page.current = 1
      this.initDatasCourse()
    },
    handleCurrentChange_course (val) {
      this.searchcourse.page.current = val
      this.initDatasCourse()
    },
    // 值班表
    handleSizeChangeduty (val) {
      this.searchduty.page.size = val
      this.searchduty.page.current = 1
      this.initDatas_duty()
    },
    handleCurrentChangeduty (val) {
      this.searchduty.page.current = val
      this.initDatas_duty()
    },
    searchCommand () {
      // this.initDatasCourse()
    },
    clearSearch () {
      this.searchcourse.Year = ''
      this.searchcourse.ClassId = ''
      this.initDatasCourse()
    },
    clearSearchduty () {
      this.searchduty.Year = ''
      this.searchduty.Term = ''
      this.searchduty.Title = ''
      this.initDatas_duty()
    }

  }
}
</script>

<style lang="scss">
.background_css {
  text-align: center;
  background: url("./image/background.png");
  width: 100%;
  min-height: 135px;
  height: 135px;
  margin: 0 auto;
  background-size: cover;
}

.intelligent1-img {
  width: 120px;
}

.login_bg5x {
  margin-top: 65px;
  margin-right: 40px;
  // padding-left: 40px;
  // float: left;
}

// .el-pagination {
//   margin: 1rem 0 2rem;
//   text-align: left;
// }

.plab {
  font-size: 13px;
  color: #999;
}
</style>