|
|
|
@ -9,75 +9,54 @@ const props = withDefaults( |
|
|
|
defineProps<{ |
|
|
|
modelValue?: string |
|
|
|
disabled?: boolean |
|
|
|
orgAndManTree?: any; |
|
|
|
}>(), |
|
|
|
{} |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface User { |
|
|
|
id: number |
|
|
|
name: string |
|
|
|
number: string |
|
|
|
key: string |
|
|
|
icon: string |
|
|
|
department: string |
|
|
|
role: string |
|
|
|
id: number |
|
|
|
name: string |
|
|
|
number: string |
|
|
|
key: string |
|
|
|
icon: string |
|
|
|
department: string |
|
|
|
role: string |
|
|
|
label: string |
|
|
|
value: string |
|
|
|
} |
|
|
|
const emits = defineEmits<{ |
|
|
|
(e: 'update:modelValue', value: string): void |
|
|
|
}>() |
|
|
|
const userDialogEl = ref() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const loading = ref(true) |
|
|
|
const value = ref([]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(value, (newValue) => { |
|
|
|
|
|
|
|
const checkReady = () => { |
|
|
|
|
|
|
|
if (loading.value == false) { |
|
|
|
if (newValue.length > 0) { |
|
|
|
let str = "" |
|
|
|
|
|
|
|
let userAry = new Array |
|
|
|
|
|
|
|
|
|
|
|
newValue.forEach(item => { |
|
|
|
|
|
|
|
userAry.push(item) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
str = userAry.join(',') |
|
|
|
//console.log(str) |
|
|
|
emits('update:modelValue', str) |
|
|
|
|
|
|
|
} else { |
|
|
|
let str = "" |
|
|
|
|
|
|
|
emits('update:modelValue', str) |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 未就绪，100ms 后重试（非阻塞） |
|
|
|
setTimeout(checkReady, 100) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 启动检查 |
|
|
|
checkReady() |
|
|
|
}, { deep: true }) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const openDialog = () => { |
|
|
|
// console.log("value-----》",value.value) |
|
|
|
userDialogEl.value.open() |
|
|
|
} |
|
|
|
|
|
|
|
function parseStringToArray(str: string) { |
|
|
|
const loading = ref(true) |
|
|
|
watch(value,(newValue)=>{ |
|
|
|
if(newValue.length > 0){ |
|
|
|
let str = "" |
|
|
|
|
|
|
|
let userAry = new Array |
|
|
|
|
|
|
|
newValue.forEach(item =>{ |
|
|
|
//console.log(item) |
|
|
|
userAry.push(item) |
|
|
|
|
|
|
|
}) |
|
|
|
str = userAry.join(',') |
|
|
|
//console.log(str) |
|
|
|
emits('update:modelValue', str) |
|
|
|
// userlist.value = userAry.join(',') |
|
|
|
// |
|
|
|
}else{ |
|
|
|
let str = "" |
|
|
|
//console.log(str) |
|
|
|
emits('update:modelValue', str) |
|
|
|
} |
|
|
|
},{ deep: true }) |
|
|
|
|
|
|
|
function parseStringToArray(str:string) { |
|
|
|
try { |
|
|
|
// 尝试解析JSON格式字符串 |
|
|
|
const result = JSON.parse(str); |
|
|
|
@ -94,127 +73,144 @@ function parseStringToArray(str: string) { |
|
|
|
} |
|
|
|
} |
|
|
|
onBeforeMount(() => { |
|
|
|
getManConts() |
|
|
|
getTree() |
|
|
|
setTimeout(() => { |
|
|
|
value.value = parseStringToArray(props.modelValue) |
|
|
|
}, 700) |
|
|
|
// 启动检查 |
|
|
|
//checkReady() |
|
|
|
|
|
|
|
//getTree() |
|
|
|
setTimeout(()=>{ |
|
|
|
value.value = parseStringToArray(props.modelValue) |
|
|
|
},500 ) |
|
|
|
}) |
|
|
|
|
|
|
|
const url = "/javasys/lowCode/manCont/getManContsByKeys" |
|
|
|
//console.log(attrs.value) |
|
|
|
const keys = computed(() => { |
|
|
|
if (attrs.queryBy == 'role') { |
|
|
|
return attrs.roleRange |
|
|
|
} else { |
|
|
|
return attrs.orgRange |
|
|
|
} |
|
|
|
const keys = computed(()=>{ |
|
|
|
if(attrs.queryBy == 'role'){ |
|
|
|
return attrs.roleRange |
|
|
|
}else{ |
|
|
|
return attrs.orgRange |
|
|
|
} |
|
|
|
}) |
|
|
|
function getManContsByKeys() { |
|
|
|
//console.log(11111) |
|
|
|
|
|
|
|
return request({ |
|
|
|
url: url, |
|
|
|
method: "post", |
|
|
|
data: { |
|
|
|
keys: keys.value, |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
const options = ref([]) |
|
|
|
|
|
|
|
function getManConts() { |
|
|
|
getManContsByKeys().then(({ data }) => { |
|
|
|
data.forEach((element: any) => { |
|
|
|
element.icon = element.name + "(" + element.number + ")" |
|
|
|
element.deparment = "[" + element.deparment + "] - " + element.icon |
|
|
|
element.label = element.deparment |
|
|
|
element.value = element.icon |
|
|
|
}); |
|
|
|
options.value = data |
|
|
|
//console.log(options.value) |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree' |
|
|
|
function getOrgAndManTree() { |
|
|
|
return request({ |
|
|
|
url: treeUrl, |
|
|
|
method: 'post', |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function processTreeData(node: any) { |
|
|
|
|
|
|
|
// 检查节点及其所有子孙节点中是否存在id长度大于4的节点 |
|
|
|
function hasLongIdNode(node: { id: string | any[]; children: string | any[]; }) { |
|
|
|
// 检查当前节点id长度 |
|
|
|
if (node.id && node.id.length > 4) { |
|
|
|
return true; |
|
|
|
const convertToAFormatComplate = ref(false) |
|
|
|
function convertToAFormat(bTree, idArray) { |
|
|
|
const nodeMap = {}; |
|
|
|
|
|
|
|
// 递归收集节点，增加详细日志 |
|
|
|
function collectNodes(node, level = 0) { |
|
|
|
if (!node) { |
|
|
|
//console.log(`跳过无效节点: ${node}`); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 处理子节点（考虑children为null的情况） |
|
|
|
if (node.children && Array.isArray(node.children) && node.children.length > 0) { |
|
|
|
for (const child of node.children) { |
|
|
|
if (hasLongIdNode(child)) { |
|
|
|
return true; |
|
|
|
} |
|
|
|
} |
|
|
|
// 记录当前节点信息（方便调试） |
|
|
|
//console.log(`收集节点 [层级${level}]: id=${node.id}, label=${node.label}`); |
|
|
|
// 必须有id才存入映射表（避免非节点元素） |
|
|
|
if (node.id !== undefined && node.id !== null) { |
|
|
|
nodeMap[node.id] = node; |
|
|
|
} else { |
|
|
|
//console.warn(`节点缺少id，跳过:`, node); |
|
|
|
} |
|
|
|
// 处理子节点（确保是数组，且元素有效） |
|
|
|
if (Array.isArray(node.children)) { |
|
|
|
node.children.forEach((child, index) => { |
|
|
|
collectNodes(child, level + 1); // 层级+1，方便查看嵌套关系 |
|
|
|
}); |
|
|
|
} else if (node.children !== null && node.children !== undefined) { |
|
|
|
//console.warn(`节点children不是数组，跳过:`, node.children); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return false; |
|
|
|
// 处理根节点（兼容数组或单个对象） |
|
|
|
if (Array.isArray(bTree)) { |
|
|
|
//console.log(`bTree是数组，共${bTree.length}个根节点`); |
|
|
|
bTree.forEach((root, index) => { |
|
|
|
//console.log(`处理根节点${index + 1}`); |
|
|
|
collectNodes(root); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
//console.log(`bTree是单个根节点`); |
|
|
|
collectNodes(bTree); |
|
|
|
} |
|
|
|
|
|
|
|
// 递归处理节点 |
|
|
|
function processNode(node: any) { |
|
|
|
// 如果当前节点及其所有子孙都没有长id，则移除该节点 |
|
|
|
if (!hasLongIdNode(node)) { |
|
|
|
return null; |
|
|
|
} |
|
|
|
// 打印收集到的所有节点id（关键调试信息） |
|
|
|
//console.log(`收集到的节点id列表:`, Object.keys(nodeMap)); |
|
|
|
|
|
|
|
// 匹配idArray并转换 |
|
|
|
const result = idArray.map(id => { |
|
|
|
// 打印当前匹配的id，检查是否在nodeMap中 |
|
|
|
//console.log(`匹配id: ${id}，是否存在: ${id in nodeMap}`); |
|
|
|
const targetNode = nodeMap[id]; |
|
|
|
if (!targetNode) return null; |
|
|
|
|
|
|
|
return { |
|
|
|
id: targetNode.id, |
|
|
|
number: targetNode.value ?? '', // 用空字符串替代null/undefined |
|
|
|
name: targetNode.label ?? '', |
|
|
|
icon: null, |
|
|
|
key: String(targetNode.id), // 确保key是字符串（与a格式一致） |
|
|
|
role: '', |
|
|
|
deparment: '', |
|
|
|
parentId: targetNode.parentId ?? '' |
|
|
|
}; |
|
|
|
}).filter(Boolean); |
|
|
|
|
|
|
|
//console.log(`最终转换结果:`, result); |
|
|
|
convertToAFormatComplate.value = true |
|
|
|
return result; |
|
|
|
} |
|
|
|
|
|
|
|
// 复制节点避免修改原对象 |
|
|
|
const newNode = { ...node }; |
|
|
|
function getManConts(){ |
|
|
|
|
|
|
|
// 处理子节点 |
|
|
|
if (newNode.children && Array.isArray(newNode.children) && newNode.children.length > 0) { |
|
|
|
// 递归处理每个子节点并过滤掉需要移除的 |
|
|
|
newNode.children = newNode.children |
|
|
|
.map((child: any) => processNode(child)) |
|
|
|
.filter((child: null) => child !== null); |
|
|
|
|
|
|
|
// 如果所有子节点都被移除，保持children为null |
|
|
|
if (newNode.children.length === 0) { |
|
|
|
newNode.children = null; |
|
|
|
} |
|
|
|
} |
|
|
|
let data = convertToAFormat(props.orgAndManTree,keys.value) |
|
|
|
data.forEach((element: any) => { |
|
|
|
element.icon = element.name+"("+element.number+")" |
|
|
|
element.deparment = ""+element.deparment+">"+element.icon |
|
|
|
element.label = element.deparment |
|
|
|
element.value = element.icon |
|
|
|
}); |
|
|
|
options.value = data |
|
|
|
|
|
|
|
return newNode; |
|
|
|
} |
|
|
|
|
|
|
|
return processNode(node); |
|
|
|
} |
|
|
|
let resData = ref([]) |
|
|
|
|
|
|
|
const userList = computed({ |
|
|
|
|
|
|
|
get() { |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2025-06-10 11:13:06 |
|
|
|
@ 功能: 输出结果 |
|
|
|
*/ |
|
|
|
const valPrint = (val:any) => { |
|
|
|
|
|
|
|
if(Array.isArray(val)){ |
|
|
|
return val.join("、") |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return [{ |
|
|
|
id: '全选', |
|
|
|
label: '全选', |
|
|
|
children: [...resData.value] |
|
|
|
}] |
|
|
|
|
|
|
|
const resData = computed(()=>{ |
|
|
|
if(props.orgAndManTree){ |
|
|
|
let data1 = processTreeData(props.orgAndManTree) |
|
|
|
//console.log(data1) |
|
|
|
getManConts() |
|
|
|
|
|
|
|
let data2 = filterTreeByList(data1.children, options.value) |
|
|
|
|
|
|
|
data1.children = data2 |
|
|
|
|
|
|
|
}, |
|
|
|
set() { |
|
|
|
|
|
|
|
|
|
|
|
loading.value = false |
|
|
|
return enrichTreeWithEmployeeInfo(options.value, data2) |
|
|
|
}else{ |
|
|
|
return [] |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
/** |
|
|
|
* 根据列表数据过滤树形数据，保留value值在列表number中匹配的节点及其祖先 |
|
|
|
* @param {Array} treeData - 树形数据 |
|
|
|
@ -334,39 +330,55 @@ function enrichTreeWithEmployeeInfo(employees: any[], treeData: string | any[]) |
|
|
|
return treeData; |
|
|
|
} |
|
|
|
|
|
|
|
function getTree() { |
|
|
|
getOrgAndManTree().then(({ data }) => { |
|
|
|
|
|
|
|
|
|
|
|
let data1 = processTreeData(data) |
|
|
|
//console.log(data1) |
|
|
|
let data2 = filterTreeByList(data1.children, options.value) |
|
|
|
|
|
|
|
//console.log(data2) |
|
|
|
data1.children = data2 |
|
|
|
|
|
|
|
//console.log(resData.value) |
|
|
|
//console.log(`获取穿梭框接口数据`); |
|
|
|
resData.value = data1.children |
|
|
|
userList.value = [{ |
|
|
|
id: '全选', |
|
|
|
label: '全选', |
|
|
|
children: [...resData.value] |
|
|
|
}] |
|
|
|
|
|
|
|
enrichTreeWithEmployeeInfo(options.value, userList.value) |
|
|
|
loading.value = false |
|
|
|
function processTreeData(node: any) { |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
// 检查节点及其所有子孙节点中是否存在id长度大于4的节点 |
|
|
|
function hasLongIdNode(node: { id: string | any[]; children: string | any[]; }) { |
|
|
|
// 检查当前节点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: any) { |
|
|
|
// 如果当前节点及其所有子孙都没有长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: any) => processNode(child)) |
|
|
|
.filter((child: null) => child !== null); |
|
|
|
|
|
|
|
// 如果所有子节点都被移除，保持children为null |
|
|
|
if (newNode.children.length === 0) { |
|
|
|
newNode.children = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return newNode; |
|
|
|
} |
|
|
|
|
|
|
|
return processNode(node); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
@ -374,7 +386,7 @@ function getTree() { |
|
|
|
|
|
|
|
|
|
|
|
<div style="width:100%"> |
|
|
|
<el-tree-select node-key="number" v-model="value" :data="userList" multiple :render-after-expand="false" |
|
|
|
<el-tree-select node-key="number" v-model="value" :data="resData" multiple :render-after-expand="false" |
|
|
|
show-checkbox clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="4" filterable /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
