概述

在前端的數(shù)據(jù)交互中，通常需要在填寫(xiě)提交表單的同時(shí)查詢一些數(shù)據(jù)表來(lái)實(shí)現(xiàn)一些需求，具體在一些采購(gòu)訂單中，在錄入采購(gòu)明細(xì)時(shí)，想要查看商品對(duì)應(yīng)供應(yīng)商的最新報(bào)價(jià)。下面演示具體如何在采購(gòu)明細(xì)中查詢商品對(duì)應(yīng)供應(yīng)商的最新報(bào)價(jià)。

代碼方法體說(shuō)明

在白碼平臺(tái)中，一般使用“預(yù)處理”的步驟調(diào)用平臺(tái)封裝好的查詢數(shù)據(jù)表方法，代碼詳細(xì)使用注釋如下：

代碼如下:         復(fù)制代碼

function prepare($programStore, $form, vue) {
    let opt = {
        dataset: "數(shù)據(jù)表entity或數(shù)據(jù)集flow",//查詢數(shù)據(jù)表或數(shù)據(jù)集數(shù)據(jù)時(shí)需傳
        type: "數(shù)據(jù)表entity",//查詢視圖數(shù)據(jù)時(shí)需傳
        query: {
            query: {},//查詢條件，同后端的queryData
            empty: false,//true時(shí)不返回具體數(shù)據(jù)，僅返回?cái)?shù)據(jù)總量
            cache: 60,//緩存60秒，一般不建議使用此參數(shù)
            page: {
                index: 0,//分頁(yè)
                size: 1000,//每頁(yè)最多支持10000
            }
        }
    }
    //查詢數(shù)據(jù)
    vue.$store.dispatch("data/show", opt).then(res => {
        let list = res.data.data;//empty為false時(shí)返回分頁(yè)數(shù)據(jù)集合
        let size = res.data.meta.size;//empty為true時(shí)返回查詢條件下數(shù)據(jù)總量，忽略分頁(yè)
    })
}

前期準(zhǔn)備

供應(yīng)商表

    用途：供應(yīng)商的基礎(chǔ)信息表，一般可查看對(duì)應(yīng)的報(bào)價(jià)記錄集合數(shù)據(jù)。

商品表

    用途：商品的基本信息表，采購(gòu)訂單明細(xì)需要關(guān)聯(lián)商品表。

供應(yīng)商報(bào)價(jià)記錄

    用途：記錄供應(yīng)商對(duì)某個(gè)商品的報(bào)價(jià)記錄。

訂單明細(xì)表

用途：采購(gòu)訂單的明細(xì)表，錄入對(duì)應(yīng)的商品以及供應(yīng)商和采購(gòu)價(jià)格。

示例流程

（1）  填寫(xiě)訂單明細(xì)，選擇商品明細(xì)以及對(duì)應(yīng)的供應(yīng)商

（2）  點(diǎn)擊查詢最新報(bào)價(jià)按鈕，獲取到最新的供應(yīng)商商品報(bào)價(jià)

（3）  最新的商品報(bào)價(jià)作為參考，以方便填寫(xiě)采購(gòu)價(jià)格

實(shí)現(xiàn)步驟

（1）創(chuàng)建訂單明細(xì)，字段需填寫(xiě)商品以及對(duì)應(yīng)供應(yīng)商和采購(gòu)價(jià)格。

（2）預(yù)處理步驟創(chuàng)建查詢商品供應(yīng)商最新報(bào)價(jià)的按鈕。

代碼如下:         復(fù)制代碼

function prepare($programStore, $form, vue) {
    //
    vue.$store.dispatch("component/build", function (h) {
        return h("BmButton", {//插入按鈕的方法
            on: {
                click() {//點(diǎn)擊事件
                    let goods = $programStore.getters["getFormValue"]("6408049368a9d22cb8292cc0").data;//獲取新增訂單明細(xì)步驟的值
                    //
                    let opt = {
                        dataset: "6407efe65c94352cb9995ea8",//查詢數(shù)據(jù)表或數(shù)據(jù)集數(shù)據(jù)時(shí)需傳
                        query: {
                            query: {
                                "6407f17668a9d22cb82911a7": goods.map(item => item["6407f2df5c94352cb999639c"]),//查詢訂單明細(xì)商品的報(bào)價(jià)記錄
                                "6407f17668a9d22cb82911a6": goods.map(item => item["6407f2ed5c94352cb99963a8"]),//查詢供應(yīng)商的報(bào)價(jià)記錄
                            },//查詢條件，同后端的queryData
                            empty: false,//true時(shí)不返回具體數(shù)據(jù)，僅返回?cái)?shù)據(jù)總量
                            // cache: 60,//緩存60秒，一般不建議使用此參數(shù)
                            page: {
                                index: 0,//分頁(yè)
                                size: 1000,//每頁(yè)最多支持10000
                            }
                        }
                    }
                    //查詢數(shù)據(jù)
                    vue.$store.dispatch("data/show", opt).then(res => {
                        let list = res.data.data;//empty為false時(shí)返回分頁(yè)數(shù)據(jù)集合
                        goods.forEach(item => {
                            let list_filter = list.filter(o => {//匹配過(guò)濾出對(duì)應(yīng)商品以及供應(yīng)商的報(bào)價(jià)記錄
                                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"]})//在過(guò)濾出的數(shù)組基礎(chǔ)上，找出最新的報(bào)價(jià)記錄
                                item["6407f2fc68a9d22cb8291433"] = new_price["6407f17668a9d22cb82911a8"]//將最新的報(bào)價(jià)金額設(shè)值到采購(gòu)價(jià)格字段中
                            }
                        });
                        let view = $programStore.getters["view/getView"]("6408049368a9d22cb8292cc0");//獲取新增訂單明細(xì)步驟的view
                        let tableStore = view.tableStore;
                        tableStore.dispatch("setData", _.cloneDeep(goods));//將處理好的goods數(shù)組設(shè)值進(jìn)明細(xì)步驟中
                    })
                }
            }
        }, "報(bào)價(jià)")
    }).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）這里為了模擬場(chǎng)景，就添加了以下的供應(yīng)商報(bào)價(jià)記錄，該表為上面功能按鈕查詢的供應(yīng)商報(bào)價(jià)記錄表。

功能演示：