jeecg-boot中popup实现动态传参

Jeecg-boot 动态传参popup实现
本文介绍了如何在Jeecg-boot V2.4.0框架下,利用popup控件实现动态传参功能。通过配置online报表获取特定main_id的`project_personnel_information`表数据,并详细说明了配置过程,包括路由设置。虽然存在子组件报错问题,但不影响使用。

jeecg-boot中popup实现动态传参

环境:

最近任务是基于jeecg-boot框架的,用的是jeecg-boot V2.4.0版。

功能实现:

有表“project_personnel_information”,需要从该表中根据指定的main_id过滤数据,并通过popup控件选取,需完成以下3步:

  1. online报表配置中进行配置,得到需要的数据列,具体配置如下图:
    online报表配置
    此处注意点击sql解析,解析通过才行。
  2. 代码如下:
<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>
  1. 路由配置:
    具体操作见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,目前也不影响使用,所以就搁浅吧!如果有哪位大佬知道,也谢谢解答。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值