krd-srm-vue/src/views/modules/inspection/com_inspectionRequestPoDetailTab.vue

<template>
  <div class="detail-container">
    <!-- 明细表格 -->
    <el-table :data="detailList" border v-loading="loading" style="width: 100%;" :height="tableHeight" :row-class-name="tableRowClassName">
      <el-table-column label="序号" header-align="center" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="orderRef1" label="PO号" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="orderRef2" label="PO行号" header-align="center" align="center" width="100"/>
      <el-table-column prop="partNo" label="产品编码" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="partDesc" label="产品名称" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="sku" label="SKU" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="categoryLevel2" label="一级物料分类" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="categoryLevel3" label="二级物料分类" header-align="center" align="left" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="qty" label="验货数量" header-align="center" align="right" width="120"/>
      <el-table-column prop="approveQty" label="检验通过数量" header-align="center" align="right" width="120"/>
      <el-table-column prop="shipMothod" label="运输方式" header-align="center" align="center" width="120"/>
      <el-table-column prop="crd" label="CRD日期" header-align="center" align="center" width="120"/>
    </el-table>
  </div>
</template>

<script>
import { getInspectionRequestDetailSubList } from '@/api/inspection/inspectionRequestHeader.js'

export default {
  name: 'InspectionRequestPoDetailTab',

  props: {
    detailData: {
      type: Object,
      default: () => ({})
    },
    tableHeight: {
      type: Number,
      default: 400
    }
  },

  data () {
    return {
      detailList: [],
      loading: false
    }
  },

  watch: {
    detailData: {
      handler (newVal) {
        if (newVal && newVal.requestNo && newVal.site) {
          this.loadDetailList()
        } else {
          this.detailList = []
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    // 根据 isChanged 字段判断是否需要红色背景
    tableRowClassName ({ row }) {
      return row.isChanged === 'Y' ? 'modified-row' : ''
    },

    // 加载明细列表
    loadDetailList () {
      if (!this.detailData.requestNo || !this.detailData.site) {
        this.detailList = []
        return
      }

      this.loading = true
      getInspectionRequestDetailSubList({
        requestNo: this.detailData.requestNo,
        site: this.detailData.site
      }).then(({ data }) => {
        if (data.code === 0) {
          this.detailList = (data.page && data.page.list) || []
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  padding: 0;
  background: #fff;
}

.el-table .modified-row td {
  background-color: #ffe6e6 !important;
  color: #f56c6c !important;
}

.el-table .modified-row:hover td {
  background-color: #ffd6d6 !important;
}
</style>