

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