yxk-storeroom-system/src/views/system/logManage/doorLog/index.vue

<template>
  <div>
    <div class="head-container">
      <!-- <crudOperation /> -->
      <!-- <el-button v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!selections.length" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> -->
      <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button>
      <el-input
        v-model="keyWord"
        size="small"
        clearable
        placeholder="请输入关键词"
        style="width: 300px;margin-right:10px;padding-left:10px"
        class="input-prepend filter-item"
        @keyup.enter.native="crud.toQuery"
      >
        <!-- <el-select slot="prepend" v-model="optionVal" style="width: 100px" @keyup.enter.native="crud.toQuery"> -->
        <el-select slot="prepend" v-model="optionVal" style="width: 80px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-input>
      <date-range-picker v-model="queryTime" class="date-item" />
      <rrOperation />
    </div>
    <el-table
      ref="table"
      :data="crud.data"
      style="width: 100%;"
      height="calc(100vh - 356px)"
      :cell-class-name="cell"
      @row-click="clickRowHandler"
      @selection-change="selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="alarmLevel" label="状态" align="center" min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.alarmLevel===0" class="clear" style="width:56px">异常</span>
          <span v-if="scope.row.alarmLevel===1" class="clear" style="width:56px">正常</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomName" label="库房" align="center" min-width="150" />
      <el-table-column prop="deviceName" label="设备名称" align="center" min-width="180" />
      <el-table-column prop="maintitle" label="档案信息" align="center" min-width="180" />
      <el-table-column prop="archiveNo" label="档号" align="center" min-width="180" />
      <el-table-column prop="alarmMsg" label="警情描述" align="center" min-width="180" />
      <el-table-column prop="createTime" label="报警时间" align="center" min-width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime | parseTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="alarmEvent" label="事件" min-width="150" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.alarmEvent===0">出</span>
          <span v-if="scope.row.alarmEvent===1">进</span>
        </template>
      </el-table-column>
      <el-table-column prop="borrowerName" label="用户" align="center" min-width="150" />
    </el-table>
    <pagination />
  </div>
</template>

<script>
import rrOperation from '@crud/RR.operation'
import CRUD, { presenter, crud } from '@crud/crud'
import DateRangePicker from '@/components/DateRangePicker'
import pagination from '@crud/Pagination'
import { exportFile } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: 'DoorLog',
  components: { rrOperation, DateRangePicker, pagination },
  mixins: [presenter(), crud()],
  cruds() {
    return CRUD({
      url: 'api/securitydoor/initSecurityDoorLog',
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: true
      }
    })
  },
  data() {
    return {
      selections: [],
      keyWord: '',
      optionVal: 'deviceName',
      options: [
        { value: 'deviceName', label: '设备' },
        { value: 'roomName', label: '库房' }
      ],
      queryTime: []
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.roomName = null
      this.crud.query.deviceName = null
      this.crud.query.startTime = null
      this.crud.query.endTime = null
      if (this.optionVal === 'deviceName') {
        this.crud.query.deviceName = this.keyWord
      } else if (this.optionVal === 'roomName') {
        this.crud.query.roomName = this.keyWord
      }
      if (this.queryTime.length > 0) {
        this.crud.query.startTime = this.queryTime[0]
        this.crud.query.endTime = this.queryTime[1]
      }
    },
    // 导出
    handleDownload() {
      this.crud.downloadLoading = true
      exportFile(this.baseApi + '/api/securitydoor/exportSecurityDoorLogList')
      this.crud.downloadLoading = false
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row) // 单击选中
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    // 查看监控
    handleListen() {
      this.$refs.listenDom.dialogVisible = true
    },
    cell({ row, columnIndex }) {
      if (row.alarmLevel === 1 && columnIndex === 2) {
        return 'have-clear'
      } else if (row.alarmLevel === 0 && columnIndex === 2) {
        return 'fail-clear'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
@import "~@/assets/styles/archives-manage.scss";

</style>