1 changed files with 896 additions and 0 deletions
@ -0,0 +1,896 @@ |
|||||
|
<template> |
||||
|
<!-- {{ props.data?.control.fixedOptions }} --><!-- {{transferConfig}} --><!-- {{ resData }} --><!-- {{ count1 }} --> |
||||
|
<!-- <hr> |
||||
|
<hr> |
||||
|
<hr> --> |
||||
|
<div v-if="dataFinished" class="transfer"><!-- {{props.selectedValue}} --> |
||||
|
<div class="leftArea"><!-- {{ selectedValueCompu }}{{checkedIdList}} --> |
||||
|
<div class="transferName">{{ transferConfig.transferName }}</div> |
||||
|
<div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;"> |
||||
|
<ElInput v-model="keyword" placeholder="搜索"> |
||||
|
<template #prefix> |
||||
|
<ElIcon class="el-input__icon"> |
||||
|
<Search /> |
||||
|
</ElIcon> |
||||
|
</template> |
||||
|
</ElInput> |
||||
|
</div> |
||||
|
<div class="leftScroll"> |
||||
|
<ElScrollbar height="100%"> |
||||
|
<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> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="rigthArea"> |
||||
|
<div style="margin-bottom: 8px;"> |
||||
|
<div class="transferName"><span>已选: {{ checkList.length }}</span> |
||||
|
<ElButton link style="float: right;margin-right: 5px;" @click="clearCheckList">清空</ElButton> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
<ElScrollbar height="calc(100% - 50px)"> |
||||
|
<ElTag v-for="user in checkList" :key="user.id" |
||||
|
style="display: block; font-size: 13px; letter-spacing: 1.5px;text-align: center;margin-top: 8px;height: 30px;width: 75%;margin-left:40px;padding-top: 6px;" |
||||
|
closable @close="handleCloseTag(user)"> |
||||
|
{{ |
||||
|
user.label |
||||
|
}}[{{ |
||||
|
user.parent.data.label |
||||
|
}}] |
||||
|
</ElTag> |
||||
|
|
||||
|
</ElScrollbar> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="MultiTreeSelector"> |
||||
|
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 |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
selectedValue: { |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const emits = defineEmits(['checkedIdListChanged', 'updateModel','reRenderComponent']); |
||||
|
/* const fixedOptions = ref([]) */ |
||||
|
/* fixedOptions.value = props.data?.control.fixedOptions */ |
||||
|
|
||||
|
|
||||
|
|
||||
|
//const transferConfig = props.data?.config |
||||
|
const transferConfig = computed({ |
||||
|
set(){ |
||||
|
|
||||
|
}, |
||||
|
get(){ |
||||
|
|
||||
|
return props.data?.config |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const treeProps = { |
||||
|
value: 'id', |
||||
|
label: 'label', |
||||
|
disabled: 'disabled', |
||||
|
children: 'children' |
||||
|
} |
||||
|
let dataFinished = ref(false) |
||||
|
const treeRef = ref() |
||||
|
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: '全选', |
||||
|
children: props.data?.control.fixedOptions |
||||
|
}] |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
set(){ |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
let userList1 = ref([]); |
||||
|
// |
||||
|
let checkedIdList = ref([]); |
||||
|
let count = 0 |
||||
|
function waitAndReGet() { |
||||
|
/* console.log("waitAndReGet") |
||||
|
console.log(props.selectedValue) |
||||
|
console.log(props.selectedValue.value) */ |
||||
|
setTimeout(() => { |
||||
|
let values = props.selectedValue.map(item => { |
||||
|
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整 |
||||
|
return item; |
||||
|
}); |
||||
|
if (props.selectedValue && values) { |
||||
|
|
||||
|
/* console.log("有值") |
||||
|
console.log(props.selectedValue) |
||||
|
console.log(values) */ |
||||
|
//return props.selectedValue.value |
||||
|
checkedIdList.value = values |
||||
|
} else { |
||||
|
if (count < 3) { |
||||
|
count++ |
||||
|
waitAndReGet() |
||||
|
} |
||||
|
|
||||
|
/* console.log("waitAndReGet---else") */ |
||||
|
|
||||
|
} |
||||
|
}, 2000) |
||||
|
} |
||||
|
/* |
||||
|
|
||||
|
|
||||
|
|
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
const selectedValueCompu = computed({ |
||||
|
get() { |
||||
|
//console.log("get") |
||||
|
//nextTick(()=>{ |
||||
|
let values = props.selectedValue.map(item => { |
||||
|
// 假设这里需要提取每个元素的特定值，可以根据实际情况进行调整 |
||||
|
return item; |
||||
|
}); |
||||
|
if (props.selectedValue && values) { |
||||
|
/* console.log(props.selectedValue.value) |
||||
|
console.log("computed---if") */ |
||||
|
return values |
||||
|
} else { |
||||
|
waitAndReGet() |
||||
|
/* console.log("computed---else") */ |
||||
|
return [] |
||||
|
|
||||
|
} |
||||
|
|
||||
|
//}) |
||||
|
|
||||
|
}, |
||||
|
set() { } |
||||
|
}) |
||||
|
/* console.log(props.selectedValue) */ |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
const url = transferConfig.value.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */ |
||||
|
let resData = ref([]) |
||||
|
function endsWithGetOrgAndManTree(str) { |
||||
|
// 检查输入是否为字符串 |
||||
|
if (typeof str !== 'string') { |
||||
|
return false; |
||||
|
} |
||||
|
const suffix = 'getOrgAndManTree'; |
||||
|
// 当字符串长度小于后缀长度时，直接返回false |
||||
|
if (str.length < suffix.length) { |
||||
|
return false; |
||||
|
} |
||||
|
// 获取字符串末尾与后缀长度相同的子字符串并比较 |
||||
|
return str.slice(-suffix.length) === suffix; |
||||
|
} |
||||
|
function processTreeData(node) { |
||||
|
if(!endsWithGetOrgAndManTree(url)){ |
||||
|
return node |
||||
|
} |
||||
|
// 检查节点及其所有子孙节点中是否存在id长度大于4的节点 |
||||
|
function hasLongIdNode(node) { |
||||
|
// 检查当前节点id长度 |
||||
|
if (node.id && node.id.length > 4) { |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// 处理子节点（考虑children为null的情况） |
||||
|
if (node.children && Array.isArray(node.children) && node.children.length > 0) { |
||||
|
for (const child of node.children) { |
||||
|
if (hasLongIdNode(child)) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// 递归处理节点 |
||||
|
function processNode(node) { |
||||
|
// 如果当前节点及其所有子孙都没有长id，则移除该节点 |
||||
|
if (!hasLongIdNode(node)) { |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
// 复制节点避免修改原对象 |
||||
|
const newNode = {...node}; |
||||
|
|
||||
|
// 处理子节点 |
||||
|
if (newNode.children && Array.isArray(newNode.children) && newNode.children.length > 0) { |
||||
|
// 递归处理每个子节点并过滤掉需要移除的 |
||||
|
newNode.children = newNode.children |
||||
|
.map(child => processNode(child)) |
||||
|
.filter(child => child !== null); |
||||
|
|
||||
|
// 如果所有子节点都被移除，保持children为null |
||||
|
if (newNode.children.length === 0) { |
||||
|
newNode.children = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return newNode; |
||||
|
} |
||||
|
|
||||
|
return processNode(node); |
||||
|
} |
||||
|
|
||||
|
function getDetail() { |
||||
|
//console.log(11111) |
||||
|
if (transferConfig.value.transferDataSource === "数据源") { |
||||
|
return request({ |
||||
|
url: url, |
||||
|
method: transferConfig.value.method, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
if (transferConfig.value.transferDataSource === "数据源") { |
||||
|
getDetail().then(({ data }) => { |
||||
|
checkedIdList.value = props.selectedValue |
||||
|
|
||||
|
const data1 = processTreeData(data) |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
//console.log(`获取穿梭框接口数据`); |
||||
|
resData.value = data1.children |
||||
|
// 全选方法2:插入 全选node |
||||
|
userList.value = [{ |
||||
|
id: '全选', |
||||
|
label: '全选', |
||||
|
children: [...resData.value] |
||||
|
}] |
||||
|
userList1.value = userList.value |
||||
|
if( treeRef.value){ |
||||
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
||||
|
} |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
checkedIdList.value.forEach(element => { |
||||
|
const _node = treeRef?.value?.getNode(element) |
||||
|
if (!_node) return |
||||
|
const _checkList = checkList.value |
||||
|
if (_node.checked) { // 勾选时 |
||||
|
if (_node.checked && _node.childNodes.length === 0) { |
||||
|
_checkList.push(_node) |
||||
|
} |
||||
|
// 通过new Set() 实现数据去重 |
||||
|
checkList.value = Array.from(new Set(_checkList)) |
||||
|
// 遍历子级,递归,直到获取最后一级的人员 |
||||
|
if (_node.childNodes.length > 0) { |
||||
|
_node.childNodes.map(item => handleCheckList(item.data)) |
||||
|
} |
||||
|
} else if (!_node.checked) { // 取消勾选 |
||||
|
checkList.value = checkList.value.filter(item => item.checked) |
||||
|
} |
||||
|
}); |
||||
|
}, 50); |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
const getCheckedList = () => { |
||||
|
checkedIdList.value = treeRef.value.getCheckedKeys(true) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
let resData1 = ref([ |
||||
|
{ |
||||
|
id: '3', |
||||
|
label: '营销部', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: '3-1', |
||||
|
label: '威震天' |
||||
|
}, |
||||
|
{ |
||||
|
id: '3-2', |
||||
|
label: '嫦娥' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
label: '业务部', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: '2-1-1', |
||||
|
label: '业务部子部1', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: '2-1-0001', |
||||
|
label: '李白' |
||||
|
}, |
||||
|
{ |
||||
|
id: '2-1-0002', |
||||
|
label: '萧峰' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: '2-2-1', |
||||
|
label: '业务部子部2', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: '2-2-00006', |
||||
|
label: '武则天' |
||||
|
}, |
||||
|
{ |
||||
|
id: '2-2-00005', |
||||
|
label: '拿破仑' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: '4', |
||||
|
label: '软件开发部', |
||||
|
children: [ |
||||
|
{ |
||||
|
id: '5-3', |
||||
|
label: '张辽' |
||||
|
}, |
||||
|
{ |
||||
|
id: '5-9', |
||||
|
label: '吕布' |
||||
|
}, |
||||
|
{ |
||||
|
id: '5-0', |
||||
|
label: '许褚' |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
]) |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 勾选或者取消勾选 |
||||
|
const handleCheckList = (val) => { |
||||
|
//console.log(val) |
||||
|
const valId = val.id; |
||||
|
//console.log(valId) |
||||
|
const _node = treeRef?.value?.getNode(valId) |
||||
|
//console.log(_node) |
||||
|
|
||||
|
|
||||
|
if (!_node) return |
||||
|
const _checkList = checkList.value |
||||
|
//console.log(checkedIdList.value) |
||||
|
if (_node.checked||_node.childNodes.length > 0) { |
||||
|
if (_node.checked && _node.childNodes.length === 0) { |
||||
|
|
||||
|
let count = 0 |
||||
|
checkedIdList.value.forEach(element1 => { |
||||
|
if(element1==valId){ |
||||
|
|
||||
|
count++ |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if(count==1){ |
||||
|
_checkList.push(_node) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
//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)) |
||||
|
} |
||||
|
} else if (!_node.checked) { // 取消勾选 |
||||
|
checkList.value = checkList.value.filter(item => item.checked) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 人员树 父级过滤的递归 |
||||
|
* @node 当前节点 |
||||
|
* @result 存结果的数组 |
||||
|
* @key |
||||
|
* */ |
||||
|
const getParentNode = (node, result, key) => { |
||||
|
let isPass = node?.data?.label?.indexOf(key) !== -1 |
||||
|
isPass ? result.push(isPass) : '' |
||||
|
if (!isPass && node.level !== 1 && node.parent) { |
||||
|
return getParentNode(node.parent, result, key) |
||||
|
} |
||||
|
} |
||||
|
/*人员树过滤 |
||||
|
* @value 过滤的关键字 |
||||
|
* @data 被过滤的tree |
||||
|
* @node |
||||
|
* */ |
||||
|
const filterNode = (value, data, node) => { |
||||
|
if (!value) { |
||||
|
data.disabled = false |
||||
|
return true |
||||
|
} else { |
||||
|
//带过滤条件时,所有父级都禁止勾选 |
||||
|
// array.map(k => (!k.disabled) && (_childArr.push(k))) |
||||
|
(data.children) && (data.disabled = true) |
||||
|
} |
||||
|
let _arr = [] |
||||
|
getParentNode(node, _arr, value) |
||||
|
let result = false |
||||
|
_arr.forEach(item => { |
||||
|
result = result || item |
||||
|
}) |
||||
|
return result |
||||
|
} |
||||
|
// 通过tag 取消勾选 |
||||
|
const handleCloseTag = (tag) => { |
||||
|
checkedIdList.value = checkedIdList.value.filter(item => item !== tag.data.id); |
||||
|
|
||||
|
if (!treeRef?.value) return |
||||
|
checkList.value = checkList.value.filter(item => { |
||||
|
treeRef.value.setChecked(tag, false) |
||||
|
if (!item?.data) return |
||||
|
return item.data.id !== tag.data.id |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 清空CheckList |
||||
|
const clearCheckList = () => { |
||||
|
if (!treeRef?.value) return |
||||
|
treeRef.value.setCheckedKeys([]) |
||||
|
while (checkList.value.length > 0) { |
||||
|
checkList.value.pop() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 全选 /全不选 |
||||
|
const handleCheckAll = (array) => { |
||||
|
treeRef.value.setCheckedNodes(array) |
||||
|
array.map(item => { |
||||
|
handleCheckList(item) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 折叠/展开 |
||||
|
const expandAll = () => { |
||||
|
const nodesMap = treeRef.value.store.nodesMap |
||||
|
for (let key in nodesMap) { |
||||
|
nodesMap[key].expanded = isExpandAll.value |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
let watchCount = 0 |
||||
|
|
||||
|
|
||||
|
// 执行tree数据过滤 |
||||
|
watch(keyword, (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(() => { |
||||
|
|
||||
|
// 全选方法2:插入 全选node |
||||
|
userList.value = [{ |
||||
|
id: '全选', |
||||
|
label: '全选', |
||||
|
children: props.data?.control.fixedOptions |
||||
|
}] |
||||
|
userList1.value = userList.value |
||||
|
//console.log(treeRef) |
||||
|
/* console.log(checkedIdList.value) */ |
||||
|
if( treeRef.value){ |
||||
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
checkedIdList.value.forEach(element => { |
||||
|
const _node = treeRef?.value?.getNode(element) |
||||
|
if (!_node) return |
||||
|
const _checkList = checkList.value |
||||
|
if (_node.checked) { // 勾选时 |
||||
|
if (_node.checked && _node.childNodes.length === 0) { |
||||
|
_checkList.push(_node) |
||||
|
} |
||||
|
// 通过new Set() 实现数据去重 |
||||
|
checkList.value = Array.from(new Set(_checkList)) |
||||
|
// 遍历子级,递归,直到获取最后一级的人员 |
||||
|
if (_node.childNodes.length > 0) { |
||||
|
_node.childNodes.map(item => handleCheckList(item.data)) |
||||
|
} |
||||
|
} else if (!_node.checked) { // 取消勾选 |
||||
|
checkList.value = checkList.value.filter(item => item.checked) |
||||
|
} |
||||
|
}); |
||||
|
}, 50); |
||||
|
}, 50); |
||||
|
dataFinished.value = true |
||||
|
} else { |
||||
|
getDetail |
||||
|
dataFinished.value = true |
||||
|
} |
||||
|
/* setTimeout(()=>{ |
||||
|
console.log("setTimeout") |
||||
|
if(props.data?.config.transferDataSource==="数据源"){ |
||||
|
//emits('reRenderComponent'); |
||||
|
count1.value++ |
||||
|
} |
||||
|
},1500) */ |
||||
|
function arrayEquals(arr1, arr2) { |
||||
|
// 首先检查是否都是数组 |
||||
|
if (!Array.isArray(arr1) || !Array.isArray(arr2)) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// 检查数组长度是否相同 |
||||
|
if (arr1.length !== arr2.length) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// 逐个比较元素 |
||||
|
for (let i = 0; i < arr1.length; i++) { |
||||
|
const item1 = arr1[i]; |
||||
|
const item2 = arr2[i]; |
||||
|
|
||||
|
// 如果两个元素都是数组，则递归比较 |
||||
|
if (Array.isArray(item1) && Array.isArray(item2)) { |
||||
|
if (!arrayEquals(item1, item2)) { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
// 如果两个元素都是对象，则比较它们的属性 |
||||
|
else if (typeof item1 === 'object' && item1 !== null && |
||||
|
typeof item2 === 'object' && item2 !== null) { |
||||
|
// 简单对象比较（不考虑原型链） |
||||
|
const keys1 = Object.keys(item1); |
||||
|
const keys2 = Object.keys(item2); |
||||
|
|
||||
|
if (keys1.length !== keys2.length) return false; |
||||
|
|
||||
|
for (const key of keys1) { |
||||
|
if (!keys2.includes(key) || !arrayEquals([item1[key]], [item2[key]])) { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 其他类型直接比较 |
||||
|
else { |
||||
|
if (item1 !== item2) { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 监听 checkedIdList 的变化 |
||||
|
watch(checkedIdList, (newValue, oldValue) => { |
||||
|
/* console.log(oldValue) |
||||
|
console.log('checkedIdList 发生了变化', newValue); */ |
||||
|
|
||||
|
if(!arrayEquals(newValue,oldValue)){ |
||||
|
//console.log(1) |
||||
|
emits('checkedIdListChanged', newValue); |
||||
|
}else{ |
||||
|
//console.log(2) |
||||
|
} |
||||
|
|
||||
|
//emits('checkedIdListChanged', newValue); |
||||
|
}, { deep: true }); |
||||
|
|
||||
|
let count1 = ref(0); |
||||
|
|
||||
|
|
||||
|
/* onBeforeMount(() => { |
||||
|
console.log('onBeforeMount: 组件即将挂载'); |
||||
|
}); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
console.log('onMounted: 组件已挂载'); |
||||
|
}); |
||||
|
onBeforeUpdate(() => { |
||||
|
console.log('onBeforeUpdate: 数据即将更新到 DOM'); |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
|
||||
|
onUpdated(() => { |
||||
|
console.log('onUpdated: DOM 已更新'); |
||||
|
if(props.data?.config.transferDataSource==="数据源"){ |
||||
|
console.log("emits('reRenderComponent');") |
||||
|
emits('reRenderComponent'); |
||||
|
} |
||||
|
}); |
||||
|
onBeforeUnmount(() => { |
||||
|
|
||||
|
console.log('onBeforeUnmount: 组件即将卸载，清除定时器'); |
||||
|
}); |
||||
|
onUnmounted(() => { |
||||
|
console.log('onUnmounted: 组件已卸载'); |
||||
|
}); */ |
||||
|
|
||||
|
watch(transferConfig, (newValue, oldValue) => { |
||||
|
|
||||
|
count1.value++ |
||||
|
|
||||
|
//emits('reRenderComponent', newValue); |
||||
|
try { |
||||
|
|
||||
|
count1.value++ |
||||
|
if (newValue.transferDataSource === "数据源") { |
||||
|
emits('reRenderComponent'); |
||||
|
|
||||
|
|
||||
|
getDetail().then(({ data }) => { |
||||
|
alert(2) |
||||
|
const data1 = processTreeData(data) |
||||
|
//console.log(`获取穿梭框接口数据`); |
||||
|
resData.value = data1.children |
||||
|
// 全选方法2:插入 全选node |
||||
|
userList.value = [{ |
||||
|
id: '全选', |
||||
|
label: '全选', |
||||
|
children: [...resData.value] |
||||
|
}] |
||||
|
userList1.value = userList.value |
||||
|
if( treeRef.value){ |
||||
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
checkedIdList.value.forEach(element => { |
||||
|
const _node = treeRef?.value?.getNode(element) |
||||
|
if (!_node) return |
||||
|
const _checkList = checkList.value |
||||
|
if (_node.checked) { // 勾选时 |
||||
|
if (_node.checked && _node.childNodes.length === 0) { |
||||
|
_checkList.push(_node) |
||||
|
} |
||||
|
// 通过new Set() 实现数据去重 |
||||
|
checkList.value = Array.from(new Set(_checkList)) |
||||
|
// 遍历子级,递归,直到获取最后一级的人员 |
||||
|
if (_node.childNodes.length > 0) { |
||||
|
_node.childNodes.map(item => handleCheckList(item.data)) |
||||
|
} |
||||
|
} else if (!_node.checked) { // 取消勾选 |
||||
|
checkList.value = checkList.value.filter(item => item.checked) |
||||
|
} |
||||
|
}); |
||||
|
}, 50); |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('Error :', error); |
||||
|
// 可以在这里进行一些错误处理，比如设置默认值或其他操作 |
||||
|
//parsedData.value = null; |
||||
|
} |
||||
|
|
||||
|
}, { deep: true }); |
||||
|
|
||||
|
|
||||
|
watch(selectedValueCompu, (newValue, oldValue) => { |
||||
|
//console.log('selectedValueCompu 发生了变化', newValue); |
||||
|
checkedIdList.value = selectedValueCompu.value |
||||
|
//获取配置接口相应或获取固定选项值 |
||||
|
if (transferConfig.value.transferDataSource === "固定选项") { |
||||
|
setTimeout(() => { |
||||
|
|
||||
|
// 全选方法2:插入 全选node |
||||
|
userList.value = [{ |
||||
|
id: '全选', |
||||
|
label: '全选', |
||||
|
children: props.data?.control.fixedOptions |
||||
|
}] |
||||
|
userList1.value = userList.value |
||||
|
//console.log(treeRef) |
||||
|
/* console.log(checkedIdList.value) */ |
||||
|
if( treeRef.value){ |
||||
|
treeRef.value.setCheckedKeys(checkedIdList.value, true) |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
checkedIdList.value.forEach(element => { |
||||
|
const _node = treeRef?.value?.getNode(element) |
||||
|
if (!_node) return |
||||
|
const _checkList = checkList.value |
||||
|
if (_node.checked) { // 勾选时 |
||||
|
if (_node.checked && _node.childNodes.length === 0) { |
||||
|
_checkList.push(_node) |
||||
|
} |
||||
|
// 通过new Set() 实现数据去重 |
||||
|
checkList.value = Array.from(new Set(_checkList)) |
||||
|
// 遍历子级,递归,直到获取最后一级的人员 |
||||
|
if (_node.childNodes.length > 0) { |
||||
|
_node.childNodes.map(item => handleCheckList(item.data)) |
||||
|
} |
||||
|
} else if (!_node.checked) { // 取消勾选 |
||||
|
checkList.value = checkList.value.filter(item => item.checked) |
||||
|
} |
||||
|
}); |
||||
|
}, 50); |
||||
|
}, 50); |
||||
|
dataFinished.value = true |
||||
|
} else { |
||||
|
getDetail |
||||
|
dataFinished.value = true |
||||
|
} |
||||
|
//emits('updateModel',newValue); |
||||
|
}, { deep: true }); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.transfer { |
||||
|
display: flex; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.transferName { |
||||
|
height: 30px; |
||||
|
padding-top: 8px; |
||||
|
background-color: #F5F7FA; |
||||
|
padding-left: 10px; |
||||
|
border-radius: 5px 5px 0 0; |
||||
|
border-bottom: 1px solid gainsboro; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.buttonArea { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.buttonArea2 { |
||||
|
height: 33px; |
||||
|
} |
||||
|
|
||||
|
.leftScroll { |
||||
|
height: 367px; |
||||
|
} |
||||
|
|
||||
|
.leftArea { |
||||
|
border: 1px solid gainsboro; |
||||
|
width: 300px; |
||||
|
border-radius: 5px; |
||||
|
height: 456px; |
||||
|
position: relative; |
||||
|
background-color: white; |
||||
|
} |
||||
|
|
||||
|
.rigthArea { |
||||
|
border: 1px solid gainsboro; |
||||
|
width: 300px; |
||||
|
border-radius: 5px; |
||||
|
height: 456px; |
||||
|
background-color: white; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue