关联选项设置配置-多选

src/components/DesignForm/assembly/index.ts

@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from "uuid";
 const selectOption: any = [
 	/*{
 	  label: '标签1',
@@ -98,7 +99,7 @@ const selectOption: any = [
 			iconFont: 'fa-check-square-o',
 			control: {
 				modelValue: [],
-				glxxsz:[],
+				glxxszForCheckBox:[],
 			},
 			options: selectOption,
 			config: config,

src/components/DesignForm/formControlAttr.vue

@@ -1134,12 +1134,53 @@
     // 属性设置相关结束
     // 多选固定选项删除
     const delSelectOption = (index: number, type?: string) => {
-        if (type === 'tabs') {
+        //liwenxuan 20240508 checkbox 删除选项时提醒  start
+        let delflag = true
+        let breakFlag = 0
+        if(controlData.value.type === 'checkbox'){
+            for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
+                if(breakFlag>0){
+                    break
+                }
+                for(var j = 0; j < controlData.value.control.glxxszForCheckBox[i].selectedOptions.length; j++){
+                    if(controlData.value.control.glxxszForCheckBox[i].selectedOptions[j] === controlData.value.options[index].value){
+                        let del =confirm("您本次删除的选项已在关联选项设置中有所配置，相关关联选项设置将被删除，是否确定删除？");
+                        if (del==true){
+                            breakFlag++
+                            break
+                        }else{
+                            delflag = false
+                            breakFlag++
+                            break
+                        }
+                    }
+                }
+
+                
+            }
+        }
+        if(delflag === true){
+            //删除相关关联选项设置
+            const todelArr:any = []     
+            for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
+                for(var j = 0; j < controlData.value.control.glxxszForCheckBox[i].selectedOptions.length; j++){
+                    if(controlData.value.control.glxxszForCheckBox[i].selectedOptions[j] === controlData.value.options[index].value){
+                        todelArr.push(controlData.value.control.glxxszForCheckBox[i].id)
+                    }
+                }
+            }
+            for(var i = 0;i < todelArr.length;i++){
+                controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id != todelArr[i])
+            }
+            //liwenxuan 20240508 checkbox 删除选项时提醒  end
+            if (type === 'tabs' ) {
                     controlData.value.columns.splice(index, 1)
             } else {
                     controlData.value.options.splice(index, 1)
             }
         }
+        
+    }
     // 多选固定选项增加
     const addSelectOption = (type: any) => {
         if (controlData.value.type === 'cascader') {
@@ -2223,10 +2264,26 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
                 }
             }
         }
+    }else if(controlData.value.type === "checkbox"){
+        
     }
 },{ deep: true })
 
 
+function createRowForGlxxsz(){
+    controlData.value.control.glxxszForCheckBox.push(
+        {
+            selectedOptions:[],
+            showFields:[],
+            id: uuidv4().replaceAll('-','').toString(),
+        }
+    )
+}
+
+function deleteRowForGlxxsz(row: { id: any }){
+    controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
+}
+
 //liwenxuan20240426 单选多选下拉 关联选项设置  end
 
 
@@ -3744,23 +3801,34 @@ const loadNextPage = () => {
             <template v-if="controlData.type=='checkbox'">
                 
                 <el-table  
-                :data="controlData.control.glxxsz" 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',}" 
-                            >
+                    :data="controlData.control.glxxszForCheckBox" 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">
+                    <el-table-column prop="link" label="当选项为" width="300">
                         <template #default="optionScope">
-                            
-                            <el-tree-select v-model="controlData.control.glxxsz[optionScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                            <el-tree-select v-model="controlData.control.glxxszForCheckBox[optionScope.$index].selectedOptions" style="width: 100%" :data="controlData.options" multiple />
                         </template>
                     </el-table-column>
+
                     <el-table-column fixed="right" label="显示以下组件" >
                         <template #default="fieldScope">
+                            <el-tree-select v-model="controlData.control.glxxszForCheckBox[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                        </template>
+                    </el-table-column>
 
-                                <el-tree-select v-model="controlData.control.glxxsz[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                    <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>
+                        
                     </el-table-column>
+
                 </el-table>
+                <el-button plain type="success" style="margin-top: 10px;" @click="createRowForGlxxsz">新增</el-button>
             </template>
             <template #footer>
             <div class="dialog-footer">

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

@@ -248,7 +248,7 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
 	// console.log("监听表单-6-constControlChange-->",attribute)
 
 
-	console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)
+	console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
 
 	if (typeof props.changeKeyVal === 'function') {
 		props.changeKeyVal(key, value,type,attribute)