FxObjectDetail组件

用于展示业务对象的数据详情。

Attributes

参数	说明	类型	可选值	默认值
apiName	业务对象apiname(必填)	String	—	-
dataId	业务对象数据id(必填)	String	—	-
dataIds	数据列表的所有id，翻页需要	Array	—	-
isSlide	是否策划	Boolean	—	-
modal	是否需要折罩（侧滑时生效）	Boolean	—	-
zIndex	层级（侧滑时生效）	Number	—	-
fullScreen	是否全屏（侧滑时生效）	Boolean	—	-

简单使用

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

代码示例：

<template>
    <object-detail apiName="AccountObj" dataId="dlkj2laksjdflj2lkajsd"></object-detail>
</template>
<script>
    export default {
		components: {
			ObjectDetail: FxUI.component.get('ObjectDetail')
		}
    }
</script>

效果展示：

组件扩展

为了满足企业定制化的需求，这里我们为开发者提供了一些扩展方式，能够快速开发出相应功能。

钩子

对象详情在渲染前，都要经过一系列的过程--例如，获取详情布局和数据、解析数据等。同时在这个过程中也会运行一些叫做钩子的函数，这给了开发人员在不同阶段添加自己的代码的机会。

<template>
    <object-form apiName="AccountObj" dataId="dlkj2laksjdflj2lkajsd" :beforeInitDataAsync="beforeInitDataAsync" :beforeFetch="beforeFetch"></object-form>
</template>
<script>
	export default {
		components: {
			ObjectDetail: FxUI.component.get('ObjectDetail')
		},
		data() {
			return {
				beforeInitDataAsync(data, next) {
                    //todo what you want
                    next(data);
                },
                beforeFetch(param) {
                    //todo what you want
                    return param;
                }
			}
		}
	}
</script>

组件插槽

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

<template>
    <object-detail apiName="AccountObj" type="add">
		<!-- 替换详细信息组件 -->
		<template v-slot:Form="slotProps">
			<cus-form :compInfo="slotProps.compInfo" :apiName="slotProps.apiName" :dataId="slotProps.dataId"></cus-form>
		</template> 
	</object-detail>
</template>
<script>
    export default {
		components: {
			ObjectDetail: FxUI.component.get('ObjectDetail'),
			CusComp: {
				render: h => h('div', '自定义组件')
			}
		}
    }
</script>

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

钩子

beforeFetch

详情页调用接口时调用，发生在调用接口之前。这里可以修改调用接口的参数。

钩子接受一个参数：

• data: Object
  • url: String： 获取详情布局和数据的接口
  • postData: Object： 请求接口的参数
    • objectDataId: String： 数据id
    • objectDescribeApiName: String： 业务对象apiName

overide完之后，确保 return 一个 data 出来。

beforeFetchAsync

beforeFetch的异步方式。

钩子接受两个参数：

• data: Object：和 beforeFetch 的 data 参数一致。
• next: Function：一定要调用该方法来 resolve 这个钩子。

beforeParse

详情页解析数据时调用，发生在解析数据之前。这里可以修改接口返回的所有数据。

钩子接受一个参数：

• data: Object：
  • data: Object：详细数据
  • describe: Object：业务对象的描述信息
  • layout: Object：详情页的布局信息
    • components: Array：详情中的所有组件的描述信息
    • layout_structure: Object：详情的布局信息

overide完之后，确保 return 一个 data 出来。

beforeParseAsync

beforeParse的异步方式。

钩子接受两个参数：

• data: Object：和 beforeParse 的 data 参数一致。
• next: Function：一定要调用该方法来 resolve 这个钩子。

beforeInitData

详情页渲染时调用，发生在渲染之前。这里可以修改解析后的所有数据。

钩子接受一个参数：

• data: Object：
  • components: Object：组件解析后的描述信息。key为组件的apiName
  • data: Object：解析后的详细数据
  • describe: Object：业务对象解析后的描述信息
  • layout: Array：详情解析后的布局信息

overide完之后，确保 return 一个 data 出来。

beforeInitDataAsync

beforeInitData的异步方式。

钩子接受两个参数：

• data: Object：和 beforeInitData 的 data 参数一致。
• next: Function：一定要调用该方法来 resolve 这个钩子。