|
@@ -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>
|