ygoa_miniapp/components/processForms/default-form.vue

<!-- 默认通用表单组件 -->
<template>
	<view class="default-form-component">
		<uni-card title="表单信息" spacing="0">
			<view v-for="(item, index) in formElements" :key="index" class="form-item">
				<text class="form-label">{{ item.label }}：</text>
				<text class="form-value">{{ item.value || '-' }}</text>
			</view>
		</uni-card>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
	formData: {
		type: Object,
		default: () => ({})
	},
	formElements: {
		type: Array,
		default: () => []
	},
	repeatingForm: {
		type: Object,
		default: () => ({ elementItem: [], elements: [] })
	}
})

const emits = defineEmits(['update'])

const formElements = ref<any[]>([])

// 监听表单数据变化
watch(() => props.formData, (newVal) => {
	if (newVal && newVal.formElements) {
		formElements.value = newVal.formElements
		emits('update', newVal)
	}
}, { immediate: true, deep: true })

// 暴露验证方法给父组件
defineExpose({
	validate: async () => {
		return Promise.resolve()
	}
})
</script>

<style lang="scss" scoped>
.default-form-component {
	.form-item {
		display: flex;
		margin-bottom: 10px;
		
		.form-label {
			color: #666;
			width: 100px;
			flex-shrink: 0;
		}
		
		.form-value {
			color: #333;
			flex: 1;
		}
	}
}
</style>