选择用户,性能优化,样式优化

src/components/lowCode/assistant/rangedUserTree.vue

@@ -39,18 +39,18 @@ watch(value,(newValue)=>{
 		let userAry = new Array
 		
 		newValue.forEach(item =>{
-			console.log(item)
+			//console.log(item)
 			userAry.push(item)
 			
 		})
 		str = userAry.join(',')
-		console.log(str)
+		//console.log(str)
 		emits('update:modelValue', str)
 		// userlist.value = userAry.join(',')
 		// 
 	}else{
 		let str = ""
-		console.log(str)
+		//console.log(str)
 		emits('update:modelValue', str)
 	}
 },{ deep: true })
@@ -74,13 +74,20 @@ function parseStringToArray(str:string) {
 onBeforeMount(() => {
     // 启动检查
     checkReady()
-	getManConts()
+	
 	//getTree()
 	setTimeout(()=>{
 		value.value = parseStringToArray(props.modelValue)
 	},500 )
 })
 
+onMounted(()=>{
+    setTimeout(()=>{
+        getManConts()
+    },300)
+    
+})
+
 const url = "/javasys/lowCode/manCont/getManContsByKeys"
 //console.log(attrs.value)
 const keys = computed(()=>{
@@ -90,7 +97,7 @@ const keys = computed(()=>{
 		return attrs.orgRange
 	}
 })
-function getManContsByKeys() {
+/* function getManContsByKeys() {
     //console.log(11111)
     
         return request({
@@ -101,11 +108,89 @@ function getManContsByKeys() {
 			},
         });
     
-}
+} */
 const options = ref([])
+const convertToAFormatComplate = ref(false)
+function convertToAFormat(bTree, idArray) {
+    const nodeMap = {};
+
+    // 递归收集节点，增加详细日志
+    function collectNodes(node, level = 0) {
+        if (!node) {
+            //console.log(`跳过无效节点: ${node}`);
+            return;
+        }
+        // 记录当前节点信息（方便调试）
+        //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);
+        }
+    }
+
+    // 处理根节点（兼容数组或单个对象）
+    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);
+    }
+
+    // 打印收集到的所有节点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;
+}
 
 function getManConts(){
-	getManContsByKeys().then(({data})=>{
+
+
+    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
+
+
+	/* getManContsByKeys().then(({data})=>{
 		data.forEach((element: any) => {
 			element.icon = element.name+"("+element.number+")"
 			element.deparment = ""+element.deparment+">"+element.icon
@@ -115,7 +200,7 @@ function getManConts(){
 		options.value = data
 		//console.log(options.value)
 		
-	})
+	}) */
 }
 
 /**
@@ -145,11 +230,13 @@ const userList = computed({
     get() {
 
 
-        return [{
+        /* return [{
             id: '全选',
             label: '全选',
             children: [...resData.value]
-        }]
+        }] */
+
+        return resData.value
 
 
 
@@ -337,7 +424,7 @@ watch(props.orgAndManTree,(newValue)=>{
 
     const checkReady = () => {
 
-        if (props.orgAndManTree) {
+        if (props.orgAndManTree&&convertToAFormatComplate.value&&props.orgAndManTree.children.length>0) {//
             getTree()
         } else {
             // 未就绪，100ms 后重试（非阻塞）
@@ -357,49 +444,23 @@ function getTree() {
             //alert(1)
 
             let data1 = processTreeData(props.orgAndManTree)
-                //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
-        }/* else{
-            getOrgAndManTree().then(({ data }) => {
-
-
-                let data1 = processTreeData(data)
-                //console.log(data1)
+            //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 = [{
+                /* userList.value = [{
                     id: '全选',
                     label: '全选',
                     children: [...resData.value]
-                }]
+                }] */
+                userList.value = resData.value
 
                 enrichTreeWithEmployeeInfo(options.value, userList.value)
                 loading.value = false
-
-            })
-        } */
-    
+        }
     
 
     
@@ -422,8 +483,50 @@ function getOrgAndManTree() {
             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>
+<style  lang='scss' >
 .wordColor{
 	color:#000000;
 }  
+
+
+
+/* ::v-deep .el-tree-node__expand-icon {
+
+  font-size: 38px; 
+ 
+  width: 34px; 
+  height: 34px;
+  line-height: 34px; 
+}
+
+
+::v-deep .el-tree-node__expand-icon::before {
+  font-size: 38px; 
+}
+ */
+
+.el-tree-node__expand-icon {
+    color: var(--el-tree-expand-icon-color);
+    cursor: pointer;
+    font-size: 18px;
+    transform: rotate(0deg);
+    transition: transform var(--el-transition-duration) ease-in-out;
+}
+
+.el-tree {
+    --el-tree-node-content-height: 30px;
+    --el-tree-node-hover-bg-color: var(--el-fill-color-light);
+    --el-tree-text-color: var(--el-text-color-regular);
+    --el-tree-expand-icon-color: var(--el-text-color-placeholder);
+    background: var(--el-fill-color-blank);
+    color: var(--el-tree-text-color);
+    cursor: default;
+    font-size: var(--el-font-size-base);
+    position: relative;
+}
+
+.el-tree-select__popper .el-tree-node__expand-icon {
+    margin-left: 7px;
+    margin-right: 7px;
+}
 </style>