自定义组件使用说明

概述

白码低代码平台自定义页内支持自定义组件，可自由编辑代码，点击组件库中的基础——自定义即可添加一个空的自定义组件，如下图。

组件id如下图，可点击复制

组件vue编程

自定义页路径：

${host}/app/${project}/${page}?query={key:value}

host：域名，公有云固定是https://v1.bnocode.com/ 私有化时使用系统域名

project：项目id

page：自定义页id

query：传递路由参数值

组件属性

在白码自定义页内创建的每个组件，都带有白码封装的几个属性，可通过代码直接调用，如下表。

可调用接口

在前端，白码也封装了一些可调用的接口，用于满足各种业务场景。

1.  调用命令

this.$$cmd({type,value},{selected,callback})

可调用功能、跳转页面、查看数据详情、查看集合、右侧弹窗提示、打开确认弹窗

注意事项：调用功能时，如果用户是外部用户，则需要功能权限，否则不需要功能权限。

参数说明

示例

① 调用功能

代码如下:         复制代码

this.$$cmd({
    type:"program",
    value:{
        flow:"功能id",
        skip:false,
        data:{
            "步骤id":{
                "字段id":"传值"
            }
        }
    }
},{
    seleceted:{},
    callback:function(res){//回调函数
        console.log(res.data)
    }
})

② 跳转页面

代码如下:         复制代码

this.$$cmd({
    type:"redirect",
    value:{
        url:"",
        blank:false
    }
})

③ 查看数据详情

代码如下:         复制代码

this.$$cmd({
    type:"detail",
    value:{
        entity:"",
        id:"",
        title:""
    }
})

④ 查看集合

代码如下:         复制代码

this.$$cmd({
    type:"collection",
    value:{
        entity:"",
        entityKey:"",
        parent:""
    }
})

⑤ 右侧弹窗提示

代码如下:         复制代码

this.$$cmd({
    type:"tips",
    value:{
        title:"",
        content:""
    }
})

⑥ 打开确认弹窗

代码如下:         复制代码

this.$$cmd({
    type:"confirm",
    value:{
        title:"",
        content:"",
        onOk:function(){
            
        }
    }
})

⑦ 发起http请求

代码如下:         复制代码

this.axios.request({
    method:"post",//请求类型get/post
    url:"",//请求接口
    data:{}//请求体
}).then(res=>{
    //res响应内容 res.data响应体
    console.log(res)
})

2.  异步查询数据表数据

vue.$store.dispatch("data/show",{dataset,query}).then(res=>{})

参数说明

示例

代码如下:         复制代码

vue.$store.dispatch("data/show", {
    dataset: "数据表id/数据集id",//使用数据表id查询时会受到主数据集影响
    query: {
        query: {//查询条件
            "field": value
        },
        empty: false,
        cache:300,//缓存秒数
        page: {
            index: 1,
            size: 100
        }
    }
}).then(res => {
    let data = res.data.data;//查询到的数据collection
});

3.异步查询数据集的分组数据

vue.$store.dispatch("data/show",{flow,query}).then(res=>{})

参数说明

示例

代码如下:         复制代码

//获取数据集分组数据（异步）
vue.$store.dispatch("data/show",{
    flow:"数据集id",
    query:{
        field:{
            group:true,
            key:"分组字段field"
        }
    }
}).then((res)=>{
    console.log(res);//返回值
})

4.开启/关闭全局loading动画

开启：vue.$store.dispatch("view/loading/setVisible",true)

关闭：vue.$store.dispatch("view/loading/setVisible",false)

5.通过经纬度值获取位置信息

注意：私有化环境需要联系客服购买此功能！公有云环境可直接使用。

经纬度值需要自行从其他途径获取，例如企业微信的客户端api

vue.$store.dispatch("helper/lbs/getPoi",{type:"weixin",lat,lng})

示例

代码如下:         复制代码

vue.$store.dispatch("helper/lbs/getPoi",{
        type:"weixin",
        lat:"经度",
        lng:"纬度"
    }).then((list)=>{
        console.log(list)
    })

6.轻提示

vue.$toast("提示内容")

7.弹窗确认提示

弹出一个窗口作为确认提示，点击确定后运行一个函数。

vue.$$modal.confirm("title","html",{onOk(){}})

参数说明

示例

代码如下:         复制代码

vue.$$model.confirm("确认提交","确认提交数据吗",{
    onOk(){
        alert("提交成功")
    }
})

8.移动端扫描二维码

vue.$$modal.scan({type:"qrcode"}).then(code=>{})

code为扫描结果

9.移动端扫描条形码

vue.$$modal.scan({mode:"barcode",decoder:"code_128_reader"}).then(code=>{})

decoder为条形码类型，可选的类型有：code_128_reader、...

10.上传文件

vue.$$util.api.upload(fileName,file).then(res=>{

    console.log(res)

})

fileName是文件名，需要带文件后缀，file是文件，res返回值如下

使用示例

代码如下:         复制代码

vue.$$util.api.upload(fileName,file).then(res=>{
    let url = res.url || res.key || "";
})

组件（库）

在白码平台，目前前端开发中已引入了如下组件（库）。

①其中iview组件库处于非template/render模式，需要做标签转换，其他无需转换，如下表。

②vant组件的轻提示功能使用示例，其他用法可参考官方文档

Vant 2 - Mobile UI Components built on Vue

代码如下:         复制代码

let option = {
    message:"加载中...",
    forbidClick:true
}
vue.$toast.loading(option)

如有其他组件库/组件需要引入，请联系客服。