用户组织联动选择 设置 界面开发

src/components/DesignForm/assembly/index.ts

@@ -1071,6 +1071,7 @@ export default [
 				control: {
 					range:[],
 					multiple: '',
+					connectUserComponent: {},
 				},
 				config: {},
 				styles: {

src/components/DesignForm/formControlPropertiNew.vue

@@ -831,6 +831,14 @@ const attrList = computed(() => {
         vIf: state.isSearch,
         vShow: ["table"],
       },
+      {
+        label: "关联用户",
+        value: config.orgCentent,
+        path: "config.orgCentent",
+        type: "orgCentent_ConnectUser",
+        vIf: state.isSearch,
+        vShow: ["orgCentent"],
+      },
       {
         label: "数据范围",
         value: config.expandUser,
@@ -4090,6 +4098,245 @@ watch(
   }
 );
 
+//用户组织联动选择 showSelectOrgConnectUser  start
+const selectOrgConnectUserDialogFlag = ref(false)
+function showSelectOrgConnectUser(){
+  selectOrgConnectUserDialogFlag.value = true
+}
+
+const expandUserNames = computed(()=>{
+  let data = JSON.parse(JSON.stringify(props.formList))
+  return findExpandUserNames(data)
+})
+const expandUserComponentsTree = computed(()=>{
+  let data = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTree1.value))
+  let result = filterTreeByExpandUsers(data,expandUserNames.value)
+  result = result[0].children
+  return result
+})
+
+
+
+function findExpandUserNames(data) {
+    //console.log(data)
+    const result = [];
+    
+    // 定义需要特殊处理的布局组件类型
+    const layoutTypes = ['tabs', 'grid', 'card', 'div']; // 注意：flex不在这里面
+    
+    function traverse(node, ancestors = []) {
+        // 处理_custom包装的数据结构
+        if (node && node._custom && node._custom.value) {
+            node = node._custom.value;
+        }
+        
+        // 检查当前节点是否有type属性
+        if (node && node.type) {
+            // 如果当前节点是expand-user类型
+            if (node.type === 'expand-user') {
+                // 创建当前元素的路径数组（祖先在前，自己在后）
+                const path = [...ancestors];
+                
+                // 获取expand-user的label，如果没有则使用默认值
+                const label = (node.item && node.item.label) || '选择用户';
+                
+                // 在最后一个元素（expand-user的name）后面拼接%^%和label
+                const lastElement = node.name + '%^%' + label;
+                path.push(lastElement);
+                
+                result.push(path);
+                return; // 找到expand-user后不需要继续遍历其子节点
+            }
+            
+            // 处理不同类型的组件
+            if (layoutTypes.includes(node.type)) {
+                // 对于特殊布局组件，使用类型标志
+                const newAncestors = [...ancestors, node.type];
+                
+                switch (node.type) {
+                    case 'tabs':
+                        if (node.columns && Array.isArray(node.columns)) {
+                            node.columns.forEach(tab => {
+                                if (tab.list && Array.isArray(tab.list)) {
+                                    tab.list.forEach(item => {
+                                        traverse(item, newAncestors);
+                                    });
+                                }
+                            });
+                        }
+                        break;
+                        
+                    case 'grid':
+                        if (node.columns && Array.isArray(node.columns)) {
+                            node.columns.forEach(column => {
+                                if (column.list && Array.isArray(column.list)) {
+                                    column.list.forEach(item => {
+                                        traverse(item, newAncestors);
+                                    });
+                                }
+                            });
+                        }
+                        break;
+                        
+                    case 'card':
+                    case 'div':
+                        if (node.list && Array.isArray(node.list)) {
+                            node.list.forEach(item => {
+                                traverse(item, newAncestors);
+                            });
+                        }
+                        break;
+                }
+            } else if (node.type === 'flex') {
+                // 对于flex组件，使用name而不是类型标志
+                const newAncestors = node.name ? [...ancestors, node.name] : ancestors;
+                
+                if (node.list && Array.isArray(node.list)) {
+                    node.list.forEach(item => {
+                        traverse(item, newAncestors);
+                    });
+                }
+                
+                // 对于flex类型，还需要检查tableData
+                if (node.tableData && Array.isArray(node.tableData)) {
+                    node.tableData.forEach(item => {
+                        traverse(item, newAncestors);
+                    });
+                }
+            } else {
+                // 对于其他组件，使用name
+                const newAncestors = node.name ? [...ancestors, node.name] : ancestors;
+                
+                // 检查是否有list属性并遍历
+                if (node.list && Array.isArray(node.list)) {
+                    node.list.forEach(item => {
+                        traverse(item, newAncestors);
+                    });
+                }
+                
+                // 对于table类型，还需要检查tableData
+                if (node.type === 'table' && node.tableData && Array.isArray(node.tableData)) {
+                    node.tableData.forEach(item => {
+                        traverse(item, newAncestors);
+                    });
+                }
+            }
+        }
+    }
+    
+    // 遍历输入数据
+    if (Array.isArray(data)) {
+        data.forEach(item => traverse(item));
+    } else {
+        traverse(data);
+    }
+    //console.log(result)
+    return result;
+}
+
+
+
+function filterTreeByExpandUsers(a, b) {
+    /* console.log(a)
+    console.log(b) */
+    // 从参数b中提取所有expand-user字段名（处理%^%格式）
+    const expandUserFields = new Set();
+    const pathMap = new Map(); // 用于存储字段名到完整路径的映射
+    const labelMap = new Map(); // 用于存储字段名到自定义label的映射
+    
+    b.forEach(path => {
+        if (path.length > 0) {
+            // 获取最后一个元素，并提取%^%前面的字段名和后面的自定义label
+            const lastElement = path[path.length - 1];
+            if (lastElement.includes('%^%')) {
+                const [fieldName, customLabel] = lastElement.split('%^%');
+                expandUserFields.add(fieldName);
+                pathMap.set(fieldName, path);
+                labelMap.set(fieldName, customLabel);
+            } else {
+                // 如果没有%^%，直接使用
+                expandUserFields.add(lastElement);
+                pathMap.set(lastElement, path);
+                // 如果没有自定义label，使用默认的"选择用户"
+                labelMap.set(lastElement, "选择用户");
+            }
+        }
+    });
+    
+    // 如果没有任何expand-user字段，返回空数组
+    if (expandUserFields.size === 0) {
+        return [];
+    }
+    
+    // 递归过滤树，只保留需要的节点，并添加label前缀
+    function filterNodes(nodes) {
+        const result = [];
+        
+        for (const node of nodes) {
+            // 检查当前节点是否是expand-user节点
+            const isTargetNode = node.treeAttrs && 
+                                node.treeAttrs.field && 
+                                expandUserFields.has(node.treeAttrs.field);
+            
+            // 检查子节点中是否有需要保留的节点
+            let hasTargetChildren = false;
+            if (node.children && node.children.length > 0) {
+                const filteredChildren = filterNodes(node.children);
+                if (filteredChildren.length > 0) {
+                    hasTargetChildren = true;
+                    node.children = filteredChildren;
+                } else {
+                    node.children = null;
+                }
+            }
+            
+            // 如果当前节点是目标节点，或者有目标子节点，则保留
+            if (isTargetNode || hasTargetChildren) {
+                // 如果是expand-user节点，检查是否需要添加前缀
+                if (isTargetNode) {
+                    const fieldName = node.treeAttrs.field;
+                    const customLabel = labelMap.get(fieldName) || "选择用户";
+                    
+                    // 查找该节点在b中的路径
+                    const path = pathMap.get(fieldName);
+                    if (path && path.length > 1) {
+                        // 检查路径中是否包含布局组件
+                        const layoutTypes = ['tabs', 'grid', 'card', 'div'];
+                        for (let i = 0; i < path.length - 1; i++) {
+                            if (layoutTypes.includes(path[i])) {
+                                let str = ""
+                                // 添加前缀到label
+                                if(path[i]=="tabs"){
+                                  str = "标签页"
+                                }else if(path[i]=="grid"){
+                                  str = "格栅布局"
+                                }else if(path[i]=="card"){
+                                  str = "卡片布局"
+                                }else if(path[i]=="div"){
+                                  str = "容器"
+                                }
+                                // 使用自定义label而不是节点的原始label
+                                node.label = `${str}-${customLabel}(${fieldName})`;
+                                break; // 只添加第一个遇到的布局组件前缀
+                            }
+                        }
+                    }
+                    
+                    // 如果没有布局组件前缀，直接使用自定义label和字段名
+                    if (!node.label.includes('(')) {
+                        node.label = `${customLabel}(${fieldName})`;
+                    }
+                }
+                
+                result.push(node);
+            }
+        }
+        
+        return result;
+    }
+    
+    return filterNodes(a);
+}
 //选择用户数据范围  start
 const tabsRef = ref(null); 
 const userRangeDialogFlag = ref(false)
@@ -4753,6 +5000,12 @@ const formatTooltip = (val: number) => {
 
               </el-row>
 
+              <el-row v-else-if="item.type === 'orgCentent_ConnectUser'">
+
+                <el-button @click="showSelectOrgConnectUser">选择关联的用户组件</el-button>
+
+              </el-row>
+
 
               <el-row v-else-if="item.type === 'expand-user'">
                   <el-button @click="handleUserRangeDialogFlag">可选用户设置</el-button>
@@ -6979,6 +7232,36 @@ const formatTooltip = (val: number) => {
 
   <!-- 关联选项设置弹窗 liwenxuan 20240426 end -->
 
+
+
+<!-- 用户组织联动选择  start-->
+
+<!--  -->
+<el-dialog
+    v-model="selectOrgConnectUserDialogFlag"
+    title="选择关联的用户组件"
+    top="150px"
+    style="margin-top: 70px"
+    
+  >
+    <!-- {{ expandUserComponentsTree }} -->
+      <el-tree-select
+        v-if="controlData.type == 'orgCentent'"
+          v-model="controlData.control.connectUserComponent"
+          style="width: 100%;"
+          :data="expandUserComponentsTree"
+        />
+      
+      
+    
+  </el-dialog>
+
+
+<!-- 用户组织联动选择  end -->
+
+
+
+
   <!-- 单选下拉多选选项来源value3--系统表单字段 start-->
 
   <el-dialog