From d02aea3d2cced24f1dc91d548004d67fc4f3d683 Mon Sep 17 00:00:00 2001
From: chenhao <chenhao2@unisinsight.com>
Date: Wed, 26 Nov 2025 14:18:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(purchaseorder):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=87=87=E8=B4=AD=E5=8D=95=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=8F=8A=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

- 为采购单列表各列添加固定宽度，提升表格对齐度与可读性
- 新增“查看详情”按钮，支持在抽屉中查看采购单详情
- 引入 ApproveLayout 和 PurchaseOrderDetailView 组件用于详情页布局
- 在数据变化时重置详情抽屉内的表单状态
- 抽屉打开时自动加载对应采购单的详细信息
- 优化弹窗与抽屉的结构和逻辑，增强用户体验
---
 .../src/views/approve/ApproveLayout.vue       |  9 +-
 .../oms_vue/src/views/purchaseorder/index.vue | 82 +++++++++++++++----
 2 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/oms_web/oms_vue/src/views/approve/ApproveLayout.vue b/oms_web/oms_vue/src/views/approve/ApproveLayout.vue
index 51c39c50..4e0d984d 100644
--- a/oms_web/oms_vue/src/views/approve/ApproveLayout.vue
+++ b/oms_web/oms_vue/src/views/approve/ApproveLayout.vue
@@ -1,8 +1,8 @@
-<template>
+  <template>
   <div class="approve-layout">
     <header class="approve-layout-header">
       <div class="header-center">
-        <h1>{{ title }}</h1>
+        <h3>{{ title }}</h3>
       </div>
       <div class="header-right">
         <img src="@/assets/images/companyLogo.png" alt="Company Logo" class="company-logo" />
