From ac7507d9feb0e8a850f13326b5857db10d550c22 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 29 Oct 2025 13:31:49 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EquipmentDetailList.vue                   | 492 +++++++++---------
 .../EquipmentEntryApply/EquipmentMainList.vue |   6 +-
 2 files changed, 249 insertions(+), 249 deletions(-)

diff --git a/src/views/EquipmentEntryApply/EquipmentDetailList.vue b/src/views/EquipmentEntryApply/EquipmentDetailList.vue
index 23792578..8e5258f9 100644
--- a/src/views/EquipmentEntryApply/EquipmentDetailList.vue
+++ b/src/views/EquipmentEntryApply/EquipmentDetailList.vue
@@ -1,105 +1,52 @@
 <template>
   <div class="app-container">
-    <el-form
-      :model="queryParams"
-      ref="queryFormRef"
-      inline
-      label-width="auto"
-      size="small"
-    >
+    <el-form :model="queryParams" ref="queryFormRef" inline label-width="auto" size="small">
       <!-- 表单搜索 -->
-      <el-row>
-        <el-form-item prop="orderCreateUser" label="申请人：">
-          <el-input
-            clearable
-            style="width: 200px"
-            placeholder="请输入内容"
-            v-model.trim="queryParams.orderCreateUser"
-          />
-        </el-form-item>
-        <el-form-item label="申请时间：" prop="orderCreateTime">
-          <el-date-picker
-            type="daterange"
-            style="width: 200px"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd"
-            v-model="queryParams.orderCreateTime"
-          />
-        </el-form-item>
+      <el-card class="search-box">
+        <el-row>
+          <el-form-item prop="orderCreateUser" label="申请人：">
+            <el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.orderCreateUser" />
+          </el-form-item>
+          <el-form-item label="申请时间：" prop="orderCreateTime">
+            <el-date-picker type="daterange" style="width: 200px" unlink-panels range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+              v-model="queryParams.orderCreateTime" />
+          </el-form-item>
 
-        <el-form-item label="审批状态" prop="entryStatus">
-          <el-select
-            clearable
-            style="width: 200px"
-            placeholder="请选择审批状态"
-            v-model="queryParams.entryStatus"
-          >
-            <el-option label="待审批" value="0"/>
-            <el-option label="已通过" value="1"/>
-            <el-option label="已驳回" value="2"/>
-          </el-select>
-        </el-form-item>
+          <el-form-item label="审批状态" prop="entryStatus">
+            <el-select clearable style="width: 200px" placeholder="请选择审批状态" v-model="queryParams.entryStatus">
+              <el-option label="待审批" value="0" />
+              <el-option label="已通过" value="1" />
+              <el-option label="已驳回" value="2" />
+            </el-select>
+          </el-form-item>
 
-        <el-form-item prop="name" label="装备名称：">
-          <el-input
-            clearable
-            style="width: 200px"
-            placeholder="请输入内容"
-            v-model.trim="queryParams.name"
-          />
-        </el-form-item>
+          <el-form-item prop="name" label="装备名称：">
+            <el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.name" />
+          </el-form-item>
 
-        <el-form-item prop="specificationModel" label="规格型号：">
-          <el-input
-            clearable
-            style="width: 200px"
-            placeholder="请输入内容"
-            v-model.trim="queryParams.specificationModel"
-          />
-        </el-form-item>
+          <el-form-item prop="specificationModel" label="规格型号：">
+            <el-input clearable style="width: 200px" placeholder="请输入内容"
+              v-model.trim="queryParams.specificationModel" />
+          </el-form-item>
 
-        <el-form-item prop="originalCode" label="装备原始编码：">
-          <el-input
-            clearable
-            style="width: 200px"
-            placeholder="请输入内容"
-            v-model.trim="queryParams.originalCode"
-          />
-        </el-form-item>
+          <el-form-item prop="originalCode" label="装备原始编码：">
+            <el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.originalCode" />
+          </el-form-item>
 
-        <el-form-item prop="manufacturerId" label="生产厂家：">
-          <el-select
-            v-model="queryParams.manufacturerId"
-            placeholder="请选择生产厂家"
-            clearable
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in manufacturerList"
-              :key="item.id"
-              :label="item.label"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
+          <el-form-item prop="manufacturerId" label="生产厂家：">
+            <el-select v-model="queryParams.manufacturerId" placeholder="请选择生产厂家" clearable style="width: 100%">
+              <el-option v-for="item in manufacturerList" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+          </el-form-item>
 
-        <el-form-item prop="productionDate" label="出厂日期：">
-          <el-date-picker
-            type="daterange"
-            style="width: 200px"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd"
-            v-model="queryParams.productionDate"
-          />
-        </el-form-item>
+          <el-form-item prop="productionDate" label="出厂日期：">
+            <el-date-picker type="daterange" style="width: 200px" unlink-panels range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+              v-model="queryParams.productionDate" />
+          </el-form-item>
 
