处理媒体表格复选框选中状态问题

src/views/mediaLibrary/index.vue

@@ -116,16 +116,20 @@
                 <el-row :gutter="10" class="my_row"><el-col :span="8">
                         <el-form :model="queryParams" :inline="true" class="searchInputForm">
                             <el-form-item label="">
-                                <el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery" placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search"
+                                <el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
-                                    style="width: 400px;" />
+                                    placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search" style="width: 400px;" />
                             </el-form-item>
                         </el-form>
                     </el-col>
                     <el-col :span="16" style="text-align: right;">
-                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:query']" @click="handleQuery">查询</el-button>
+                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:query']"
-                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:reset']" @click="resetQuery">重置</el-button>
+                            @click="handleQuery">查询</el-button>
-                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:add']" @click="handleOpenAddForm">新增</el-button>
+                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:reset']"
-                        <el-dropdown placement="bottom-start" style="margin-left: 12px;" v-hasPermi="['mediaLibrary:importQuotation']">
+                            @click="resetQuery">重置</el-button>
+                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:add']"
+                            @click="handleOpenAddForm">新增</el-button>
+                        <el-dropdown placement="bottom-start" style="margin-left: 12px;"
+                            v-hasPermi="['mediaLibrary:importQuotation']">
                             <el-button type="primary" class="primaryBtn">导入报价</el-button>
                             <template #dropdown>
                                 <el-dropdown-menu>
@@ -148,7 +152,8 @@
                                 </el-dropdown-menu>
                             </template>
                         </el-dropdown>
-                        <el-dropdown placement="bottom-start" style="margin: 0 12px;" v-hasPermi="['mediaLibrary:exportPPT']">
+                        <el-dropdown placement="bottom-start" style="margin: 0 12px;"
+                            v-hasPermi="['mediaLibrary:exportPPT']">
                             <el-button type="primary" class="primaryBtn">
                                 导出PPT
                             </el-button>
@@ -163,12 +168,14 @@
                                 </el-dropdown-menu>
                             </template>
                         </el-dropdown>
-                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:exportExcel']" @click="handleExportExcel">导出excel</el-button>
+                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:exportExcel']"
-                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:mediaMap']" @click="handleGoMediaMap">媒体可视化地图</el-button>
+                            @click="handleExportExcel">导出excel</el-button>
+                        <el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:mediaMap']"
+                            @click="handleGoMediaMap">媒体可视化地图</el-button>
                     </el-col>
                 </el-row>
 
-                <el-table v-loading="loading" :data="mediaList" @selection-change="handleSelectionChange"
+                <el-table ref="tableRef" v-loading="loading" :data="mediaList" @selection-change="handleSelectionChange"
                     :height="unfoldFlag ? 'calc(100vh - 372px)' : 'calc(100vh - 338px)'">
                     <el-table-column type="selection" width="55" align="center" />
                     <el-table-column label="媒体名称" align="left" prop="mediaName" width="320">
@@ -179,7 +186,7 @@
                                 <template #reference>
                                     <span class="mediaNameLabel" @click="handleOpenDetail(scope.row)">{{
                                         scope.row.mediaName
-                                    }}</span>
+                                        }}</span>
                                 </template>
                             </el-popover>
 
@@ -239,8 +246,8 @@
                                     v-hasPermi="['mediaLibrary:historicalData']">历史数据</div>
                                 <div class="popBtns" @click="handleAbolish(scope.row)"
                                     v-hasPermi="['mediaLibrary:abolish']">废除</div>
-                                <div class="popBtns" @click="handleLogs(scope.row)"
+                                <div class="popBtns" @click="handleLogs(scope.row)" v-hasPermi="['mediaLibrary:log']">日志
-                                    v-hasPermi="['mediaLibrary:log']">日志</div>
+                                </div>
                                 <div class="popBtns" @click="handleDownFiles(scope.row)"
                                     v-hasPermi="['mediaLibrary:download']">下载</div>
                                 <template #reference>
@@ -271,7 +278,7 @@
     </div>
 </template>
 <script setup name="Post">
-import { onMounted, ref } from 'vue';
+import { onMounted, nextTick, ref } from 'vue';
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
@@ -377,6 +384,10 @@ const viewFileRef = ref(null)
 const exportDialogRef = ref(null)
 const exportPPTDialogRef = ref(null)
 const downRecordsRef = ref(null)
