多选效果实现v0.3

src/components/DesignForm/public/form/form.vue

@@ -7,6 +7,7 @@
 import '@/assets/scss/element-var.scss'
 import '@/assets/scss/index.scss'
 import FormGroup from './formGroup.vue'
+
 import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types'
 import { getRequest } from '@/api/DesignForm'
 import { useRoute, useRouter } from 'vue-router'
@@ -75,12 +76,14 @@ const props = withDefaults(
 			type:Boolean,
 			default:true
 		},
+		key:1
     }
 )
 const emits = defineEmits<{
 	(e: 'btnClick', type: string): void
 	(e: 'change', val: any): void // 表单组件值发生变化时
 	(e: 'update:issave', type: boolean): void
+	(e: 'refresh'): void
 }>()
 const route = useRoute()
 const router = useRouter()
@@ -170,6 +173,30 @@ const forEachGetFormModel = (list: FormList[], obj: any) => {
     })
 }
 
+function arrayEqual(a: string[], b: any[]) {
+	//alert("开始比较")
+    //先将数组排序
+	let a_ = JSON.parse(JSON.stringify(a));
+	for(let i = 0;i<a_.length;i++){
+		a_[i] = a_[i]+""
+	}
+	//console.log(a_)
+	//console.log(b)
+    a_ = a_.sort();
+    b = b.sort();
+    //判断数组长度是否相等，若不相等返回false
+    if (a_.length != b.length) 
+    return false;
+    //逐个比较数组元素
+    for (var i = 0; i < a_.length; ++i) {
+        if (a_[i] !== b[i]) 
+        return false;
+    }
+    return true;
+}
+
+
+
 interface hideFieldConditionArritem {
 	toShow:string
 	conditions: any[]
@@ -180,6 +207,9 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 	//以被默认隐藏的每个字段为key,显示该字段的所有条件的数组作为value,来作为该数组的每一项。
 	const hideFieldConditionArr:hideFieldConditionArritem[] = []
 
+	//保存应多选条件造成的应隐藏的字段
+	let hideFieldsFromCheckbox: string[] = []
+
 
 	for(let i = 0;i < hideFieldArr.length;i++){
 		hideFieldConditionArr.push({
@@ -197,6 +227,22 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 				console.log(j)
 				console.log(n) */
 				if(radioSelectArr3[i].toShowFieldKey[j]==hideFieldConditionArr[n].toShow){
+
+
+					if(Array.isArray(radioSelectArr3[i].conditionFieldValue)){
+						let valStr = "";
+						for(let x = 0;x<radioSelectArr3[i].conditionFieldValue.length;x++){
+							valStr = valStr+radioSelectArr3[i].conditionFieldValue[x]+","
+						}
+						hideFieldConditionArr[n].conditions.push({
+							conditionFrom:"radioOrSelect",//本条件来自于单选或者下拉
+							condition:[{//条件详细信息//当表单字段conditionField的值为conditionFieldValue时,显示hideFieldConditionArr[n]
+								conditionField:radioSelectArr3[i].conditionFieldKey,
+								conditionFieldValue:valStr
+							}]
+						})
+						
+					}else{
 						hideFieldConditionArr[n].conditions.push({
 							conditionFrom:"radioOrSelect",//本条件来自于单选或者下拉
 							condition:[{//条件详细信息//当表单字段conditionField的值为conditionFieldValue时,显示hideFieldConditionArr[n]
@@ -206,6 +252,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 						})
 					}
 				}
+			}
 			
 		}
 	}
@@ -216,23 +263,34 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 		let x = 0//满足显示条件的次数
 		
 		let toshow = hideFieldConditionArr[i].toShow
+		
 		let conditions = hideFieldConditionArr[i].conditions
 		//console.log(conditions)
 		for(let j = 0;j<conditions.length;j++){
-			if(conditions[j].conditionFrom == "radioOrSelect"){//本条件来自于单选或者下拉,其只有一项
 				let conditionField = conditions[j].condition[0].conditionField
 				let conditionFieldValue = conditions[j].condition[0].conditionFieldValue
 				console.log(conditionField)
+				if(conditionFieldValue.includes(",")){//来自多选
+					//alert(conditionFieldValue)
+
+					let conditionFieldValueArr = conditionFieldValue.split(",")
+					conditionFieldValueArr = conditionFieldValueArr.slice(0, -1);
+					console.log(conditionFieldValueArr)
 					console.log(conditionFieldValue)
+					nextTick(()=>{
 						for(let n = 0; n< modelKeyArr.length;n++){
 							if(modelKeyArr[n]==conditionField){
 								let count_1 = 0;
 								let trueValue = model.value[modelKeyArr[n]]
+								//alert(trueValue)
+								console.log(trueValue.length)
 								//console.log(modelKeyArr[n])
 								//console.log(trueValue)
-						if(trueValue==conditionFieldValue){
+								if(trueValue.length>0&&arrayEqual(trueValue,conditionFieldValueArr)){
 									//此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加.
-							
+									//alert("多选条件成功触发")
+									console.log(conditionField)
+									console.log(toshow)
 									let flag = false//其依赖的选项的父字段是否被隐藏.默认没被隐藏,
 									//如果此时的conditionField有可能被隐藏且已被隐藏,x不能++
 									for(let a = 0;a<hideFieldConditionArr.length;a++){
@@ -247,26 +305,71 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 											}
 										}
 									}
+									
 									if(flag==false){
+										
 										x++
-							}
 										
+										//alert(x)
+
+										hideFieldsFromCheckbox.push(toshow)
+										console.log(hideFieldArr)
+										for(let i = 0;i<hideFieldsFromCheckbox.length;i++){
 
+											alert(hideFieldsFromCheckbox[i])
+											hideFieldArr = hideFieldArr.filter((item: string) => item!=hideFieldsFromCheckbox[i])
+											//emits('refresh')
 										}
 									}
 								}
-			}else{//本条件来自于多选,其可能有多项
+							}
+						}
+					})
 					
+
+
+
+				}else{
+					console.log(conditionFieldValue)
+					for(let n = 0; n< modelKeyArr.length;n++){
+						if(modelKeyArr[n]==conditionField){
+							let count_1 = 0;
+							let trueValue = model.value[modelKeyArr[n]]
+							//console.log(modelKeyArr[n])
+							//console.log(trueValue)
+							if(trueValue==conditionFieldValue){
+								//此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加.
+								
+								let flag = false//其依赖的选项的父字段是否被隐藏.默认没被隐藏,
+								//如果此时的conditionField有可能被隐藏且已被隐藏,x不能++
+								for(let a = 0;a<hideFieldConditionArr.length;a++){
+									if(hideFieldConditionArr[a].toShow==conditionField){//当conditions.length>1说明时多选,=1说明是单选.
+										for(let b = 0;b<hideFieldConditionArr[a].conditions.length;b++){
+											for(let c = 0;c<hideFieldConditionArr[a].conditions[b].condition.length;c++){
+												if(hideFieldConditionArr[a].conditions[b].condition[c]==conditionField){
+													//暂时写到这里,先去组装多选条件数组.
+													console.log(1)
+												}
+											}
+										}
+									}
+								}
+								if(flag==false){
+									x++
+								}
+							}
+						}
+					}
 				}
 		}
 		
 		
 		if(x>0){
-			
 			hideFieldArr = hideFieldArr.filter((item: string) => item!=toshow)
 		}
 	}
 	
+
 	//将隐藏的字段值重置
 	for(let i = 0; i< hideFieldArr.length;i++){
 		//console.log(i+"dsfafdasdfasfsda===="+hideFieldArr[i]+"=====jiuopfdsahokjuhuiofadshuiofadsjbknfdjisahuifhjken wij================"+model.value[hideFieldArr[i]])
@@ -432,13 +535,16 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 	//将出现在多选配置中的字段放入radioSelectArr2,radioSelectArr2是未去重的所有可能被隐藏的字段
 	if(checkboxShowConfigArr2.length>0){
 		for(let i = 0;i<checkboxShowConfigArr2.length;i++){
+			//console.log(i)
 			if(checkboxShowConfigArr2[i].length>0){
 				for(let j = 0;j<checkboxShowConfigArr2[i].length;j++){
+					//console.log(j)
+					//console.log(checkboxShowConfigArr2[i][j].showFields)
 					if(checkboxShowConfigArr2[i][j].showFields.length>0){
 						for(let n = 0; n<checkboxShowConfigArr2[i][j].showFields.length;n++){
 							let fieldKeyArr = checkboxShowConfigArr2[i][j].showFields[n].split(":")
 							let fieldKeyStr = fieldKeyArr[fieldKeyArr.length-1]
-							//alert(fieldKeyStr)
+							//console.log(fieldKeyStr)
 							radioSelectArr2.push({
 								toShowFieldKey:fieldKeyStr,
 							})
@@ -450,6 +556,7 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 		}
 	} 
 
+
 	//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr3  ---用于组装完整显示隐藏条件、
 	const radioSelectArr3:any[] = []
 	
@@ -490,8 +597,46 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 			}
 		}
 	}
-	//console.log(radioSelectShowConfigArr2)
+	console.log(radioSelectArr3)
+	//将多选配置也放入radioSelectArr3
+	if(checkboxShowConfigArr2.length>0){
+		for(let i = 0;i<checkboxShowConfigArr2.length;i++){
+			if( checkboxShowConfigArr2[i].length>0){
+				for(let j = 0;j<checkboxShowConfigArr2[i].length;j++){
+					//数组深拷贝
+					const jArr = JSON.parse(JSON.stringify(checkboxShowConfigArr2[i][j]));
+					const optionValueJArr = jArr.selectedOptions
+					if(jArr.showFields!=undefined&&jArr.showFields.length>0){
+						if(jArr.showFields.length>1){
+							let arr1 = []
+							for(let n = 0;n<jArr.showFields.length;n++){
+								let fieldKeyArr = jArr.showFields[n].split(":")
+								let fieldKeyStr = fieldKeyArr[fieldKeyArr.length-1]
+								arr1.push(fieldKeyStr)
+							}
+							radioSelectArr3.push({
+								conditionFieldKey:jArr.conditionField,
+								conditionFieldValue:optionValueJArr,
+								toShowFieldKey:arr1,
+							})
+						}else{//等于1
+							for(let n = 0;n<jArr.showFields.length;n++){
+								let fieldKeyArr = jArr.showFields[n].split(":")
+								let fieldKeyStr = fieldKeyArr[fieldKeyArr.length-1]
+								radioSelectArr3.push({
+									conditionFieldKey:jArr.conditionField,
+									conditionFieldValue:optionValueJArr,
+									toShowFieldKey:[fieldKeyStr],
+								})
+							}
+						}
 						
+					}
+				}
+			}
+		}
+	}
+	console.log(radioSelectArr3)
 
 
 	//暂时使用的隐藏数组，数据敲定后赋给props.formData.config.hideField

src/views/sysworkflow/lowcodepage/pageDesignes.vue

@@ -595,7 +595,11 @@ const formNameChanged = (param1: any)=>{
 }
 //liwenxuan		关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改  end
 
+let index = ref(0)
 
+function refreshFunc(){
+	index.value = index.value+1
+}
 
 </script>
 <template>
@@ -651,9 +655,12 @@ const formNameChanged = (param1: any)=>{
 			<form-design
 				v-if="state.previewVisible"
 				ref="previewForm"
+				:key="index"
 				:form-data="state.formDataPreview"
 				:dict="state.formDict"
 				:type="1"
+				@refresh="refreshFunc"
+				
 			/>
 			<template #footer>
 				<div class="dialog-footer">