当前位置：首页 > news >正文

jeecg表单设计器js增强实现效果案例；点按钮出弹框，iframe嵌套，数据传输等

news 2025/10/25 8:22:43

案例1：添加按钮，点击按钮获取子表数据并存到另外一个文本框中
实现效果如图：在点击这里插入图片描述
表单设计器配置
1.给按钮添加点击事件,调用js增强里挂载到Window上的函数，传递的参数是上面子表的key。

在这里插入图片描述

2.Js增强配置代码
在这里插入图片描述

window.sendSubTableData = function(subTableName){let listData = JSON.parse(decodeURIComponent(api.getFormData('sub-table-design_'+subTableName)))console.log("点击按钮了",listData);let str = ""listData.forEach((item)=>{console.log(item);str+= item.zfjianchatiaomu+"("+item.shuoming+");\n"})api.setFormData("zfjc_list",str)
}

sub-table-design_是当前框架固定前缀，获取的子表数据需要解码和json解析，再将获取到的数据进行处理实现赋值。
zfjc_list是赋值文本框的key。

案例2：点击按钮出自定义弹框，再回显数据到表单。
效果如图：
在这里插入图片描述

将表单设计器生成的表单的访问地址，通过iframe嵌套到自定义页面中展示，使用组件通信传递消息，则可以实现打开自定义弹框。

vue文件示例

 <template><div class="" style="height: 90vh;"><!-- 添加返回按钮 --><a-button type="plain" icon="rollback" @click="goBack" style="float: right;margin-bottom: 10px;">返回</a-button><iframe id="formIframe" :src="iframeSrc" width="100%" height="100%"  frameborder="0"></iframe><!-- 现场指证弹框 --><WsZfjcxcblProcessListModal ref="wzpl" @ok="submitCallback"></WsZfjcxcblProcessListModal></div>
</template><script>
import { ACCESS_TOKEN } from '@/store/mutation-types'
import WsZfjcxcblProcessListModal from './sceneRecords/WsZfjcxcblProcessListModal.vue'
export default {name: 'bookForm',components: { WsZfjcxcblProcessListModal },data() {return {iframeSrc:this.$route.query.src+"?token="+this.$ls.get(ACCESS_TOKEN),}},methods: {goBack(){this.$router.push(`/tjzf/myTask/process?actTaskId=${this.$route.query.act_hi_taskinst_id}&taskresultId=${this.$route.query.taskresult_id}`)},//接收信息receiveMessage(event) {let that = thiswindow.addEventListener("message", function(event) {console.log(event.data)if(event.data.type == 'button'){if(event.data.key == '现场取证'){that.$refs.wzpl.show()}}})},//现场取证弹框关闭发送消息submitCallback(result){const info = resultdocument.getElementById("formIframe").contentWindow.postMessage({'xcqz':info},'*')}},mounted() {setTimeout(() => {this.receiveMessage()},2000)}
}
</script>

表单设计器配置
1.添加按钮点击事件
在这里插入图片描述

方法名和参数都可以自定义，调用和接收的地方保持一致即可。

js增强

window.sendParentButton = function(key){window.parent.postMessage({type: "button",key: key}, "*")
}
window.addEventListener('message', function(event) {//xcqz 现场取证-赋值api.setFormData("textarea_1761200842610_101186",event.data.xcqz)
})