处理媒体表格复选框选中状态问题
This commit is contained in:
wangchengming
parent
c99bbe1982
commit
1c2a3e84c7
|
|
@ -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"
|
||||
style="width: 400px;" />
|
||||
<el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
|
||||
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:reset']" @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" v-hasPermi="['mediaLibrary:query']"
|
||||
@click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:reset']"
|
||||
@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:mediaMap']" @click="handleGoMediaMap">媒体可视化地图</el-button>
|
||||
<el-button type="primary" class="primaryBtn" v-hasPermi="['mediaLibrary:exportExcel']"
|
||||
@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)"
|
||||
v-hasPermi="['mediaLibrary:log']">日志</div>
|
||||
<div class="popBtns" @click="handleLogs(scope.row)" v-hasPermi="['mediaLibrary:log']">日志
|
||||
</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 = () => {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user