Merge pull request #748 from xinnan-tech/web--vue-device-modify

Web  vue device modify

main/manager-web/src/views/DeviceManagement.vue

@@ -4,10 +4,8 @@
     <el-main style="padding: 20px; display: flex; flex-direction: column;">
       <div class="table-container">
         <h3 class="device-list-title">设备列表</h3>
-        <el-button type="primary" class="add-device-btn" @click="handleAddDevice">
+        <el-table ref="deviceTable" :data="paginatedDeviceList" @selection-change="handleSelectionChange" style="width: 100%; margin-top: 20px" border stripe>
-          + 添加设备
+          <el-table-column type="selection" align="center" width="60"></el-table-column>
-        </el-button>
-        <el-table :data="paginatedDeviceList" style="width: 100%; margin-top: 20px" border stripe>
           <el-table-column label="设备型号" prop="model" flex></el-table-column>
           <el-table-column label="固件版本" prop="firmwareVersion" width="120"></el-table-column>
           <el-table-column label="Mac地址" prop="macAddress"></el-table-column>
@@ -39,9 +37,31 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        <div class="table_bottom">
-          :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
+          <div class="ctrl_btn">
-          layout="total, sizes, prev, pager, next, jumper" :total="deviceList.length"></el-pagination>
+            <el-button size="mini" type="primary" class="select-all-btn" @click="toggleAllSelection">
+                {{ isAllSelected ? '取消全选' : '全选' }}
+            </el-button>
+            <el-button type="primary" size="mini" class="add-device-btn" @click="handleAddDevice">
+                新增
+            </el-button>
+          </div>
+          <div class="custom-pagination">
+            <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
+            <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
+            <button
+              v-for="page in visiblePages"
+              :key="page"
+              class="pagination-btn"
+              :class="{ active: page === currentPage }"
+              @click="goToPage(page)"
+            >
+              {{ page }}
+            </button>
+            <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
+            <span class="total-text">共{{ deviceList.length }}条记录</span>
+          </div>
+        </div>
       </div>
       <div class="copyright">
         ©2025 xiaozhi-esp32-server
@@ -62,6 +82,8 @@ export default {
   data() {
     return {
       addDeviceDialogVisible: false,
+       selectedDevices: [],
+      isAllSelected: false,
       currentAgentId: this.$route.query.agentId || '',
       currentPage: 1,
       pageSize: 5,
@@ -75,7 +97,25 @@ export default {
       const start = (this.currentPage - 1) * this.pageSize;
       const end = start + this.pageSize;
       return this.deviceList.slice(start, end);
-    }
+    },
+    pageCount() {
+    return Math.ceil(this.deviceList.length / this.pageSize);
+    },
+    visiblePages() {
+      const pages = [];
+      const maxVisible = 3;
+      let start = Math.max(1, this.currentPage - 1);
+      let end = Math.min(this.pageCount, start + maxVisible - 1);
+
+      if (end - start + 1 < maxVisible) {
+        start = Math.max(1, end - maxVisible + 1);
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      return pages;
+    },
   },
   mounted() {
     const agentId = this.$route.query.agentId;
@@ -84,6 +124,16 @@ export default {
     }
   },
   methods: {
+
+    handleSelectionChange(val) {
+      this.selectedDevices = val;
+      this.isAllSelected = val.length === this.paginatedDeviceList.length;
+    },
+    toggleAllSelection() {
+      this.$refs.deviceTable.toggleAllSelection();
+    },
+
+
     handleAddDevice() {
       this.addDeviceDialogVisible = true;
     },
@@ -115,12 +165,19 @@ export default {
         });
       });
     },
-    handleSizeChange(val) {
+    goFirst() {
-      this.pageSize = val;
+      this.currentPage = 1;
     },
-    handleCurrentChange(val) {
+    goPrev() {
-      this.currentPage = val;
+      if (this.currentPage > 1) this.currentPage--;
     },
+    goNext() {
+      if (this.currentPage < this.pageCount) this.currentPage++;
+    },
+    goToPage(page) {
+      this.currentPage = page;
+    },
+
     fetchBindDevices(agentId) {
       this.loading = true;
       Api.device.getAgentBindDevices(agentId, ({ data }) => {
@@ -180,21 +237,18 @@ export default {
 }
 
 .add-device-btn {
-  float: right;
+  background: linear-gradient(135deg, #6b8cff, #a966ff) !important;
-  background: #409eff;
+  border: none !important;
-  border: none;
+  color: white !important;
-  border-radius: 10px;
+  margin-left: 10px;
-  width: 105px;
   height: 32px;
-  display: flex;
+  padding: 7px 12px;
-  align-items: center;
+  border-radius: 4px !important;
-  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  font-size: 14px;
-  gap: 8px;
-  margin-bottom: 15px;
 
   &:hover {
-    background: #3a8ee6;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 }
 
@@ -213,8 +267,85 @@ export default {
   vertical-align: middle;
 }
 
-.pagination {
+.custom-pagination {
-  margin-top: 20px;
+  display: flex;
-  text-align: right;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
 }
+
+.pagination-btn {
+  min-width: 28px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  background: #dee7ff;
+  color: #606266;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.pagination-btn:first-child,
+.pagination-btn:nth-child(2),
+.pagination-btn:nth-last-child(2) {
+  min-width: 60px;
+}
+
+.pagination-btn:hover {
+  background: #d7dce6;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.pagination-btn.active {
+  background: #5f70f3 !important;
+  color: #ffffff !important;
+  border-color: #5f70f3 !important;
+}
+
+.total-text {
+  color: #909399;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.table_bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.ctrl_btn {
+  display: flex;
+  gap: 8px;
+  padding-left: 26px;
+
+  .el-button {
+    min-width: 72px;
+    height: 32px;
+    padding: 7px 12px;
+    border-radius: 4px;
+    border: none;
+    transition: all 0.3s;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .el-button--primary {
+    background: #5f70f3;
+    color: white;
+  }
+}
+
+
 </style>