功能流程预处理

Sen

• 发表于：2023-04-07 17:44:22 • 更新于：2024-07-23 18:01

4260

前言

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

编程方法体

代码如下: 复制代码

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:{}//功能表单传值

option:{

fullscreen:flase,//是否全屏打开窗口

        }
    }
},{
    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)
    })