krd-srm-vue/src/views/modules/order/com_inspectionDetailList.vue

<template>
  <div class="customer-css">
    <!-- 数据表格 -->
    <el-table
      ref="table"
      :height="searchData.height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 0px"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import { getInspectionByPODetail } from '@/api/order/poOrder.js'

export default {
  name: 'InspectionDetailList',

  data() {
    return {
      dataList: [],
      searchData: {
        site: this.$store.state.user.site,
        orderNo: '',
        itemNo: null,
        height: '300',
        page: 1,
        limit: 20
      },
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      columnList: [
        {
          columnProp: 'requestNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '申请单号',
          columnWidth: '140',
          columnHidden: false,
          columnSortable: false,
          showOverflowTooltip: true,
          fixed: false
        },
        {
          columnProp: 'partNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '产品编码',
          columnWidth: '120',
          columnHidden: false,
          columnSortable: false,
          showOverflowTooltip: true,
          fixed: false
        },
        {
          columnProp: 'partDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '产品名称',
          columnWidth: '200',
          columnHidden: false,
          columnSortable: false,
          showOverflowTooltip: true,
          fixed: false
        },
        {
          columnProp: 'inspectQty',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '验货数量',
          columnWidth: '100',
          columnHidden: false,
          columnSortable: false,
          fixed: false
        },
        {
          columnProp: 'status',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '验货状态',
          columnWidth: '100',
          columnHidden: false,
          columnSortable: false,
          fixed: false
        },
        {
          columnProp: 'inspectResult',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '验货结果',
          columnWidth: '100',
          columnHidden: false,
          columnSortable: false,
          fixed: false
        }
      ]
    }
  },

  methods: {
    // 初始化组件的参数（模仿 com_logisticsPoList.vue 的 init 模式）
    init(inData) {
      this.searchData = JSON.parse(JSON.stringify(inData))
      this.pageIndex = 1
      this.searchTable()
    },

    // 查询数据
    searchTable() {
      this.dataListLoading = true
      const params = {
        ...this.searchData,
        page: this.pageIndex,
        limit: this.pageSize
      }
      getInspectionByPODetail(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list || []
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataListLoading = false
        this.dataList = []
        this.totalPage = 0
      })
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.searchTable()
    },

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.searchTable()
    }
  }
}
</script>

<style scoped lang="scss">
.rq .auto /deep/ .el-form-item__content {
  height: auto;
  line-height: 1.5;
}
</style>