xgy-oa/klp-ui/src/views/wms/warehouse/components/LogTable.vue

<template>
  <div class="log-table-container">
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="logParams" class="demo-form-inline mb20">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="logParams.startTime"
          type="datetime"
          placeholder="选择开始时间"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="logParams.endTime"
          type="datetime"
          placeholder="选择结束时间"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getLogList">查询</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="logLoading"
      :data="logList"
      style="width: 100%"
      border
    >
      <el-table-column prop="createTime" label="操作时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.operationType === 1 ? '入库' : '出库' }}
        </template>
      </el-table-column>
      <el-table-column prop="inOutType" label="出入库类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.inOutType === 1 ? '入库' : '出库' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.enterCoilNo" label="卷号" width="150">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.enterCoilNo ? scope.row.coil.enterCoilNo : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.itemName" label="物料名称" width="120">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.itemName ? scope.row.coil.itemName : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="coil.specification" label="规格" width="150">
        <template slot-scope="scope">
          {{ scope.row.coil && scope.row.coil.specification ? scope.row.coil.specification : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="warehouse.actualWarehouseName" label="库位" width="150">
        <template slot-scope="scope">
          {{ scope.row.warehouse && scope.row.warehouse.actualWarehouseName ? scope.row.warehouse.actualWarehouseName : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.remark || '-' }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="logParams.pageNum"
      :limit.sync="logParams.pageSize" @pagination="getLogList" />
  </div>
</template>

<script>
  import { getCoilWarehouseOperationLogByWarehouseId } from "@/api/wms/coilWarehouseOperationLog";

  export default {
    name: "LogTable",
    props: {
      warehouseId: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        logList: [],
        total: 0,
        logParams: {
          startTime: "",
          endTime: "",
          operationType: null,
          inOutType: null,
          pageNum: 1,
          pageSize: 10,
        },
        logLoading: false,
      };
    },
    watch: {
      warehouseId: {
        handler(newVal, oldVal) {
          if (newVal !== oldVal && newVal !== "") {
            this.logParams.secondWarehouseId = newVal;
            this.getLogList();
          }
        },
        immediate: true
      }
    },
    methods: {
      // 获取日志列表
      getLogList() {
        this.logLoading = true;
        getCoilWarehouseOperationLogByWarehouseId(this.logParams)
          .then((res) => {
            this.logList = res.data || [];
            this.total = res.total || 0;
          })
          .catch((err) => { this.$message.error("获取日志列表失败：" + err.message); })
          .finally(() => { this.logLoading = false; });
      },
      // 重置筛选条件
      resetParams() {
        this.logParams = {
          startTime: "",
          endTime: "",
          operationType: null,
          inOutType: null,
          pageNum: 1,
          pageSize: 10,
          secondWarehouseId: this.warehouseId
        };
        this.getLogList();
      },
    },
  };
</script>

<style scoped>
  .mb20 {
    margin-bottom: 20px;
  }
</style>