<template>
<div>

  <el-form :inline="true" :model="queryParams" class="demo-form-inline">
    <el-form-item label="库位">
      <span style="font-size: 20px;color: #1682e6">{{ materialBhProp }}</span>
      <el-input v-model="queryParams.operlog_kw" v-if="false"></el-input>
    </el-form-item>
    <el-form-item label="操作时间">
      <el-date-picker
        v-model="dateRange"
        style="width: 240px"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="操作人">
      <el-input v-model="queryParams.operlog_user_name" placeholder="操作人"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search()">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="operlogData"
    v-loading="loading"
    height="500"
    style="width: 100%">
    <el-table-column
      prop="operlog_date"
      label="操作时间"
      width="200"
      fixed>
    </el-table-column>
    <el-table-column
      prop="operlog_user_name"
      label="操作人"
      width="100"
      fixed>
    </el-table-column>
    <el-table-column
      prop="operlog_event"
      label="事件"
      width="200"
      fixed>
    </el-table-column>
    <el-table-column label="录入信息">
      <el-table-column
        prop="operlog_zlh"
        label="指令号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="operlog_xingh"
        label="型号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="operlog_guig"
        label="规格"
        width="150">
      </el-table-column>
      <el-table-column
        prop="operlog_diany"
        label="电压等级"
        width="100">
      </el-table-column>
      <el-table-column
        prop="operlog_ms"
        label="米数"
        width="100">
      </el-table-column>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getOperlogData"
  />
</div>
</template>
<script>
import { listOperlog } from "@/api/storageLocation/operlog";
  export default {
    name: 'Operlog',
    props: {
      materialBhProp: String
    },
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          operlog_kw: null,
          operlog_date: null,
          operlog_user_name: null
        },
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 日期范围
        dateRange: [],
        operlogData: [],
      }
    },
    watch: {
      materialBhProp(value,oldvalue){
        this.getOperlogData();
      }
    },
    created() {
      /*获取库位信息*/
      this.getOperlogData();
    },
    methods: {
      /*获取操作记录*/
      getOperlogData() {
        this.loading = true;
        this.queryParams.operlog_kw = this._props.materialBhProp;
        this.operlogData = [];
        listOperlog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.operlogData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      //查询
      search(){
        this.queryParams.pageNum = 1;
        this.getOperlogData();
      }
    }
  }
</script>
