装备录入申请修改

src/views/EquipmentEntryApply/EquipmentMainList.vue

@@ -1,128 +1,93 @@
 <template>
   <div class="app-container-con">
-    <el-form
+    <el-form :model="queryParams" ref="queryFormRef" inline label-width="auto" size="small">
-      :model="queryParams"
-      ref="queryFormRef"
-      inline
-      label-width="auto"
-      size="small"
-    >
       <!-- 表单搜索 -->
-      <el-row>
+      <el-card class="search-box">
-         <el-form-item prop="createUser" label="申请人：">
+        <el-row>
-           <el-input
+          <el-col :span="18">
-             clearable
+            <el-form-item prop="createUser" label="申请人：">
-             style="width: 240px"
+            <el-input clearable style="width: 240px" placeholder="请输入关键字" v-model.trim="queryParams.createUser" />
-             placeholder="请输入关键字"
+          </el-form-item>
-             v-model.trim="queryParams.createUser"
-           />
-         </el-form-item>
 
           <el-form-item label="申请时间" prop="createTime">
-            <el-date-picker
+            <el-date-picker type="daterange" style="width: 100%" unlink-panels range-separator="至"
-              type="daterange"
+              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
-              style="width: 100%"
+              v-model="queryParams.createTime" />
-              unlink-panels
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="yyyy-MM-dd"
-              v-model="queryParams.createTime"
-            />
           </el-form-item>
 
           <el-form-item label="审批状态" prop="status">
-            <el-select
+            <el-select clearable style="width: 100%" placeholder="请选择审批状态" v-model="queryParams.status">
-              clearable
+              <el-option label="待审批" value="0" />
-              style="width: 100%"
+              <el-option label="已审批" value="1" />
-              placeholder="请选择审批状态"
+              <el-option label="草稿" value="3" />
-              v-model="queryParams.status"
-            >
-              <el-option label="待审批" value="0"/>
-              <el-option label="已审批" value="1"/>
-              <el-option label="草稿" value="3"/>
             </el-select>
           </el-form-item>
-
+          </el-col>
-          <el-form-item>
+          <el-col :span="6" style="text-align: right;">
-            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
+            <el-button class="primary-lease" @click="resetForm"> 
+              <i class="el-icon-refresh"></i>
+              重置 
+            </el-button>
+            <el-button class="primary-lease" style="margin-right: 0;" type="primary" @click="getEquipmentApplyList">
+              <i class="el-icon-search"></i>
               查询
             </el-button>
-            <el-button class="primary-lease" type="primary" @click="resetForm">
+          </el-col>
-              重置
+        </el-row>
-            </el-button>
+      </el-card>
-          </el-form-item>
 
-        <el-col  style="float:right;width: 16%;">
+      <el-card class="content-box">
-          <el-button
+        <el-row>
-            class="primary-lease"
+          <el-col>
-            type="primary"
+            <el-button class="primary-lease" type="primary" @click="addEquipment()" style="margin-right: 0px">
-            @click="addEquipment()"
+              装备录入
-            style="margin-right: 0px"
-          >
-            装备录入
-          </el-button>
-
-          <el-button
-            class="primary-lease"
-            type="primary"
-            @click="showDetails('1')"
-            style="margin-right: 0px"
-          >
-            展开明细
-          </el-button>
-        </el-col>
-      </el-row>
-
-      <!-- 表格 -->
-      <el-table :data="tableData">
-        <el-table-column label="序号" align="center" width="55" type="index"/>
-        <el-table-column prop="orderNumber" label="录入单号" align="center"/>
-        <el-table-column prop="devCount" label="申请录入数量" align="center"/>
-        <el-table-column prop="createUser" label="申请人" align="center"/>
-        <el-table-column prop="createTime" label="申请时间" align="center"/>
-        <el-table-column prop="status" align="center" label="审批状态">
-          <template slot-scope="{ row }">
-            <el-tag v-if="row.status == 0" size="small" type="warning">审批中</el-tag>
-            <el-tag v-if="row.status == 1" size="small" type="success">已审批</el-tag>
-            <el-tag v-if="row.status == 3" size="small" type="info">草稿</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="agree" label="已通过数量" align="center"/>
-        <el-table-column prop="reject" label="已驳回数量" align="center"/>
-        <el-table-column label="操作" align="center" min-width="100">
-          <template slot-scope="{ row }">
-            <el-button type="text" size="mini" @click="viewEquipment(row.id)">
-              <i class="el-icon-view"></i> 查看
-            </el-button>
-            <el-button
-              type="text"
-              size="mini"
-              @click="editEquipment(row.id)"
-              v-if="row.status === '3'"
-            >
-              <i class="el-icon-edit"></i> 编辑
-            </el-button>
-            <el-button
-              type="text"
-              size="mini"
-              @click="deleteItem(row)"
-              v-if="row.status === '3'"
-            >
-              <i class="el-icon-delete"></i> 删除
             </el-button>
 
