appFormLowcode/src/components/lowCode/assistant/rangedUserTree.vue

<script lang='ts' setup>
import { criteriaForPeopleList } from '@/api/hr/org/type'
import SvgIcon from '@/components/svgIcon/index.vue'
import { useAttrs,computed, onMounted, nextTick,ref,watch,onBeforeMount} from 'vue'
import request from '@/utils/axios/index'
const attrs = useAttrs()
const props = withDefaults(
    defineProps<{
		modelValue?: string
		disabled?: boolean
		types?:number
        control?:any
    }>(),
    {}
)
interface User {
  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 value = ref([])
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);
        // 验证解析结果是否为数组
        if (Array.isArray(result)) {
            return result;
        } else {
            //console.error("解析结果不是数组");
            return [];
        }
    } catch (error) {
        //console.error("字符串格式错误，无法解析为数组：", error.message);
        return [];
    }
}
onBeforeMount(() => {
	getManConts()
	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
	}
})
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)
		
	})
}

/**
@ 作者: 秦东
@ 时间: 2025-06-10 11:13:06
@ 功能: 输出结果
*/
const valPrint = (val:any) => {
	
		if(Array.isArray(val)){
			return val.join("、")
		}
	
}








let resData = ref([])

const userList = computed({

    get() {


        return [{
            id: '全选',
            label: '全选',
            children: [...resData.value]
        }]



    },
    set() {

    }
})
/**
 * 根据列表数据过滤树形数据，保留value值在列表number中匹配的节点及其祖先
 * @param {Array} treeData - 树形数据
 * @param {Array} listData - 列表数据
 * @returns {Array} 过滤后的树形数据
 */
function filterTreeByList(treeData: string | any[], listData: any[]) {
    // 提取列表中的number值，用于快速查找
    const numberSet = new Set();
    listData.forEach((item: { number: unknown; }) => {
        numberSet.add(item.number);
    });

    // 用于追踪已访问的节点，避免重复
    const visitedNodes = new Set();

    // 递归函数：检查节点及其子节点是否需要保留
    function processNode(node: { id: any; value: unknown; children: string | any[] | null; }) {
        // 使用节点的id作为唯一标识，避免重复处理
        const nodeId = node.id;
        if (visitedNodes.has(nodeId)) {
            return false; // 如果已经访问过这个节点，直接返回false
        }

        // 标记当前节点已访问
        visitedNodes.add(nodeId);

        // 标记当前节点是否直接匹配
        const isDirectMatch = node.value && numberSet.has(node.value);

        // 如果没有children属性或为null，直接返回是否直接匹配
        if (!node.children || node.children === null) {
            return isDirectMatch;
        }

        // 临时存储需要保留的子节点
        const childrenToKeep = [];

        // 遍历所有子节点
        for (let i = 0; i < node.children.length; i++) {
            const child = node.children[i];
            // 递归检查子节点
            if (processNode(child)) {
                // 只有当子节点需要保留时，才将其添加到childrenToKeep数组中
                childrenToKeep.push(child);
            }
        }

        // 更新当前节点的children数组，只保留需要的子节点
        node.children = childrenToKeep;

        // 返回当前节点是否应该保留（直接匹配或者有匹配的子节点）
        return isDirectMatch || childrenToKeep.length > 0;
    }

    // 处理每个根节点
    const result = [];
    for (let i = 0; i < treeData.length; i++) {
        // 创建节点副本以避免修改原始数据
        const nodeCopy = JSON.parse(JSON.stringify(treeData[i]));
        if (processNode(nodeCopy)) {
            result.push(nodeCopy);
        }
    }

    return result;
}



/**
 * 将 a 类型员工数据映射到树形结构中，为匹配的节点添加 number、role、deparment、empType 属性
 * @param {Array} employees - a 类型员工数组，每个元素包含 number, name, role, deparment, empType, key 等字段
 * @param {Array} treeData - 树形结构数据（可能包含嵌套的 children）
 * @returns {Array} - 更新后的树形结构
 */
function enrichTreeWithEmployeeInfo(employees: any[], treeData: string | any[]) {
    // 构建以 value 为 key 的员工信息映射表，便于快速查找
    const employeeMap = new Map();
    employees.forEach((emp: { number: any; }) => {
        employeeMap.set(emp.number, emp); // 注意：树节点用 value 字段匹配 a 类型的 number
    });

    // 递归处理树节点
    function traverse(nodes: any[]) {
        if (!Array.isArray(nodes)) return;

        nodes.forEach(node => {
            // 如果当前节点有 value（即叶子员工节点）
            if (node.value !== null && node.value !== undefined) {
                const emp = employeeMap.get(node.value);
                if (emp) {
                    // 添加 a 类型中的字段到树节点
                    node.label = node.label + "(" + emp.number + ")";
                    node.number = node.label
                    node.role = emp.role;
                    node.deparment = emp.deparment;
                    node.empType = emp.empType;
                    // 可选：也可以添加 name、key 等其他字段
                    // node.name = emp.name;
                    // node.key = emp.key;
                }
            }

            // 递归处理子节点
            if (Array.isArray(node.children)) {
                traverse(node.children);
            }
        });
    }

    // 处理根节点（注意：你的树外层有个 "全选" 节点）
    if (treeData && treeData.length > 0) {
        traverse(treeData);
    }

    return treeData;
}

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);
}

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

    })
}

const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree'
function getOrgAndManTree() {
    return request({
        url: treeUrl,
        method: 'post',
    });
}


</script>
<template>
	<div></div>
    
	<el-tree-select v-if="props.types!=3" node-key="number" v-model="value" :data="userList" multiple :render-after-expand="false"
            show-checkbox clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="1" filterable />
	<el-text v-else class="wordColor">{{valPrint(value)}}</el-text>
</template>
<style  lang='scss' scoped>
.wordColor{
	color:#000000;
}  
</style>