From 911bc2b26d3f671a7d9bef09f719c13ad96f4955 Mon Sep 17 00:00:00 2001
From: qiankanghui <kanghui.qian@xujiesoft.com>
Date: Thu, 11 Jun 2026 14:49:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(order):=20=E6=96=B0=E5=A2=9E=E9=AA=8C?=
 =?UTF-8?q?=E8=B4=A7=E6=98=8E=E7=BB=86=E5=88=97=E8=A1=A8=E5=92=8C=E7=89=A9?=
 =?UTF-8?q?=E6=B5=81PO=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加了 inspectionDetailList.vue 组件用于显示验货明细
- 添加了 logisticsPoList.vue 组件用于显示物流PO信息
- 在 poOrder_search.vue 中集成物流和验货明细页签功能
- 实现了表格行点击切换详情页签的数据联动机制
- 更新了多个附件表格组件的表头对齐样式
- 修改了物流管理页面的字段映射和高度设置方法
---
 .../com_inspectionRequestAttachmentTab.vue    |  20 +-
 .../npcIqc/com_logisticsAttachmentTab.vue     |   6 +
 .../modules/npcIqc/logisticsManagement.vue    |  10 +-
 .../order/com_inspectionDetailList.vue        | 183 ++++++++++++++++++
 .../modules/order/com_logisticsPoList.vue     | 176 +++++++++++++++++
 src/views/modules/order/poOrder_search.vue    |  84 +++++++-
 6 files changed, 470 insertions(+), 9 deletions(-)
 create mode 100644 src/views/modules/order/com_inspectionDetailList.vue
 create mode 100644 src/views/modules/order/com_logisticsPoList.vue

diff --git a/src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue b/src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
index fa7c629..a7d87c5 100644
--- a/src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
+++ b/src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
@@ -16,32 +16,40 @@
         type="index"
         label="序号"
         width="80"
-        align="center" />
+        align="center"
+        header-align="center" />  <!-- 添加 header-align -->
       <el-table-column
         prop="fileName"
         label="附件名称"
         min-width="250"
-        show-overflow-tooltip />
+        show-overflow-tooltip
+        align="left"
+        header-align="center" />  <!-- 添加 header-align -->
       <el-table-column
         prop="createdBy"
         label="创建人"
         width="120"
-        align="center" />
+        align="center"
+        header-align="center" />  <!-- 添加 header-align -->
       <el-table-column
         prop="cadditionalInfo"
         label="备注"
         min-width="150"
-        show-overflow-tooltip />
+        show-overflow-tooltip
+        align="left"
+        header-align="center" />  <!-- 添加 header-align -->
       <el-table-column
         prop="createDate"
         label="创建时间"
         width="160"
-        align="center" />
+        align="center"
+        header-align="center" />  <!-- 添加 header-align -->
       <el-table-column
         label="操作"
         width="150"
         align="center"
-        fixed="right">
+        fixed="right"
+        header-align="center">  <!-- 添加 header-align -->
         <template slot-scope="scope">
           <el-link type="primary" @click="handleDownload(scope.row)">查看 |</el-link>
           <el-link type="danger" @click="handleRemove(scope.row)">删除</el-link>
diff --git a/src/views/modules/npcIqc/com_logisticsAttachmentTab.vue b/src/views/modules/npcIqc/com_logisticsAttachmentTab.vue
index 23db885..5e6afc0 100644
--- a/src/views/modules/npcIqc/com_logisticsAttachmentTab.vue
+++ b/src/views/modules/npcIqc/com_logisticsAttachmentTab.vue
@@ -16,30 +16,36 @@
         type="index"
         label="序号"
         width="80"
+        header-align="center"
         align="center" />
       <el-table-column
         prop="fileName"
         label="附件名称"
         min-width="250"
+        header-align="center"
         show-overflow-tooltip />
       <el-table-column
         prop="createdBy"
         label="创建人"
         width="120"
+        header-align="center"
         align="center" />
       <el-table-column
         prop="cadditionalInfo"
         label="备注"
         min-width="150"
+        header-align="center"
         show-overflow-tooltip />
       <el-table-column
         prop="createDate"
         label="创建时间"
         width="160"
+        header-align="center"
         align="center" />
       <el-table-column
         label="操作"
         width="150"
+        header-align="center"
         align="center"
         fixed="right">
         <template slot-scope="scope">
