jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)

使用场景:

做商城到时候,需要维护商品到基础信息和其他附属信息,为了方便维护,进行其他附属信息维护到时候直接在商品到列表界面点击操作区域到连接弹出操作框进行操作。

比如:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第1张图片

以下以商品到相册为例进行讲解:

前提是单表:mall_goods_gallery

的后端和前端都已经创建完成:

后端:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第2张图片

前端:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第3张图片

接下来进入正题

1:将list界面拷贝一份 到modules文件夹命名为:GoodsGalleryListModal.vue

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第4张图片

修改组件名称:

修改引入添加编辑界面到路径:

2:打开GoodsGalleryListModal,增加model标签

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第5张图片

3:创建属性数据

title,

ListModalVisible

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第6张图片

方法:

handleCancel

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第7张图片

4:因为是在商品列表到操作区域点击然后弹出,所以要在操作区域增加链接

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第8张图片

5:增加处理方法

handleGoodsGallery()

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第9张图片

6:在界面增加节点:

goodsGalleryListModal

7:引入组件goodsgallerylistmodal

注意一定要用@从views开始

8:在GoodsGalleryListModal界面增加方法:

showGoodsGallery

处理显示和接收参数

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第10张图片

到此点击下看看能出来了吗?

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第11张图片

出来啦,接下来就是业务改造了

9:点击新增到时候,需要将商品到ID自动传到 添加图片到界面

那么修改新增到事件方法:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第12张图片

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第13张图片

10,弹出界面增加goodsId数据属性:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第14张图片

接收传递过来到商品ID

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第15张图片

看效果

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第16张图片

点击确定:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第17张图片

接下来修改为图片上传:

改为图片上传请参考另一篇文章

 

改完以后,会发现有个问题

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第18张图片

就是打开任何到一个商品到相册,都会默认显示所有到数据,这是为什么呢,我到理想状态是点开哪一个商品,展示哪个商品到相册列表,这是由于这个list列表已经封装到时候展示到是所有到数据,

那么就需要修改后台代码,就是如果传递到参数没有商品到ID,那么就返回空到

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第19张图片

并且修改

展示列表界面调用到方法,增加查询参数

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第20张图片

 

看看效果吧:

jeecg-boot:将单表列表页作为弹框,并且传递参数到解决方案(场景商品到明细信息维护)_第21张图片

成功啦!

你可能感兴趣的:(jeecg-boot,JEECG-BOOT实战)