From b8f64a66937108e849355ca8a228259334b40ddf Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Tue, 22 Apr 2025 10:05:06 +0800
Subject: [PATCH] =?UTF-8?q?update:=E6=9B=B4=E6=8D=A2=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=9A=84=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E2=80=9C=E9=80=89=E6=8B=A9=E2=80=9D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/DeviceManagement.vue            | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue
index f398dfc2..a419ad89 100644
--- a/main/manager-web/src/views/DeviceManagement.vue
+++ b/main/manager-web/src/views/DeviceManagement.vue
@@ -18,14 +18,17 @@
             <el-table
               ref="deviceTable"
               :data="paginatedDeviceList"
-              @selection-change="handleSelectionChange"
               class="transparent-table"
               :header-cell-class-name="headerCellClassName"
               v-loading="loading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(255, 255, 255, 0.7)">
-              <el-table-column type="selection" align="center" width="120"></el-table-column>
+              <el-table-column label="选择" align="center" width="120">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="scope.row.selected"></el-checkbox>
+                </template>
+              </el-table-column>
               <el-table-column label="设备型号" prop="model" align="center"></el-table-column>
               <el-table-column label="固件版本" prop="firmwareVersion" align="center" ></el-table-column>
               <el-table-column label="Mac地址" prop="macAddress" align="center"></el-table-column>
@@ -60,7 +63,7 @@
 
             <div class="table_bottom">
               <div class="ctrl_btn">
-                <el-button size="mini" type="primary" class="select-all-btn" @click="toggleAllSelection">
+                <el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">
                   {{ isAllSelected ? '取消全选' : '全选' }}
                 </el-button>
                 <el-button type="success" size="mini" class="add-device-btn" @click="handleAddDevice">
@@ -124,7 +127,6 @@ export default {
       deviceList: [],
       loading: false,
       userApi: null,
-
     };
   },
   computed: {
@@ -140,7 +142,10 @@ export default {
     paginatedDeviceList() {
       const start = (this.currentPage - 1) * this.pageSize;
       const end = start + this.pageSize;
-      return this.filteredDeviceList.slice(start, end);
+      return this.filteredDeviceList.slice(start, end).map(item => ({
+        ...item,
+        selected: false
+      }));
     },
     pageCount() {
       return Math.ceil(this.filteredDeviceList.length / this.pageSize);
@@ -177,15 +182,16 @@ export default {
       this.currentPage = 1;
     },
 
-    handleSelectionChange(val) {
-      this.selectedDevices = val;
-      this.isAllSelected = val.length === this.paginatedDeviceList.length;
-    },
-    toggleAllSelection() {
-      this.$refs.deviceTable.toggleAllSelection();
+    handleSelectAll() {
+      this.isAllSelected = !this.isAllSelected;
+      this.paginatedDeviceList.forEach(row => {
+        row.selected = this.isAllSelected;
+      });
+      this.selectedDevices = this.paginatedDeviceList.filter(device => device.selected);
     },
 
     deleteSelected() {
+      this.selectedDevices = this.paginatedDeviceList.filter(device => device.selected);
       if (this.selectedDevices.length === 0) {
         this.$message.warning({
           message: '请至少选择一条记录',
@@ -617,13 +623,7 @@ export default {
   display: none !important;
 }
 
-:deep(.custom-selection-header::after) {
-  content: "选择";
-  display: inline-block;
-  color: black;
-  font-weight: bold;
-  padding-bottom: 18px;
-}
+
 
 :deep(.el-table .el-button--text) {
   color: #7079aa;
@@ -660,4 +660,18 @@ export default {
     padding-bottom: 16px;
   }
 }
+
+:deep(.el-checkbox__inner) {
+  background-color: #eeeeee !important;
+  border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__inner:hover) {
+  border-color: #cccccc !important;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #5f70f3 !important;
+  border-color: #5f70f3 !important;
+}
 </style>