From 4401405741152119b3e2c583c71dddf8a401b04d Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Mon, 20 May 2024 11:46:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E9=80=89=E9=A1=B9=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=8B=E6=8B=89=E5=8D=95=E9=80=89=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/formControlAttr.vue |  51 ++---
 .../DesignForm/public/form/form.vue           | 181 +++++++++++++++++-
 .../DesignForm/public/form/formGroup.vue      |   9 +
 .../sysworkflow/lowcodepage/pageDesignes.vue  |  35 +++-
 4 files changed, 235 insertions(+), 41 deletions(-)

diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 838d32ff8..25964f9fa 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -56,6 +56,7 @@
         (e: 'openDialog', data: any): void
         (e: 'update:formOtherData', data: any): void
         (e: 'videoMsgChange', data: VideoMsg): void
+        (e: 'formNameChange', data: any): void
         //(e: 'update:formData', data: any): void
         //(e: 'update:formConfig', data: any): void
     }>()
@@ -993,6 +994,7 @@
     
     const fileSignAry = reactive<any>([])
     const controlChange = (obj: any, val: any) => {
+        
         // console.log("字段编辑--1--》",obj)
         // console.log("字段编辑--2--》",obj.eventName)
         // console.log("字段编辑--3--》",val)
@@ -1088,7 +1090,15 @@
             const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
             obj.path && getPropByPath(controlData.value, obj.path, newVal)
         }
+
+
+        //liwenxuan		关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改  start
+
+        emits('formNameChange',val);
+        //liwenxuan		关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改  end
+
     }
+
     /** 
     * 获取非负整数随机数 
     * @param Min 最小整数  
@@ -2230,9 +2240,7 @@ function handleDetermineGlxxszDialog(){
 function handleDetermineGlxxszDialogCheckBox(){
     glxxszDialogFlagCheckBox.value = false
 }
-/* function addShowField(val:string){
-    alert('addShowField:'+val)
-} */
+
 
 
 
