集合中根据条件动态变更计算公式

最新推荐文章于 2024-06-13 00:30:41 发布

"可乐不加冰-

最新推荐文章于 2024-06-13 00:30:41 发布

阅读量152

点赞数

分类专栏：低代码平台文章标签： java vue javascript 经验分享程序人生

本文链接：https://blog.youkuaiyun.com/qq_35559533/article/details/115401212

版权

低代码平台专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何在表单填写界面根据规格类型动态变更计算公式，通过预处理方式在用户输入时实时计算清单小计。在白码低代码平台上创建项目和实例表，设置步骤属性，编写预处理代码，并进行功能测试，确保计算结果在表单提交前即可得到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在计算清单小计的时候，往往会根据清单的规格类型有不同的计算公式，通常使用编程步骤来实现，但是使用编程步骤只有提交功能后才执行，无法在表单填写界面得知计算结果，下面介绍使用预处理（即在表单提交前，对表单数据进行处理。）的方式来实现这个效果。

准备工作：

1、在白码低代码开发平台上创建项目表，保存计算类型和计算参数，并准备几条数据
在这里插入图片描述

2、创建项目实例表
在这里插入图片描述

实现步骤：

1、创建功能，新增一个“集合-新增-项目实例”步骤
在这里插入图片描述

2、点击“设置”打开步骤属性选项卡，对各属性进行如下设置：
项目：固定、必填
在这里插入图片描述

类型：设为>本步骤>项目>类型
在这里插入图片描述

计算参数：设为>本步骤>项目>计算参数
在这里插入图片描述

单价：必填
在这里插入图片描述

小计：必填
在这里插入图片描述

3、获取该步骤的相关id：
步骤id：
在这里插入图片描述

项目id：
在这里插入图片描述

类型id：
在这里插入图片描述

计算参数id：
在这里插入图片描述

单价id：
在这里插入图片描述

小计id：
在这里插入图片描述

4、添加预处理步骤
在这里插入图片描述

5、打开预处理的代码编辑框，编写以下代码：

function prepare($programStore, $form, vue) {
    let procedure = "6063e94ce609b06e8140fd40";//“集合-新增-项目实例”步骤id
    let project = "6063f6db35dbab6e7ba76a16";//项目id
    let type = "6063e921e609b06e8140fd25";//类型id
    let config = "6063e926cbbb586e7aa4eab3";//计算参数id
    let price = "6063e936e609b06e8140fd29";//单价id
    let total = "6063e93e35dbab6e7ba76915";//小计id
 
    //监听
    vue.$watch(() => { return programStore.getters["getFormValue"](procedure) },//获取集合步骤数据
        function (value, oldValue) {
            if (!_.isEqual(value, oldValue) && value.data.length > 0) {//判断集合数据有变化才执行
                //处理数据
                let list = value.data;
                for (let i = 0, size = list.length; i < size; i++) {//遍历每行数据
                    if (list[i][project]) {//如果有选项目
                        //计算小计 
                        list[i][total] = list[i][type] == "固定" ? list[i][config]//类型为固定时，费用等于费率
                            : new Number(list[i][config]) * new Number(list[i][price]);//类型为动态时，费用等于费率*投保额
                    }
                }
                //将结果设入集合步骤
                value.data = list;
                $programStore.dispatch("set", { procedure, value });
            }
        }
    );
}