-        <!--        <el-form-item prop="keyword" label="采购日期：">
+          <!--        <el-form-item prop="keyword" label="采购日期：">
                   <el-date-picker
                     type="date"
                     style="width: 240px"
@@ -109,168 +56,141 @@
                   />
                 </el-form-item>-->
 
-        <el-form-item prop="minOriginalValue" label="资产原值：">
-          <el-input
-            clearable
-            style="width: 90px"
-            placeholder="请输入"
-            v-model.trim="queryParams.minOriginalValue"
-          />
+          <el-form-item prop="minOriginalValue" label="资产原值：">
+            <el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.minOriginalValue" />
 
-        </el-form-item>
-        <el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%;">
-          <el-input
-            clearable
-            style="width: 90px"
-            placeholder="请输入"
-            v-model.trim="queryParams.maxOriginalValue"
-          />
-        </el-form-item>
+          </el-form-item>
+          <el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%;">
+            <el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.maxOriginalValue" />
+          </el-form-item>
 
 
-        <el-form-item>
-          <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
-            查询
-          </el-button>
-          <el-button class="primary-lease" type="primary" @click="resetForm">
-            重置
-          </el-button>
-          <el-button
-            class="primary-lease"
-            type="primary"
-            @click="showEquipmentInput()"
-          >
-            装备录入
-          </el-button>
 
-          <el-button
-            class="primary-lease"
-            type="primary"
-            @click="showDetails('0')"
-          >
-            展开明细
-          </el-button>
 
