From 6a764cea504fba5826137b46b361798668b1e1e1 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Mon, 1 Apr 2024 13:29:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=A1=A8=E5=8D=95v0.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/assembly/index.ts   |  11 ++
 .../DesignForm/public/form/formGroup.vue      |   1 +
 .../associatedforms/associatedForms.vue       |  15 ++
 src/widget/associatedforms/index.vue          | 181 ++++++++++++++++++
 src/widget/index.ts                           |   2 +
 5 files changed, 210 insertions(+)
 create mode 100644 src/widget/associatedforms/associatedForms.vue
 create mode 100644 src/widget/associatedforms/index.vue

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 890fb7f22..6d7b9e1f5 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -419,6 +419,17 @@ const selectOption: any = [
 			},
 			config: {}
 		},
+		{
+			type: 'associatedForms',
+			label: '关联表单',
+			icon: '',
+			iconFont: 'fa-wpforms',
+			control: {
+				modelValue: '',
+			},
+			config: {}
+		}
+		
 	]
 	},
 	{
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 58cf2b01c..504b71966 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -426,6 +426,7 @@ onMounted(()=>{
 					</div>
 					
 				</template>
+				<AssociatedForms  v-else-if="element.type === 'associatedForms'" :data="element" />
 				<LowcodeImage  v-else-if="element.type === 'lowcodeImage'" :data="element" />
 				<LowcodeTransfer  v-else-if="element.type === 'lowcodeTransfer'" :data="element" />
 				<VideoUpAndPlay  v-else-if="element.type === 'videoUpAndPlay'" :data="element" />
diff --git a/src/widget/associatedforms/associatedForms.vue b/src/widget/associatedforms/associatedForms.vue
new file mode 100644
index 000000000..3ba08b5ac
--- /dev/null
+++ b/src/widget/associatedforms/associatedForms.vue
@@ -0,0 +1,15 @@
+<template>
+
+
+  fdssdafsdaf
+
+
+</template>
+
+<script setup >
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/widget/associatedforms/index.vue b/src/widget/associatedforms/index.vue
new file mode 100644
index 000000000..162b8041a
--- /dev/null
+++ b/src/widget/associatedforms/index.vue
@@ -0,0 +1,181 @@
+<!--
+@ 作者: 李文轩
+@ 时间: 2024-03-14 13:49:57
+@ 备注: 
+-->
+<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" >
+    </el-form-item>
+
+    <AssociatedForms :data="props.data"></AssociatedForms>
+</template>
+<script lang='ts' setup>
+import AssociatedForms   from './associatedForms.vue';
+import { 
+	constControlChange,
+    constFormProps,
+} from '@/api/DesignForm/utils'
+import validate from '@/api/DesignForm/validate'
+import { FormItem, FormList } from '@/api/DesignForm/types'
+const props = withDefaults(
+    defineProps<{
+		data: FormList
+		tablekey: any
+		numrun?: number
+		modelValue?: any // 子表和弹性布局时时有传
+		tProp?: string // 子表时的form-item的prop值，用于子表校验用
+    }>(),
+    {}
+)
+const emits = defineEmits<{
+    (e: 'update:modelValue', numVal: any): void
+}>()
+
+const formProps = inject(constFormProps, {}) as any
+const type = computed(() => {
+    return formProps.value.type
+})
+const config = computed(() => {
+    return props.data.config || {}
+})
+
+const changeEvent = inject(constControlChange, '') as any
+
+const value = computed({
+    get() {
+		if (props.tProp) {
+			// 表格和弹性布局
+			return props.modelValue
+		} else {
+			return formProps.value.model[props.data.name]
+		}
+    },
+    set(newVal: any) {
+		if (props.tProp) {
+			emits('update:modelValue', newVal)
+		}
+		updateModel(newVal)
+    }
+})
+const updateModel = (val: any) => {
+	let controlAttribute = ""
+	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
+    })
+}
+
+
+
+const getLabel = (ele: FormItem) => {
+    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
+})
+// 处理自定义校验规则，将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) => {
+		if (!item.message && item.type !== 'methods') {
+			return // 方法时允许提示信息为空
+		}
+		let obj = {}
+		if (item.type === 'required') {
+			obj = { required: true }
+		} else if (item.type === 'rules') {
+			// 自定义表达式
+			obj = { pattern: item.rules }
+		} else if (item.type === 'methods') {
+			// 方法时
+			const methods: any = item.methods
+			if (methods) {
+			obj = { validator: inject(methods, {}) }
+			}
+		} else if (item.type) {
+			obj = { pattern: rulesReg[item.type as string] }
+		}
+		// 这里判断下防某些条件下重复push的可能或存重复校验类型
+		let message: any = { message: item.message }
+		if (!item.message) {
+			// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
+			message = {}
+		}
+		temp.push(
+			Object.assign(
+				{
+					trigger: item.trigger || 'blur'
+				},
+				obj,
+				message
+			)
+		)
+    })
+    return temp
+}
+
+
+
+
+
+
+
+
+</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>
\ No newline at end of file
diff --git a/src/widget/index.ts b/src/widget/index.ts
index fadb83609..f3ac33870 100644
--- a/src/widget/index.ts
+++ b/src/widget/index.ts
@@ -11,6 +11,7 @@ import videoUpAndPlay from './videoupload/index.vue'
 import lowcodeCarsusel from './carousel/index.vue'
 import lowcodeTransfer from './lowcodetransfer/index.vue'
 import lowcodeImage from './lowcodeimage/index.vue'
+import associatedForms from './associatedforms/index.vue'
 
 export default (app: any)	=> {
 	app.component('SerialNumber', serialNumber)
@@ -23,4 +24,5 @@ export default (app: any)	=> {
 	app.component('LowcodeCarsusel',lowcodeCarsusel)
 	app.component('LowcodeTransfer',lowcodeTransfer)
 	app.component('LowcodeImage',lowcodeImage)
+	app.component('AssociatedForms',associatedForms)
 }