字段事件

此处PC端和移动端的字段事件整体逻辑是一致的。在未进行拆分之前，字段事件的逻辑可以写在代码生成的config.ts文件中。具体是在每个字段的componentProps下的events属性中编写。能够接收的事件类型随组件不同而有所差异，如input组件中可以接收onChange、onBlur事件，select组件中可以接收onChange、onOptionsChange事件等，具体能够抛出的事件需要在组件中查看。在events中编写的事件会在simpleFormItem.vue文件中被收集解析并触发。（PC与移动端逻辑相同）

if (componentProps['events']) {
    for (const eventKey in componentProps['events']) {
        try {
            const fun = componentProps['events'][eventKey];
            let event;
            if (typeof fun === 'string') {
                event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
            } else if (typeof fun === 'function') {
                event = fun;
            }
            componentProps['on' + upperFirst(eventKey)] = function (value, selectedOptions) {
                let cloneFormModel = cloneDeep(formModel);
                for (let item in cloneFormModel) {
                    let field = camelCaseString(item);
                    if (field) cloneFormModel[field] = cloneFormModel[item];
                }
                event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData, value, selectedOptions });

                if (isCamelCase) {
                    for (let item in formModel) {
                        let field = camelCaseString(item);
                        if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
                            formModel[item] = cloneFormModel[field];
                        }
                    }
                }
            };
        } catch (error) {
            console.log('error', error);
            notification.error({
                message: 'Tip',
                description: '触发事件填写有误！'
            });
        }
    }
}

但是这样会导致代码生成的config.ts文件中会出现大量的事件函数，导致代码可读性降低，且修改表单值及其他变量很是不方便，因此在拆分后不推荐这种方式。

拆分表单后，可以直接将公共组件暴露出来，写在生成的CustomDevForm.vue文件中，所有的事件显隐等都可以自己进行控制。

<template>
    <Col v-if="getIfShow2('9a8db2186edb49879f59162ae2660b21')" v-show="getIsShow2('9a8db2186edb49879f59162ae2660b21')" :span="getColWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'])">
        <template v-if="showComponent(schemaMap['9a8db2186edb49879f59162ae2660b21'])">
            <FormItem
                :label="'审计内容'"
                :rules="schemaMap['9a8db2186edb49879f59162ae2660b21'].rules"
                name="title"
                :required="true"
            >
                <a-input v-model:value="formModel[schemaMap['9a8db2186edb49879f59162ae2660b21'].field]" @blur="blurInput"/>
            </FormItem>
        </template>
    </Col>
</template>

如果嫌这样麻烦，并且只是想监听字段变化并进行相应修改的话，也可以在代码生成的form层或者CustomDevForm对formModal的相应表单值进行监听，字段有变化后进行相应修改。