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

<template>
  <d2-container>
    <template slot="header"
              style="padding: 5px;">
      <el-form size="mini"
               ref="form"
               :inline="true"
               style="height: 25px; margin-top: -7px; padding:20px; text-align:right;">
        <el-form-item label="实验室号">
          <el-input style="width:140px"
                    v-model="search.RoomNum"
                    placeholder="请输入实验室号"></el-input>
        </el-form-item>
        <el-button size="mini"
                   type="primary"
                   @click="searchroomdata()"
                   style="margin-left:10px"
                   @command="searchCommand">查 询</el-button>
        <el-button size="mini"
                   type="primary"
                   @click="clearSearch">重 置</el-button>
        <el-button size="mini"
                   type="primary"
                   style="margin-right:6px"
                   @click="maintainlogadd()">添加</el-button>
      </el-form>
    </template>
    <el-table ref="multipleTable"
              :data="entityList"
              border
              stripe
              tooltip-effect="dark"
              @sort-change="orderby"
              height="100%">
      <el-table-column prop="RoomNum"
                       min-width="10px"
                       align="center"
                       label="实验室号"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="RoomName"
                       min-width="10px"
                       align="center"
                       label="实验室名称"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="RoomType"
                       min-width="10px"
                       align="center"
                       label="实验室类型"
                       show-overflow-tooltip
                       :formatter="formatRoomType"></el-table-column>
      <el-table-column prop="Building"
                       min-width="10px"
                       align="center"
                       label="楼宇"
                       show-overflow-tooltip
                       :formatter="formatBuilding"></el-table-column>
      <el-table-column prop="PositionInformation"
                       min-width="10px"
                       align="center"
                       label="位置信息"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="RoomDescribe"
                       min-width="10px"
                       align="center"
                       label="实验室描述"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="CreateOn"
                       min-width="10px"
                       label="使用日期"
                       align="center"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          {{ jstimehandle(scope.row.CreateOn + "") }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="140px"
                       fixed='right'>
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     title="编辑"
                     @click="editmaintain(scope.row)"
                     icon="el-icon-edit"
                     circle></el-button>
          <!-- </router-link>&nbsp; -->
          <el-button size="mini"
                     @click="deleteinstrument(scope.row)"
                     type="danger"
                     title="删除"
                     style="margin-left:5px"
                     icon="el-icon-delete"
                     circle></el-button>
          <!-- <el-button size="mini"
                     @click="openRoleUserDialog(scope.row)"
                     type="warning"
                     title="设备关联"
                     style="margin-left:5px"
                     icon="el-icon-star-off"
                     circle></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <addroom ref="addroom"
             @closeAddDialog="handleCloseAdd"
             @initdata="searchroomdata"
             :typeList="typeList"
             :buildingList="buildingList"></addroom>
    <editroom ref="editroom"
              @closeEditDialog="handleCloseEdit"
              @initdata="searchroomdata"
              :typeList="typeList"
              :buildingList="buildingList"></editroom>
    <role-user :role="role"
               v-model="roleUserDialogVisible" />
    <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="totalsize">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import {
  searchmanagingroomdata,
  deletemanagingrooms
} from '@/api/instrumentroom'
import addroom from './_opera/add'
import editroom from './_opera/edit'
import roleUser from './instrumentrooms'
import itemDetailApi from '@/api/sysadmin/itemdetail'

export default {
  components: {
    addroom,
    editroom,
    roleUser
  },
  name: 'instrumentroom',
  data () {
    return {
      roleUserDialogVisible: false,
      selectedMaintainLogId: 0,
      dialogvisible: false,
      Id: 0,
      RoomNum: 0,
      RoomName: '',
      RoomType: '',
      RoomDescribe: '',
      PositionInformation: '',
      buildingList: [], // 楼宇
      name: '',
      totalsize: 0,
      currpage: 1,
      size: 10,
      entityList: [],
      search: {
        RoomNum: ''
      },
      typeList: [],
      InstrumenName: '',
      InstrumenCode: '',
      paramid: '',
      CreateBy: '',
      starttime: null,
      endtime: null,
      CreateOn: [], // 录入时期
      role: { Id: '', RoomName: '' },
      // 列表排序
      Column: {
        Order: '',
        Prop: ''
      }
    }
  },
  mounted () {
    this.searchroomdata()
    this.getRoomTypeList()
    this.getBuildingList()
  },
  methods: {
    // 获取所有实验室类型
    getRoomTypeList () {
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'RoomType' })
        .then(res => {
          this.typeList = res
        })
        .catch(err => {
          console.error(err)
        })
    },
    formatRoomType (row, column) {
      for (var i = 0; i < this.typeList.length; i++) {
        if (parseInt(this.typeList[i].ItemValue) === parseInt(row.RoomType)) {
          return this.typeList[i].ItemName
        }
      }
    },
    formatBuilding (row, column) {
      for (var i = 0; i < this.buildingList.length; i++) {
        if (parseInt(this.buildingList[i].ItemValue) === parseInt(row.Building)) {
          return this.buildingList[i].ItemName
        }
      }
    },
    // 获取位置列表
    getBuildingList () {
      itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Local' })
        .then(res => {
          this.buildingList = res
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 添加 实验室
    maintainlogadd () {
      this.$refs.addroom.dialogvisible = true
    },
    // 添加  返回当前页面
    handleCloseAdd () {
      this.$refs.addroom.dialogvisible = false
    },
    // 编辑
    editmaintain (val) {
      this.$refs.editroom.testlistform = val
      this.$refs.editroom.dialogvisible = true
    },
    // 编辑  返回当前页面
    handleCloseEdit () {
      this.$refs.editroom.dialogvisible = false
    },
    // 初始化列表数据
    searchroomdata () {
      let _this = this
      let params = {
        RoomNum: this.search.RoomNum,
        _currentPage: this.currpage,
        _size: this.size,
        paramid: this.paramid,
        Order: this.Column.Order,
        Prop: this.Column.Prop
      }
      searchmanagingroomdata(params)
        .then(function (response) {
          _this.entityList = response.info.items
          _this.totalsize = response.info.currentItemCount
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    openRoleUserDialog (role) {
      this.role = role
      this.roleUserDialogVisible = !this.roleUserDialogVisible
    },
    handleSizeChange (val) {
      this.size = val
      this.currpage = 1
      this.searchroomdata()
    },
    handleCurrentChange (val) {
      this.currpage = val
      this.searchroomdata()
    },
    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)
      }
    },
    // 删除设备信息
    deleteinstrument (val) {
      let _this = this
      _this
        .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '关闭',
          type: 'warning'
        })
        .then(() => {
          deletemanagingrooms(val.Id)
            .then(function (response) {
              // response
              if (response.info.code === 0) {
                _this.$message({
                  type: 'success',
                  message: response.info.message
                })
                // 更新界面
                _this.searchroomdata()
              } else {
                _this.$message({
                  type: 'warning',
                  message: response.info.message
                })
              }
            })
            .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.searchroomdata()
    },
    searchCommand (command) {
      if (command === 'search') {
        this.dialogvisible = true
      } else if (command === 'clear') {
        this.clearSearch()
      }
    },
    clearSearch () {
      this.search.RoomNum = ''
      this.CreateOn = []
      this.searchroomdata()
    }
  }
}
</script>

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

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