关联选项设置配置-单选下拉

src/components/DesignForm/assembly/index.ts

@@ -80,7 +80,8 @@ const selectOption: any = [
 			icon: 'radio',
 			iconFont: 'fa-dot-circle-o',
 			control: {
-				modelValue: ''
+				modelValue: '',
+				glxxsz:[],
 			},
 			options: selectOption, // 下拉选项数据集合
 			config: config,
@@ -96,7 +97,8 @@ const selectOption: any = [
 			icon: 'checkbox',
 			iconFont: 'fa-check-square-o',
 			control: {
-				modelValue: []
+				modelValue: [],
+				glxxsz:[],
 			},
 			options: selectOption,
 			config: config,
@@ -113,7 +115,8 @@ const selectOption: any = [
 			iconFont: 'fa-toggle-down',
 			control: {
 				modelValue: '',
-				appendToBody: true
+				appendToBody: true,
+				glxxsz:[],
 			},
 			options: selectOption,
 			config: config,

src/components/DesignForm/formControlAttr.vue

@@ -1850,6 +1850,7 @@ function formidChanged(){
 }
 
 const associatedFormsCurrentFormFieldTree = ref<Tree[]>()
+const associatedFormsCurrentFormFieldTreeForGlxxsz = ref<Tree[]>()
 getAssociatedFormsCurrentFieldTree().then(({ data }) => {
     
     if(data.id==="cfid为空"){
@@ -1864,6 +1865,17 @@ getAssociatedFormsCurrentFieldTree().then(({ data }) => {
             children: [...resData.value],
             treeAttrs: data.treeAttrs,
         }]
+
+        let resDataForGlxxsz = ref(data.children.slice(8))
+        
+        
+        associatedFormsCurrentFormFieldTreeForGlxxsz.value = [{
+            id: 'rootid_'+data.label,
+            //label: '当前表单',
+            label: '当前表单-'+data.treeAttrs.show,
+            children: [...resDataForGlxxsz.value],
+            treeAttrs: data.treeAttrs,
+        }]
     }
 });
 
@@ -2153,6 +2165,69 @@ function delRole(id:String){
 //liwenxuan20240403 associatedForms end 
 
 
+//liwenxuan20240426 单选多选下拉 关联选项设置  start
+
+const glxxszDialogFlag = ref(false)
+const glxxszDialogFlagCheckBox = ref(false)
+function handelGlxxszDialog(){
+    if(controlData.value.options.length===0){
+        alert("无可配置选项，请先添加。")
+    }else{
+        glxxszDialogFlag.value = true
+    }
+}
+
+function handelGlxxszDialogCheckbox(){
+    glxxszDialogFlagCheckBox.value = true
+}
+
+function handleDetermineGlxxszDialog(){
+    glxxszDialogFlag.value = false
+}
+function handleDetermineGlxxszDialogCheckBox(){
+    glxxszDialogFlagCheckBox.value = false
+}
+/* function addShowField(val:string){
+    alert('addShowField:'+val)
+} */
+
+
+
+//radio,select添加选项时同步配置选项
+watch(()=>controlData.value.options, (changedOptions:any) => {
+    if(controlData.value.type === "radio" || controlData.value.type === "select"){
+        if(changedOptions.length===0){
+            //删没了option
+            controlData.value.control.glxxsz = []
+        }else{
+            if(changedOptions.length < controlData.value.control.glxxsz.length){
+                //删除了某个option
+                controlData.value.control.glxxsz = controlData.value.control.glxxsz.filter((item: { optionValue: any }) => changedOptions.find((bItem: { value: any }) => item.optionValue == bItem.value))
+            }else{
+                for(var i = 0; i < changedOptions.length; i++){
+                    if(controlData.value.control.glxxsz[i]===undefined){
+                        //新增了某个option
+                        controlData.value.control.glxxsz.push(
+                            {
+                                optionLabel: changedOptions[i].label,
+                                optionValue: changedOptions[i].value,
+                                tableIndex: i,
+                                id: uuidv4().replaceAll('-','').toString(),
+                            }
+                        )
+                    }else{
+                        //修改了某个option
+                        controlData.value.control.glxxsz[i].optionLabel = changedOptions[i].label
+                        controlData.value.control.glxxsz[i].optionValue = changedOptions[i].value
+                    }
+                }
+            }
+        }
+    }
+},{ deep: true })
+
+
+//liwenxuan20240426 单选多选下拉 关联选项设置  end
 
 
 
@@ -2774,6 +2849,12 @@ const loadNextPage = () => {
                                 </el-form-item>
                             </div>
                         </div>
+                        <div v-if="showHide(['radio','select',],true)">
+                            <el-button @click="handelGlxxszDialog">关联选项设置</el-button>
+                        </div>
+                        <div v-if="showHide(['checkbox',],true)">
+                            <el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
+                        </div>
                         <div
                             v-if="
                             showHide(
@@ -3595,10 +3676,107 @@ const loadNextPage = () => {
 
 
 	<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
+
+
+<!-- 关联选项设置弹窗 liwenxuan 20240426 start -->
+        <el-dialog  v-model="glxxszDialogFlag" class="glxxsztc" top="150px" :close-on-click-modal="false" title="关联选项设置" :show-close="false" style="margin-top:70px;" width="50%" >
+
+            
+            
+            <template v-if="controlData.type=='radio'||controlData.type=='select'">
+                
+                <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">
+                            <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   />
+                            </template>
+                    </el-table-column>
+                </el-table>
+            </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%" >
+
+            
+            
+            <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',}" 
+                            >
+                
+                    <el-table-column prop="link" label="当选项为" width="220">
+                        <template #default="optionScope">
+                            
+                            <el-tree-select v-model="controlData.control.glxxsz[optionScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple   />
+                        </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 @click="asfhTextCancelFillRoles">取消</el-button> -->
+                <el-button type="primary" @click="handleDetermineGlxxszDialogCheckBox">
+                确定
+                </el-button>
+            </div>
+            </template>
+            </el-dialog>
+
+        <!-- 关联选项设置弹窗 liwenxuan 20240426 end -->
     </template>
 
 <style   lang='scss' scoped>   
-
+    
     li::before {
         content: "";
         display: inline-block;
@@ -3659,5 +3837,6 @@ const loadNextPage = () => {
 .el-main{
 	--el-main-padding: 5px
 }
+
 </style>