功能流程预处理

Sen
• 发表于:2023年04月07日 17:44 • 更新于:2023年04月11日 09:23
2386

前言

本文档仅介绍功能流程中的【交互-预处理】步骤的编程使用,其他涉及编程的地方由相应文档进行介绍。

编程方法体

代码如下:         复制代码

function prepare($programStore,$form,vue){
//$programStore:功能表单对象
//$form:暂时用不上
//vue:全局vue对象
}

$programStore

获取步骤的数据

$programStore.getters["getFormValue"]("步骤id");

获取集合步骤的数据

$programStore.getters["getFormValue"]("步骤id")["data"];

功能禁止提交

$programStore.dispatch("error/setText","按钮提示文本");

取消禁止提交

$programStore.dispatch("error/setText","");

设置整个步骤的值,一般配合获取步骤的值来使用

代码如下:         复制代码

$programStore.dispatch("set", {
procedure: "步骤id",
value: {},//步骤的值
});

设置集合步骤数据(固定写法)

代码如下:         复制代码

let list=[];
let view = $programStore.getters["view/getView"]("集合步骤id");
let tableStore = view.tableStore;
tableStore.dispatch("setData", _.cloneDeep(list));

监控,可监控步骤、属性

代码如下:         复制代码

$programStore.watch(()=>{
    let obj = "需监控的对象"
    return obj
},function(value,oldValue){
    //上面return的值有变化时执行此函数,value为变化后的值,oldValue为变化前的值
    //do something..
})

示例

监控步骤数据,步骤数据有变动时会执行

代码如下:         复制代码

$programStore.watch(()=>{
    return $programStore.getters["getFormValue"]("步骤id");
},function(value,oldValue){
    //do something..
    if (!_.isEqual(value, oldValue)) {//数据改动
    }
})

监控步骤中某个属性

代码如下:         复制代码

$programStore.watch(()=>{
    return programStore.getters["getFormValue"]("步骤id")["属性id"];
},function(value,oldValue){
    //do something..
})

设置某个步骤的某个字段的值(自带监控,自动计算)

代码如下:         复制代码

$programStore.util.compute("步骤id","属性id",(root)=>{
    //root为整个功能的值,root["步骤id"]可获取步骤值
    let result = 1;
return result;//计算结果
})

提交功能

$programStore.dispatch("submit");

隐藏步骤

代码如下:         复制代码

$programStore.dispatch("helper/hide",{
    procedure:$procedure//步骤id
})

隐藏步骤中一个属性

代码如下:         复制代码

$programStore.dispatch("helper/hide",{
    procedure:$procedure,//步骤id
    field:$field,//属性id
})

显示步骤

代码如下:         复制代码

$programStore.dispatch("helper/show",{
    procedure:$procedure,//步骤id
})

显示步骤中一个属性

代码如下:         复制代码

$programStore.dispatch("helper/show",{
    procedure:$procedure,//步骤id
    field:$field,//属性id
})

禁止填写某个属性

代码如下:         复制代码

$programStore.dispatch("helper/disable",{
    procedure:$procedure,//步骤id
    field: $field,//属性id
});

恢复填写某个属性

代码如下:         复制代码

$programStore.dispatch("helper/enable",{
    procedure:$procedure,//步骤id
    field: $field,//属性id
});

获取当前功能id

$programStore.getters["program"]._flow;

功能钩子

代码如下:         复制代码

$programStore.dispatch("handler/set", {
    before: async function (store, form) {
        //提交前钩子,return false时将会阻止提交功能
        // 停止提交
        // return false;

    },
    after: async function (store, result) {
        //提交后钩子
        //阻止关闭窗口
        // return false;
    }
}) 

隐藏集合步骤的删除按钮(固定写法)

代码如下:         复制代码

let view = $programStore.getters["view/getView"]("集合步骤id");
view.getTableStore().dispatch("plugin/disable",{
    type:"extend",
    key:"remove",
});

vue

获取当前用户对象(用户表)

vue.$store.getters["context/user"];

查询数据表的数据(异步)

代码如下:         复制代码

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

关闭当前层级弹窗、窗口

vue.$store.dispatch("modal/pop")

插入按钮(pc端)

代码如下:         复制代码

vue.$store.dispatch("component/build", function (h) {
    return h("BmButton", {
        on: {
            click() {//点击事件
                alert("click")
            }
        }
    }, "按钮名")
}).then(function (view) {
    let buttonElement = view.$el;
    //按钮样式
    buttonElement.style.position = "absolute";
    buttonElement.style.right = "65px";
    buttonElement.style.height = "40px";

    //按钮插入到指定元素前
    let insertToElement = document.querySelector(`.modal-header-fullscreen`);
    insertToElement.before(buttonElement);
})

弹窗打开自定义页

代码如下:         复制代码

vue.$$modal.show("BmPage", {
    fullscreen: true,//是否全屏
    props: {
        page:"自定义页id",
    },
    okText:"确认按钮文本",
    onOk:function(){},//点击确认按钮触发的事件
});

调用功能

代码如下:         复制代码

vue.$$cmd({
    type:"program",
    value:{
        flow:"",//功能id
skip:true,//是否直接提交功能
        data:{}//功能表单传值
    }
},{
    callback:function(res){}//功能运行完毕后的回调函数,res是功能返回值
});

弹出一个确认弹窗

代码如下:         复制代码

vue.$$modal.confirm("标题", "弹窗内容,支持html", {
    onOk() {
        //点击确定后执行的代码块
        alert("ok")
    },
});

开启全局加载动画

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

关闭全局加载动画

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

通过经纬度获取位置信息(经纬度可通过企业微信的js-sdk获取)

代码如下:         复制代码

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

移动端扫描二维码

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

code为扫描结果

移动端扫描条形码

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

decoder为条形码类型,可选的类型有:code_128_reader、...

本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
功能流程预处理
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
微信扫码添加白码小助理
返回顶部