JPopup 使用

最新推荐文章于 2024-04-24 11:08:10 发布

原创最新推荐文章于 2024-04-24 11:08:10 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

1 篇文章

订阅专栏

本文档介绍如何在JeecgBoot低代码平台上使用JPopup组件，特别是如何在表格列上根据行数据控制操作的编辑权限。通过使用slot方式，可以将当前行的数据传递给JPopup，以便在回调函数中定位行标识，从而实现动态控制编辑功能。

主要使用说明参考：

JPopup弹窗选择组件 · JeecgBoot 开发文档 · 看云JeecgBoot是一款基于BPM的低代码平台！前后端分离架构 SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发！ JeecgBoot引领新低代码开发模式 OnlineCoding-> 代码生成器-> 手工MERGE，帮助Java项目解决70%的重复工作，让开发更多关注业务http://doc.jeecg.com/2044000这里我分享一下使用slot方式：

主要实现功能：

table里的列上使用JPopup，同时需要根据行上的数据条件控制列上的操作是否可编辑。最开始的在defColumns中列直接使用Popup无法达到控制是否可编辑的功能，所以需要使用slot方式实现。但是slot方式的话，JPopup默认回调的结果中并不能包含当前行的其他数据，需要把当前行的相关数据作为入参传入JPopup中，在弹出框选择JPopup后，回调函数的值中可以定位当前行标识。

定义列上配置：

//列定义
defColumns: [{
	title: '物料编码',
	key: 'itExternalId',
	type: FormTypes.slot,
	slotName: 'itExternalId'
	}]

页面添加template，主要增加参数 :pRowId="props.rowId"，在JPopup.vue中定义参数。

props: {
      pRowId: {//父级页面行id
        type: String,
        default: '',
        required: false
      }

//在callBack函数中增加参数返回
callBack(rows) {
        if (this.triggerChange) {
          //v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
          res['pRowId'] = this.pRowId//追加参数 pRowId
          this.$emit('callback', res)
        } else {
          //v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
          res['pRowId'] = this.pRowId//追加参数 pRowId
          this.$emit('input', this.showText, res)
        }
}

<!--物料编码 选择物料-->
        <template v-slot:itExternalId="props">
          <j-popup
            :disabled="model_itemStatus[props.index] == '20' || model_itemStatus[props.index] == 20"
            v-model="model_itExternalId[props.index]"
            :pRowId="props.rowId"
            v-decorator="['itCode','itName','itExternalId','itAbc','itPaType','itUom','itReturnAttr']"
            :trigger-change="true"
            @callback="popupCallback"
            code='FSM_item'
            field='itExternalId'
            org-fields='itCode,itName,itExternalId,itAbc,itPaType,itUom,itReturnAttr'
            dest-fields='itCode,itName,itExternalId,itAbc,itPaType,itUom,itReturnAttr'></j-popup>
        </template>

//在使用JPopup的页面增加回调函数
popupCallback(row) {
        console.log('popop cb', row)
        let rowKey = row['pRowId']
        let editTable = this.$refs.editableTable
        let rowData = editTable.getValuesSync({ rowIds: [rowKey] }).values[0]
}