关联表单增加支持放置在子表内

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

@@ -10,9 +10,11 @@ import Tooltips from '@/components/DesignForm/tooltip.vue'
 import {constFormProps } from '@/api/DesignForm/utils'
 import { jsonParseStringify } from '@/utils/DesignForm'
 import LowcodeImagePage from '@/components/DesignForm/public/expand/lowcodeImage.vue'
+import AssociatedForms from '@/widget/associatedforms/index.vue'
 import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue'
 
 import LokOrgCentent from '@/widget/org/cont.vue' 
+import { SCOPE } from 'element-plus'
 
 
 const props = withDefaults(
@@ -180,6 +182,7 @@ const timeToString = (timeVal:any,types:int) => {
 	
 	return timeStr
 }
+let associatedFormsIndexTablekey = 0
 </script>
 <template>
 	
@@ -197,7 +200,7 @@ const timeToString = (timeVal:any,types:int) => {
 				:width="item.item.span"
 			>
 				<template #default="scope">
-
+					
 					<span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>
 					<div v-if="type === 4 || editDisabled">
 						<LokOrgCentent  v-if="item.type == 'orgCentent'" :orgid="scope.row[item.name].toString()" />
@@ -210,6 +213,10 @@ const timeToString = (timeVal:any,types:int) => {
 						</div>
 						<div v-else-if="item.type=='datePicker'" v-html="timeToString(scope.row[item.name],item.control.type)">
 						</div>
+						<div v-else-if="item.type=='associatedForms'">
+							<AssociatedForms :data="item" 
+								v-model="scope.row[item.name]" :tablekey="associatedFormsIndexTablekey" :row-index="scope.$index"/>
+						</div>
 						<div v-else>{{ getText(scope.row[item.name],scope.row,item.name) }}</div>
 					</div>
 					<div v-else>
@@ -217,6 +224,7 @@ const timeToString = (timeVal:any,types:int) => {
 						<form-item
 						v-model="scope.row[item.name]"
 						:tProp="`${data.name}.${scope.$index}.${item.name}`"
+						:row-index="scope.$index"
 						:data="item"
 						/>
 					</div>

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

@@ -41,6 +41,7 @@ import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList
 import OrgCitys from '@/components/DesignForm/public/expand/orgCitys.vue'
 import DatePickerPage from '@/components/DesignForm/public/expand/datePicker.vue'
 import CascaderPage from '@/components/DesignForm/public/expand/cascader.vue'
+import AssociatedForms from '@/widget/associatedforms/index.vue'
 
 
 
@@ -71,6 +72,7 @@ const props = withDefaults(
 		optionsValue3Get1?:any
 		tablekey?:any
 		numrun?:any
+		rowIndex?:any
     }>(),
     {}
 )
@@ -933,7 +935,7 @@ const uploadPic = (val:any) => {
 	<!--修改时间-->
 	<EditTime v-else-if="judgeIsShow(data.name) && data.type === 'editTime' " :data="data" :tablekey="props.tablekey" :numrun="props.numrun" />
 	<!--关联表单-->
-	<AssociatedForms  v-else-if="judgeIsShow(data.name) && data.type === 'associatedForms' && type != 4" :data="data" :form-props="formProps" :tablekey="props.tablekey" @asf-value-changed="asfValueChanged"/>
+	<AssociatedForms  v-else-if="judgeIsShow(data.name) && data.type === 'associatedForms' && type != 4" :data="data" :form-props="formProps" :tablekey="props.tablekey" :row-index="props.rowIndex" @asf-value-changed="asfValueChanged"/>
 
 	<VideoUpAndPlay  v-else-if="judgeIsShow(data.name) && data.type === 'videoUpAndPlay' " :data="data" />
 

src/widget/associatedforms/associatedForms.vue

@@ -3,7 +3,10 @@
 
   <div class="container">
     <!-- <span style="font-size: 14px; margin-right: 12px;padding-top: 4px;" class="small-span" >{{ props.data.item?props.data.item.label:"关联表单" }}</span> -->
-    <el-select v-model="value1"  placeholder="请选择" class="big-span" @change="asfValueChanged">
+    <el-select v-if="!tableFlag" v-model="value1"  placeholder="请选择" class="big-span" @change="asfValueChanged">
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <el-select v-if="tableFlag" v-model="value2"  placeholder="请选择" class="big-span" @change="asfValueChangedTable">
       <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
   </div>
@@ -33,20 +36,59 @@ const props = withDefaults(
 		data: FormList
     formProps:Object
 		tablekey: any
+    rowIndex:number
     }>(),
     {}
 )
-const emits = defineEmits(["valueChanged"]);
+const emits = defineEmits(["valueChanged","valueChangedTable"]);
 const value1 = ref('')
-
+const value2 = ref('')
+const valueTest = ref('')
+let tableFlag = false
 const options = ref([])
+
+
+function hasTableProperty(obj: object): boolean {
+    for (let key in obj) {
+        if (key.startsWith("table")) {
+            return true;
+        }
+    }
+    return false;
+}
 onMounted(()=>{
-    // console.log(props.data.control)
     if(props.data.control.formid!=null&&props.data.control.formid!=""){
-      getAsfDataTitles().then(({ data }) => {   
-        //console.log(data)
+      getAsfDataTitles().then(({ data }) => {
         options.value = data
 				value1.value = props.formProps.model[props.data.name]
+
+
+
+        // 确定哪个或哪些表单是被放置在子表中的 
+        valueTest.value = props.formProps.model
+        for (let key in valueTest.value) {
+          if (key.startsWith("table")) {
+            if(Array.isArray(valueTest.value[key])){
+              
+              if(valueTest.value[key].length>0){
+                for (let key1 in valueTest.value[key][0]) {
+                  if(key1==props.data.name){
+                    tableFlag = true
+                    
+                    //当前关联表单在子表的第几行
+                    
+                    value2.value = props.formProps.model[key][props.rowIndex][key1]
+                  }
+                }
+              }
+            }
+          }
+        }
+
+
+
+
+
       });
     }
     
@@ -68,9 +110,24 @@ function asfValueChanged(){
   emits("valueChanged",val)
 }
 
+function asfValueChangedTable(){
+
+  let val = {
+    options:options.value,
+    currentVal:value2.value,
+    fillFieldsMaster:fillFieldsMaster,
+    fillFieldsChild:fillFieldsChild,
+    asfFormId:props.data.control.formid,
+    glbbddbd:props.data.control.glbbddbd,
+  }
+
+  emits("valueChangedTable",val)
+}
+
 function getAsfDataTitles() {
   let dataTitle = ''
-  if(props.tablekey.dataTitle!=null&&props.tablekey.dataTitle.length>0){
+  //console.log(props)
+  if(props.tablekey&&props.tablekey.dataTitle&&props.tablekey.dataTitle!=null&&props.tablekey.dataTitle.length>0){
     for(let i = 0;i<props.tablekey.dataTitle.length;i++){
       dataTitle = dataTitle+props.tablekey.dataTitle[i]+"###"
     }

src/widget/associatedforms/index.vue

@@ -4,121 +4,118 @@
 @ 备注: 
 -->
 <template>
-    <el-form-item 
-        v-bind="data.item"
-		:prop="tProp || data.name"
-		:class="config.className"
-		:rules="itemRules as any"
-		:label="getLabel(data.item as FormItem)"
-    >
-        <input  v-model="value" type="hidden" >
-		<AssociatedForms :data="props.data" :form-props="formProps" :tablekey="props.tablekey" @value-changed="valueChanged"></AssociatedForms>
-    </el-form-item>
-
-    
+	<el-form-item v-bind="data.item" :prop="tProp || data.name" :class="config.className" :rules="itemRules as any"
+		:label="getLabel(data.item as FormItem)">
+		<input v-model="value" type="hidden">
+		<AssociatedForms :data="props.data" :form-props="formProps" :tablekey="props.tablekey"
+			:row-index="props.rowIndex" @value-changed="valueChanged" @value-changed-table="valueChangedTable"></AssociatedForms>
+	</el-form-item>
+
+
 </template>
 <script lang='ts' setup>
-import AssociatedForms   from './associatedForms.vue';
-import { 
+import AssociatedForms from './associatedForms.vue';
+import {
 	constControlChange,
-    constFormProps,
+	constFormProps,
 } from '@/api/DesignForm/utils'
 import validate from '@/api/DesignForm/validate'
 import { FormItem, FormList } from '@/api/DesignForm/types'
 const props = withDefaults(
-    defineProps<{
+	defineProps<{
 		data: FormList
 		tablekey: any
+		rowIndex: any
 		numrun?: number
 		modelValue?: any // 子表和弹性布局时时有传
 		tProp?: string // 子表时的form-item的prop值，用于子表校验用
-    }>(),
-    {}
+	}>(),
+	{}
 )
 
 const emits = defineEmits<{
-    (e: 'update:modelValue', numVal: any): void
+	(e: 'update:modelValue', numVal: any): void
 	(e: 'asfValueChanged', val: any): void
 }>()
 
 const formProps = inject(constFormProps, {}) as any
 const type = computed(() => {
-    return formProps.value.type
+	return formProps.value.type
 })
 const config = computed(() => {
-    return props.data.config || {}
+	return props.data.config || {}
 })
 
 const changeEvent = inject(constControlChange, '') as any
 
 const value = computed({
-    get() {
+	get() {
 		if (props.tProp) {
 			// 表格和弹性布局
 			return props.modelValue
 		} else {
 			return formProps.value.model[props.data.name]
 		}
-    },
-    set(newVal: any) {
+	},
+	set(newVal: any) {
 		if (props.tProp) {
 			emits('update:modelValue', newVal)
 		}
 		updateModel(newVal)
-    }
+	}
 })
 const updateModel = (val: any) => {
-	console.log("dfsasdfasdf")
+	//console.log("dfsasdfasdf")
 	let controlAttribute = ""
-	if(props.data.control){
-		if(props.data.control.type){
+	if (props.data.control) {
+		if (props.data.control.type) {
 			controlAttribute = props.data.control.type
 		}
 	}
-    changeEvent &&
-    changeEvent({
-        key: props.data.name,
-        value: val,
-        data: props.data,
-        tProp: props.tProp,
-		type: props.data.type,
-		attribute: controlAttribute
-    })
+	changeEvent &&
+		changeEvent({
+			key: props.data.name,
+			value: val,
+			data: props.data,
+			tProp: props.tProp,
+			type: props.data.type,
+			attribute: controlAttribute
+		})
 }
 
 
 
 const getLabel = (ele: FormItem) => {
-    const showColon = formProps.value.showColon ? '：' : ''
-    if (ele) {
-    	return ele.showLabel ? '' : ele.label + showColon
-    } else {
-      	return ''
-    }
+	const showColon = formProps.value.showColon ? '：' : ''
+	if (ele) {
+		return ele.showLabel ? '' : ele.label + showColon
+	} else {
+		return ''
+	}
 }
 
 // 返回当前item项的校验规则
 const itemRules = computed(() => {
-    let temp
-    const itemR: any = props.data.item?.rules || []
-    const customR = formatCustomRules()
-    // 如果三个都没有设置，则返回undefined
-    if (itemR?.length || customR?.length) {
-      	temp = [...customR, ...itemR]
-    }
-    return temp
+	let temp
+	const itemR: any = props.data.item?.rules || []
+	const customR = formatCustomRules()
+	// 如果三个都没有设置，则返回undefined
+	if (itemR?.length || customR?.length) {
+		temp = [...customR, ...itemR]
+	}
+	return temp
 })
 // 处理自定义校验规则，将customRules转换后追加到rules里
 const formatCustomRules = () => {
-    const rulesReg: any = {}
-    validate &&
-    validate.forEach(item => {
-        rulesReg[item.type] = item.regExp
-    })
-
-    // 获取校验方法 父级使用provide方法注入
-    const temp: any = []
-    props.data.customRules?.forEach((item: any) => {
+	const rulesReg: any = {}
+	validate &&
+		validate.forEach(item => {
+			rulesReg[item.type] = item.regExp
+		})
+
+	// 获取校验方法 父级使用provide方法注入
+	const temp: any = []
+	props.data.customRules?.forEach((item: any) => {
 		if (!item.message && item.type !== 'methods') {
 			return // 方法时允许提示信息为空
 		}
@@ -132,7 +129,7 @@ const formatCustomRules = () => {
 			// 方法时
 			const methods: any = item.methods
 			if (methods) {
-			obj = { validator: inject(methods, {}) }
+				obj = { validator: inject(methods, {}) }
 			}
 		} else if (item.type) {
 			obj = { pattern: rulesReg[item.type as string] }
@@ -152,39 +149,81 @@ const formatCustomRules = () => {
 				message
 			)
 		)
-    })
-    return temp
+	})
+	return temp
 }
 
 
 
-const valueChanged = (val:any) =>{
-	//console.log("关联表单选择--->",val)
+const valueChanged = (val: any) => {
+	//console.log("关联表单选择--->", val)
+
+	value.value = val.currentVal
+	emits("asfValueChanged", val)
+
+
+
+
+
+}
+
+
+const valueChangedTable = (val: any) => {
+	//console.log("关联表单选择table--->", val)
 	
-    value.value = val.currentVal
-	emits("asfValueChanged",val)
+	
+	emits("asfValueChanged", val)
+
+
+	//确定哪个或哪些表单是被放置在子表中的
+	//valueTest.value = formProps.model
+	//console.log(formProps.value.model)
+	for (let key in formProps.value.model) {
+		if (key.startsWith("table")) {
+			if (Array.isArray(formProps.value.model[key])) {
+				if (formProps.value.model[key].length > 0) {
+					for (let key1 in formProps.value.model[key][0]) {
+
+						if (key1 == props.data.name) {
+							/* console.log(key1)
+							//当前关联表单在子表的第几行
+							console.log(props.rowIndex)
+							//当值变化时
+							console.log(formProps.value.model[key][props.rowIndex][key1])
+							console.log(val.currentVal) */
+							formProps.value.model[key][props.rowIndex][key1] = val.currentVal
+						}
+					}
+				}
+
+			}
+
+		}
+	}
+
 }
 
 
 
 
 </script>
-<style  lang='scss' scoped>
-.imgbox{
-    padding: 0 5px;
-    max-width: 300px;
-    max-height: 200px;
-    width: 100%;
-    height: 200px;
-    .image-slot {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        background: var(--el-fill-color-light);
-        color: var(--el-text-color-secondary);
-        font-size: 30px;
-    }
+<style lang='scss' scoped>
+.imgbox {
+	padding: 0 5px;
+	max-width: 300px;
+	max-height: 200px;
+	width: 100%;
+	height: 200px;
+
+	.image-slot {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		background: var(--el-fill-color-light);
+		color: var(--el-text-color-secondary);
+		font-size: 30px;
+	}
 }
 </style>