From 0a8a22894bfc4650539f31221b81d49f92806f4a Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Wed, 29 May 2024 16:11:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=85=B3=E5=85=B3=E8=81=94=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E8=AE=BE=E7=BD=AEv0.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/assembly/index.ts   | 14 ++-
 src/components/DesignForm/formControlAttr.vue | 76 ++++++++++++++++-
 .../DesignForm/public/form/form.vue           | 85 ++++++++++++++++---
 src/types/components.d.ts                     |  8 ++
 4 files changed, 168 insertions(+), 15 deletions(-)

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 7d739262f..30f0412d7 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -164,7 +164,19 @@ const selectOption: any = [
 			icon: 'switch',
 			iconFont: 'fa-toggle-on',
 			control: {
-				modelValue: false
+				modelValue: "",
+				glxxszSwitch:[
+					{
+						conditionField:'',
+						openValue:"",
+						showFields:[]
+					},
+					{
+						conditionField:'',
+						offValue:"",
+						showFields:[]
+					},
+				]
 			},
 			config: {},
 			styles:{
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index d7e815205..63faee8de 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -2222,6 +2222,14 @@ function delRole(id:String){
 
 const glxxszDialogFlag = ref(false)
 const glxxszDialogFlagCheckBox = ref(false)
+const glxxszDialogFlagSwitch = ref(false)
+function handelGlxxszDialogSwitch(){
+    if(controlData.value.control.activeValue==undefined||controlData.value.control.inactiveValue==undefined){
+        alert("请先设置开关状态打开/关闭时的值")
+    }else{
+        glxxszDialogFlagSwitch.value = true
+    }
+}
 function handelGlxxszDialog(){
     if(controlData.value.options.length===0){
         alert("无可配置选项，请先添加。")
@@ -2237,9 +2245,27 @@ function handelGlxxszDialogCheckbox(){
 function handleDetermineGlxxszDialog(){
     glxxszDialogFlag.value = false
 }
+function handleDetermineGlxxszDialogSwitch(){
+    glxxszDialogFlagSwitch.value = false
+}
 function handleDetermineGlxxszDialogCheckBox(){
     glxxszDialogFlagCheckBox.value = false
 }
+//同步开关的设置值和开关关联选项设置的值
+watch(()=>controlData.value.control,(newVal) => {
+    if(typeof(newVal)!="undefined"){
+        if(typeof(newVal.glxxszSwitch)!="undefined"){
+            if(typeof(controlData.value.control.activeValue)!="undefined"){
+                controlData.value.control.glxxszSwitch[0].openValue = controlData.value.control.activeValue
+                controlData.value.control.glxxszSwitch[0].conditionField = controlData.value.name
+            }
+            if(typeof(controlData.value.control.inactiveValue)!="undefined"){
+                controlData.value.control.glxxszSwitch[1].offValue = controlData.value.control.inactiveValue
+                controlData.value.control.glxxszSwitch[1].conditionField = controlData.value.name
+            }
+        }
+    }
+},{ deep: true })
 
 
 
@@ -2295,8 +2321,8 @@ function createRowForGlxxsz(){
 function deleteRowForGlxxsz(row: { id: any }){
     controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
 }
+/*  */
 
-//修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改
 
 //liwenxuan20240426 单选多选下拉 关联选项设置  end
 
@@ -2920,6 +2946,9 @@ const loadNextPage = () => {
                                 </el-form-item>
                             </div>
                         </div>
+                        <div v-if="showHide(['switch'],true)">
+                            <el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
+                        </div>
                         <div v-if="showHide(['radio','select',],true)">
                             <el-button @click="handelGlxxszDialog">关联选项设置</el-button>
                         </div>
@@ -3831,6 +3860,51 @@ const loadNextPage = () => {
             </template>
             </el-dialog>
 
+
+
+
+
+            <el-dialog  v-model="glxxszDialogFlagSwitch" class="glxxsztc" top="150px" :close-on-click-modal="false" title="关联选项设置" :show-close="false" style="margin-top:70px;" width="50%" >
+
+                        
+                        
+                <template v-if="controlData.type=='switch'">
+                    <div style="border:#13ce66 1px solid">当开关打开时显示:
+                        <el-tree-select v-model="controlData.control.glxxszSwitch[0].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                    </div>
+                    <div style="border:red 1px solid">当开关关闭时显示:
+                        <el-tree-select v-model="controlData.control.glxxszSwitch[1].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                    </div>
+                    
+                    <!-- <el-table  
+                    :data="controlData.options" stripe  border style="width: 100%;min-height:50px;max-height:500px;overflow-y:auto" 
+                                :cell-style="{height: '55px',paddingLeft: '15px'}" :header-cell-style="{background:'#F3F4F7',color:'#555',}" 
+                                >
+                    
+                        <el-table-column prop="link" label="当开关状态为" width="220">
+                            <template #default="optionScope">
+                                <span style="background-color: #E8EAEE;border-radius: 8px;padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;">{{ optionScope.row.label }}</span>
+                                
+                            </template>
+                        </el-table-column>
+                        <el-table-column fixed="right" label="显示以下组件" >
+                                <template #default="fieldScope">
+                                    
+                                    <el-tree-select v-model="controlData.control.glxxsz[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                                </template>
+                        </el-table-column>
+                    </el-table> -->
+                </template>
+                <template #footer>
+                <div class="dialog-footer">
+                    
+                    <el-button type="primary" @click="handleDetermineGlxxszDialogSwitch">
+                    确定
+                    </el-button>
+                </div>
+                </template> 
+            </el-dialog>
+
         <!-- 关联选项设置弹窗 liwenxuan 20240426 end -->
     </template>
 
diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue
index 8774d306e..a91fd0381 100644
--- a/src/components/DesignForm/public/form/form.vue
+++ b/src/components/DesignForm/public/form/form.vue
@@ -164,7 +164,9 @@ const forEachGetFormModel = (list: FormList[], obj: any) => {
 			})
 		} else if (['card', 'div'].includes(item.type)) {
 			forEachGetFormModel(item.list, obj)
-		} else {
+		} /* else if(['switch'].includes(item.type)){
+			console.log(item)
+		} */else {
 			const excludeType = ['title', 'divider', 'txt', 'button']
 			if (excludeType.indexOf(item.type) === -1) {
 				obj[item.name] = jsonParseStringify(item.control.modelValue)
@@ -219,6 +221,9 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 		/* console.log("所有字段modelKeyArr^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^")
 		console.log(modelKeyArr) */
 
+		//console.log("当前表单的值-------------------")
+		//console.log(model.value)
+
 		
 
 		//当前处于显示状态的默认隐藏的字段
@@ -295,7 +300,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 					console.log(conditionFieldValue) */
 					for(let n = 0; n< modelKeyArr.length;n++){
 						if(modelKeyArr[n]==conditionField){
-							let count_1 = 0;
+							//let count_1 = 0;
 							let trueValue = model.value[modelKeyArr[n]]
 							if(trueValue.length>0&&arrayEqual(trueValue,conditionFieldValueArr)){
 								//此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加.
@@ -304,7 +309,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 								console.log(toshow) */
 								let flag = false//其依赖的选项的父字段是否被隐藏.默认没被隐藏,
 								//如果此时的conditionField有可能被隐藏且已被隐藏,x不能++
-								for(let a = 0;a<hideFieldConditionArr.length;a++){
+								/* 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++){
@@ -315,7 +320,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 											}
 										}
 									}
-								}
+								} */
 								if(flag==false){
 									x++
 									hideFieldsFromCheckbox.push(toshow)
@@ -332,7 +337,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 					//console.log(conditionFieldValue)
 					for(let n = 0; n< modelKeyArr.length;n++){
 						if(modelKeyArr[n]==conditionField){
-							let count_1 = 0;
+							//let count_1 = 0;
 							let trueValue = model.value[modelKeyArr[n]]
 							//console.log(modelKeyArr[n])
 							//console.log(trueValue)
@@ -371,6 +376,9 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
 			model.value[hideFieldArr[i]] = ""
 		}else if( model.value[hideFieldArr[i]] instanceof Array){
 			model.value[hideFieldArr[i]] = []
+		}else if(typeof model.value[hideFieldArr[i]] == "boolean"){
+			
+			model.value[hideFieldArr[i]] = false
 		}
 	}
 	//默认隐藏的字段中目前被显示出来的
@@ -492,13 +500,14 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 	
 
 
-	//得到所有配置对象，包括radio,checkbox,select
+	//得到所有配置对象，包括radio,checkbox,select,switch
 	const radioSelectShowConfigArr = []
 	const checkboxShowConfigArr = []
+	const switchShowConfigArr = []
 	//以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"){
+		if(props.formData.list[i].type=="radio"||props.formData.list[i].type=="select"||props.formData.list[i].type=="checkbox"||props.formData.list[i].type=="switch"){
 			props.formData.config.hideField = [];
 		}
 		//console.log(props.formData.list[i].type)
@@ -508,15 +517,18 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 		}else if(props.formData.list[i].type=="checkbox"){
 			
 			checkboxShowConfigArr.push(props.formData.list[i].control.glxxszForCheckBox)
+		}else if(props.formData.list[i].type=="switch"){
+			switchShowConfigArr.push(props.formData.list[i].control.glxxszSwitch)
 		}
 	}
 	//数组深拷贝
 	const radioSelectShowConfigArr2 = JSON.parse(JSON.stringify(radioSelectShowConfigArr));
 	const checkboxShowConfigArr2 = JSON.parse(JSON.stringify(checkboxShowConfigArr));
+	const switchShowConfigArr2 = JSON.parse(JSON.stringify(switchShowConfigArr));
 	/* console.log(radioSelectShowConfigArr2)
 	console.log(checkboxShowConfigArr2) */
-
-
+	//console.log("fodijafkjlsdhoidnfoidshojhfeknsidjfoiewhofnosdifhjeonoidufeinkdsaofhe")
+	//console.log(switchShowConfigArr2)
 
 	if(radioSelectShowConfigArr2.length>0){
 		for(let i = 0;i<radioSelectShowConfigArr2.length;i++){
@@ -564,8 +576,29 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 			}
 		}
 	} 
-
-
+	
+	//将出现在开关配置中的字段放入radioSelectArr2,radioSelectArr2是未去重的所有可能被隐藏的字段
+	if(switchShowConfigArr2.length>0){
+		for(let i = 0;i<switchShowConfigArr2.length;i++){
+			if(switchShowConfigArr2[i].length>0){
+				for(let j = 0; j<switchShowConfigArr2[i].length;j++){
+					if(switchShowConfigArr2[i][j].showFields.length>0){
+						for(let n = 0; n<switchShowConfigArr2[i][j].showFields.length;n++){
+							//console.log("99999999999999999999------"+switchShowConfigArr2[i][j].showFields[n])
+							let fieldKeyArr = switchShowConfigArr2[i][j].showFields[n].split(":")
+							let fieldKeyStr = fieldKeyArr[fieldKeyArr.length-1]
+							//console.log(fieldKeyStr)
+							radioSelectArr2.push({
+								toShowFieldKey:fieldKeyStr,
+							})
+						}
+					}
+				}
+			}
+		}
+	}
+	//console.log("radioSelectArr2radioSelectArr2radioSelectArr2radioSelectArr2radioSelectArr2=======")
+	//console.log(radioSelectArr2)
 	//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr3  ---用于组装完整显示隐藏条件、
 	const radioSelectArr3:any[] = []
 	
@@ -645,9 +678,35 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 			}
 		}
 	}
+	
+	//将开关配置也放入radioSelectArr3
+	if(switchShowConfigArr2.length>0){
+		for(let i = 0;i<switchShowConfigArr2.length;i++){
+			if(switchShowConfigArr2[i].length>0){
+				for(let j = 0;j<switchShowConfigArr2[i].length;j++){
+					//数组深拷贝
+					const jArr = JSON.parse(JSON.stringify(switchShowConfigArr2[i][j]));
+					//console.log("111111111111111111111-----------"+JSON.stringify(switchShowConfigArr2[i][j]))
+					if(jArr.showFields!=undefined&&jArr.showFields.length>0){
+						const optionValueJArr = typeof(jArr.openValue)=="undefined"?jArr.offValue:jArr.openValue
+						let arr1 = []
+						for(let n = 0;n<jArr.showFields.length;n++){
+							let fieldKeyArr = jArr.showFields[n].split(":")
+							let fieldKeyStr = fieldKeyArr[fieldKeyArr.length-1]
+							//console.log(fieldKeyStr)
+							arr1.push(fieldKeyStr)
+						}
+						radioSelectArr3.push({
+								conditionFieldKey:jArr.conditionField,
+								conditionFieldValue:optionValueJArr,
+								toShowFieldKey:arr1,
+						})
+					}
+				}
+			}
+		}
+	}
 	//console.log(radioSelectArr3)
-
-
 	//暂时使用的隐藏数组，数据敲定后赋给props.formData.config.hideField
 	let hideFieldArr: any[] = [];
 	
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index d33f62fbb..9ba9dc018 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -34,6 +34,7 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -116,6 +117,13 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
+    IEpOperation: typeof import('~icons/ep/operation')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
+    IEpRefresh: typeof import('~icons/ep/refresh')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']