@@ -2252,6 +2260,7 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
                         //新增了某个option
                         controlData.value.control.glxxsz.push(
                             {
+                                conditionField: controlData.value.name,
                                 optionLabel: changedOptions[i].label,
                                 optionValue: changedOptions[i].value,
                                 tableIndex: i,
@@ -2275,6 +2284,7 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
 function createRowForGlxxsz(){
     controlData.value.control.glxxszForCheckBox.push(
         {
+            
             selectedOptions:[],
             showFields:[],
             id: uuidv4().replaceAll('-','').toString(),
@@ -2286,6 +2296,8 @@ function deleteRowForGlxxsz(row: { id: any }){
     controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
 }
 
+//修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改
+
 //liwenxuan20240426 单选多选下拉 关联选项设置  end
 
 
@@ -3756,25 +3768,6 @@ const loadNextPage = () => {
                         </template>
                     </el-table-column>
                     <el-table-column fixed="right" label="显示以下组件" >
-                        
-                        <!-- <template #default="fieldScope">
-                            <div style="display:flex;align-items: center;flex-wrap: wrap;">
-                                <el-tag v-for="tag in tags" :key="tag.name" closable style="font-weight: 500; margin-right: 5px;margin-top: 5px;" effect="dark" >
-                                    {{ tag.name }}
-                                </el-tag>
-                                
-                                    <el-icon style="display:inline-block; width:20px;margin-top: 5px;height:20px;border: 1.5px #9C9DA0 solid; border-radius: 3px; font-size: large; cursor: pointer; position:relative" @click="addShowField(fieldScope.row.value)">
-                                        <Plus />
-                                        <div :class="`treeSelectDiv`+fieldScope.row.value" style="position: absolute;z-index: 999999; display:inline-block;">
-                                        <el-tree-select 
-                                            size=""
-                                            v-model="trseChVal" style="width: 290px;" :data="associatedFormsCurrentFormFieldTree"
-                                            check-strictly :render-after-expand="false"    />
-                                    </div>
-                                    </el-icon>
-                            </div> 
-                            </template> -->
-                            
                             <template #default="fieldScope">
                                 
                                 <el-tree-select v-model="controlData.control.glxxsz[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
@@ -3784,17 +3777,13 @@ const loadNextPage = () => {
             </template>
             <template #footer>
             <div class="dialog-footer">
-                <!-- <el-button @click="asfhTextCancelFillRoles">取消</el-button> -->
+                
                 <el-button type="primary" @click="handleDetermineGlxxszDialog">
                 确定
                 </el-button>
             </div>
         </template>
         </el-dialog>
-        <!-- 
-            
-            
-        -->
 
         <el-dialog v-model="glxxszDialogFlagCheckBox"  class="glxxsztc" top="150px" :close-on-click-modal="false" title="关联选项设置" :show-close="false" style="margin-top:70px;" width="50%" >
 
@@ -3819,11 +3808,11 @@ const loadNextPage = () => {
                     </el-table-column>
 
                     <el-table-column fixed="right" label="操作" width="130">
-                        <!-- <el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow(scope.row)"/>
                         
-                        <el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow(scope.row)" /> -->
+                        
+                        
                         <template #default="operateScope">
-                            <!-- <el-button v-if="controlData.control.glxxsz[controlData.control.glxxsz.length-1].id == operateScope.row.id" type="success" :icon="Plus" circle @click="createRowForGlxxsz(operateScope.row)" /> -->
+                            
                             <el-button  type="danger" :icon="Delete" circle @click="deleteRowForGlxxsz(operateScope.row)"/>
                         </template>
                         
@@ -3834,7 +3823,7 @@ const loadNextPage = () => {
             </template>
             <template #footer>
             <div class="dialog-footer">
-                <!-- <el-button @click="asfhTextCancelFillRoles">取消</el-button> -->
+                
                 <el-button type="primary" @click="handleDetermineGlxxszDialogCheckBox">
                 确定
                 </el-button>
diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue
index efd1bfce4..a3e59464a 100644
--- a/src/components/DesignForm/public/form/form.vue
+++ b/src/components/DesignForm/public/form/form.vue
@@ -115,7 +115,7 @@ const setWindowEvent = (bool?: boolean) => {
 }
 watch(
 	() => props.formData,
-    () => {
+    () => { 
 		emits('update:issave', false)
     },
     { deep: true }
@@ -239,16 +239,170 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 		}
 	// })
 	
+	//liwenxuan 关联选项设置效果实现 start
+	 console.log("监听表单-1-constControlChange-->",props.formData)
+	 console.log("监听表单-2-constControlChange-->",key)
+	 console.log("监听表单-3-constControlChange-->", value)
+	 console.log("监听表单-4-constControlChange-->",data)
+	 console.log("监听表单-5-constControlChange-->",type)
+	 console.log("监听表单-6-constControlChange-->",attribute)
+	
+
+
+
+	//得到当前表单各选项的值
+	//props.formData.config.hideField.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
+	
+	
+	
 	
-	// console.log("监听表单-1-constControlChange-->",props.formData)
-	// console.log("监听表单-2-constControlChange-->",key)
-	// console.log("监听表单-3-constControlChange-->", value)
-	// console.log("监听表单-4-constControlChange-->",data)
-	// console.log("监听表单-5-constControlChange-->",type)
-	// console.log("监听表单-6-constControlChange-->",attribute)
 
 
-	console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
+	//得到所有配置对象，包括radio,checkbox,select
+	const radioSelectShowConfigArr = []
+	const checkboxShowConfigArr = []
+	//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr2。----用于获取所有出现在配置中的字段。
+	const radioSelectArr2:any[] = []
+	for(let i = 0;i<props.formData.list.length;i++){
+		if(props.formData.list[i].type=="radio"||props.formData.list[i].type=="select"||props.formData.list[i].type=="checkbox"){
+			props.formData.config.hideField = [];
+		}
+		//console.log(props.formData.list[i].type)
+		if(props.formData.list[i].type=="radio"||props.formData.list[i].type=="select"){
+			radioSelectShowConfigArr.push(props.formData.list[i].control.glxxsz)
+			
+		}else if(props.formData.list[i].type=="checkbox"){
+			
+			checkboxShowConfigArr.push(props.formData.list[i].control.glxxszForCheckBox)
+		}
+	}
+	//数组深拷贝
+	const radioSelectShowConfigArr2 = JSON.parse(JSON.stringify(radioSelectShowConfigArr));
+	const checkboxShowConfigArr2 = JSON.parse(JSON.stringify(checkboxShowConfigArr));
+	console.log(radioSelectShowConfigArr2)
+	console.log(checkboxShowConfigArr2)
+
+
+
+	if(radioSelectShowConfigArr2.length>0){
+		for(let i = 0;i<radioSelectShowConfigArr2.length;i++){
+			if( radioSelectShowConfigArr2[i].length>0){
+				for(let j = 0;j<radioSelectShowConfigArr2[i].length;j++){
+					//数组深拷贝
+					const jArr = JSON.parse(JSON.stringify(radioSelectShowConfigArr2[i][j]));
+					const optionValueJArr = jArr.optionValue
+					if(jArr.showFields!=undefined&&jArr.showFields.length>0){
+						for(let n = 0;n<jArr.showFields.length;n++){
+							let fieldKeyArr = jArr.showFields[n].split(":")
+							let fieldKeyStr = fieldKeyArr[fieldKeyArr.length-1]
+							radioSelectArr2.push({
+								//conditionFieldKey:jArr.conditionField,
+								//conditionFieldValue:optionValueJArr,
+								toShowFieldKey:fieldKeyStr,
+							})
+						}
+					}
+				}
+			}
+		}
+	}
+
+	//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr3  ---用于组装完整显示隐藏条件、
+	const radioSelectArr3:any[] = []
+	if(radioSelectShowConfigArr2.length>0){
+		for(let i = 0;i<radioSelectShowConfigArr2.length;i++){
+			if( radioSelectShowConfigArr2[i].length>0){
+				for(let j = 0;j<radioSelectShowConfigArr2[i].length;j++){
+					//数组深拷贝
+					const jArr = JSON.parse(JSON.stringify(radioSelectShowConfigArr2[i][j]));
+					const optionValueJArr = jArr.optionValue
+					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],
+								})
+							}
+						}
+						
+					}
+				}
+			}
+		}
+	}
+
+
+
+	//暂时使用的隐藏数组，数据敲定后赋给props.formData.config.hideField
+	let hideFieldArr: any[] = [];
+	//但凡配置条件的字段先放入隐藏数组中
+	for(let i = 0;i< radioSelectArr2.length;i++){
+		hideFieldArr.push(radioSelectArr2[i].toShowFieldKey)
+	} 
+	hideFieldArr = Array.from(new Set(hideFieldArr))
+
+	nextTick(() => {
+		console.log(radioSelectArr3)
+		console.log(model.value)
+		let modelKeyArr = [];
+		for(let i= 0;i<props.formData.list.length;i++){
+			modelKeyArr.push(props.formData.list[i].name+"")
+		}
+		console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^"+modelKeyArr)
+
+
+		//根据条件的生效情况从隐藏数组中过滤字段
+		for(let i = 0;i< radioSelectArr3.length;i++){
+			for(let j = 0; j< modelKeyArr.length;j++){
+				
+				if(modelKeyArr[j]==radioSelectArr3[i].conditionFieldKey){
+					//console.log("当前：字段标识modelKeyArr[j]========="+modelKeyArr[j]+"字段标识modelKeyArr[j]的值===="+model.value[modelKeyArr[j]])
+					//console.log("规则：字段标识radioSelectArr3[i].conditionFieldKey========="+radioSelectArr3[i].conditionFieldKey+"conditionFieldValue的值======"+radioSelectArr3[i].conditionFieldValue)
+					
+					
+					//作为条件的字段的设定条件值等于其当前的值
+					if(radioSelectArr3[i].conditionFieldValue == model.value[modelKeyArr[j]]){
+						console.log("当前的值==="+model.value[modelKeyArr[j]])
+						console.log("modelKeyArr[j]==="+modelKeyArr[j])
+						console.log("作为条件的字段的设定条件值radioSelectArr3[i]==="+radioSelectArr3[i].conditionFieldValue)
+						console.log(radioSelectArr3[i].toShowFieldKey)
+						//hideFieldArr = hideFieldArr.filter( item => radioSelectArr3[i].toShowFieldKey.find((bItem: any) => item != bItem))
+						for(let n = 0; n < hideFieldArr.length; n++){
+							for(let m = 0; m < radioSelectArr3[i].toShowFieldKey.length; m++){
+								if(hideFieldArr[n] == radioSelectArr3[i].toShowFieldKey[m]){
+									hideFieldArr.splice(n,1);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		console.log(hideFieldArr)
+		props.formData.config.hideField?.push(...hideFieldArr)
+	});
+
+	
+	
+	
+	 //props.formData.config?.hideField?.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
+	//console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
 
 	if (typeof props.changeKeyVal === 'function') {
 		props.changeKeyVal(key, value,type,attribute)
@@ -274,7 +428,10 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 		emits('change', { key, value, model: model.value, data, tProp })
     }
 
-	
+		
+	/* 
+		
+	*/
 })
 const dictForm = computed(() => {
     const storage = window.localStorage.getItem('akFormDict')
@@ -295,6 +452,7 @@ const formProps = computed(() => {
 		dict: dictForm.value
     }
 })
+
 provide(constFormProps, formProps)
 
 // 提供一个方法，用于根据name从formData.list里查找数据
@@ -709,6 +867,11 @@ watch(
     }
 )
 // ------------------------数据处理结束------------------------
+
+
+
+
+
 // 重置表单方法
 const resetFields = () => {
     ruleForm.value.resetFields()
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 04f37fd10..eba74e198 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -209,15 +209,24 @@ const getFormItemStyle = (ele: FormList) => {
 }
 // 根据关联条件显示隐藏当前项
 const linksShow = (el: FormList, index: number) => {
+
+	/* 
+		
+	*/
     // 当前项设置了关联条件，当关联主体的值等于当前组件设定的值时
     if (!el.config) {
       	return true
     }
     const key = el.config.linkKey
+	//liwenxuan 关联选项设置效果实现  
+	//console.log("linksShow--------"+index+"--------"+JSON.stringify(el))
+	//仅第一次加载会触发，须将出现在配置条件中的表单项隐藏。
+	
     const value = el.config.linkValue
     const linkResult = el.config.linkResult
     if (key && value && type.value !== 5) {
 		const Fn = new Function('$', `return (${value})`)
+		console.log(Fn)
 		const pass = Fn(formProps.value.model)
 		if (linkResult === 'disabled') {
 			// 设置为disabled后返回显示状态
diff --git a/src/views/sysworkflow/lowcodepage/pageDesignes.vue b/src/views/sysworkflow/lowcodepage/pageDesignes.vue
index 77d27c647..f24521c4e 100644
--- a/src/views/sysworkflow/lowcodepage/pageDesignes.vue
+++ b/src/views/sysworkflow/lowcodepage/pageDesignes.vue
@@ -75,6 +75,11 @@ const formKeyVal =  computed({
 	}
 });
 
+
+
+
+
+
 // 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取
 provide('formDesignType', state.value.designType)
 const vueFileEl = ref()
@@ -564,7 +569,34 @@ onMounted(() => {
 //监听版本变化
 // watch(() =>versionId.value ,(val:string)=>{
 // 	emits('update:formVersion', val)
-// })	
+// })
+
+//liwenxuan		关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改  start
+const formNameChanged = (param1: any)=>{
+	for(let i = 0; i < state.value.formData.list.length; i++){
+		if(state.value.formData.list[i].type=="radio"||state.value.formData.list[i].type=="select"||state.value.formData.list[i].type=="checkbox"){
+			if(state.value.formData.list[i].control.glxxsz!=undefined&&state.value.formData.list[i].control.glxxsz.length>0){
+				state.value.formData.list[i].control.glxxsz = []
+				state.value.formData.list[i].options.push({
+					label: '',
+					value: ''
+                })
+				state.value.formData.list[i].options.pop();
+			}
+			if(state.value.formData.list[i].control.glxxszForCheckBox!=undefined&&state.value.formData.list[i].control.glxxszForCheckBox.length>0){
+				state.value.formData.list[i].control.glxxszForCheckBox = []
+			}
+		}
+	}
+	ElMessage({
+		message: '因字段标识改变，本表单的所有单选、多选、下拉的关联选项设置已重置，请重新设置。',
+		type: 'warning',
+	})
+}
+//liwenxuan		关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改  end
+
+
+
 </script>
 <template>
 	<div class="design_container">
@@ -598,6 +630,7 @@ onMounted(() => {
 			:form-list="state.formData.list"
 			:form-info="state.formData"
 			@open-dialog="openAceEditDrawer"
+			@form-name-change="formNameChanged"
 		/>
 		<ace-drawer
 			v-model="drawer.visible"