作者:黄倩婧 历史版本:1 最后编辑:黄倩婧 更新时间:2025-07-08 15:41
适用版本:v3.6.0+;
业务场景描述:
1、有一个为产品销售情况表;
2、在产品表填报页面,根据主表的产品编号、产品名称来查询产品销售情况表数据,然后把查询到的数据回填到产品明细。
产品销售情况表:
数据模板配置步骤:
1、登录系统,选择【表单管理】-【数据模板管理】,产品销售情况表配置成数据模板列表,并配置“产品编号”、“产品名称”为查询字段
2、打开F12控制台,输入查询条件进行搜索,复制请求参数,以便表单脚本使用
表单管理配置步骤:
1、选择【表单管理】-【表单管理】,点击“添加/编辑”按钮,进入表单设计页面,点击“表单脚本”,如下图:
2、设置表单脚本
修改监听字段:
修改数据模板请求参数:
获取原有子表数据,设置为删除状态
把返回值赋值到子表字段:
设置子表内容:
完整脚本如下:
Object.assign(JForm, {
//加载事件
onLoad: function(form) {
console.info(form)
console.info(form.getData('cpmxb'))
let val1 = ''
let val2 = ''
form.$refs.dynamicForm.$watch('models', (data) => {
console.info(data)
let _v1 = data.chanPinBianHao // 保存字段1上次监听请求时的数据
let _v2 = data.chanPinMingCheng // 保存字段2上次监听请求时的数据
console.info(_v1, _v2, '--22--')
// 判断字段是否为空,且与上次监听时的数据是否发生变化,未改变,不执行后续操作
if (form.$utils.isEmpty(_v1) || form.$utils.isEmpty(_v2) || (_v1 === val1 && _v2 === val2)) {
return
}
val1 = _v1
val2 = _v2
console.info(_v1, _v2, '----')
// 如果需要根据当前表单2个字段请求,上诉判断是否为空,这里再补充请求
const data1 = {"parameters":[{"key":"Q^chan_pin_bian_hao_^SL","value":`${val1}`,"param":"chan_pin_bian_hao_"},{"key":"Q^chan_pin_ming_^SL","value":`${val2}`,"param":"chan_pin_ming_"},{"key":"response_data","value":"{\"buttons\":{\"function_buttons\":[{\"button_type\":\"search\",\"label\":\"搜索\",\"position\":\"search\"},{\"button_type\":\"resetSearch\",\"label\":\"重置\",\"position\":\"search\"},{\"button_type\":\"add\",\"label\":\"添加\",\"position\":\"all\"},{\"button_type\":\"detail\",\"label\":\"明细\",\"position\":\"manage\"},{\"button_type\":\"edit\",\"label\":\"编辑\",\"position\":\"manage\"},{\"button_type\":\"remove\",\"label\":\"删除\",\"position\":\"all\"}],\"edit_buttons\":[{\"button_type\":\"close\",\"label\":\"关闭\"},{\"button_type\":\"save\",\"label\":\"保存\"}]},\"sort_columns\":[],\"result_columns\":[],\"ext_columns\":[],\"orig_display_columns\":[{\"label\":\"产品编号\",\"name\":\"chan_pin_bian_hao_\",\"dataType\":\"varchar\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"},{\"label\":\"产品名称\",\"name\":\"chan_pin_ming_\",\"dataType\":\"varchar\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"},{\"label\":\"本次销售数量\",\"name\":\"xiao_shou_shu_\",\"dataType\":\"number\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"},{\"label\":\"剩余数量\",\"name\":\"sheng_yu_shu_\",\"dataType\":\"number\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"}],\"attrs\":{\"button_number\":2,\"filter_condition_style\":\"right\",\"sqlOptimize\":true,\"es_enable\":false,\"hiddenAppTitle\":false,\"selectionRow\":true,\"init_query\":\"Y\",\"display_field\":\"N\",\"toRepeat\":true,\"indexRow\":false,\"need_page\":\"Y\",\"page_size\":20},\"multilevel_columns\":[],\"display_columns\":[{\"label\":\"产品编号\",\"name\":\"chan_pin_bian_hao_\",\"dataType\":\"varchar\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"},{\"label\":\"产品名称\",\"name\":\"chan_pin_ming_\",\"dataType\":\"varchar\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"},{\"label\":\"本次销售数量\",\"name\":\"xiao_shou_shu_\",\"dataType\":\"number\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"},{\"label\":\"剩余数量\",\"name\":\"sheng_yu_shu_\",\"dataType\":\"number\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\"}],\"template_id\":\"1381593274954809344\",\"template_type\":null,\"filter_conditions\":[],\"export_columns\":null,\"query_columns\":[{\"label\":\"产品编号\",\"name\":\"chan_pin_bian_hao_\",\"dataType\":\"varchar\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\",\"field_type\":\"text\",\"field_options\":{\"mobile\":true,\"default_value_type\":\"fixed\",\"placeholder\":\"请输入\",\"required\":false}},{\"label\":\"产品名称\",\"name\":\"chan_pin_ming_\",\"dataType\":\"varchar\",\"objName\":\"t_cpxsqk\",\"objLabel\":\"产品销售情况\",\"field_type\":\"text\",\"field_options\":{}}],\"dynamic_params\":{},\"datasetKey\":\"cpxsqk\",\"unique\":\"id_\"}"}],"requestPage":{"pageNo":1,"limit":20,"totalCount":2},"sorts":[]}
this.$request({
url: '/business/v3/data/template/queryDataTable',
method: 'post',
data: data1 // 需要补充请求列表的参数,如果是配置有动态参数,还需要改动数据内的response_data对应的value值内的dynamic_params字段
}).then(response => {
//TODO:处理数据返回的逻辑
console.info(response)
const listData = []
// 处理旧子表数据
const oldList = form.getData('cpmxb')
if (form.$utils.isNotEmpty(oldList)) {
oldList.forEach(item => {
if (form.$utils.isNotEmpty(item.id)) {
item._subDataSaveSign = 'del'
listData.push(item)
}
})
}
// 将列表数据赋值到子表上
let list = response.data.dataResult || []
list.forEach(item => {
// key来源于子表的字段别名,value取值根据接口返回的数据结构填
listData.push({
xiaoShouShuLiang: item.xiao_shou_shu_,
shengYuShuLiang: item.sheng_yu_shu_
})
})
form.setData('cpmxb', listData)
}).catch(error => {
console.log(error)
})
}, {
deep: true
})
}
});
查看配置效果
输入产品编号、产品名称