嵌入第三方系统

约 589 字大约 2 分钟

2025-12-16

很多企业都会有自己的系统，他们在使用纷享销客的同时，又希望可以快速地访问自有系统里的相关信息，当然这种访问是需要将纷享销客的某些数据传递过去，而不单单只是挂一个链接。这片文章便教您如何开发自定义组件嵌入第三方系统。

制定url规则

以百度搜索为例：

我们先来看一下百度的url规则是什么？

规则为 https://www.baidu.com/s?ie=UTF-8&wd=${keyword}。

例如： https://www.baidu.com/s?ie=UTF-8&wd=CRM，便是使用百度搜索CRM

书写自定义控制器

String url = "https://www.baidu.com/s?ie=UTF-8&wd=" + keyword //上述的url规则
log.info("url=" + url)

Map ret = ["url": url]
return ret

需要配置到自定义函数当中，配置完将会生成自定义函数的API Name，假设为 func_nK8fQ__c

下面开始开发自定义组件。

书写template

<template>
    <div style="width: 100%;">
        <iframe id="" name="google_ads_frame2" width="100%" height="400" frameborder="0" :src="url" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
    </div>
</template>

书写script

我们来理一下思路：

我们需要获取当前详情的所有数据。这里依赖FxUI提供的api
调用自定义控制器来获取最终的链接。这里依赖FxUI提供的api

<script>
export default {
    props: ['data'],
    data() {
        return {
            url: ''
        }
    },
    created() {
        this.fetch();
    },
    methods: {
        fetch() {
            //上述提到的第一步。获取对象数据
            FxUI.objectApi.fetch_data(this.data.object_api_name, this.data.object_id).then((data) => {
                //上述提到的第二步。调用自定义控制器
                FxUI.userDefine.call_controller('func_nK8fQ__c', {
                    params:[
                        {
                            "name": "keyword",
                            "value": data.name,
                            "type": "String"
                        }
                    ]
                }).then((res) => {
                    if(res.Value.success) {
                        this.url = res.Value.functionResult.url
                    }
                })
            })
        }
    }
}
</script>

使用了内联样式，所以不需要书写style。

最终全部代码如下

<template>
    <div style="width: 100%;">
        <iframe id="" name="google_ads_frame2" width="100%" height="400" frameborder="0" :src="url" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
    </div>
</template>
<script>
export default {
    props: ['data'],
    data() {
        return {
            url: ''
        }
    },
    created() {
        this.fetch();
    },
    methods: {
        fetch() {
            FxUI.objectApi.fetch_data(this.data.object_api_name, this.data.object_id).then((data) => {
                FxUI.userDefine.call_controller('func_nK8fQ__c', {
                    params:[
                        {
                            "name": "keyword",
                            "value": data.name,
                            "type": "String"
                        }
                    ]
                }).then((res) => {
                    if(res.Value.success) {
                        this.url = res.Value.functionResult.url
                    }
                })
            })
        }
    }
}
</script>

实际的展示效果

实际场景所开发的自定义控制器和自定义组件远比这个复杂，这里我们只抛砖引玉，具体的项目实施还需要您从中汲取，从而构建出丰富且多样化的应用场景。