FxObjectForm组件

用于展示业务对象的新建编辑表单。

Attributes

参数	说明	类型	可选值	默认值
apiName	业务对象apiname(必填)	String	—	-
type	新建或者编辑	String	add/edit	add
recordType	业务类型(不传时会自动获取对象的业务类型，如果只存在一个业务类型则直接展示，如果存在多个则展示下拉选框，自主进行选择)	String	-	-
data	如果编辑则传入表单数据	Object	-	-
beforeParse	表单数据进行处理前的钩子函数	Function	-	-
beforeCalculate	表单数据进行计算前的钩子函数	Function	-	-
beforeSubmit	提交表单数据前的钩子函数	Function	-	-
beforeLayoutRule	表单布局规则处理前的钩子函数	Function	-	-
submitSuccess	表单提交成功后的钩子函数	Function	-	-
showTitle	是否展示表单title	Boolean	-	true
showButtonsOnTop	表单操作按钮是否显示在头部，false则显示在底部	Boolean	-	false
cancel	表单的取消按钮回调	Function	-	-

简单使用

组件通过 FxUI.component.get('ObjectForm') 获取。

代码示例：

<template>
    <object-form apiName="AccountObj" type="add" recordType="default__c"></object-form>
</template>
<script>
    export default {
		components: {
			ObjectForm: FxUI.component.get('ObjectForm')
		}
    }
</script>

效果展示：

高阶使用

最简单的使用必然满足不了企业特殊的需求，这里我们为开发者提供了一些扩展方式，能够快速开发这些定制化功能。

钩子

对象表单在向服务器提交数据前，都要经过一系列的过程--例如，表单布局的获取及解析、布局规则的获取及解析、实时计算等。同时在这个过程中也会运行一些叫做钩子的函数，这给了开发人员在不同阶段添加自己的代码的机会。

<template>
    <object-form :beforeParse="beforeParse" :beforeSubmit="beforeSubmit" apiName="AccountObj" type="add"></object-form>
</template>
<script>
	export default {
		components: {
			ObjectForm: FxUI.component.get('ObjectForm')
		},
		data() {
			return {
				beforeParse(res){
					// todo what you want
					return res;
				},
				beforeSubmit(data) {
					// todo what you want
					return data;
				}
			}
		}
	}
</script>

关于钩子函数的详细信息，请继续往后翻阅。

组件插槽

组件插槽的机制允许开发人员将某个组件或某个类型的组件替换成自己开发的组件，从而修改该字段的交互形式。

<template>
    <object-form apiName="AccountObj" type="add">
		<!-- 替换所有的多行文本字段 -->
		<template v-slot:long_text="slotProps">
			<cus-field-one :fieldAttr="slotProps.fieldAttr"></cus-field-one>
		</template> 
		<!-- 替换api_name为field_Hs2S3__c的字段 --> 
		<template v-slot:field_Hs2S3__c="slotProps">
			<cus-field-two :fieldAttr="slotProps.fieldAttr"></cus-field-two>
		</template>   
	</object-form>
</template>
<script>
    export default {
		components: {
			ObjectForm: FxUI.component.get('ObjectForm'),
			CusFieldOne: {
				render: h => h('div', '自定义字段1')
			},
			CusFieldTwo: {
				render: h => h('div', '自定义字段2')
			}
		}
    }
</script>

关于组件插槽的详细信息，请继续往后翻阅。

钩子

beforeParse

表单接口调用成功后调用，发生在渲染之前。这里可以修改表单上的字段描述、布局描述、布局规则等。

beforeSubmit

提交数据时调用，发生在调用新建\编辑接口之前。这里适合对提交的数据进行修改。

示例：

修改邮箱字段，输入框旁边直接显示邮箱的后缀。

// app.vue
<template>
    <object-form :apiName="data.object_api_name" type="add">
        <template v-slot:email="slotProps">
            <CustomField :apiname="slotProps.apiname" :fieldAttr="slotProps.fieldAttr"></CustomField>
        </template>      
    </object-form>
</template>
<script>
import CustomField from './customField';
export default {
    props: ['data', 'userData'],
    components: {
        CustomField,
		ObjectForm: FxUI.component.get('ObjectForm')
    }
}
</script>

// customField.vue
<template>
	<div class="custom-email">
		<fx-input ref="emailInput" class="custom-email_input" v-model="dInput" placeholder="" @change="onChange"></fx-input>
		<span class="custom-email_span">@fxiaoke.com</span>
	</div>
</template>
<script>
	export default {
		props: {
			fieldAttr: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		data() {
			return {
				dInput: ''
			}
		},
		methods: {
			onChange () {
                const apiName = this.fieldAttr.api_name;
				let reg = /^\w+([-+.]*\w+)*$/;
				if (!reg.test(this.dInput)) {
                    this.$context.showFieldError(apiName, '请输入正确的邮箱', $(this.$el), );
				} else {
                  	this.$context.hideFieldError(apiName);
				}
              	this.$context.setData(apiName, {
					apiname: apiName,
					value: this.dInput + '@fxiaoke.com'
				});
			}, 
			getValue () {
				return this.dInput + '@fxiaoke.com';
			}
		}
	}
</script>
<style lang="less">
	.custom-email{
		display: flex;
		align-items: center;
		.custom-email_input{
			flex: 1;
		}
		.custom-email_span{
			width: 100px;
			margin-left: 10px;
			text-align: right;
		}
	}
</style>

效果展示：