装备操作记录表格修改

src/views/EquipmentRoamRecord/maintenanceRecord/index.vue

@@ -1,9 +1,11 @@
 <template>
   <!-- 装备流转记录  -->
   <div class="app-container">
-    <div class="query-form-container" style="flex-shrink: 0;">
       <el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
-        <el-form-item prop="keyword">
+        <el-card class="search-box">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item prop="keyword">
           <el-input
             clearable
             style="width: 240px"
@@ -25,19 +27,25 @@
             start-placeholder="开始日期"
           />
         </el-form-item>
-        <el-form-item>
+            </el-col>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery"> 查询</el-button>
+            <el-col :span="12" style="text-align: right;">
-          <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
+              <el-button type="primary" icon="el-icon-search" @click="onHandleQuery"> 查询</el-button>
-        </el-form-item>
+              <el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
+            </el-col>
+          </el-row>
         
-        <el-form-item class="button-group">
+
-          <el-button icon="el-icon-refresh" size="mini" @click="onHandleExport">导出数据</el-button>
+        </el-card>
-        </el-form-item>
       </el-form>
-    </div>
 
+      <el-card class="content-box">
+        <el-row>
+          <el-col :span="24" style="text-align: right;">
+            <el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
+          </el-col>
+        </el-row>
     <div class="table-container" style="flex: 1; overflow-y: auto;">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" border stripe height="100%">
         <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
         <el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人"/>
         <el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
@@ -88,7 +96,7 @@
         @pagination="getRoamRecordList"
       />
     </div>
-
+    </el-card>
     <!-- 出库记录单 -->
     <el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
       <el-row>
@@ -117,13 +125,15 @@
       </el-row>
 
       <vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
-        <el-table :data="outRecordData" style="width: 100%">
+        <div class="dialog-table">
-          <el-table-column align="center" show-overflow-tooltip type="index" label="序号"/>
+        <el-table :data="outRecordData" style="width: 100%" border stripe>
+          <el-table-column align="center" show-overflow-tooltip type="index" width="100px"  label="序号"/>
           <el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
           <!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
           <el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
           <el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
         </el-table>
+        </div>
       </vue-easy-print>
 
       <el-row class="record-row" style="margin-top: 10px">
@@ -247,7 +257,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .record-row {
   margin-bottom: 10px;
   font-size: 16px;
@@ -257,19 +267,11 @@ export default {
 }
 
 .app-container {
-  background-color: #f5f5f5; /* 设置整体灰色背景 */
+  // background-color: #f5f5f5; /* 设置整体灰色背景 */
   display: flex;
   flex-direction: column;
 }
 
-.query-form-container,
-.table-container,
-.pagination-container-fage {
-  background-color: #fff; /* 设置白色背景 */
-  padding: 10px;
-  margin-bottom: 20px;
-  border-radius: 4px;
-}
 
 .button-group {
   float: right;
@@ -280,12 +282,140 @@ export default {
   margin-bottom: 0px;
 }
 
-.pagination-container {
+
-  position: relative;
+.search-box {
-  height: 25px;
+  margin-bottom: 20px;
-  margin-bottom: 10px;
+  border-radius: 8px;
-  margin-top: -16px;
+  padding: 0;
-  padding: 10px 20px !important;
+}
-  background:none ;
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 210px);
+  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;
+      margin-bottom: 30px;
+    }
+  }
+
+  ::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--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+  }
+}
+.dialog-table {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  ::v-deep .el-table {
+    border-radius: 6px;
+    overflow: hidden;
+    
+    // 启用斑马纹
+    &.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: 45px;
+        font-size: 14px;
+        border-bottom: 2px solid #e4e7ed;
+      }
+    }
+
+    .el-table__body {
+      tr {
+        transition: all 0.2s ease;
+        
+        &:hover {
+          background-color: #f8f9fa;
+        }
+        
+        td {
+          padding: 12px 8px;
+          font-size: 13px;
+          border-bottom: 1px solid #f0f2f5;
+        }
+      }
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+    
+    // 表格边框优化
+    &::before {
+      display: none;
+    }
+    
+    &::after {
+      display: none;
+    }
+  }
 }
 </style>

src/views/EquipmentRoamRecord/retirementRecord/index.vue

@@ -1,9 +1,11 @@
 <template>
   <!-- 装备流转记录  -->
   <div class="app-container">
-    <div class="query-form-container" style="flex-shrink: 0;">
       <el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
-        <el-form-item prop="keyword">
+        <el-card class="search-box">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item prop="keyword">
           <el-input
             clearable
             style="width: 240px"
