前端查询明细商品最新报价

lvv
• 发表于:2023年04月07日 17:44 • 更新于:2023年04月21日 17:41
566

概述

在前端的数据交互中,通常需要在填写提交表单的同时查询一些数据表来实现一些需求,具体在一些采购订单中,在录入采购明细时,想要查看商品对应供应商的最新报价。下面演示具体如何在采购明细中查询商品对应供应商的最新报价。

代码方法体说明

在白码平台中,一般使用“预处理”的步骤调用平台封装好的查询数据表方法,代码详细使用注释如下:

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680836673697_16.png

代码如下:         复制代码

function prepare($programStore, $form, vue) {
    let opt = {
        dataset: "数据表entity或数据集flow",//查询数据表或数据集数据时需传
        type: "数据表entity",//查询视图数据时需传
        query: {
            query: {},//查询条件,同后端的queryData
            empty: false,//true时不返回具体数据,仅返回数据总量
            cache: 60,//缓存60秒,一般不建议使用此参数
            page: {
                index: 0,//分页
                size: 1000,//每页最多支持10000
            }
        }
    }
    //查询数据
    vue.$store.dispatch("data/show", opt).then(res => {
        let list = res.data.data;//empty为false时返回分页数据集合
        let size = res.data.meta.size;//empty为true时返回查询条件下数据总量,忽略分页
    })
}

前期准备

供应商表

    用途:供应商的基础信息表,一般可查看对应的报价记录集合数据。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680836959308_17.png

商品表

    用途:商品的基本信息表,采购订单明细需要关联商品表。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680836970503_18.png

供应商报价记录

    用途:记录供应商对某个商品的报价记录。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680836979922_19.png

订单明细表

用途:采购订单的明细表,录入对应的商品以及供应商和采购价格。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680836990275_20.png

示例流程

(1)  填写订单明细,选择商品明细以及对应的供应商

(2)  点击查询最新报价按钮,获取到最新的供应商商品报价

(3)  最新的商品报价作为参考,以方便填写采购价格

实现步骤

(1)创建订单明细,字段需填写商品以及对应供应商和采购价格。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680837005344_21.png

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680837018510_22.png

(2)预处理步骤创建查询商品供应商最新报价的按钮。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680837029978_23.png

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680837041318_24.png

代码如下:         复制代码

function prepare($programStore, $form, vue) {
    //
    vue.$store.dispatch("component/build", function (h) {
        return h("BmButton", {//插入按钮的方法
            on: {
                click() {//点击事件
                    let goods = $programStore.getters["getFormValue"]("6408049368a9d22cb8292cc0").data;//获取新增订单明细步骤的值
                    //
                    let opt = {
                        dataset: "6407efe65c94352cb9995ea8",//查询数据表或数据集数据时需传
                        query: {
                            query: {
                                "6407f17668a9d22cb82911a7": goods.map(item => item["6407f2df5c94352cb999639c"]),//查询订单明细商品的报价记录
                                "6407f17668a9d22cb82911a6": goods.map(item => item["6407f2ed5c94352cb99963a8"]),//查询供应商的报价记录
                            },//查询条件,同后端的queryData
                            empty: false,//true时不返回具体数据,仅返回数据总量
                            // cache: 60,//缓存60秒,一般不建议使用此参数
                            page: {
                                index: 0,//分页
                                size: 1000,//每页最多支持10000
                            }
                        }
                    }
                    //查询数据
                    vue.$store.dispatch("data/show", opt).then(res => {
                        let list = res.data.data;//empty为false时返回分页数据集合
                        goods.forEach(item => {
                            let list_filter = list.filter(o => {//匹配过滤出对应商品以及供应商的报价记录
                                return o["6407f17668a9d22cb82911a7"] == item["6407f2df5c94352cb999639c"] && o["6407f17668a9d22cb82911a6"] == item["6407f2ed5c94352cb99963a8"]
                            });
                            if (list_filter.length>0) {
                                let new_price = _.maxBy(list_filter,function(o){return o["6408275b5c94352cb99991d3"]})//在过滤出的数组基础上,找出最新的报价记录
                                item["6407f2fc68a9d22cb8291433"] = new_price["6407f17668a9d22cb82911a8"]//将最新的报价金额设值到采购价格字段中
                            }
                        });
                        let view = $programStore.getters["view/getView"]("6408049368a9d22cb8292cc0");//获取新增订单明细步骤的view
                        let tableStore = view.tableStore;
                        tableStore.dispatch("setData", _.cloneDeep(goods));//将处理好的goods数组设值进明细步骤中
                    })
                }
            }
        }, "报价")
    }).then(function (view) {
        let buttonElement = view.$el;
        //style
        buttonElement.style.position = "relative";
        buttonElement.style.left = "5px";
        buttonElement.style.height = "30px";

        //按钮插入到指定元素前
        let insertToElement = document.querySelector(`.process-procedure-6408049368a9d22cb8292cc0 .local-functions`);
        insertToElement.after(buttonElement);
    })
}

(3)这里为了模拟场景,就添加了以下的供应商报价记录,该表为上面功能按钮查询的供应商报价记录表。

https://pan.bnocode.com/project/642283bde81aad5e5587ce87/attachment/20230407/1680837158802_25.png

功能演示:

https://pan.bnocode.com/project/62dfc125b702df15e7988dba/attachment/20230421/1682070071764_18.gif


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