单选下拉多选关联系统表单字段

src/components/DesignForm/assembly/index.ts

@@ -14,7 +14,7 @@ const selectOption: any = [
 	}*/
 ]
 const config: { optionsType: number } = {
-	optionsType: 0 // 0固定 1数据源 2 接口字典
+	optionsType: 0 // 0固定 1数据源 2 接口字典 3系统表单字段
 }
 export default [
 	{

src/components/DesignForm/formControlAttr.vue

@@ -1147,7 +1147,7 @@
         //liwenxuan 20240508 checkbox 删除选项时提醒  start
         let delflag = true
         let breakFlag = 0
-        if(controlData.value.type === 'checkbox'){
+        if(controlData.value.type === 'checkbox'&& controlData.value.config.optionsType==0){
             for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
                 if(breakFlag>0){
                     break
@@ -2413,7 +2413,9 @@ watch(()=>controlData.value.control,(newVal) => {
 
 //radio,select添加选项时同步配置选项
 watch(()=>controlData.value.options, (changedOptions:any) => {
+    
         if(controlData.value.type === "radio" || controlData.value.type === "select"){
+            if(controlData.value.config.optionsType==0){
                 if(changedOptions.length===0){
                     //删没了option
                     controlData.value.control.glxxsz = []
@@ -2442,13 +2444,17 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
                         }
                     }
                 }
+            }
         }else if(controlData.value.type === "checkbox"){
             
         }
+    
+    
 },{ deep: true })
 
 
 function createRowForGlxxsz(){
+    if(controlData.value.config.optionsType==0){
         controlData.value.control.glxxszForCheckBox.push(
             {
                 conditionField: controlData.value.name,
@@ -2457,10 +2463,14 @@ function createRowForGlxxsz(){
                 id: uuidv4().replaceAll('-','').toString(),
             }
         )
+    }
+    
 }
 
 function deleteRowForGlxxsz(row: { id: any }){
+    if(controlData.value.config.optionsType==0){
         controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
+    }
 }
 /*  */
 
@@ -2475,6 +2485,11 @@ function handleDetermineoptionsValue3(){
 
 
 //liwenxuan20240426 单选多选下拉 关联选项设置  end
+function optionsTypeChanged(){
+    controlData.value.config.optionsFun = ''
+    controlData.value.options = []
+}
+
 
 
 
@@ -3086,13 +3101,13 @@ const loadNextPage = () => {
                                 </el-form-item>
                             </div>
                         </div>
-                        <div v-if="showHide(['switch'],true)">
+                        <div v-if="showHide(['switch'],true)&&controlData.config.optionsType==0">
                             <el-button   @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
                         </div>
-                        <div v-if="showHide(['radio','select',],true)">
+                        <div v-if="showHide(['radio','select',],true)&&controlData.config.optionsType==0">
                             <el-button @click="handelGlxxszDialog">关联选项设置</el-button>
                         </div>
-                        <div v-if="showHide(['checkbox',],true)">
+                        <div v-if="showHide(['checkbox',],true)&&controlData.config.optionsType==0">
                             <el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
                         </div>
                         <div
@@ -3121,7 +3136,7 @@ const loadNextPage = () => {
                             <el-form-item label="选项数据源" class="form_cont">
                                 <el-select
                                     v-model="controlData.config.optionsType"
-                                    @change="controlData.config.optionsFun = ''"
+                                    @change="optionsTypeChanged"
                                 >
                                     <el-option :value="0" label="固定选项" />
                                     <el-option :value="3" label="系统表单字段"/>

src/components/DesignForm/formControlPropertiNew.vue

@@ -1191,7 +1191,7 @@ const delSelectOption = (index: number, type?: string) => {
         //liwenxuan 20240508 checkbox 删除选项时提醒  start
         let delflag = true
         let breakFlag = 0
-        if(controlData.value.type === 'checkbox'){
+        if(controlData.value.type === 'checkbox'&& controlData.value.config.optionsType==0){
             for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
                 if(breakFlag>0){
                     break
@@ -2452,6 +2452,7 @@ watch(()=>controlData.value.control,(newVal) => {
 //radio,select添加选项时同步配置选项
 watch(()=>controlData.value.options, (changedOptions:any) => {
     if(controlData.value.type === "radio" || controlData.value.type === "select"){
+        if(controlData.value.config.optionsType==0){
             if(changedOptions.length===0){
                 //删没了option
                 controlData.value.control.glxxsz = []
@@ -2480,6 +2481,7 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
                     }
                 }
             }
+        }
     }else if(controlData.value.type === "checkbox"){
         
     }
@@ -2487,6 +2489,7 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
 
 
 function createRowForGlxxsz(){
+    if(controlData.value.config.optionsType==0){
         controlData.value.control.glxxszForCheckBox.push(
             {
                 conditionField: controlData.value.name,
@@ -2495,10 +2498,13 @@ function createRowForGlxxsz(){
                 id: uuidv4().replaceAll('-','').toString(),
             }
         )
+    }
 }
 
 function deleteRowForGlxxsz(row: { id: any }){
+    if(controlData.value.config.optionsType==0){
         controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
+    }
 }
 /*  */
 
@@ -2515,6 +2521,13 @@ function handleDetermineoptionsValue3(){
 //liwenxuan20240426 单选多选下拉 关联选项设置  end
 
 
+function optionsTypeChanged(){
+    controlData.value.config.optionsFun = ''
+    controlData.value.options = []
+}
+
+
+
 
 		
     const optionsCss = [
@@ -3122,13 +3135,13 @@ const loadNextPage = () => {
                                 </el-form-item>
                             </div>
                         </div>
-                        <div v-if="showHide(['switch'],true)">
+                        <div v-if="showHide(['switch'],true)&&controlData.config.optionsType==0">
                             <el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
                         </div>
-                        <div v-if="showHide(['radio','select',],true)">
+                        <div v-if="showHide(['radio','select',],true)&&controlData.config.optionsType==0">
                             <el-button @click="handelGlxxszDialog">关联选项设置</el-button>
                         </div>
-                        <div v-if="showHide(['checkbox',],true)">
+                        <div v-if="showHide(['checkbox',],true)&&controlData.config.optionsType==0">
                             <el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
                         </div>
                         <div
@@ -3157,7 +3170,7 @@ const loadNextPage = () => {
                             <el-form-item label="选项数据源" class="form_cont">
                                 <el-select
                                     v-model="controlData.config.optionsType"
-                                    @change="controlData.config.optionsFun = ''"
+                                    @change="optionsTypeChanged"
                                 >
                                     <el-option :value="0" label="固定选项" />
                                     <el-option :value="3" label="系统表单字段"/>

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

@@ -84,6 +84,7 @@ const emits = defineEmits<{
 	(e: 'change', val: any): void // 表单组件值发生变化时
 	(e: 'update:issave', type: boolean): void
 	(e: 'refresh'): void
+	(e: 'optionsValue3Get3', val: any,fieldName: string): void 
 }>()
 const route = useRoute()
 const router = useRouter()
@@ -1587,6 +1588,10 @@ const submitEdit = (type: string, res: any) => {
     }
 }
 
+function optionsValue3Get2(data: any,fieldName: string){
+	emits('optionsValue3Get3',data,fieldName)
+}
+
 defineExpose({
     setOptions,
     setValue,
@@ -1616,7 +1621,7 @@ defineExpose({
 			}"
 		>
 
-			<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" />
+			<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" @optionsValue3Get2="optionsValue3Get2"/>
 			
 			<slot></slot>
 	  	</el-form>

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

@@ -35,6 +35,7 @@ const props = withDefaults(
     }
 )
 
+let emits = defineEmits(['optionsValue3Get2']);
 
 const store = useDesignFormStore() as any //自定义表单存储器
 const formProps = inject(constFormProps, {}) as any
@@ -307,6 +308,9 @@ const getFormItemLableStyle = (ele: any) => {
       return AnalysisCss(ele?.labelStyle)
     }
 }
+function optionsValue3Get1(data: any,fieldName: string){
+	emits('optionsValue3Get2',data,fieldName)
+}
 </script>
 <template>
 	<draggable
@@ -503,7 +507,7 @@ const getFormItemLableStyle = (ele: any) => {
 				<UrlLink v-else-if="element.type === 'urllink'" :data="element" />
 				<SerialNumber  v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" />
 				<!--其他组件-->
-				<FormItem v-else :data="element" />
+				<FormItem v-else :data="element" @optionsValue3Get1="optionsValue3Get1"/>
 				
 				<!--组件设计外功能框架-->
 				<template v-if="type === 5">

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

@@ -37,6 +37,8 @@ import TextImg from "@/assets/image/tinymce.png"
 
 import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts'
 
+import request from '@/utils/request';
+
 const props = withDefaults(
     defineProps<{
       data: FormList
@@ -47,6 +49,7 @@ const props = withDefaults(
 )
 const emits = defineEmits<{
     (e: 'update:modelValue', val: any): void
+	(e: 'optionsValue3Get1', val: any,fieldName: string): void
 }>()
 const route = useRoute()
 const formProps = inject(constFormProps, {}) as any
@@ -187,6 +190,7 @@ const itemRules = computed(() => {
 })
 // data 根据条件搜索，select远程搜索里data有值
 const getAxiosOptions = debounce((data?: any) => {
+	//console.log(props.data)
     const {
 		optionsType,
 		optionsFun,
@@ -277,10 +281,53 @@ const getAxiosOptions = debounce((data?: any) => {
 			// 		console.log(res)
 			// 	})
         	}
+    	}else if(optionsType === 3){//liwenxuan 20240611 系统表单字段效果实现
+			/*
+				在这里请求后台获取字段
+			*/
+			getFieldRecord(props.data.control.optionsValue3Field).then(({ data }) => {
+				//console.log(data)
+				//console.log(props.data.name)
+				let fieldName = props.data.name
+				//console.log(options.value)
+				//options.value = data
+				/*
+					
+					
+				*/
+				emits('optionsValue3Get1',data,fieldName)
+				//console.log(options.value)
+				//console.log()
+			})
+			
+			
 		}
       	setFormDict(formProps.value.dict) // 表格里新增时行时需要重新设一次
     }
 })
+watch(
+    () => props.data.control.optionsValue3Field,
+    () => {
+		getAxiosOptions() 
+    }
+)
+watch(
+    () => props.data.config.optionsType,
+    () => {
+		getAxiosOptions() 
+    }
+)
+
+
+function getFieldRecord(param1: any) {
+	return request({
+		url: '/javasys/lowCode/AssociatedForms/getFieldRecord',
+		method: 'post',
+		data: {
+			optionsValue3Field:param1
+		},
+	});
+}
 watch(
     () => formProps.value.model[sourceFunKey.value],
     () => {

src/types/components.d.ts

@@ -35,6 +35,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']
@@ -119,8 +120,11 @@ 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']

src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue

@@ -526,6 +526,21 @@ const formNameChanged = (param1: any)=>{
 }
 //liwenxuan		关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改  end
 
+function optionsValue3Get3(data: any,fieldName: string){
+	console.log(state.value.formData.list)
+	console.log(data)
+	console.log(fieldName)
+	for(let i = 0; i < state.value.formData.list.length; i++){
+		
+		if(state.value.formData.list[i].name==fieldName){
+			state.value.formData.list[i].options = []
+			for(let j = 0;j<data.length;j++){
+				state.value.formData.list[i].options.push(data[j])
+			}
+		}
+	}
+}
+
 
 </script>
 <template>
@@ -555,6 +570,7 @@ const formNameChanged = (param1: any)=>{
 					:type="5"
 					:form-data="state.formData"
 					:dict="state.formDict"
+					@optionsValue3Get3="optionsValue3Get3"
 				/>
 		</div>
 	</el-main>

src/views/sysworkflow/lowcodepage/pageDesignes.vue

@@ -623,6 +623,21 @@ function refreshFunc(){
 	index.value = index.value+1
 }
 
+function optionsValue3Get3(data: any,fieldName: string){
+/* 	console.log(state.value.formData.list)
+	console.log(data)
+	console.log(fieldName) */
+	
+	for(let i = 0; i < state.value.formData.list.length; i++){
+		if(state.value.formData.list[i].name==fieldName){
+			state.value.formData.list[i].options = []
+			for(let j = 0;j<data.length;j++){
+				state.value.formData.list[i].options.push(data[j])
+			}
+		}
+	}
+}
+
 
 </script>
 <template>
@@ -649,6 +664,7 @@ function refreshFunc(){
 					:type="5"
 					:form-data="state.formData"
 					:dict="state.formDict"
+					@optionsValue3Get3="optionsValue3Get3"
 				/>
 			</div>
 		</div>