+// 添加表格引用
+const tableRef = ref(null)
+// 添加一个标志位来区分是用户操作还是程序设置
+const isSettingSelection = ref(false)
 
 // 获取PPT模板
 const getpptTemplatePageList = () => {
@@ -491,6 +502,11 @@ const getMediaPageList = () => {
         mediaList.value = res.data.rows
         total.value = res.data.total
         loading.value = false
+
+        // 数据加载完成后，设置选中状态
+        nextTick(() => {
+            setTableSelection()
+        })
     })
 }
 /** 搜索按钮操作 */
@@ -520,12 +536,89 @@ const resetQuery = () => {
 }
 // 选择媒体事件
 const handleSelectionChange = (selection) => {
-    multipleChoseArr.value = selection
+    // 如果是程序设置的选中状态，不更新 multipleChoseArr
+    if (isSettingSelection.value) {
+        return
+    }
+ 
+    // 获取当前页所有行的ID
+    const currentPageIds = mediaList.value.map(item => item.id)
+
+    // 如果当前页没有选中的数据，说明是页面切换导致的清空，不处理
+    if (selection.length === 0 && currentPageIds.length > 0) {
+        // 检查当前页是否有应该选中的数据
+        const shouldHaveSelections = currentPageIds.some(id =>
+            multipleChoseArr.value.some(item => item.id === id)
+        )
+
+        // 如果当前页有应该选中的数据但selection为空，说明是页面切换，不处理
+        if (shouldHaveSelections) { 
+            return
+        }
+    }
+
+    // 移除当前页中已取消选中的项目
+    const currentSelectedIds = selection.map(item => item.id)
+    multipleChoseArr.value = multipleChoseArr.value.filter(item =>
+        !currentPageIds.includes(item.id) || currentSelectedIds.includes(item.id)
+    )
+
+    // 添加新选中的项目（去重）
+    selection.forEach(newItem => {
+        if (!multipleChoseArr.value.some(item => item.id === newItem.id)) {
+            multipleChoseArr.value.push(newItem)
+        }
+    }) 
+}
+// 设置表格选中状态 - 完善版本
+const setTableSelection = () => {
+    if (tableRef.value && mediaList.value.length > 0) {
+        // 设置标志位，避免触发 handleSelectionChange
+        isSettingSelection.value = true
+
+        // 使用 nextTick 确保DOM已更新
+        nextTick(() => {
+            // 先清除所有选中状态
+            tableRef.value.clearSelection()
+
+            // 延迟设置选中状态，确保清除操作完成
+            setTimeout(() => {
+                mediaList.value.forEach(row => {
+                    const isSelected = multipleChoseArr.value.some(item => item.id === row.id)
+                    if (isSelected) {
+                        tableRef.value.toggleRowSelection(row, true)
+                    }
+                })
+
+                // 恢复标志位
+                setTimeout(() => {
+                    isSettingSelection.value = false
+                }, 100)
+            }, 50)
+        })
+    }
 }
 // 移除选择项
 const handleCloseTag = (tag) => {
     const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
     multipleChoseArr.value.splice(rowIndex, 1)
+
+    // 清除对应行的复选框选中状态
+    if (tableRef.value) {
+        // 设置标志位，避免触发 handleSelectionChange
+        isSettingSelection.value = true
+
+        // 找到对应的行数据
+        const row = mediaList.value.find(item => item.id === tag.id)
+        if (row) {
+            tableRef.value.toggleRowSelection(row, false)
+        }
+
+        // 恢复标志位
+        setTimeout(() => {
+            isSettingSelection.value = false
+        }, 100)
+    }
 }
 // 新增
 const handleOpenAddForm = () => {

src/views/outdoorMedia/index.vue

@@ -107,7 +107,8 @@
             </el-row>
             <el-row :gutter="10" class="my_row" style="margin-bottom: 0;">
                 <el-col :span="12">
-                    <el-table v-loading="loading" :data="outdoorMediaList" @selection-change="handleSelectionChange"
+                    <el-table ref="tableRef" v-loading="loading" :data="outdoorMediaList"
+                        @selection-change="handleSelectionChange"
                         :height="unfoldFlag ? 'calc(100vh - 372px)' : 'calc(100vh - 338px)'">
                         <el-table-column type="selection" width="55" align="center" />
                         <el-table-column label="实景图片" align="left" prop="mediaFileList" width="170">
@@ -152,7 +153,7 @@
     </div>
 </template>
 <script setup name="Post">
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, nextTick, ref } from 'vue';
 import { Search } from '@element-plus/icons-vue'
 import { sysRegionListByPid } from "@/api/system/administrativeRegion"
 import { sysMediaTypeListByPid } from "@/api/system/mediaType"
