修改媒体类型和区域新建子集不刷新问题
This commit is contained in:
wangchengming
parent
6e9c66c82d
commit
08cc123cb4
|
|
@ -161,8 +161,7 @@ const loadChildren = async (row, treeNode, resolve) => {
|
|||
}
|
||||
|
||||
resolve(response.data);
|
||||
} catch (error) {
|
||||
console.error('加载子节点失败:', error);
|
||||
} catch (error) {
|
||||
resolve([]);
|
||||
}
|
||||
}
|
||||
|
|
@ -242,7 +241,41 @@ const submitForm = () => {
|
|||
}
|
||||
} else {
|
||||
// 新增操作
|
||||
getsysRegionTreeList(form.value.parentId || 0);
|
||||
const parentId = form.value.parentId || 0;
|
||||
|
||||
if (parentId === '0' || parentId === 0) {
|
||||
// 新增根节点 - 重新加载整个树
|
||||
getsysRegionTreeList();
|
||||
} else {
|
||||
// 新增子节点 - 重新加载父节点的子节点数据
|
||||
const parentRow = findRowById(parentId);
|
||||
|
||||
if (parentRow) {
|
||||
// 重新加载该父节点的子节点
|
||||
queryParams.value.parentId = parentId;
|
||||
sysRegionListByPid(queryParams.value).then(res => {
|
||||
// 使用 splice 确保响应式更新
|
||||
if (!parentRow.childList) {
|
||||
parentRow.childList = [];
|
||||
}
|
||||
parentRow.childList.splice(0, parentRow.childList.length, ...res.data);
|
||||
parentRow.hasChildren = res.data && res.data.length > 0;
|
||||
|
||||
// 强制表格重新渲染
|
||||
nextTick(() => {
|
||||
// 先收起再展开，强制刷新子节点
|
||||
tableRef.value?.toggleRowExpansion(parentRow, false);
|
||||
setTimeout(() => {
|
||||
tableRef.value?.toggleRowExpansion(parentRow, true);
|
||||
tableRef.value?.doLayout();
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 如果找不到父节点，重新加载整个树
|
||||
getsysRegionTreeList();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 恢复展开状态
|
||||
|
|
|
|||
|
|
@ -115,14 +115,14 @@ const findParentId = (id, rows = mediaTypeTreeList.value, parentId = 0) => {
|
|||
|
||||
// 辅助方法 - 查找父节点对象
|
||||
const findParentNode = (id, rows = mediaTypeTreeList.value, parent = null) => {
|
||||
for (const row of rows) {
|
||||
if (row.id === id) return parent;
|
||||
if (row.childList) {
|
||||
const found = findParentNode(id, row.childList, row);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
for (const row of rows) {
|
||||
if (row.id === id) return parent;
|
||||
if (row.childList) {
|
||||
const found = findParentNode(id, row.childList, row);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// handleExpandChange
|
||||
|
|
@ -160,8 +160,7 @@ const loadChildren = async (row, treeNode, resolve) => {
|
|||
}
|
||||
|
||||
resolve(response.data);
|
||||
} catch (error) {
|
||||
console.error('加载子节点失败:', error);
|
||||
} catch (error) {
|
||||
resolve([]);
|
||||
}
|
||||
};
|
||||
|
|
@ -240,7 +239,44 @@ const submitForm = () => {
|
|||
}
|
||||
} else {
|
||||
// 新增操作
|
||||
getsysMediaTypeTreeList(form.value.parentId || 0);
|
||||
const parentId = form.value.parentId || 0;
|
||||
|
||||
if (parentId === '0' || parentId === 0) {
|
||||
// 新增根节点 - 重新加载整个树
|
||||
getsysMediaTypeTreeList();
|
||||
} else {
|
||||
// 新增子节点 - 使用强制刷新方式
|
||||
const parentRow = findRowById(parentId);
|
||||
|
||||
if (parentRow) {
|
||||
// 方法1: 使用数组的响应式方法
|
||||
if (!parentRow.childList) {
|
||||
// 如果之前没有子节点，需要创建响应式数组
|
||||
parentRow.childList = [];
|
||||
}
|
||||
|
||||
// 重新加载数据
|
||||
queryParams.value.parentId = parentId;
|
||||
sysMediaTypeListByPid(queryParams.value).then(res => {
|
||||
// 使用 splice 清空并重新添加，确保响应式更新
|
||||
parentRow.childList.splice(0, parentRow.childList.length, ...res.data);
|
||||
parentRow.hasChildren = res.data && res.data.length > 0;
|
||||
|
||||
// 强制刷新
|
||||
nextTick(() => {
|
||||
// 先收起再展开，强制刷新子节点
|
||||
tableRef.value?.toggleRowExpansion(parentRow, false);
|
||||
setTimeout(() => {
|
||||
tableRef.value?.toggleRowExpansion(parentRow, true);
|
||||
tableRef.value?.doLayout();
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 如果找不到父节点，重新加载整个树
|
||||
getsysMediaTypeTreeList();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 恢复展开状态
|
||||
|
|
@ -260,56 +296,56 @@ const submitForm = () => {
|
|||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await proxy.$modal.confirm(`是否确认删除媒体类型名称为"${row.name}"的数据项?`);
|
||||
|
||||
// 1. 保存当前展开状态
|
||||
const saveExpanded = new Set(expandedKeys.value);
|
||||
// 2. 查找父节点
|
||||
const parentNode = findParentNode(row.id);
|
||||
|
||||
// 3. 执行删除API
|
||||
await deleteSysMediaType(row.id);
|
||||
|
||||
// 4. 从展开状态中移除被删除的节点
|
||||
saveExpanded.delete(row.id);
|
||||
expandedKeys.value = new Set(saveExpanded);
|
||||
|
||||
// 5. 更新数据
|
||||
if (!parentNode) {
|
||||
// 删除的是根节点 - 重新加载整个树
|
||||
mediaTypeTreeList.value = [];
|
||||
await getsysMediaTypeTreeList();
|
||||
} else {
|
||||
// 删除的是子节点 - 更新父节点的childList
|
||||
const index = parentNode.childList.findIndex(item => item.id === row.id);
|
||||
if (index !== -1) {
|
||||
parentNode.childList.splice(index, 1); // 响应式删除
|
||||
|
||||
// 强制表格更新
|
||||
nextTick(() => {
|
||||
tableRef.value?.doLayout();
|
||||
});
|
||||
try {
|
||||
await proxy.$modal.confirm(`是否确认删除媒体类型名称为"${row.name}"的数据项?`);
|
||||
|
||||
// 1. 保存当前展开状态
|
||||
const saveExpanded = new Set(expandedKeys.value);
|
||||
// 2. 查找父节点
|
||||
const parentNode = findParentNode(row.id);
|
||||
|
||||
// 3. 执行删除API
|
||||
await deleteSysMediaType(row.id);
|
||||
|
||||
// 4. 从展开状态中移除被删除的节点
|
||||
saveExpanded.delete(row.id);
|
||||
expandedKeys.value = new Set(saveExpanded);
|
||||
|
||||
// 5. 更新数据
|
||||
if (!parentNode) {
|
||||
// 删除的是根节点 - 重新加载整个树
|
||||
mediaTypeTreeList.value = [];
|
||||
await getsysMediaTypeTreeList();
|
||||
} else {
|
||||
// 删除的是子节点 - 更新父节点的childList
|
||||
const index = parentNode.childList.findIndex(item => item.id === row.id);
|
||||
if (index !== -1) {
|
||||
parentNode.childList.splice(index, 1); // 响应式删除
|
||||
|
||||
// 强制表格更新
|
||||
nextTick(() => {
|
||||
tableRef.value?.doLayout();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
|
||||
// 6. 恢复展开状态
|
||||
nextTick(() => {
|
||||
saveExpanded.forEach(id => {
|
||||
const row = findRowById(id);
|
||||
if (row) {
|
||||
tableRef.value?.toggleRowExpansion(row, true);
|
||||
}
|
||||
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
|
||||
// 6. 恢复展开状态
|
||||
nextTick(() => {
|
||||
saveExpanded.forEach(id => {
|
||||
const row = findRowById(id);
|
||||
if (row) {
|
||||
tableRef.value?.toggleRowExpansion(row, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
proxy.$modal.msgError("删除失败");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
proxy.$modal.msgError("删除失败");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user