@@ -33,7 +33,7 @@ export default {
 
 <style lang="scss" scoped>
 .approve-layout {
-  min-height: 100vh;
+  max-height: 100vh;
   background-color: #F8F5F0;
   padding: 20px;
   display: flex;
@@ -45,7 +45,8 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
-  padding: 15px 20px;
+  font-size: 13px;
+  padding: 0px 20px;
   border-bottom: 1px solid ; /* Separator */
 
   .header-center {
diff --git a/oms_web/oms_vue/src/views/purchaseorder/index.vue b/oms_web/oms_vue/src/views/purchaseorder/index.vue
index c88d5e92..3cc6cc7a 100644
--- a/oms_web/oms_vue/src/views/purchaseorder/index.vue
+++ b/oms_web/oms_vue/src/views/purchaseorder/index.vue
@@ -86,39 +86,39 @@
 
     <el-table v-loading="loading" :data="purchaseorderList" @selection-change="handleSelectionChange">
       <!--      <el-table-column type="selection" width="55" align="center" />-->
-      <el-table-column label="采购编号" align="center" prop="purchaseNo"/>
-      <el-table-column label="采购方名称" align="center" prop="buyerName"/>
-      <el-table-column label="制造商名称" align="center" prop="vendorName"/>
-      <el-table-column label="联系人" align="center" prop="vendorUser"/>
-      <el-table-column label="联系电话" align="center" prop="vendorPhone"/>
-      <el-table-column label="含税总计金额" align="center" prop="totalAmount"/>
+      <el-table-column label="采购编号" align="center" prop="purchaseNo" width="180"/>
+      <el-table-column label="采购方名称" align="center" prop="buyerName" width="120"/>
+      <el-table-column label="制造商名称" align="center" prop="vendorName" width="120"/>
+      <el-table-column label="联系人" align="center" prop="vendorUser" width="100"/>
+      <el-table-column label="联系电话" align="center" prop="vendorPhone" width="120"/>
+      <el-table-column label="含税总计金额" align="center" prop="totalAmount" width="120"/>
       <el-table-column label="发起日期" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="汇智负责人" align="center" prop="ownerName"/>
-      <el-table-column label="审批状态" align="center" prop="approveStatus">
+      <el-table-column label="汇智负责人" align="center" prop="ownerName" width="120"/>
+      <el-table-column label="审批状态" align="center" prop="approveStatus" width="100">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.approve_status" :value="scope.row.approveStatus"/>
         </template>
       </el-table-column>
-      <el-table-column label="审批节点" align="center" prop="approveNode">
+      <el-table-column label="审批节点" align="center" prop="approveNode" width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.approveNode || '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="供应商确认状态" align="center" prop="confirmStatus">
+      <el-table-column label="供应商确认状态" align="center" prop="confirmStatus" width="120">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.vendor_confirm_status" :value="scope.row.confirmStatus"/>
         </template>
       </el-table-column>
-      <el-table-column label="采购状态" align="center" prop="status">
+      <el-table-column label="采购状态" align="center" prop="status" width="100">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.purchase_status" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
         <template slot-scope="scope">
           <el-button
             v-if="scope.row.approveStatus === 0 || scope.row.approveStatus === 3"
@@ -147,6 +147,15 @@
             v-hasPermi="['sip:purchaseorder:remove']"
           >删除
           </el-button>
+          <el-button
+            v-if="scope.row.approveStatus === 1 || scope.row.approveStatus === 3"
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleViewDetails(scope.row)"
+            v-hasPermi="['sip:purchaseorder:query']"
+          >查看详情
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -161,7 +170,7 @@
 
     <!-- 添加或修改采购单主表对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80vw" append-to-body>
-      <purchase-order-detail ref="purchaseOrderDetail"  @close="open = false"
+      <purchase-order-detail ref="purchaseOrderDetail" @close="open = false"
                              @success="getList">
 
       </purchase-order-detail>
@@ -170,6 +179,24 @@
         <el-button @click="cancel">取 消</el-button>
       </template>
     </el-dialog>
+
+    <!-- 订单详情抽屉 -->
+    <el-drawer
+      title="订单详情"
+      :visible.sync="showDetailDrawer"
+      direction="rtl"
+      size="80%"
+      append-to-body
+    >
+      <ApproveLayout title="紫光汇智信息技术有限公司" >
+        <purchase-order-detail-view ref="detailViewOnly" @close="showDetailDrawer = false"
+                               @success="getList">
+        </purchase-order-detail-view>
+        <template #footer>
+          <span>{{ currentDetailPurchaseNo }}</span>
+        </template>
+      </ApproveLayout>
+    </el-drawer>
   </div>
 </template>
 
@@ -183,12 +210,16 @@ import {
   applyPurchaseorder
 } from "@/api/sip/purchaseorder";
 import PurchaseOrderDetail from './components/PurchaseOrderDetail';
+import ApproveLayout from "@/views/approve/ApproveLayout.vue";
+import PurchaseOrderDetailView from "@/views/purchaseorder/components/PurchaseOrderDetailView.vue";
 
 export default {
   name: "Purchaseorder",
   dicts: ['approve_status', 'vendor_confirm_status', 'purchase_status'],
   components: {
-    PurchaseOrderDetail
+    PurchaseOrderDetail,
+    ApproveLayout,
+    PurchaseOrderDetailView
   },
   data() {
     return {
@@ -211,6 +242,12 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 是否显示详情抽屉
+      showDetailDrawer: false,
+      // 详情订单ID
+      detailOrderId: null,
+      // 当前详情订单编号
+      currentDetailPurchaseNo: null,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -243,6 +280,17 @@ export default {
         this.currentOrderId=null
         this.$refs.purchaseOrderDetail?.resetForm()
       }
+    },
+    // 监听详情抽屉变化
+    showDetailDrawer(val) {
+      if (val) {
+        this.$nextTick(()=>{
+          this.$refs.detailViewOnly?.loadPurchaseOrder(this.detailOrderId)
+        })
+      } else {
+        this.detailOrderId = null;
+        this.$refs.detailViewOnly?.resetForm();
+      }
     }
   },
   methods: {
@@ -317,6 +365,12 @@ export default {
         this.$modal.msgSuccess("申请采购成功");
       }).catch(() => {
       });
+    },
+    /** 查看详情按钮操作 */
+    handleViewDetails(row) {
+      this.detailOrderId = row.id;
+      this.currentDetailPurchaseNo = row.purchaseNo;
+      this.showDetailDrawer = true;
     }
   }
 };