feat(purchaseorder): 优化采购单列表展示及详情查看功能

- 为采购单列表各列添加固定宽度，提升表格对齐度与可读性
- 新增“查看详情”按钮，支持在抽屉中查看采购单详情
- 引入 ApproveLayout 和 PurchaseOrderDetailView 组件用于详情页布局
- 在数据变化时重置详情抽屉内的表单状态
- 抽屉打开时自动加载对应采购单的详细信息
- 优化弹窗与抽屉的结构和逻辑，增强用户体验

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 {

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;
     }
   }
 };