环境:
最近任务是基于jeecg-boot框架的,用的是jeecg-boot V2.4.0版。
功能实现:
有表“project_personnel_information”,需要从该表中根据指定的main_id过滤数据,并通过popup控件选取,需完成以下3步:
- 在online报表配置中进行配置,得到需要的数据列,具体配置如下图:

此处注意点击sql解析,解析通过才行。 - 代码如下:
<template>
<a-form :form="form" keep-source>
<a-form-item label="v-model模式指定一个值返回至当前组件" style="width: 300px">
<j-popup
v-model="selectValue"
code="projectPersonEmilInfo"
org-fields="name,mailbox"
dest-fields="popup,other"
field="popup"
:param="param1"
/>
{{ selectValue }}
</a-form-item>
<a-form-item label="v-decorator模式支持回调多个值至当前表单" style="width: 300px">
<j-popup
v-decorator="['one']"
:trigger-change="true"
code="projectPersonEmilInfo"
org-fields="name,mailbox"
dest-fields="one,two"
:param="param1"
@callback="popupCallback"/>
{{ getFormFieldValue('one') }}
</a-form-item>
<a-form-item label="v-decorator模式被回调的值" style="width: 300px">
<a-input v-decorator="['two']"></a-input>
</a-form-item>
</a-form >
</template>
<script>
import JPopup from '@/components/jeecg/JPopup'
export default {
name: 'selectTest',
components: {JPopup},
props:{ //popup动态参数 支持系统变量语法
param:{}
},
data() {
return {
form: this.$form.createForm(this),
selectValue: " " ,
id: "1353994922551246849",
param1: {main_id: ""}
}
},
created:function() {
//如果是流程中表单,则需要加载流程表单data
this.param1.main_id=this.id;
this.param=this.param1
},
methods:{
getFormFieldValue(field){
return this.form.getFieldValue(field)
},
popupCallback(row){
this.form.setFieldsValue(row)
}
}
}
</script>
- 路由配置:
具体操作见jeecg-boot开发文档
后话:
亲测有效,但是还是有报错:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "param"
说父子组件传参param被子组件修改了,可是我子组件并没有对param进行key值修改,也有网友反馈说这是个bug,目前也不影响使用,所以就搁浅吧!如果有哪位大佬知道,也谢谢解答。
Jeecg-boot 动态传参popup实现
本文介绍了如何在Jeecg-boot V2.4.0框架下,利用popup控件实现动态传参功能。通过配置online报表获取特定main_id的`project_personnel_information`表数据,并详细说明了配置过程,包括路由设置。虽然存在子组件报错问题,但不影响使用。

2840

被折叠的 条评论
为什么被折叠?



