|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div v-if="dataFinished" class="transfer"> |
|
|
|
<div class="leftArea"> |
|
|
|
<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="搜索"> |
|
|
|
@ -51,8 +51,20 @@ 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']); |
|
|
|
const fixedOptions = props.data?.control.fixedOptions |
|
|
|
const transferConfig = props.data?.config |
|
|
|
const treeProps = { |
|
|
|
@ -67,10 +79,69 @@ const isExpandAll = ref(false) // 是否全展开 |
|
|
|
const keyword = ref('') // 搜索关键字 |
|
|
|
const checkList = ref([]) // 选中的list |
|
|
|
const userList = ref([]) |
|
|
|
let checkedIdList = ["302697","ceshi","301625"]; |
|
|
|
checkedIdList = []; |
|
|
|
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.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getDetail() { |
|
|
|
//console.log(11111) |
|
|
|
if(transferConfig.transferDataSource==="数据源"){ |
|
|
|
@ -90,9 +161,9 @@ if(transferConfig.transferDataSource==="数据源"){ |
|
|
|
label: '全选', |
|
|
|
children: [...resData.value] |
|
|
|
}] |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList,true) |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value,true) |
|
|
|
setTimeout(() => { |
|
|
|
checkedIdList.forEach(element => { |
|
|
|
checkedIdList.value.forEach(element => { |
|
|
|
const _node = treeRef?.value?.getNode(element) |
|
|
|
if (!_node) return |
|
|
|
const _checkList = checkList.value |
|
|
|
@ -116,7 +187,7 @@ if(transferConfig.transferDataSource==="数据源"){ |
|
|
|
}); |
|
|
|
} |
|
|
|
const getCheckedList = () => { |
|
|
|
checkedIdList = treeRef.value.getCheckedKeys(true) |
|
|
|
checkedIdList.value = treeRef.value.getCheckedKeys(true) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -303,10 +374,10 @@ if(transferConfig.transferDataSource==="固定选项"){ |
|
|
|
children: fixedOptions |
|
|
|
}] |
|
|
|
//console.log(treeRef) |
|
|
|
|
|
|
|
treeRef.value.setCheckedKeys(checkedIdList,true) |
|
|
|
/* console.log(checkedIdList.value) */ |
|
|
|
treeRef.value.setCheckedKeys(checkedIdList.value,true) |
|
|
|
setTimeout(() => { |
|
|
|
checkedIdList.forEach(element => { |
|
|
|
checkedIdList.value.forEach(element => { |
|
|
|
const _node = treeRef?.value?.getNode(element) |
|
|
|
if (!_node) return |
|
|
|
const _checkList = checkList.value |
|
|
|
@ -337,6 +408,60 @@ onMounted(() => { |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 监听 checkedIdList 的变化 |
|
|
|
watch(checkedIdList, (newValue, oldValue) => { |
|
|
|
//console.log('checkedIdList 发生了变化', newValue); |
|
|
|
emits('checkedIdListChanged',newValue); |
|
|
|
},{deep:true}); |
|
|
|
|
|
|
|
|
|
|
|
watch(selectedValueCompu, (newValue, oldValue) => { |
|
|
|
//console.log('selectedValueCompu 发生了变化', newValue); |
|
|
|
checkedIdList.value = selectedValueCompu.value |
|
|
|
//获取配置接口相应或获取固定选项值 |
|
|
|
if(transferConfig.transferDataSource==="固定选项"){ |
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
// 全选方法2:插入 全选node |
|
|
|
userList.value = [{ |
|
|
|
id: '全选', |
|
|
|
label: '全选', |
|
|
|
children: fixedOptions |
|
|
|
}] |
|
|
|
//console.log(treeRef) |
|
|
|
/* console.log(checkedIdList.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 = true |
|
|
|
}else{ |
|
|
|
getDetail |
|
|
|
dataFinished = true |
|
|
|
} |
|
|
|
//emits('updateModel',newValue); |
|
|
|
},{deep:true}); |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|