集合步骤新增自定义按钮

场景描述

在白码平台的集合步骤中，自带了新增数据的按钮，用于数据的新增。但有时候需要对列表里的数据进行其他功能操作，而这时就需要有个位置放置按钮，因此，本文档将介绍在白码平台的集合步骤中自定义新增按钮，需要注意的是，该效果仅限于pc端中。

接口介绍

在预处理步骤中，使用接口在指定集合步骤中插入按钮。以下是该接口的基本用法：

代码如下:         复制代码

    let listProcedure = "63ef4ebce2cb3db28c37fde4"
    vue.$store.dispatch("component/build", function (h) {
        return h("BmButton", {
            on: {
                click() {//点击事件
                    
                }
            }
        }, "按钮名称")
    }).then(function (view) {
        view.bind(vue)
        let buttonElement = view.$el;
        //style,根据自己需求去调整
        buttonElement.style.marginLeft = "10px";

        //按钮插入到指定元素前
        let st = setInterval(function () {
           let insertToElement = document.querySelector(`.process-procedure-${listProcedure} .local-functions`);
            if (insertToElement) {
                clearInterval(st);
                insertToElement.append(buttonElement);
            }
        }, 100);
    })

场景示例

本文档以比较常见的新增订单场景为示例，给订单明细集合步骤，添加导入按钮，快捷添加订单明细数据。

按钮效果：

1.新建一个“导入订单明细”功能，用于插入的导入按钮调用。此功能效果为接收导入数据，并进行处理，如按产品名称找系统的产品数据，如果产品不存在，则记录错误的产品名称，跟导入结果一起返回。

    为了交互人性化，可以新增一张存放模板文件的数据表，然后在此功能中获取到指定文件名称，再关联获取显示出来。便于导入功能时随时下载导入模板。

数据处理步骤：

示例代码：

代码如下:         复制代码

async function runProcess($model = model, $plugin = plugin, $params = params) {
    let list = await $model.getValue("63ede921087415ae926e177d");//交互导入步骤id
    let nameFieldId = "field_1676536124718";//交互导入步骤-产品名称属性id
    let numFieldId = "field_1676536129892";//交互导入步骤数量属性id
    let priceFieldId = "field_1676536137707";//交互导入步骤-单价属性id

    if (list.length == 0) {
        return
    }
    let productName = list.map(item => item[nameFieldId]);//导入数据产品名称

    let productList = await $plugin.data.queryData("63ede76a78c225ae919ba852", {
        "63ede77278c225ae919ba866": productName
    })

    let resultData = [];//返回的导入结果数据集合
    let errProduct = [];//错误的产品名称集合
    list.forEach(item => {
        //根据导入的名称找系统产品信息，找不到则把产品名称push进错误的产品名称集合
        let product = productList.find(p => {
            return p["63ede77278c225ae919ba866"] == item[nameFieldId]
        })
        if (product) {
            resultData.push({
                "63ede7d178c225ae919ba8e7": product._id,//产品名称  relate
                "63ede7d978c225ae919ba8ea": item[numFieldId],//数量  number
                "63ede7e5087415ae926e1449": item[priceFieldId],//单价  number
            })
        } else {
            errProduct.push(item[nameFieldId])
        }

    })

    await $model.command("tips", {});//隐藏本功能提交的功能提示

    //返回处理结果
    await $model.result({
        resultData,
        errProduct
    })

}

2.在新增订单功能中，加入一个预处理步骤，此步骤中为插入导入按钮，以及触发该按钮时执行的事件，在此示例中是调用订单明细导入功能。

预处理步骤示例代码：

代码如下:         复制代码

function prepare($programStore, $form, vue) {
    //插入按钮（pc端）
    let listProcedure = "63ef4ebce2cb3db28c37fde4"
    vue.$store.dispatch("component/build", function (h) {
        return h("BmButton", {
            on: {
                click() {//点击事件
                    //调用导入功能
                    let listData = $programStore.getters["getFormValue"](listProcedure).data || [];//获取导入订单明细步骤已有的数据
                    vue.$$cmd({
                        type: "program",
                        value: {
                            flow: "63ede8fa78c225ae919bab82",//被调用的功能id，导入功能id
                            data: {},//传递的参数，本示例没有用到
                            skip: false
                        }
                    }, {
                        //接收返回值并进行处理
                        callback: function (res) {
                            let result = res.data
                            if (result) {
                                if (result.resultData.length > 0) {
                                    //更新集合数据
                                    listData = [...listData, ...result.resultData]
                                    //插入更新的集合数据到订单明细步骤中
                                    let view = $programStore.getters["view/getView"](listProcedure)
                                    let tableStore = view.tableStore
                                    tableStore.dispatch("setData", _.cloneDeep(listData))
                                }
                                if (result.errProduct.length > 0) {
                                    let tips = `以下的产品名称在系统没有找到数据，分别为：${result.errProduct.join("、")}`
                                    alert(tips)
                                }
                            }
                        }
                    })

                }
            }
        }, "导入")
    }).then(function (view) {
        view.bind(vue)
        let buttonElement = view.$el;
        //style,根据自己需求去调整
        buttonElement.style.marginLeft = "10px";

        //按钮插入到指定元素前
        let st = setInterval(function () {
           let insertToElement = document.querySelector(`.process-procedure-${listProcedure} .local-functions`);
            if (insertToElement) {
                clearInterval(st);
                insertToElement.append(buttonElement);
            }
        }, 100);
    })
}

效果演示