krd-srm-vue/src/views/modules/npcIqc/logisticsManagement.vue

<template>
  <div class="customer-css">
    <!-- 查询条件 -->
    <el-form :inline="true" label-position="top" class="search-form-inline">
      <div class="search-row">
        <el-form-item label="进仓编号" class="search-item">
          <el-input v-model="searchData.flexId" style="width: 150px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label="供应商编码" class="search-item">
          <el-input v-model="searchData.supplierNo" style="width: 120px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label="供应商名称" class="search-item">
          <el-input v-model="searchData.supplierName" style="width: 200px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label=" " class="search-item search-btn-item">
          <el-button type="primary" @click="getMainData">查询</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table
      :height="height"
      :data="mainDataList"
      border
      ref="mainTable"
      highlight-current-row
      @row-click="changeData"
      v-loading="dataListLoading"
      style="margin-top: 0px; width: 100%;">
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center" />
      <el-table-column
        prop="flexId"
        label="进仓编号"
        min-width="150"
        show-overflow-tooltip />
      <el-table-column
        prop="supplierNo"
        label="供应商编码"
        width="120"
        align="center" />
      <el-table-column
        prop="supplierName"
        label="供应商名称"
        min-width="200"
        show-overflow-tooltip />
      <el-table-column
        prop="poCount"
        label="PO数量"
        width="100"
        align="center" />
      <el-table-column
        prop="shippedQty"
        label="已出货数量"
        width="120"
        align="center" />
    </el-table>

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

    <!-- 详情页签 -->
    <el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card">
      <!-- PO清单 -->
      <el-tab-pane label="PO清单" name="poList">
        <el-table
          :data="poListData"
          border
          :height="detailHeight"
          v-loading="poListLoading"
          style="width: 100%;">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center" />
          <el-table-column
            prop="orderNo"
            label="PO"
            min-width="150"
            show-overflow-tooltip />
          <el-table-column
            prop="orderDate"
            label="PO日期"
            width="120"
            align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.orderDate) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="partNo"
            label="SKU"
            min-width="150"
            show-overflow-tooltip />
          <el-table-column
            prop="qty"
            label="Qty"
            width="100"
            align="center" />
          <el-table-column
            prop="shippedQty"
            label="Qty Shipped"
            width="120"
            align="center" />
        </el-table>
      </el-tab-pane>
      <!-- 附件 -->
      <el-tab-pane label="附件" name="attachment">
        <logistics-attachment-tab ref="attachmentTab" :detail-data="currentRow" :table-height="detailHeight" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import LogisticsAttachmentTab from './com_logisticsAttachmentTab.vue'
import { searchLogistics, getPoList } from '@/api/npcIqc/npcIqc.js'

export default {
  components: {
    LogisticsAttachmentTab
  },
  data () {
    return {
      height: 400,
      detailHeight: 400,
      currentRow: {},
      activeTab: 'poList',
      searchData: {
        flexId: '',
        supplierNo: '',
        supplierName: '',
        site: this.$store.state.user.site,
        page: 1,
        limit: 50
      },
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      mainDataList: [],
      poListData: [],
      dataListLoading: false,
      poListLoading: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = (window.innerHeight - 220) / 2
      this.detailHeight = (window.innerHeight - 220) / 2
      this.getMainData()
    })
  },
  methods: {
    // 查询数据
    getMainData () {
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      this.dataListLoading = true

      searchLogistics(this.searchData).then(({ data }) => {
        if (data.code === 0) {
          this.mainDataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount

          this.$nextTick(() => {
            if (this.$refs.mainTable) {
              this.$refs.mainTable.clearSelection()
            }
          })

          // 判断是否有数据
          if (this.mainDataList.length > 0) {
            this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
            this.changeData(this.mainDataList[0])
          } else {
            this.changeData(null)
          }
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataListLoading = false
      })
    },

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

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getMainData()
    },

    // 页签点击事件
    handleTabClick (tab) {
      if (tab.name === 'poList') {
        this.loadPoList()
      } else if (tab.name === 'attachment') {
        this.$nextTick(() => {
          if (this.$refs.attachmentTab) {
            this.$refs.attachmentTab.searchTable()
          }
        })
      }
    },

    // 行点击事件
    changeData (row) {
      this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {}
      this.loadPoList()
    },

    // 加载PO清单
    loadPoList () {
      if (!this.currentRow.flexId) {
        this.poListData = []
        return
      }

      this.poListLoading = true
      const params = {
        flexId: this.currentRow.flexId,
        supplierNo: this.currentRow.supplierNo || '',
        site: this.$store.state.user.site,
        page: 1,
        limit: 1000
      }

      getPoList(params).then(({ data }) => {
        if (data.code === 0 && data.page) {
          this.poListData = data.page.list || []
        } else {
          this.poListData = []
        }
        this.poListLoading = false
      }).catch(() => {
        this.poListData = []
        this.poListLoading = false
      })
    },

    // 格式化日期为 yyyy-MM-dd
    formatDate (date) {
      if (!date) return ''
      // 如果已经是 yyyy-MM-dd 格式，直接返回
      if (typeof date === 'string' && date.length === 10) {
        return date
      }
      // 如果是时间戳或其他格式，进行转换
      const d = new Date(date)
      if (isNaN(d.getTime())) return date
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  },
  created () {
    this.getMainData()
  }
}
</script>

<style scoped lang="scss">
.customer-css {
  padding: 0;
  margin: 0;
  background: #fff;
}

.search-form-inline {
  background: #fff;
}

.search-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 15px;
}

.search-item {
  flex: none;
  margin-bottom: 10px;
}

.search-btn-item {
  flex: none;
  margin-bottom: 10px;
}

.search-btn-item /deep/ .el-form-item__content {
  line-height: normal;
}

.search-item /deep/ .el-form-item__label {
  font-size: 13px;
  color: #606266;
  padding-bottom: 5px;
  line-height: 1;
  height: auto;
}

.search-item /deep/ .el-form-item__content {
  line-height: normal;
}

/deep/ .customer-tab .el-tabs__content {
  padding: 5px !important;
}
</style>