lims_college/frontend_web/src/views/duty/index.vue

<template>
  <d2-container>
    <template slot="header">
      <el-form size="mini"
               ref="form"
               :inline="true"
               class="sbutton_padding">
        <el-form-item label="学年"
                      class="sbutton_margin">
          <el-input style="width: 140px;"
                    v-model="search.Year"
                    placeholder="请输入需要查询的年级"></el-input>
        </el-form-item>
        <el-form-item label="学期"
                      class="sbutton_margin">
          <el-select v-model="search.Term"
                     style="width: 140px;">
            <el-option v-for="item in term"
                       :key="item.ItemValue"
                       :label="item.ItemName"
                       :value="parseInt(item.ItemValue)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button size="mini"
                   type="primary"
                   @click="initDatas()"
                   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-button size="mini"
                   type="primary"
                   style="margin-right:6px"
                   @click="add()"
                   class="sbutton_margin">添加</el-button>
      </el-form>
    </template>
    <el-table ref="multipleTable"
              :data="activities"
              border
              fit
              tooltip-effect="dark"
              style="width: 100%"
              @sort-change="orderby"
              height="100%">
      <el-table-column label="操作"
                       width="180px"
                       align="center"
                       fixed='right'>
        <template slot-scope="scope">
          <el-button size="mini"
                     title="编辑"
                     type="primary"
                     @click="edit(scope.row.Id)"
                     icon="el-icon-edit"
                     circle></el-button>
          <el-button size="mini"
                     type="primary"
                     title="发布"
                     @click="publish(scope.row)"
                     style="margin-left:5px;"
                     icon="el-icon-s-promotion"
                     circle></el-button>
          <el-button size="mini"
                     type="info"
                     title="详情"
                     icon="el-icon-notebook-2"
                     circle
                     @click="handleDetail(scope.row)"></el-button>
          <el-button size="mini"
                     type="danger"
                     title="删除"
                     @click="deleteduty(scope.row.Id)"
                     style="margin-left:5px;"
                     icon="el-icon-delete"
                     circle></el-button>

        </template>
      </el-table-column>
      <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="80px"
                       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="Status"
                       label="状态"
                       align="center"
                       min-width="80px"
                       show-overflow-tooltip
                       :formatter="formatStatus"></el-table-column>
      <el-table-column prop="CreatedTime"
                       label="创建日期"
                       align="center"
                       min-width="120px"
                       show-overflow-tooltip></el-table-column>
    </el-table>

    <dutyEditDialog ref="editDialog"
                    @handleClose="handleCloseAdd"
                    :dutyId="dutyId"
                    :term="term"
                    :statusList="statusList"
                    width="75"></dutyEditDialog>

    <template slot="footer">
      <el-pagination style="margin: -10px;"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currpage"
                     :page-sizes="[10, 15, 20]"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="search.page.total">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import DutyApi from '@/api/duty'
import dutyEditDialog from './components/dutyEdit'
import itemDetailApi from '@/api/sysadmin/itemdetail'

export default {
  name: 'duty',
  components: {
    dutyEditDialog
  },
  data () {
    return {
      dialogvisible: false,
      dutyId: -1,
      details: false,
      statusList: [],
      totalsize: 0,
      currpage: 1,
      size: 10,
      term: [],
      activities: [],
      Year: '',
      Title: '',
      Time: '',
      Status: '',
      search: {
        Term: '',
        Year: '',
        page: {
          total: 0,
          current: 1,
          size: 10
        }
      },
      // 列表排序
      Column: {
        Order: '',
        Prop: ''
      }
    }
  },
  mounted () {
    this.getTerm()
    this.getStatus()
    this.initDatas()
  },
  methods: {
    // 获取学期
    getTerm () {
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Term' })
        .then(res => {
          this.term = res
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 匹配学期
    formatTerm (row, column) {
      for (var i = 0; i < this.term.length; i++) {
        if (parseInt(this.term[i].ItemValue) === parseInt(row.Term)) {
          return this.term[i].ItemName
        }
      }
    },
    // 获取发布状态
    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
        }
      }
    },
    // 打开 添加弹窗
    add () {
      this.$refs.editDialog.dialogvisible = true
    },
    // 打开 编辑弹窗
    edit (dutyId) {
      this.dutyId = dutyId
      this.$refs.editDialog.dialogvisible = true
    },
    publish (duty) {
      duty.Status = 1
      DutyApi.saveDuty(duty)
    },
    // 打开二级页面
    handleDetail (duty) {
      this.$router.push({ path: '/duty/detail', query: { duty: duty, term: this.term } })
    },
    // 添加 返回页面
    handleCloseAdd () {
      this.$refs.editDialog.dialogvisible = false
      this.currpage = 1
      this.initDatas()
    },
    // 编辑 返回页面
    handleCloseEdit () {
      this.$refs.editDialog.dialogvisible = false
      this.initDatas()
    },
    // 初始化列表数据,值班管理列表
    initDatas () {
      let _this = this
      if (!_this.CalibrationTime) {
        _this.CalibrationTime = []
      }
      let params = {
        _currentPage: this.currpage,
        _size: this.size,
        Year: this.search.Year,
        Term: this.search.Term,
        Order: this.search.Order,
        Prop: this.search.Prop
      }
      DutyApi.getPageList(params)
        .then(res => {
          _this.activities = res.records
          _this.search.page.total = res.total
        })
    },
    handleSizeChange (val) {
      this.size = val
      this.currpage = 1
      this.initDatas()
    },
    handleCurrentChange (val) {
      this.currpage = val
      this.initDatas()
    },
    jstimehandle (val) {
      if (val === '') {
        return '----'
      } else if (val === '0001-01-01T08:00:00+08:00') {
        return '----'
      } else if (val === '5000-01-01T23:59:59+08:00') {
        return '永久'
      } else {
        if (val === '0001-01-01T00:00:00Z') {
          return '----'
        } else val = val.replace('T', ' ')
        return val.substring(0, 19)
      }
    },
    count (date2) {
      var date1 = new Date()
      var date = (date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24)/* 不用考虑闰年否 */
      return parseInt(date)
    },
    //  删除值班管理
    deleteduty (Id) {
      let _this = this
      let params = {
        id: Id
      }
      _this.$confirm('此操作将永久删除该值班信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      }).then(() => {
        DutyApi.deleteDuty(params)
          .then(data => {
            _this.initDatas()
          })
          .catch(function (error) {
            console.log(error)
          })
      })
        .catch(() => { })
    },
    // 列表排序功能
    orderby (column) {
      if (column.order === 'ascending') {
        this.Column.Order = 'asc'
      } else if (column.order === 'descending') {
        this.Column.Order = 'desc'
      }
      this.Column.Prop = column.prop
      this.initDatas()
    },

    formatDateTime (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      // var h = date.getHours();
      // var minute = date.getMinutes();
      // minute = minute < 10 ? ('0' + minute) : minute;
      return y + '-' + m + '-' + d
    },
    searchCommand (command) {
      if (command === 'search') {
        this.dialogvisible = true
      } else if (command === 'clear') {
        this.clearSearch()
      }
    },
    clearSearch () {
      this.currpage = 1
      this.search.Year = ''
      this.search.Name = ''
      this.search.classification = ''
      this.CalibrationTime = []
      this.initDatas()
    }

  }
}
</script>

<style lang="scss">
.el-pagination {
  margin: 1rem 0 2rem;
  text-align: right;
}

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