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};