yangg il y a 1 jour
Parent
commit
8d96316f12
1 fichiers modifiés avec 59 ajouts et 3 suppressions
  1. 59 3
      src/views/system/screenconsole/component/BorrowRankingList.vue

+ 59 - 3
src/views/system/screenconsole/component/BorrowRankingList.vue

@@ -21,12 +21,19 @@
         <el-col :span="10">
           <el-select 
             multiple 
-             
             v-model="deviceTagIds" 
             placeholder="标签名" 
             style="width: 270px;"
-            @change="fetchRanking"
+            @change="handleTagChange"
             class="select-tags">
+            <el-option :value="'selectAll'" @click.native.stop="handleSelectAll">
+              <el-checkbox 
+                :model-value="isSelectAll" 
+                @change="handleSelectAll"
+                @click.native.stop>
+                全选
+              </el-checkbox>
+            </el-option>
             <el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" >
             </el-option>
           </el-select>
@@ -78,9 +85,33 @@ const rankingData = ref<RankingItem[]>([])
 // const deviceTagId = ref('')
 const deviceTagIds = ref<number[]>([])
 
+// 全选相关状态
+const isSelectAll = ref(false)
+
 // 本地存储相关配置
 const STORAGE_KEY = 'borrow_ranking_filters'
 
+// 全选/反选处理函数
+const handleSelectAll = () => {
+  if (isSelectAll.value) {
+    // 如果当前是全选状态,则清空选择
+    deviceTagIds.value = []
+    isSelectAll.value = false
+  } else {
+    // 如果当前不是全选状态,则选择所有标签
+    deviceTagIds.value = labelType.value.map(item => item.id)
+    isSelectAll.value = true
+  }
+  fetchRanking()
+}
+
+// 监听标签选择变化,更新全选状态
+const handleTagChange = () => {
+  const allTagIds = labelType.value.map(item => item.id)
+  isSelectAll.value = deviceTagIds.value.length === allTagIds.length && 
+                     allTagIds.every(id => deviceTagIds.value.includes(id))
+  fetchRanking()
+}
 
 const fetchRanking = async () => {
   const params: Record<string, any> = {
@@ -122,10 +153,16 @@ const getList = async () => {
   })
   if (res.code === 2000) {
     labelType.value = res.data
-    // 若未从本地恢复过选择,初始化为“全选”并刷新数据
+    // 若未从本地恢复过选择,初始化为"全选"并刷新数据
     if (!deviceTagIds.value.length && Array.isArray(labelType.value) && labelType.value.length) {
       deviceTagIds.value = labelType.value.map(item => item.id)
+      isSelectAll.value = true
       fetchRanking()
+    } else {
+      // 更新全选状态
+      const allTagIds = labelType.value.map(item => item.id)
+      isSelectAll.value = deviceTagIds.value.length === allTagIds.length && 
+                         allTagIds.every(id => deviceTagIds.value.includes(id))
     }
   }
 }
@@ -140,6 +177,7 @@ const saveFiltersToStorage = () => {
       borrowType: borrowType.value,
       dateRange: dateRange.value,
       deviceTagIds: deviceTagIds.value,
+      isSelectAll: isSelectAll.value,
       timestamp: Date.now(), // 添加时间戳用于数据有效期控制
       version: '1.0' // 版本号用于后续数据结构升级
     }
@@ -184,6 +222,9 @@ const loadFiltersFromStorage = () => {
     if (storedData.deviceTagIds && Array.isArray(storedData.deviceTagIds)) {
       deviceTagIds.value = storedData.deviceTagIds
     }
+    if (typeof storedData.isSelectAll === 'boolean') {
+      isSelectAll.value = storedData.isSelectAll
+    }
     
     console.log('筛选条件已从本地存储恢复')
   } catch (error) {
@@ -216,6 +257,7 @@ const resetFilters = () => {
   borrowType.value = 'all'
   dateRange.value = null
   deviceTagIds.value = []
+  isSelectAll.value = false
   
   // 清除本地存储
   clearStoredFilters()
@@ -329,4 +371,18 @@ onMounted(() => {
 :deep(.select-tags .el-select__selection)::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+/* 全选选项样式优化 */
+:deep(.el-select-dropdown__item) {
+  padding: 8px 20px;
+}
+
+:deep(.el-select-dropdown__item .el-checkbox) {
+  margin-right: 8px;
+}
+
+:deep(.el-select-dropdown__item .el-checkbox__label) {
+  font-size: 14px;
+  color: #606266;
+}
 </style>