选择用户实现单选多选兼容

src/components/DesignForm/public/expand/rangedUserTree.vue

@@ -26,35 +26,64 @@ const isDataLoaded = ref(false) // 标记数据是否已加载
 const loading = ref(false) // 是否正在加载
 const treeSelectRef = ref() // 树选择器引用
 
-watch(value, (newValue) => {
-    console.log(newValue)
-    if (newValue.length > 0) {
-        let str = ""
-        let userAry = new Array
-        if(Array.isArray(newValue)){
-            newValue.forEach(item => {
-                userAry.push(item)
-            })
-            str = userAry.join(',')
-            emits('update:modelValue', str)
-        }else{
-            let a = new Array
-            a.push(newValue)
-            a.forEach(item => {
-                userAry.push(item)
-            })
-            str = userAry.join(',')
-            emits('update:modelValue', str)
-        }
-
+// 上一次选择的值，用于比较
+const lastSelectedValue = ref(null)
 
-
-        
+// 处理值变化
+const handleValueChange = (newValue) => {
+    if (!multiSelect.value) {
+        // 单选模式
+        if (newValue.length === 0) {
+            // 清空选择
+            emits('update:modelValue', '');
+            lastSelectedValue.value = null;
+        } else if (newValue.length === 1) {
+            // 单选模式下只有一个选择
+            const currentValue = newValue[0];
+            emits('update:modelValue', currentValue);
+            lastSelectedValue.value = currentValue;
+        } else {
+            // 当有多个选择时，找出新增的那个
+            const newSelections = newValue.filter(item => item !== lastSelectedValue.value);
+            if (newSelections.length > 0) {
+                // 只保留最新选择的那个
+                const latestSelection = newSelections[newSelections.length - 1];
+                value.value = [latestSelection];
+                emits('update:modelValue', latestSelection);
+                lastSelectedValue.value = latestSelection;
+            } else {
+                // 如果没有新增的选择，可能是取消选择，保持原样
+                value.value = newValue;
+            }
+        }
     } else {
-        let str = ""
-        emits('update:modelValue', str)
+        // 多选模式下的处理
+        if (newValue.length > 0) {
+            let str = ""
+            let userAry = new Array
+            if(Array.isArray(newValue)){
+                newValue.forEach(item => {
+                    userAry.push(item)
+                })
+                str = userAry.join(',')
+                emits('update:modelValue', str)
+            }else{
+                let a = new Array
+                a.push(newValue)
+                a.forEach(item => {
+                    userAry.push(item)
+                })
+                str = userAry.join(',')
+                emits('update:modelValue', str)
+            }
+        } else {
+            let str = ""
+            emits('update:modelValue', str)
+        }
     }
-}, { deep: true })
+}
+
+watch(value, handleValueChange, { deep: true })
 
 const multiSelect = computed(()=>{
     if(props.data.control.multiSelect && props.data.control.multiSelect == "1"){
@@ -79,10 +108,33 @@ function parseStringToArray(str: string) {
 
 onBeforeMount(() => {
     setTimeout(() => {
-        value.value = parseStringToArray(props.modelValue)
+        const initialValue = parseStringToArray(props.modelValue)
+        value.value = initialValue;
+        if (initialValue.length > 0 && !multiSelect.value) {
+            lastSelectedValue.value = initialValue[initialValue.length - 1];
+        }
     }, 500)
 })
 
+// 递归处理树节点，将部门节点设置为禁用
+const processTreeData = (data: any[]) => {
+    return data.map(node => {
+        const newNode = { ...node };
+        
+        // 如果multiSelect为false且id长度小于5，设置为禁用
+        if (!multiSelect.value && node.id && node.id.toString().length < 5) {
+            newNode.disabled = true;
+        }
+        
+        // 递归处理子节点
+        if (newNode.children && Array.isArray(newNode.children)) {
+            newNode.children = processTreeData(newNode.children);
+        }
+        
+        return newNode;
+    });
+}
+
 // 加载完整数据的函数
 const loadFullData = async () => {
     if (isDataLoaded.value) return treeData.value;
@@ -94,9 +146,13 @@ const loadFullData = async () => {
         await new Promise(resolve => setTimeout(resolve, 800));
         
         const result = await checkorgAndManTree1();
-        treeData.value = result;
+        
+        // 根据multiSelect的值处理数据
+        const processedData = !multiSelect.value ? processTreeData(result) : result;
+        
+        treeData.value = processedData;
         isDataLoaded.value = true;
-        return result;
+        return processedData;
     } catch (error) {
         console.error('加载组织数据失败:', error);
         return [];
@@ -178,8 +234,6 @@ function hasNodesInTree(tree) {
 
 </script>
 <template>
-
-
     <div class="tree-select-wrapper" >{{ multiSelect }}
         <el-tree-select 
             ref="treeSelectRef"
@@ -209,7 +263,6 @@ function hasNodesInTree(tree) {
     </div>
 </template>
 <style lang='scss' scoped>
-
 .tree-select-wrapper {
     position: relative;
     min-height: 40px;
@@ -252,5 +305,4 @@ function hasNodesInTree(tree) {
     color: #909399;
     font-size: 14px;
 }
-
-</style>
+</style>