erp/resources/frontend/src/views/supplyChain/procureLog.vue

<template>
  <div class="pageBox">
    <div class="cardBox">
      <div class="searchBox">
        <div class="row">
          <span>sku标题：</span>
          <el-input v-model="filter.title" clearable></el-input>
        </div>
        <div class="row">
          <span>商品编号：</span>
          <el-input v-model="filter.external_sku_id" clearable></el-input>
        </div>
        <div class="row">
          <span>创建时间：</span>
          <el-date-picker
            v-model="addTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 340px">
          </el-date-picker>
        </div>
        <div class="row">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">筛选</el-button>
        </div>
      </div>
    </div>
    <el-card>
      <el-table v-loading="loading" :data="procureList" style="width: 100%" border>
        <el-table-column prop="sku_id" label="商品id" width="80" align="center" />
        <el-table-column prop="goods_sku.title" label="商品标题" />
        <el-table-column prop="external_sku_id" label="商品编号" />
        <el-table-column prop="num" label="采购数量" />
        <el-table-column prop="cost" label="采购成本" />
        <el-table-column prop="buyer_name" label="采购人名称" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="expire_time" label="保质期时间" />
        <el-table-column prop="supplier_name" label="供应商">
          <template slot-scope="scope">
            <span v-if="scope.row.supplier_name">{{ scope.row.supplier_name }}（{{scope.row.supplier_id}}）</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center" />
      </el-table>
      <div class="page-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes, total"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getPurchaseLog } from "@/api/supplyChain"
export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 15,
      total: 0,
      procureList: [],
      filter: {
        title: '',
        external_sku_id: ''
      },
      addTime: []
    }
  },
  methods: {
    fetchList() {
      this.loading = true
      let params = {
        page: this.page,
        per_page: this.pageSize,
        ...this.filter,
        start_time: this.addTime ? this.addTime[0] : '',
        end_time: this.addTime ? this.addTime[1] : ''
      }
      getPurchaseLog(params).then((res) => {
        this.procureList = res.data.data
        this.total = res.data.meta.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.fetchList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchList()
    },
    handleSearch() {
      this.page = 1
      this.fetchList()
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

<style lang="scss" scoped>
  .searchBox{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    .row{
      font-size: 14px;
      margin-bottom: 20px;
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
</style>