选择用户,性能优化,解决手机端树不显示

src/components/formTable/formItemGroup.vue

@@ -11,6 +11,7 @@ import { jsonParseStringify,getGroupName } from '@/utils/lowCode/item/index'
 import { constFormBtnEvent,constFormProps } from '@/api/lowCode/utils';
 import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm'
 import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
+import { useAttrs,computed, onMounted, nextTick,ref,watch,onBeforeMount} from 'vue'
 
 const props = withDefaults(
     defineProps<{
@@ -18,6 +19,7 @@ const props = withDefaults(
         dataType?: String
         tableinfo?:formTableInfo
 		alldata?:any
+		orgAndManTree?: any;
     }>(),
     {
         data: () => {
@@ -44,11 +46,47 @@ const unWatch = watch(
 const activeKey = computed(() => {
     return store.activeKey
 })
-onMounted(() => {
+
+
+
+
+
+
+onBeforeMount(() => {
+	getAsfs()
+	//getTree1()
+})
+/* const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree'
+const orgAndManTree = ref()
+function getOrgAndManTree() {
+    return request({
+        url: treeUrl,
+        method: 'post',
+    });
+} */
+/* function getTree1() {
+    getOrgAndManTree().then(({ data }) => {
+        orgAndManTree.value = data
+
+    })
+} */
+
+
+/* onMounted(() => {
     // console.log("初始", state)
     // console.log("初始1", dataList.value)
-	getAsfs()
+	//getAsfs()
+	if(rangedUserTrees.length>0){
+
+	}
 })
+
+ */
+
+
+
+
+
 watch(()=>dataList.value,(val:any) => {
     // console.log("监听组件列表变化", val)
 },{
@@ -100,6 +138,7 @@ const clickBtn = (control: any) => {
 let emits = defineEmits(["asfValueChanged"]);
 const asfs: any[] = [];
 const tables: any[] = [];
+const rangedUserTrees: any[] = [];
 
 function getAsfs() {
 	setTimeout(() => {
@@ -111,6 +150,8 @@ function getAsfs() {
 			//console.log(dataList.value[i])
 			if (dataList.value[i].type == "associatedForms") {
 			asfs.push(dataList.value[i]);
+			} else if(dataList.value[i].type == "expand-user"){
+				rangedUserTrees.push(dataList.value[i])
 			} else if (
 			dataList.value[i].type == "card" ||
 			dataList.value[i].type == "flex" ||
@@ -124,6 +165,8 @@ function getAsfs() {
 			dataList.value[i].list.forEach((element: any) => {
 				if (element.type == "associatedForms") {
 				asfs.push(element);
+				}else if(element.type == "expand-user"){
+					rangedUserTrees.push(element)
 				}
 			});
 			} else if (dataList.value[i].type == "grid") {
@@ -136,6 +179,8 @@ function getAsfs() {
 
 					if (a.type == "associatedForms") {
 					asfs.push(a);
+					}else if (a.type == "expand-user") {
+					rangedUserTrees.push(a);
 					}
 				}
 				}
@@ -150,6 +195,8 @@ function getAsfs() {
 
 					if (a.type == "associatedForms") {
 					asfs.push(a);
+					}else if(a.type == "expand-user"){
+					rangedUserTrees.push(a);
 					} else if (a.type == "flex" || a.type == "table") {
 					if (a.type == "table") {
 						tables.push(dataList.value[i]);
@@ -161,6 +208,8 @@ function getAsfs() {
 
 						if (q.type == "associatedForms") {
 							asfs.push(q);
+						}else if (q.type == "expand-user") {
+							rangedUserTrees.push(q);
 						}
 						}
 					}
@@ -507,7 +556,7 @@ const linksIf = (obj: FormList) => {
 							:label="item.label"
 							:key="tIndex"
 						>
-							<FormItemGroup :data="item.list" :tableinfo="tableinfo" data-type="not-nested" />
+							<FormItemGroup :data="item.list" :tableinfo="tableinfo" :org-and-man-tree="orgAndManTree" data-type="not-nested" />
 							
 						</el-tab-pane>
 					</el-tabs>
@@ -539,7 +588,7 @@ const linksIf = (obj: FormList) => {
 				<template v-else-if="element.type === 'table'">
 					<el-divider v-if="element.item&&element.item.label" content-position="left" >{{element.item.label}}</el-divider>
 					<!-- <el-text class="tableTitle" v-if="element.item&&element.item.label">{{element.item.label}}</el-text> -->
-					<TablePage  :data="element" :type="type" @asf-value-changed="asfValueChanged" />
+					<TablePage  :data="element" :tableinfo="tableinfo"  :org-and-man-tree="orgAndManTree" :type="type" @asf-value-changed="asfValueChanged" />
 				</template>
 				<template v-else-if="element.type === 'grid'">
 					<el-row class="form-row" :style="type === 15?'padding: 0 0 20px 0;':''" :class="[element.className]">
@@ -629,7 +678,7 @@ const linksIf = (obj: FormList) => {
 						</el-button>
 					</div>
 				</template>
-				<NewFormItem v-else :data="element" :tableinfo="tableinfo" @asf-value-changed="asfValueChanged" />
+				<NewFormItem v-else :data="element" :tableinfo="tableinfo" :org-and-man-tree="orgAndManTree" @asf-value-changed="asfValueChanged" />
 			</div>
         </div>
     

src/components/formTable/index.vue

@@ -12,6 +12,7 @@ import { appendOrRemoveStyle, constControlChange, constFormBtnEvent, constFormPr
 
 import { currencyFormApiSubmit, createAppTask, saveDraftAgain } from '@/api/lowCode/taskapi/management'
 import formatResult from '@/utils/lowCode/formatResult'
+import { useAttrs,computed, onMounted, nextTick,ref,watch,onBeforeMount} from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -1888,6 +1889,29 @@ watch(
 	{ deep: true }
 );
 
+onBeforeMount(() => {
+	getAsfs()
+	getTree1()
+})
+const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree'
+const orgAndManTree = ref()
+function getOrgAndManTree() {
+    return request({
+        url: treeUrl,
+        method: 'post',
+    });
+}
+function getTree1() {
+    getOrgAndManTree().then(({ data }) => {
+        orgAndManTree.value = data
+
+    })
+}
+
+
+
+const rangedUserTrees: any[] = [];
+
 function getAsfs() {
 	setTimeout(() => {
 		let dataList = ref({});
@@ -1895,8 +1919,11 @@ function getAsfs() {
 
 		if (dataList && Array.isArray(dataList.value) && dataList.value.length > 0) {
 		for (let i = 0; i < dataList.value.length; i++) {
+			//console.log(dataList.value[i])
 			if (dataList.value[i].type == "associatedForms") {
 			asfs.push(dataList.value[i]);
+			} else if(dataList.value[i].type == "expand-user"){
+				rangedUserTrees.push(dataList.value[i])
 			} else if (
 			dataList.value[i].type == "card" ||
 			dataList.value[i].type == "flex" ||
@@ -1910,6 +1937,8 @@ function getAsfs() {
 			dataList.value[i].list.forEach((element: any) => {
 				if (element.type == "associatedForms") {
 				asfs.push(element);
+				}else if(element.type == "expand-user"){
+					rangedUserTrees.push(element)
 				}
 			});
 			} else if (dataList.value[i].type == "grid") {
@@ -1922,6 +1951,8 @@ function getAsfs() {
 
 					if (a.type == "associatedForms") {
 					asfs.push(a);
+					}else if (a.type == "expand-user") {
+					rangedUserTrees.push(a);
 					}
 				}
 				}
@@ -1936,6 +1967,8 @@ function getAsfs() {
 
 					if (a.type == "associatedForms") {
 					asfs.push(a);
+					}else if(a.type == "expand-user"){
+					rangedUserTrees.push(a);
 					} else if (a.type == "flex" || a.type == "table") {
 					if (a.type == "table") {
 						tables.push(dataList.value[i]);
@@ -1947,6 +1980,8 @@ function getAsfs() {
 
 						if (q.type == "associatedForms") {
 							asfs.push(q);
+						}else if (q.type == "expand-user") {
+							rangedUserTrees.push(q);
 						}
 						}
 					}
@@ -1959,6 +1994,78 @@ function getAsfs() {
 		}
 	}, 500);
 }
+
+/* function getAsfs() {
+	setTimeout(() => {
+		let dataList = ref({});
+		dataList.value = props.formData.list;
+
+		if (dataList && Array.isArray(dataList.value) && dataList.value.length > 0) {
+		for (let i = 0; i < dataList.value.length; i++) {
+			if (dataList.value[i].type == "associatedForms") {
+			asfs.push(dataList.value[i]);
+			} else if (
+			dataList.value[i].type == "card" ||
+			dataList.value[i].type == "flex" ||
+			dataList.value[i].type == "div" ||
+			dataList.value[i].type == "table"
+			) {
+			if (dataList.value[i].type == "table") {
+				tables.push(dataList.value[i]);
+			}
+
+			dataList.value[i].list.forEach((element: any) => {
+				if (element.type == "associatedForms") {
+				asfs.push(element);
+				}
+			});
+			} else if (dataList.value[i].type == "grid") {
+			let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
+
+			if (columns.length > 0) {
+				for (let z = 0; z < columns.length; z++) {
+				for (let x = 0; x < columns[z].list.length; x++) {
+					let a = JSON.parse(JSON.stringify(columns[z].list[x]));
+
+					if (a.type == "associatedForms") {
+					asfs.push(a);
+					}
+				}
+				}
+			}
+			} else if (dataList.value[i].type == "tabs") {
+			//tabs标签页有可能再嵌套一层flex或者table
+			let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
+			if (columns.length > 0) {
+				for (let z = 0; z < columns.length; z++) {
+				for (let x = 0; x < columns[z].list.length; x++) {
+					let a = JSON.parse(JSON.stringify(columns[z].list[x]));
+
+					if (a.type == "associatedForms") {
+					asfs.push(a);
+					} else if (a.type == "flex" || a.type == "table") {
+					if (a.type == "table") {
+						tables.push(dataList.value[i]);
+					}
+
+					if (a.list.length > 0) {
+						for (let m = 0; m < a.list.length; m++) {
+						let q = JSON.parse(JSON.stringify(a.list[m]));
+
+						if (q.type == "associatedForms") {
+							asfs.push(q);
+						}
+						}
+					}
+					}
+				}
+				}
+			}
+			}
+		}
+		}
+	}, 500);
+} */
 //liwenxuan 241217 数据范围动态 end
 
 
@@ -1987,7 +2094,7 @@ defineExpose({
 				'design-form': type === 5,
 				'detail-form': type === 3
 			}">
-			<FormItemGroup :tableinfo="formData.form" :data="formData.list" :alldata="formData" />
+			<FormItemGroup :tableinfo="formData.form" :data="formData.list" :alldata="formData" :org-and-man-tree="orgAndManTree" />
 			<slot></slot>
 		</el-form>
 	</div>

src/components/lowCode/assistant/rangedUserTree.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
 		disabled?: boolean
 		types?:number
         control?:any
+        orgAndManTree?: any;
     }>(),
     {}
 )
@@ -71,8 +72,10 @@ function parseStringToArray(str:string) {
     }
 }
 onBeforeMount(() => {
+    // 启动检查
+    checkReady()
 	getManConts()
-	getTree()
+	//getTree()
 	setTimeout(()=>{
 		value.value = parseStringToArray(props.modelValue)
 	},500 )
@@ -323,31 +326,83 @@ function processTreeData(node: any) {
 
     return processNode(node);
 }
+/* 
+watch(props.orgAndManTree,(newValue)=>{
+    alert(1)
+	getTree()
+},{ deep: true })
+ */
 
-function getTree() {
-    getOrgAndManTree().then(({ data }) => {
 
 
-        let data1 = processTreeData(data)
-        //console.log(data1)
-        let data2 = filterTreeByList(data1.children, options.value)
+    const checkReady = () => {
 
-        //console.log(data2)
-        data1.children = data2
+        if (props.orgAndManTree) {
+            getTree()
+        } else {
+            // 未就绪，100ms 后重试（非阻塞）
+            setTimeout(checkReady, 100)
+        }
 
-        //console.log(resData.value)
-        //console.log(`获取穿梭框接口数据`);
-        resData.value = data1.children
-        userList.value = [{
-            id: '全选',
-            label: '全选',
-            children: [...resData.value]
-        }]
+    }
+
+    
+
+
+function getTree() {
 
-        enrichTreeWithEmployeeInfo(options.value, userList.value)
-        loading.value = false
+    
+        
+        if(props.orgAndManTree){
+            //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)
+                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'

src/components/lowCode/newFormItem.vue

@@ -64,6 +64,7 @@ const props = withDefaults(
 		numrun?:any
 		rowIndex?:any
         tableinfo?:any
+        orgAndManTree?: any;
     }>(),
     {}
 )
@@ -485,6 +486,7 @@ const labelMaxWidth = computed(()=>{
             :disabled="judgeIsDisabled(data.name)"
             :options="options"
             v-model="value"
+            :tableinfo="tableinfo" :org-and-man-tree="orgAndManTree"
         />
     </el-form-item>
 </template>

src/components/lowCode/tablePage.vue

@@ -14,6 +14,8 @@ const props = withDefaults(
     defineProps<{
       	data: any;
 		type: number;
+		tableinfo?: any;
+		orgAndManTree?: any;
     }>(),
     {
 		data: () => {
@@ -208,6 +210,8 @@ function asfValueChanged(val:any){
 						v-model="itval[item.name]"
 						:tProp="`${data.name}.${itIndex}.${item.name}`"
 						:row-index="itIndex"
+						:tableinfo="tableinfo"
+						:org-and-man-tree="orgAndManTree"
 						:data="item"
 						@asf-value-changed="asfValueChanged"
 					/>