-        </el-form-item>
-
-      </el-row>
-
-      <!-- 表格 -->
-      <el-table :data="tableData" :span-method="handleSpanMethod" :max-height="580">
-        <!--      <el-table :data="tableData"  >-->
-        <el-table-column label="序号" align="center" width="55" type="index" fixed/>
-        <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
-                         column-key="orderNumber" fixed min-width="200"
-        />
-        <el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="100"/>
-        <el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
-          <template slot-scope="scope">
-            {{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
-          <template slot-scope="scope">
-            {{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
-            {{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100"/>
-        <el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center" min-width="100"/>
-        <el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100"/>
-        <el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100"/>
-        <el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100"/>
-        <el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100"/>
-        <!--        <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
-        <el-table-column prop="originalValue" label="资产原值（元）" show-overflow-tooltip align="center" min-width="100"/>
-        <!--        <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
-        <!--        <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
-        <el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100"/>
-        <el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
-          <template v-slot="{ row }">
-            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
-          <template v-slot="{ row }">
-            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
-          <template v-slot="{ row }">
-            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
-          <template v-slot="{ row }">
-            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-for="(item, index) in columns"
-          v-if="item.visible"
-          :key="index"
-          align="center"
-          show-overflow-tooltip
-          :label="item.label"
-          :prop="item.prop"
-        >
-          <template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
-            <span>
-              {{ getFeatureValue(row, item.prop) }}
-            </span>
-          </template>
-        </el-table-column>
-        <!--        <el-table-column prop="devCount" label="特征项1" align="center"/>-->
-        <!--        <el-table-column prop="devCount" label="特征值1" align="center"/>-->
-        <el-table-column prop="orderCreateUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
-                         min-width="100"
-        />
-        <el-table-column prop="orderCreateTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
-                         min-width="100"
-        />
-        <el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
-                         min-width="100"
-        >
-          <template slot-scope="{ row }">
-            <el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
-            <el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
-            <el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
-            <el-tag v-if="row.entryStatus == 3" size="small" type="info">草稿</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" min-width="300" fixed="right">
-          <template slot-scope="{ row }">
-            <el-button type="text" @click="handleViewDetail(row)">
-              <i class="el-icon-view"></i> 查看
+        </el-row>
+        <el-row>
+          <el-col :span="24" style="text-align: right;">
+            <el-button class="primary-lease" @click="resetForm">
+              <i class="el-icon-refresh"></i>
+              重置
             </el-button>
-            <el-button
-              type="text"
-              @click="showEquipmentInput(row.id, false)"
-              v-if="row.orderStatus == '3'"
-            >
-              <i class="el-icon-edit"></i> 编辑
+            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
+              <i class="el-icon-search"></i>
+              查询
             </el-button>
-            <el-button
-              type="text"
-              @click="deleteItem(row)"
-              v-if="row.orderStatus == '3'"
-            >
-              <i class="el-icon-delete"></i> 删除
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-card class="content-box">
+        <el-row>
+          <el-col>
+            <el-button class="primary-lease" type="primary" @click="showEquipmentInput()">
+              装备录入
             </el-button>
 
-          </template>
-        </el-table-column>
-      </el-table>
+            <el-button class="primary-lease" type="primary" @click="showDetails('0')">
+              展开明细
+            </el-button>
+          </el-col>
+        </el-row>
+        <!-- 表格 -->
+        <el-table :data="tableData" border stripe :span-method="handleSpanMethod" height="100%">
+          <!--      <el-table :data="tableData"  >-->
+          <el-table-column label="序号" align="center" width="55" type="index" fixed />
+          <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip column-key="orderNumber"
+            fixed min-width="200" />
+          <el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="100" />
+          <el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
+            <template slot-scope="scope">
+              {{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
+            </template>
+          </el-table-column>
 
-      <!-- 分页 -->
-      <pagination
-        :total="total"
-        @pagination="handlePageChange"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-      />
+          <el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
+            <template slot-scope="scope">
+              {{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
+              {{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100" />
+          <el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center"
+            min-width="100" />
+          <el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100" />
+          <el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100" />
+          <el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100" />
+          <el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100" />
+          <!--        <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
+          <el-table-column prop="originalValue" label="资产原值（元）" show-overflow-tooltip align="center" min-width="100" />
+          <!--        <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
+          <!--        <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
+          <el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100" />
+          <el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
+            <template v-slot="{ row }">
+              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
+            <template v-slot="{ row }">
+              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
+            <template v-slot="{ row }">
+              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
+            <template v-slot="{ row }">
+              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
+            </template>
+          </el-table-column>
+          <el-table-column v-for="(item, index) in columns" v-if="item.visible" :key="index" align="center"
+            show-overflow-tooltip :label="item.label" :prop="item.prop">
+            <template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
+              <span>
+                {{ getFeatureValue(row, item.prop) }}
+              </span>
+            </template>
+          </el-table-column>
+          <!--        <el-table-column prop="devCount" label="特征项1" align="center"/>-->
+          <!--        <el-table-column prop="devCount" label="特征值1" align="center"/>-->
+          <el-table-column prop="orderCreateUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
+            min-width="100" />
+          <el-table-column prop="orderCreateTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
+            min-width="100" />
+          <el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
+            min-width="100">
+            <template slot-scope="{ row }">
+              <el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
+              <el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
+              <el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
+              <el-tag v-if="row.entryStatus == 3" size="small" type="info">草稿</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="300" fixed="right">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="handleViewDetail(row)">
+                <i class="el-icon-view"></i> 查看
+              </el-button>
+              <el-button type="text" @click="showEquipmentInput(row.id, false)" v-if="row.orderStatus == '3'">
+                <i class="el-icon-edit"></i> 编辑
+              </el-button>
+              <el-button type="text" @click="deleteItem(row)" v-if="row.orderStatus == '3'">
+                <i class="el-icon-delete"></i> 删除
+              </el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-wrapper">
+          <!-- 分页 -->
+          <pagination :total="total" @pagination="handlePageChange" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" />
+        </div>
+
+      </el-card>
     </el-form>
 
     <!-- 弹框 -->
@@ -541,7 +461,7 @@ export default {
 }
 
 .app-container {
-  padding: 20px;
+  padding: 0;
 }
 
 ::v-deep .el-pagination {
@@ -552,4 +472,86 @@ export default {
 ::v-deep .el-button {
   margin-right: 8px;
 }
+
+.search-box {
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 320px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  ::v-deep .el-card__body {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    padding: 20px;
+  }
+
+  .el-row:first-child {
+    margin-bottom: 16px;
+    flex-shrink: 0;
+
+    .el-col {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+
+  .table-container {
+    flex: 1;
+    overflow: hidden;
+    margin-bottom: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pagination-wrapper {
+    flex-shrink: 0;
+    padding-top: 6px;
+    margin-top: auto;
+
+    ::v-deep .pagination-container {
+      padding: 0px 20px !important;
+    }
+  }
+
+  ::v-deep .el-table {
+
+    // 启用斑马纹
+    &.el-table--striped .el-table__body {
+      tr.el-table__row--striped td {
+        background-color: #F6FBFA !important;
+      }
+    }
+
+    .el-table__header {
+      background: #E9F0EE;
+
+      th {
+        background: #E9F0EE !important;
+        color: #606266;
+        font-weight: 600;
+        height: 50px;
+      }
+    }
+
+    // 确保表格体包装器可以横向和纵向滚动
+    .el-table__body-wrapper {
+      overflow-x: auto !important;
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+
+  }
+}
 </style>
diff --git a/src/views/EquipmentEntryApply/EquipmentMainList.vue b/src/views/EquipmentEntryApply/EquipmentMainList.vue
index 5a8fe144..5516a415 100644
--- a/src/views/EquipmentEntryApply/EquipmentMainList.vue
+++ b/src/views/EquipmentEntryApply/EquipmentMainList.vue
@@ -342,10 +342,8 @@ export default {
       }
     }
 
-    .el-table__body {
-      tr:hover>td {
-        background-color: #CCF1E9 !important;
-      }
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
     }
   }
 }