@@ -23,19 +25,25 @@
             start-placeholder="开始日期"
           />
         </el-form-item>
-        <el-form-item>
+          </el-col>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery"> 查询</el-button>
+          <el-col :span="12" style="text-align: right;">
-          <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="onHandleQuery"> 查询</el-button>
-        </el-form-item>
+          <el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
+          </el-col>
+        </el-row>
 
-        <el-form-item class="button-group">
+        
-          <el-button icon="el-icon-refresh" size="mini" @click="onHandleExport">导出数据</el-button>
+        </el-card>
-        </el-form-item>
       </el-form>
-    </div>
     
-    <div class="table-container" style="flex: 1; overflow-y: auto;">
+    <el-card class="content-box">
-      <el-table :data="tableData" style="width: 100%">
+      <el-row>
+        <el-col :span="24" style="text-align: right;">
+          <el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
+        </el-col>
+      </el-row>
+    <div class="table-container">
+      <el-table :data="tableData" style="width: 100%" border stripe height="100%">
         <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
         <el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人"/>
         <el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
@@ -78,7 +86,7 @@
       </el-table>
     </div>
 
-    <div class="pagination-container-fage" style="flex-shrink: 0;">
+    <div class="pagination-wrapper" style="flex-shrink: 0;">
       <pagination
         :total="total"
         :page.sync="queryParams.pageNum"
@@ -86,7 +94,7 @@
         @pagination="getRoamRecordList"
       />
     </div>
-
+    </el-card>
     <!-- 出库记录单 -->
     <el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
       <el-row>
@@ -115,13 +123,15 @@
       </el-row>
 
       <vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
-        <el-table :data="outRecordData" style="width: 100%">
+        <div class="dialog-table">
-          <el-table-column align="center" show-overflow-tooltip type="index" label="序号"/>
+        <el-table :data="outRecordData" style="width: 100%" border stripe>
+          <el-table-column align="center" show-overflow-tooltip type="index" width="100px" label="序号"/>
           <el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
           <!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
           <el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
           <el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
         </el-table>
+        </div>
       </vue-easy-print>
 
       <el-row class="record-row" style="margin-top: 10px">
@@ -245,7 +255,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .record-row {
   margin-bottom: 10px;
   font-size: 16px;
@@ -255,19 +265,11 @@ export default {
 }
 
 .app-container {
-  background-color: #f5f5f5; /* 设置整体灰色背景 */
+  // background-color: #f5f5f5; /* 设置整体灰色背景 */
   display: flex;
   flex-direction: column;
 }
 
-.query-form-container,
-.table-container,
-.pagination-container-fage {
-  background-color: #fff; /* 设置白色背景 */
-  padding: 10px;
-  margin-bottom: 20px;
-  border-radius: 4px;
-}
 
 .button-group {
   float: right;
@@ -278,12 +280,140 @@ export default {
   margin-bottom: 0px;
 }
 
-.pagination-container {
+
-  position: relative;
+.search-box {
-  height: 25px;
+  margin-bottom: 20px;
-  margin-bottom: 10px;
+  border-radius: 8px;
-  margin-top: -16px;
+  padding: 0;
-  padding: 10px 20px !important;
+}
-  background:none ;
+
+.content-box {
+  border-radius: 8px;
+  height: calc(100vh - 210px);
+  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;
+      margin-bottom: 30px;
+    }
+  }
+
+  ::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--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+  }
+}
+.dialog-table {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  ::v-deep .el-table {
+    border-radius: 6px;
+    overflow: hidden;
+    
+    // 启用斑马纹
+    &.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: 45px;
+        font-size: 14px;
+        border-bottom: 2px solid #e4e7ed;
+      }
+    }
+
+    .el-table__body {
+      tr {
+        transition: all 0.2s ease;
+        
+        &:hover {
+          background-color: #f8f9fa;
+        }
+        
+        td {
+          padding: 12px 8px;
+          font-size: 13px;
+          border-bottom: 1px solid #f0f2f5;
+        }
+      }
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
+      background-color: #CCF1E9 !important;
+    }
+    
+    // 表格边框优化
+    &::before {
+      display: none;
+    }
+    
+    &::after {
+      display: none;
+    }
+  }
 }
 </style>

src/views/EquipmentRoamRecord/returnRecord/index.vue

@@ -267,7 +267,7 @@ export default {
 .search-box {
   margin-bottom: 20px;
   border-radius: 8px;
-  padding: 10px 0 20px 0;
+  padding: 0;
 }
 
 .content-box {