@@ -233,6 +234,10 @@ let minLng = Infinity; // 经度的最小值（最西边）
 let minLat = Infinity; // 纬度的最小值（最南边）
 let maxLng = -Infinity; // 经度的最大值（最东边）
 let maxLat = -Infinity; // 纬度的最大值（最北边）
+// 添加表格引用
+const tableRef = ref(null)
+// 添加一个标志位来区分是用户操作还是程序设置
+const isSettingSelection = ref(false)
 
 // 导出提交信息
 const exportForm = ref({
@@ -477,8 +482,13 @@ const getOutMediaPageList = () => {
         outdoorMediaList.value = res.data.rows
         total.value = res.data.total
         loading.value = false
-        // 在地图完全加载后执行点数据处理
+
-        renderMassMarks();
+        // 数据加载完成后，设置选中状态
+        nextTick(() => {
+            setTableSelection()
+            // 在地图完全加载后执行点数据处理
+            renderMassMarks();
+        })
     })
 }
 /** 搜索按钮操作 */
@@ -509,16 +519,102 @@ const resetQuery = () => {
 }
 // 选择媒体事件
 const handleSelectionChange = (selection) => {
-    multipleChoseArr.value = selection
+    // 如果是程序设置的选中状态，不更新 multipleChoseArr
+    if (isSettingSelection.value) {
+        return
+    } 
+
+    // 获取当前页所有行的ID
+    const currentPageIds = outdoorMediaList.value.map(item => item.id)
+
+    // 如果当前页没有选中的数据，说明是页面切换导致的清空，不处理
+    if (selection.length === 0 && currentPageIds.length > 0) {
+        // 检查当前页是否有应该选中的数据
+        const shouldHaveSelections = currentPageIds.some(id =>
+            multipleChoseArr.value.some(item => item.id === id)
+        )
+
+        // 如果当前页有应该选中的数据但selection为空，说明是页面切换，不处理
+        if (shouldHaveSelections) { 
+            return
+        }
+    }
+
+    // 移除当前页中已取消选中的项目
+    const currentSelectedIds = selection.map(item => item.id)
+    multipleChoseArr.value = multipleChoseArr.value.filter(item =>
+        !currentPageIds.includes(item.id) || currentSelectedIds.includes(item.id)
+    )
+
+    // 添加新选中的项目（去重）
+    selection.forEach(newItem => {
+        if (!multipleChoseArr.value.some(item => item.id === newItem.id)) {
+            multipleChoseArr.value.push(newItem)
+        }
+    }) 
+}
+// 设置表格选中状态 - 完善版本
+const setTableSelection = () => {
+    if (tableRef.value && outdoorMediaList.value.length > 0) {
+        // 设置标志位，避免触发 handleSelectionChange
+        isSettingSelection.value = true
+
+        // 使用 nextTick 确保DOM已更新
+        nextTick(() => {
+            // 先清除所有选中状态
+            tableRef.value.clearSelection()
+
+            // 延迟设置选中状态，确保清除操作完成
+            setTimeout(() => {
+                outdoorMediaList.value.forEach(row => {
+                    const isSelected = multipleChoseArr.value.some(item => item.id === row.id)
+                    if (isSelected) {
+                        tableRef.value.toggleRowSelection(row, true)
+                    }
+                })
+
+                // 恢复标志位
+                setTimeout(() => {
+                    isSettingSelection.value = false
+                }, 100)
+            }, 50)
+        })
+    }
 }
 // 移除选择项
 const handleCloseTag = (tag) => {
     const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
     multipleChoseArr.value.splice(rowIndex, 1)
+
+    // 清除对应行的复选框选中状态
+    if (tableRef.value) {
+        // 设置标志位，避免触发 handleSelectionChange
+        isSettingSelection.value = true
+
+        // 找到对应的行数据
+        const row = outdoorMediaList.value.find(item => item.id === tag.id)
+        if (row) {
+            tableRef.value.toggleRowSelection(row, false)
+        }
+
+        // 恢复标志位
+        setTimeout(() => {
+            isSettingSelection.value = false
+        }, 100)
+    }
 }
 // 清空已选媒体
 const handleClearChoseMedia = () => {
     multipleChoseArr.value = []
+    if (tableRef.value) {
+        // 设置标志位，避免触发 handleSelectionChange
+        isSettingSelection.value = true
+        tableRef.value.clearSelection()
+        // 恢复标志位
+        setTimeout(() => {
+            isSettingSelection.value = false
+        }, 100)
+    }
 }
 // 查看媒体详情
 const handleViewMedia = (_mediaId) => {