From 5c90bc9b6c4930569d984c02a8086459126161e9 Mon Sep 17 00:00:00 2001
From: qiankanghui <kanghui.qian@xujiesoft.com>
Date: Wed, 24 Jun 2026 11:43:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(order):=20=E6=B7=BB=E5=8A=A0PO=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=E6=9F=A5=E7=9C=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增com_poOrderDetail.vue组件用于展示订单详情
- 在poOrder_search.vue中集成订单详情标签页
- 配置详情组件的数据绑定和样式设置
- 设置默认激活标签为订单详情
- 优化详情页面的表单布局和字段展示
- 添加禁用状态的输入框以只读方式显示数据
---
 src/views/modules/order/com_poOrderDetail.vue | 296 ++++++++++++++++++
 src/views/modules/order/poOrder_search.vue    |  13 +-
 2 files changed, 307 insertions(+), 2 deletions(-)
 create mode 100644 src/views/modules/order/com_poOrderDetail.vue

diff --git a/src/views/modules/order/com_poOrderDetail.vue b/src/views/modules/order/com_poOrderDetail.vue
new file mode 100644
index 0000000..b23d342
--- /dev/null
+++ b/src/views/modules/order/com_poOrderDetail.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="po-order-detail">
+    <!-- 查看模式 -->
+    <el-form label-position="top" class="detail-form">
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="Customer">
+            <el-input v-model="detailData.customer" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Buyer">
+            <el-input v-model="detailData.buyer" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Vendor Name">
+            <el-input v-model="detailData.supplierName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="V_Short_Office">
+            <el-input v-model="detailData.shortOffice" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="V_Short_NPC">
+            <el-input v-model="detailData.shortNpc" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="PO_No">
+            <el-input v-model="detailData.poNo" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="Item">
+            <el-input v-model="detailData.partNo" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Category">
+            <el-input v-model="detailData.category" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="SKU">
+            <el-input v-model="detailData.sku" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Unit Price">
+            <el-input v-model="detailData.price" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="PO Qty">
+            <el-input v-model="detailData.qty" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="PO Value">
+            <el-input v-model="detailData.value" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="A-Qty">
+            <el-input v-model="detailData.shipQty" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="A-Value">
+            <el-input v-model="detailData.sumPrice" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Departure Port">
+            <el-input v-model="detailData.departure" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Destination Port">
+            <el-input v-model="detailData.destination" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Method">
+            <el-input v-model="detailData.shipVia" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Buyer Release Date">
+            <el-input v-model="detailData.orderDate" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="Planner Release Date">
+            <el-input v-model="detailData.enquiry" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Status">
+            <el-input v-model="detailData.status" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="PI Confirmed Date">
+            <el-input v-model="detailData.confirmed" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Original Arrival Date">
+            <el-input v-model="detailData.wantReceiveDate" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Final Confirmed Arrival Date">
+            <el-input v-model="detailData.narrival" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="PI Confirmed CRD">
+            <el-input v-model="detailData.crd" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="Inspection Date">
+            <el-input v-model="detailData.inspection" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Actual Completion Date">
+            <el-input v-model="detailData.realCrd" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="ETA">
+            <el-input v-model="detailData.eta" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Flexport Id">
+            <el-input v-model="detailData.flexid" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="On Board Date">
+            <el-input v-model="detailData.obd" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Doc Sent">
+            <el-input v-model="detailData.docSent" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="Telex Release">
+            <el-input v-model="detailData.telexRelease" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Advance Payment">
+            <el-input v-model="detailData.advancePayment" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Advanc Paid">
+            <el-input v-model="detailData.advancePaid" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Create Date">
+            <el-input v-model="detailData.createTime" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="M-Planner">
+            <el-input v-model="detailData.planner" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Edit Date">
+            <el-input v-model="detailData.edit" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-form-item label="Last Editor">
+            <el-input v-model="detailData.endPlanner" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Remark Delay">
+            <el-input v-model="detailData.remarkDelay" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Comments">
+            <el-input v-model="detailData.remark" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="Inspection Completed Qty">
+            <el-input v-model="detailData.inspectionCompletedQty" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label=" ">
+            <span></span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PoOrderDetail',
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.po-order-detail {
+  width: 100%;
+}
+
+.detail-form {
+  width: 100%;
+}
+
+// 表单项底部间距 - 与产品页面保持一致
+.el-form-item {
+  margin-bottom: 20px;
+}
+
+// 标签样式：字体14px，与产品页面一致
+/deep/ .el-form-item__label {
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.5;
+  padding-bottom: 6px;
+  font-weight: normal;
+}
+
+// 输入框样式 - 与产品页面完全一致（默认尺寸）
+/deep/ .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  background-color: #fff;
+}
+
+// disabled 状态样式 - 与产品页面 disabled 样式一致
+/deep/ .el-input.is-disabled .el-input__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+/deep/ .el-input__inner:focus {
+  border-color: #409eff;
+  outline: none;
+}
+
+</style>
diff --git a/src/views/modules/order/poOrder_search.vue b/src/views/modules/order/poOrder_search.vue
index 51c8e9c..03b74b5 100644
--- a/src/views/modules/order/poOrder_search.vue
+++ b/src/views/modules/order/poOrder_search.vue
@@ -77,6 +77,10 @@
 
     <!-- 详情页签 -->
     <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="orderDetail">
+        <po-order-detail :detail-data="currentRow" />
+      </el-tab-pane>
       <!-- 物流信息 -->
       <el-tab-pane label="物流" name="logistics">
         <logistics-po-list ref="logisticsPoList" />
@@ -94,11 +98,13 @@ 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'
+import PoOrderDetail from './com_poOrderDetail.vue'
 
 export default {
   components: {
     LogisticsPoList,
-    InspectionDetailList
+    InspectionDetailList,
+    PoOrderDetail
   },
   name: 'PoOrderQuery',
   data() {
@@ -106,7 +112,7 @@ export default {
       loading: false,
       exportLoading: false,
       height: 400,
-      activeTab: 'logistics',
+      activeTab: 'orderDetail',
       pageIndex: 1,
       pageSize: 20,
       totalPage: 0,
@@ -584,6 +590,9 @@ export default {
       if (this.currentRow === '' || this.currentRow === null) {
         this.currentRow = { flexid: '', supplierNo: '' }
       }
+      if (this.activeTab === 'orderDetail') {
+        // 订单详情不需要刷新，直接显示 currentRow
+      }
       if (this.activeTab === 'logistics') {
         this.refreshLogisticsTable()
       }