|
|
|
@ -17,7 +17,7 @@ |
|
|
|
</div> |
|
|
|
<div class="leftScroll"> |
|
|
|
<ElScrollbar height="100%"> |
|
|
|
<ElTree ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps" |
|
|
|
<ElTree ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList1" :props="treeProps" |
|
|
|
show-checkbox highlight-current :default-expand-all="isExpandAll" |
|
|
|
:filter-node-method="filterNode" @check="handleCheckList" @check-change="getCheckedList" /> |
|
|
|
</ElScrollbar> |
|
|
|
@ -53,6 +53,7 @@ |
|
|
|
import { ref, watch, onMounted } from 'vue' |
|
|
|
|
|
|
|
import request from '@/utils/request'; |
|
|
|
import { forEach } from 'jszip'; |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
// eslint-disable-next-line vue/require-default-prop |
|
|
|
@ -97,19 +98,22 @@ const treeProps = { |
|
|
|
} |
|
|
|
let dataFinished = ref(false) |
|
|
|
const treeRef = ref() |
|
|
|
const isExpandAll = ref(false) // 是否全展开 |
|
|
|
const isExpandAll = ref(transferConfig.value.transferDataSource != "数据源") // 是否全展开 |
|
|
|
const keyword = ref('') // 搜索关键字 |
|
|
|
const checkList = ref([]) // 选中的list |
|
|
|
const userList = computed({ |
|
|
|
|
|
|
|
get(){ |
|
|
|
if (transferConfig.value.transferDataSource === "数据源") { |
|
|
|
|
|
|
|
return [{ |
|
|
|
id: '全选', |
|
|
|
label: '全选', |
|
|
|
children: [...resData.value] |
|
|
|
}] |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
return [{ |
|
|
|
id: '全选', |
|
|
|
label: '全选', |
|
|
|
@ -122,6 +126,9 @@ const userList = computed({ |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
let userList1 = ref([]); |
|
|
|
// |
|
|
|
let checkedIdList = ref([]); |
|
|
|
let count = 0 |
|
|
|
function waitAndReGet() { |
|
|
|
@ -210,7 +217,11 @@ if (transferConfig.value.transferDataSource === "数据源") { |
|
|
|
label: '全选', |
|
|
|
children: [...resData.value] |
|
|
|
}] |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
userList1.value = userList.value |
|
|
|
if( treeRef.value){ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
} |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
checkedIdList.value.forEach(element => { |
|
|
|
const _node = treeRef?.value?.getNode(element) |
|
|
|
@ -324,13 +335,34 @@ const handleCheckList = (val) => { |
|
|
|
|
|
|
|
if (!_node) return |
|
|
|
const _checkList = checkList.value |
|
|
|
//console.log(checkedIdList.value) |
|
|
|
if (_node.checked||_node.childNodes.length > 0) { |
|
|
|
//console.log(1) |
|
|
|
if (_node.checked && _node.childNodes.length === 0) { |
|
|
|
_checkList.push(_node) |
|
|
|
|
|
|
|
let count = 0 |
|
|
|
checkedIdList.value.forEach(element1 => { |
|
|
|
if(element1==valId){ |
|
|
|
|
|
|
|
count++ |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
if(count==1){ |
|
|
|
_checkList.push(_node) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
// 通过new Set() 实现数据去重 |
|
|
|
checkList.value = Array.from(new Set(_checkList)) |
|
|
|
//console.log(_checkList) |
|
|
|
|
|
|
|
/* checkList.value.forEach(element => { |
|
|
|
console.log(element.data.id) |
|
|
|
}); */ |
|
|
|
|
|
|
|
//使用 Map 对象实现真正的按 id 去重 |
|
|
|
checkList.value = Array.from(new Map( |
|
|
|
_checkList.map(item => [item.data.id, item]) |
|
|
|
).values()); |
|
|
|
|
|
|
|
// 遍历子级,递归,直到获取最后一级的人员 |
|
|
|
if (_node.childNodes.length > 0) { |
|
|
|
_node.childNodes.map(item => handleCheckList(item.data)) |
|
|
|
@ -410,14 +442,76 @@ const expandAll = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
let watchCount = 0 |
|
|
|
|
|
|
|
|
|
|
|
// 执行tree数据过滤 |
|
|
|
watch(keyword, (newVal) => { |
|
|
|
console.log(keyword) |
|
|
|
console.log(newVal) |
|
|
|
treeRef.value.filter(newVal) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(fuzzyTreeSearch(userList.value,newVal)) |
|
|
|
|
|
|
|
|
|
|
|
userList1.value = fuzzyTreeSearch(userList.value,newVal) |
|
|
|
console.log(userList1.value) |
|
|
|
//treeRef.value.data = fuzzyTreeSearch(treeRefValueData,newVal) |
|
|
|
watchCount++ |
|
|
|
isShowMore() |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
function isShowMore() { |
|
|
|
isExpandAll.value = true |
|
|
|
let nodes = treeRef.value.store._getAllNodes(); |
|
|
|
nodes.forEach(item => { |
|
|
|
item.expanded = true; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function fuzzyTreeSearch(treeData, keyword) { |
|
|
|
if (!keyword?.trim()) return deepClone(treeData); // 空关键词返回完整树 |
|
|
|
|
|
|
|
|
|
|
|
const processNode = (node) => { |
|
|
|
const newNode = deepClone(node); // 深拷贝当前节点 |
|
|
|
const isSelfMatch = newNode.label.toLowerCase().includes(keyword.toLowerCase()); |
|
|
|
|
|
|
|
// 处理子节点(关键修复点) |
|
|
|
let hasValidChild = false; |
|
|
|
if (newNode.children?.length) { |
|
|
|
newNode.children = newNode.children |
|
|
|
.map(child => processNode(child)) |
|
|
|
.filter(Boolean); // 过滤无效子节点 |
|
|
|
hasValidChild = newNode.children.length > 0; |
|
|
|
} |
|
|
|
|
|
|
|
// 保留条件:自身匹配 或 子节点有匹配(修复子节点丢失问题) |
|
|
|
if (isSelfMatch || hasValidChild) { |
|
|
|
// 自身匹配时保留完整子树(即使子节点未匹配) |
|
|
|
if (isSelfMatch && newNode.children?.length === 0) { |
|
|
|
newNode.children = deepClone(node.children); // 直接复制原子节点 |
|
|
|
} |
|
|
|
return newNode; |
|
|
|
} |
|
|
|
return null; |
|
|
|
}; |
|
|
|
|
|
|
|
return treeData.map(root => processNode(root)).filter(Boolean); |
|
|
|
} |
|
|
|
|
|
|
|
function deepClone(obj) { |
|
|
|
if (obj === null || typeof obj !== 'object') return obj; |
|
|
|
const clone = Array.isArray(obj) ? [] : {}; |
|
|
|
for (const key in obj) { |
|
|
|
clone[key] = deepClone(obj[key]); |
|
|
|
} |
|
|
|
return clone; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取配置接口相应或获取固定选项值 |
|
|
|
if (transferConfig.value.transferDataSource === "固定选项") { |
|
|
|
setTimeout(() => { |
|
|
|
@ -428,9 +522,12 @@ if (transferConfig.value.transferDataSource === "固定选项") { |
|
|
|
label: '全选', |
|
|
|
children: props.data?.control.fixedOptions |
|
|
|
}] |
|
|
|
userList1.value = userList.value |
|
|
|
//console.log(treeRef) |
|
|
|
/* console.log(checkedIdList.value) */ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
if( treeRef.value){ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
checkedIdList.value.forEach(element => { |
|
|
|
const _node = treeRef?.value?.getNode(element) |
|
|
|
@ -525,7 +622,10 @@ watch(transferConfig, (newValue, oldValue) => { |
|
|
|
label: '全选', |
|
|
|
children: [...resData.value] |
|
|
|
}] |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
userList1.value = userList.value |
|
|
|
if( treeRef.value){ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
checkedIdList.value.forEach(element => { |
|
|
|
const _node = treeRef?.value?.getNode(element) |
|
|
|
@ -573,9 +673,12 @@ watch(selectedValueCompu, (newValue, oldValue) => { |
|
|
|
label: '全选', |
|
|
|
children: props.data?.control.fixedOptions |
|
|
|
}] |
|
|
|
userList1.value = userList.value |
|
|
|
//console.log(treeRef) |
|
|
|
/* console.log(checkedIdList.value) */ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
if( treeRef.value){ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
checkedIdList.value.forEach(element => { |
|
|
|
const _node = treeRef?.value?.getNode(element) |
|
|
|
|