-          </template>
+            <el-button class="primary-lease" type="primary" @click="showDetails('1')" style="margin-right: 0px">
-        </el-table-column>
+              展开明细
-      </el-table>
+            </el-button>
+          </el-col>
+        </el-row>
 
-      <!-- 分页 -->
+        <!-- 表格区域 -->
-      <pagination
+        <div class="table-container">
-        :total="total"
+          <el-table :data="tableData" border stripe height="100%">
-        @pagination="handlePageChange"
+            <el-table-column label="序号" align="center" width="55" type="index" />
-        :page.sync="queryParams.pageNum"
+            <el-table-column prop="orderNumber" label="录入单号" align="center" />
-        :limit.sync="queryParams.pageSize"
+            <el-table-column prop="devCount" label="申请录入数量" align="center" />
-      />
+            <el-table-column prop="createUser" label="申请人" align="center" />
+            <el-table-column prop="createTime" label="申请时间" align="center" />
+            <el-table-column prop="status" align="center" label="审批状态">
+              <template slot-scope="{ row }">
+                <el-tag v-if="row.status == 0" size="small" type="warning">审批中</el-tag>
+                <el-tag v-if="row.status == 1" size="small" type="success">已审批</el-tag>
+                <el-tag v-if="row.status == 3" size="small" type="info">草稿</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="agree" label="已通过数量" align="center" />
+            <el-table-column prop="reject" label="已驳回数量" align="center" />
+            <el-table-column label="操作" align="center" min-width="100">
+              <template slot-scope="{ row }">
+                <el-button type="text" size="mini" @click="viewEquipment(row.id)">
+                  <i class="el-icon-view"></i> 查看
+                </el-button>
+                <el-button type="text" size="mini" @click="editEquipment(row.id)" v-if="row.status === '3'">
+                  <i class="el-icon-edit"></i> 编辑
+                </el-button>
+                <el-button type="text" size="mini" @click="deleteItem(row)" v-if="row.status === '3'">
+                  <i class="el-icon-delete"></i> 删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination-wrapper">
+          <pagination :total="total" @pagination="handlePageChange" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" />
+        </div>
+      </el-card>
     </el-form>
   </div>
 </template>
@@ -140,11 +105,11 @@ export default {
       isVisible: false,
       isAddVisible: false,
       queryParams: {
-        createUser:'',
+        createUser: '',
         createTime: '',
         status: '',
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       tableData: [],
 
@@ -156,10 +121,10 @@ export default {
         status: '',
         applyTime: '',
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       tableDataDetails: [],
-      isDetails: '0'
+      isDetails: '0',
     }
   },
   mounted() {
@@ -175,11 +140,11 @@ export default {
       const params = { ...this.queryParams }
       delete params.createTime
       getEquipmentApplyListApi(params)
-        .then(res => {
+        .then((res) => {
           this.tableData = res.data.rows
           this.total = res.data.total
         })
-        .catch(error => {
+        .catch((error) => {
           console.error('获取装备申请列表失败:', error)
         })
     },
@@ -207,10 +172,10 @@ export default {
       this.$confirm('是否确定删除？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning'
+        type: 'warning',
       })
         .then(() => equipmentDelApiNew({ id: row.id }))
-        .then(res => {
+        .then((res) => {
           if (res.code === 200) {
             this.$message.success('删除成功')
             this.getEquipmentApplyList()
@@ -218,8 +183,9 @@ export default {
             this.$message.error('删除失败')
           }
         })
-        .catch(error => {
+        .catch((error) => {
-          if (error !== 'cancel') { // 排除取消操作的错误
+          if (error !== 'cancel') {
+            // 排除取消操作的错误
             console.error('删除失败:', error)
             this.$message.error('删除失败，请重试')
           }
@@ -238,8 +204,8 @@ export default {
         query: {
           orderId: orderId,
           isAddVisible: true,
-          isApprovalVisible: false
+          isApprovalVisible: false,
-        }
+        },
       })
     },
 
@@ -250,8 +216,8 @@ export default {
         query: {
           orderId: orderId,
           isAddVisible: false,
-          isApprovalVisible: false
+          isApprovalVisible: false,
-        }
+        },
       })
     },
 
@@ -262,12 +228,11 @@ export default {
         query: {
           orderId: '',
           isAddVisible: false,
-          isApprovalVisible: false
+          isApprovalVisible: false,
-        }
+        },
       })
-    }
+    },
-
+  },
-  }
 }
 </script>
 
@@ -292,7 +257,7 @@ export default {
 
 .app-container-con {
   height: calc(100vh - 84px);
-  padding: 20px;
+  // padding: 20px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow-y: hidden;
@@ -306,4 +271,82 @@ 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 - 230px);
+  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__body {
+      tr:hover>td {
+        background-color: #CCF1E9 !important;
+      }
+    }
+  }
+}
 </style>