diff --git a/src/views/modules/npcIqc/logisticsManagement.vue b/src/views/modules/npcIqc/logisticsManagement.vue
index f303d58..47e5bba 100644
--- a/src/views/modules/npcIqc/logisticsManagement.vue
+++ b/src/views/modules/npcIqc/logisticsManagement.vue
@@ -81,7 +81,7 @@
 <!--            width="80"-->
 <!--            align="center" />-->
           <el-table-column
-            prop="orderNo"
+            prop="orderRef1"
             label="PO"
             min-width="150"
             show-overflow-tooltip />
@@ -95,7 +95,7 @@
             </template>
           </el-table-column>
           <el-table-column
-            prop="partNo"
+            prop="sku"
             label="SKU"
             min-width="150"
             show-overflow-tooltip />
@@ -158,6 +158,12 @@ export default {
     })
   },
   methods: {
+    // 设置高度（供父组件调用）
+    setHeight(height) {
+      this.height = height * 0.5
+      this.detailHeight = height * 0.5
+    },
+
     // 查询数据
     getMainData () {
       this.searchData.limit = this.pageSize
diff --git a/src/views/modules/order/com_inspectionDetailList.vue b/src/views/modules/order/com_inspectionDetailList.vue
new file mode 100644
index 0000000..b961317
--- /dev/null
+++ b/src/views/modules/order/com_inspectionDetailList.vue
@@ -0,0 +1,183 @@
+<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 { getInspectionRequestDetailList } from '@/api/inspection/inspectionRequestHeader.js'
+
+export default {
+  name: 'InspectionDetailList',
+
+  data() {
+    return {
+      dataList: [],
+      searchData: {
+        site: this.$store.state.user.site,
+        orderRef1: '',
+        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: 'qty',
+          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
+      }
+      getInspectionRequestDetailList(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>
diff --git a/src/views/modules/order/com_logisticsPoList.vue b/src/views/modules/order/com_logisticsPoList.vue
new file mode 100644
index 0000000..fb4a452
--- /dev/null
+++ b/src/views/modules/order/com_logisticsPoList.vue
@@ -0,0 +1,176 @@
+<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 { getPoList } from '@/api/npcIqc/npcIqc.js'
+
+export default {
+  name: 'LogisticsPoList',
+
+  data() {
+    return {
+      dataList: [],
+      searchData: {
+        flexId: '',
+        supplierNo: '',
+        site: this.$store.state.user.site,
+        height: '300',
+        page: 1,
+        limit: 20
+      },
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      dataListLoading: false,
+      columnList: [
+        {
+          columnProp: 'flexId',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: '进仓编号',
+          columnWidth: '120',
+          columnHidden: false,
+          columnSortable: false,
+          fixed: false
+        },
+        {
+          columnProp: 'orderDate',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: 'PO日期',
+          columnWidth: '120',
+          columnHidden: false,
+          columnSortable: false,
+          fixed: false
+        },
+        {
+          columnProp: 'sku',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: 'SKU',
+          columnWidth: '120',
+          columnHidden: false,
+          columnSortable: false,
+          fixed: false
+        },
+        {
+          columnProp: 'qty',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: 'Qty',
+          columnWidth: '100',
+          columnHidden: false,
+          columnSortable: false,
+          fixed: false
+        },
+        {
+          columnProp: 'shippedQty',
+          headerAlign: 'center',
+          align: 'center',
+          columnLabel: 'Qty Shipped',
+          columnWidth: '120',
+          columnHidden: false,
+          columnSortable: false,
+          fixed: false
+        }
+      ]
+    }
+  },
+
+  methods: {
+    // 初始化组件的参数（模仿 com_supplierShare_supplierList.vue 的 init 模式）
+    init(inData) {
+      this.searchData = JSON.parse(JSON.stringify(inData))
+      this.pageIndex = 1
+      this.searchTable()
+    },
+
+    // 查询数据
+    searchTable() {
+      if (!this.searchData.flexId && !this.searchData.supplierNo) {
+        this.dataList = []
+        this.totalPage = 0
+        return
+      }
+      this.dataListLoading = true
+      const params = {
+        ...this.searchData,
+        page: this.pageIndex,
+        limit: this.pageSize
+      }
+      getPoList(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>
diff --git a/src/views/modules/order/poOrder_search.vue b/src/views/modules/order/poOrder_search.vue
index 7a9e484..718f2a0 100644
--- a/src/views/modules/order/poOrder_search.vue
+++ b/src/views/modules/order/poOrder_search.vue
@@ -43,7 +43,9 @@
       :height="height"
       :data="dataList"
       border
+      highlight-current-row
       v-loading="loading"
+      @row-click="changeData"
       style="width: 100%;">
       <el-table-column
         v-for="(item, index) in visibleColumns"
@@ -72,24 +74,44 @@
       :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">
+      <!-- 物流信息 -->
+      <el-tab-pane label="物流" name="logistics">
+        <logistics-po-list ref="logisticsPoList" />
+      </el-tab-pane>
+      <!-- 验货明细 -->
+      <el-tab-pane label="验货明细" name="inspectionDetail">
+        <inspection-detail-list ref="inspectionDetailList" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
 import { searchPoDetailPage } from '@/api/order/poOrder.js'
 import excel from '@/utils/excel-util.js'
+import LogisticsPoList from './com_logisticsPoList.vue'
+import InspectionDetailList from './com_inspectionDetailList.vue'
 
 export default {
+  components: {
+    LogisticsPoList,
+    InspectionDetailList
+  },
   name: 'PoOrderQuery',
   data() {
     return {
       loading: false,
       exportLoading: false,
       height: 400,
+      activeTab: 'logistics',
       pageIndex: 1,
       pageSize: 20,
       totalPage: 0,
       dataList: [],
+      currentRow: {},
       searchData: {
         site: this.$store.state.user.site,
         customer: '',
@@ -429,7 +451,8 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.height = window.innerHeight - 220
+      // 模仿 supplierList.vue 的高度分配方式
+      this.height = (window.innerHeight - 220) / 2
     })
   },
   methods: {
@@ -447,6 +470,16 @@ export default {
           this.pageIndex = data.page.currPage
           this.pageSize = data.page.pageSize
           this.totalPage = data.page.totalCount
+
+          // 如果有数据，默认选中第一行并触发页签查询
+          if (this.dataList.length > 0) {
+            this.$nextTick(() => {
+              if (this.$refs.poTable) {
+                this.$refs.poTable.setCurrentRow(this.dataList[0])
+              }
+              this.changeData(this.dataList[0])
+            })
+          }
         } else {
           this.$message.error((data && data.msg) || '获取列表失败')
         }
@@ -530,6 +563,51 @@ export default {
     currentChangeHandle(val) {
       this.pageIndex = val
       this.getDataList()
+    },
+
+    // 行点击事件（模仿 supplierList.vue 的 changeData 模式）
+    changeData(row) {
+      this.currentRow = JSON.parse(JSON.stringify(row))
+      this.refreshCurrentTabTable()
+    },
+
+    // 刷新当前页签的表格数据（模仿 supplierList.vue 的 refreshCurrentTabTable）
+    refreshCurrentTabTable() {
+      if (this.currentRow === '' || this.currentRow === null) {
+        this.currentRow = { flexid: '', supplierNo: '' }
+      }
+      if (this.activeTab === 'logistics') {
+        this.refreshLogisticsTable()
+      }
+      if (this.activeTab === 'inspectionDetail') {
+        this.refreshInspectionTable()
+      }
+    },
+
+    // 刷新物流页签表格（模仿 supplierList.vue 的 refreshShareTable）
+    refreshLogisticsTable() {
+      let inData = {
+        flexId: this.currentRow.flexid,
+        supplierNo: this.currentRow.supplierNo,
+        site: this.$store.state.user.site,
+        height: Number(this.height) - 20
+      }
+      this.$refs.logisticsPoList.init(inData)
+    },
+
+    // 刷新验货明细页签表格
+    refreshInspectionTable() {
+      let inData = {
+        site: this.$store.state.user.site,
+        orderRef1: this.currentRow.poNo || '',
+        height: Number(this.height) - 20
+      }
+      this.$refs.inspectionDetailList.init(inData)
+    },
+
+    // 页签点击事件（模仿 supplierList.vue 的 tabClick）
+    handleTabClick(tab, event) {
+      this.refreshCurrentTabTable()
     }
   }
 }
@@ -540,4 +618,8 @@ export default {
   height: auto;
   line-height: 1.5;
 }
+
+/deep/ .customer-tab .el-tabs__content {
+  padding: 5px !important;
+}
 </style>