树形结构问题更改
This commit is contained in:
commit
3418e34766
@ -219,7 +219,7 @@ const isFishDataLoaded = ref(false)
|
|||||||
async function openFishway(row: any) {
|
async function openFishway(row: any) {
|
||||||
fishway.value = true
|
fishway.value = true
|
||||||
userId.value = row.id
|
userId.value = row.id
|
||||||
|
treeInput.value = ''
|
||||||
// 重置状态
|
// 重置状态
|
||||||
fishhui.value = []
|
fishhui.value = []
|
||||||
tableDatafish.value = []
|
tableDatafish.value = []
|
||||||
@ -329,6 +329,13 @@ const fishProps = {
|
|||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name',
|
label: 'name',
|
||||||
}
|
}
|
||||||
|
watch(treeInput, (val) => {
|
||||||
|
fishTreeRef.value!.filter(val)
|
||||||
|
})
|
||||||
|
function filterNode(value: string, data: any) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.includes(value)
|
||||||
|
}
|
||||||
const fishData: any = ref([])
|
const fishData: any = ref([])
|
||||||
//获取左侧树的数据
|
//获取左侧树的数据
|
||||||
// const huixiandata = ref([])
|
// const huixiandata = ref([])
|
||||||
@ -338,7 +345,7 @@ function getFishTree() {
|
|||||||
fishTreeDialog.value = true
|
fishTreeDialog.value = true
|
||||||
const params = {
|
const params = {
|
||||||
// type:'1',
|
// type:'1',
|
||||||
engName: treeInput.value
|
// engName: treeInput.value
|
||||||
}
|
}
|
||||||
return getFishtree(params).then((res: any) => {
|
return getFishtree(params).then((res: any) => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
@ -1078,7 +1085,7 @@ function handleClearSelection() {
|
|||||||
<el-input v-model="treeInput" style="width: 100%" placeholder="请输入电站名称" clearable
|
<el-input v-model="treeInput" style="width: 100%" placeholder="请输入电站名称" clearable
|
||||||
class="input-with-select">
|
class="input-with-select">
|
||||||
<template #append>
|
<template #append>
|
||||||
<el-button :icon="Search" @click="getFishTree()" />
|
<el-button :icon="Search" />
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<div class="button_div">
|
<div class="button_div">
|
||||||
@ -1089,9 +1096,9 @@ function handleClearSelection() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-scrollbar height="450px" style="margin-top: 10px;">
|
<el-scrollbar height="450px" style="margin-top: 10px;">
|
||||||
<el-tree ref="fishTreeRef" style="max-width: 300px" :data="fishData" show-checkbox
|
<el-tree ref="fishTreeRef" style="max-width: 300px" :data="fishData" show-checkbox :filter-node-method="filterNode"
|
||||||
v-loading="fishTreeDialog" node-key="code" highlight-current
|
v-loading="fishTreeDialog" node-key="code" highlight-current :props="fishProps"
|
||||||
:props="fishProps" @check="handleFishCheckChange" />
|
@check="handleFishCheckChange" />
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
<div class="fishTable">
|
<div class="fishTable">
|
||||||
|
|||||||
@ -296,6 +296,7 @@ const fishTreeDialog = ref(false)
|
|||||||
const isFishDataLoaded = ref(false)
|
const isFishDataLoaded = ref(false)
|
||||||
|
|
||||||
async function openFishway(row: any) {
|
async function openFishway(row: any) {
|
||||||
|
treeInput.value = ''
|
||||||
fishway.value = true
|
fishway.value = true
|
||||||
userId.value = row.id
|
userId.value = row.id
|
||||||
|
|
||||||
@ -356,6 +357,12 @@ watch([fishway, isFishDataLoaded], ([newFishway, newDataLoaded]) => {
|
|||||||
// 再设置新的选中状态
|
// 再设置新的选中状态
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
fishTreeRef.value.setCheckedKeys(fishhui.value, false);
|
fishTreeRef.value.setCheckedKeys(fishhui.value, false);
|
||||||
|
// 查找需要展开的父节点
|
||||||
|
const parentCodesToExpand = findParentCodesForCheckedNodes(fishhui.value, fishData.value);
|
||||||
|
console.log('需要展开的父节点codes:', parentCodesToExpand);
|
||||||
|
|
||||||
|
// 控制展开/折叠状态
|
||||||
|
setTreeExpandState(parentCodesToExpand);
|
||||||
|
|
||||||
// 验证回显结果
|
// 验证回显结果
|
||||||
const checkedKeys = fishTreeRef.value.getCheckedKeys();
|
const checkedKeys = fishTreeRef.value.getCheckedKeys();
|
||||||
@ -427,6 +434,13 @@ const fishProps = {
|
|||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name',
|
label: 'name',
|
||||||
}
|
}
|
||||||
|
watch(treeInput, (val) => {
|
||||||
|
fishTreeRef.value!.filter(val)
|
||||||
|
})
|
||||||
|
function filterNode(value: string, data: any) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.includes(value)
|
||||||
|
}
|
||||||
const fishData: any = ref([])
|
const fishData: any = ref([])
|
||||||
//获取左侧树的数据
|
//获取左侧树的数据
|
||||||
// const huixiandata = ref([])
|
// const huixiandata = ref([])
|
||||||
@ -527,7 +541,43 @@ function filterSelectedIds(checkedKeysArray: number[], allCheckedNodes: any[]):
|
|||||||
console.log('过滤后的IDs:', resultIds);
|
console.log('过滤后的IDs:', resultIds);
|
||||||
return resultIds;
|
return resultIds;
|
||||||
}
|
}
|
||||||
|
// 查找选中节点的所有父节点code(用于控制展开状态)
|
||||||
|
function findParentCodesForCheckedNodes(checkedKeys: number[], treeData: any[]): Set<number> {
|
||||||
|
const parentCodesToExpand = new Set<number>();
|
||||||
|
|
||||||
|
function traverse(nodes: any[], parentCode: number | null = null) {
|
||||||
|
for (const node of nodes) {
|
||||||
|
// 如果当前节点是选中节点,记录其父节点
|
||||||
|
if (checkedKeys.includes(node.code) && parentCode !== null) {
|
||||||
|
parentCodesToExpand.add(parentCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 递归处理子节点
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
traverse(node.children, node.code);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
traverse(treeData);
|
||||||
|
return parentCodesToExpand;
|
||||||
|
}
|
||||||
|
// 控制树节点展开/折叠状态
|
||||||
|
function setTreeExpandState(parentCodesToExpand: Set<number>) {
|
||||||
|
if (!fishTreeRef.value || !fishTreeRef.value.store) return;
|
||||||
|
|
||||||
|
// 遍历树的所有节点
|
||||||
|
Object.values(fishTreeRef.value.store.nodesMap).forEach((node: any) => {
|
||||||
|
// 只对父节点(有子节点的)进行展开/折叠控制
|
||||||
|
if (node.data.children && node.data.children.length > 0) {
|
||||||
|
if (parentCodesToExpand.has(node.data.code)) {
|
||||||
|
node.expanded = true; // 展开包含选中子节点的父节点
|
||||||
|
} else {
|
||||||
|
node.expanded = false; // 收起没有选中子节点的父节点
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
// 过鱼设施权限维护 - 处理复选框选中事件
|
// 过鱼设施权限维护 - 处理复选框选中事件
|
||||||
function handleFishCheckChange(checkedNode: any, checkedInfo: any) {
|
function handleFishCheckChange(checkedNode: any, checkedInfo: any) {
|
||||||
const treeInstance = fishTreeRef.value;
|
const treeInstance = fishTreeRef.value;
|
||||||
@ -1048,9 +1098,9 @@ function handleClearSelection() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-scrollbar height="450px" style="margin-top: 10px;">
|
<el-scrollbar height="450px" style="margin-top: 10px;">
|
||||||
<el-tree ref="fishTreeRef" style="max-width: 300px" :data="fishData" show-checkbox default-expand-all
|
<el-tree ref="fishTreeRef" style="max-width: 300px" :data="fishData" show-checkbox
|
||||||
v-loading="fishTreeDialog" node-key="code" highlight-current :props="fishProps"
|
:filter-node-method="filterNode" v-loading="fishTreeDialog" node-key="code" highlight-current
|
||||||
@check="handleFishCheckChange" />
|
:props="fishProps" @check="handleFishCheckChange" />
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
<div class="fishTable">
|
<div class="fishTable">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user