pc_vue_admin/src/components/DynamicForm/index.vue

<template>
	<a-form :model="model" :rules="rules" layout="vertical" ref="formRef">
		<a-row :gutter="16">
			<a-col :span="item.span || 6" v-for="(item, index) in formItems" :key="index">
				<a-form-item :label="item.label" :name="item.name" :rules="item.rules">
					<component style="width: 100%" :is="item.type" v-model:value="model[item.name]" :disabled="allDisabled" v-bind="item.attrs"  />
				</a-form-item>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup>
	import { ref, watch } from 'vue'

	const props = defineProps({
		formItems: {
			type: Array,
			required: true
		},
		model: {
			type: Object,
			required: true
		},
		rules: {
			type: Object,
			default: () => ({})
		},
		allDisabled: {
			type: Boolean,
			default: false
		}
	})

	const formRef = ref()

	// Expose validate method
	defineExpose({
		validate: () => formRef.value.validate(),
		resetFields: () => formRef.value.resetFields()
	})
</script>

<style scoped>
	/* Add your styles here */
</style>