import{_ as s,c as a,a as p,o as t}from"./app-CDlLWk6N.js";const e={};function o(l,n){return t(),a("div",null,n[0]||(n[0]=[p(`

字段事件

此处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的相应表单值进行监听,字段有变化后进行相应修改。

`,7)]))}const i=s(e,[["render",o]]),u=JSON.parse('{"path":"/front_dev/field_events.html","title":"字段事件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744964300000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"a0f722b8cfdbd98f98edf701d250f0318870372b","time":1744964300000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段编写"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍:字段事件;高级二开:弹窗、表单、表格"}]},"filePathRelative":"front_dev/field_events.md"}');export{i as comp,u as data};