核心服务 HamSfcFormService 介绍

核心服务函数，以下简称 service

说明

service 主要用于对表单配置数据、表单Ref元素对象、主表Props入参、主表源数据进行管控。

service 服务使用注入的方式，生存在表单组件全局，一个表单仅允许存在一个 service

servcie 会根据配置文件生成响应的规则地图、初始化表单数据（初始化的数据不影响初始数据，一旦数据发生改变讲全局生效）

使用

一般应用于自定义表单模板

引用，注入表单全局

import { HamSfcFormService, serviceKey } from '@hamlet/super-form-core'
import { provide } from 'vue'

const service = new HamSfcFormService()
provide(serviceKey, service)

加载props , 注意入参必须包含一个默认绑定数据 modelValue , 和一个配置入参 config

const props = defineProps(['config', 'modelValue'])
service.loadProps(props)

响应配置动态加载

import { watch } from 'vue'

watch(
	() => props.config,
	value => {
		service.load(value, props.modelValue)
	},
	{
		immediate: true,
		deep: true
	}
)

双向绑定数据，建议使用一个标识符 formMount 来保证初始化已完成

import { computed } from 'vue'

const emits = defineEmits(['update:modelValue', 'change'])

const formMount = ref(false)
const bindValue = computed(() => {
	if (formMount.value) return service.getData(props.modelValue)
	service.load(props.config, props.modelValue)
	return service.getData()
})

// 触发变更
const handleChange = (item: { $uuid: string }) => {
	const fieldName = service.getFieldName(item.$uuid)
	const option = { fieldName, meta: item }
	emits('update:modelValue', bindValue.value)
	emits('change', bindValue.value, option)
	nextTick(() => {
		service.getAction('validateField').run('fieldName')
		formMount.value = true
	})
}

参考案例