ShenNiusModularity项目源码学习（29：ShenNius.Admin.Mvc项目分析-14）-CSDN博客

本文链接：https://blog.csdn.net/gc_2299/article/details/148099575

商品列表页面用于搜索、新建、维护及删除商城系统模块的商品信息，包括商品名称、图片、规格、详情等数据。商品列表页面的后台控制器类GoodsController位于ShenNius.Admin.Mvc项目的Areas\Shop\Controllers内，页面文件位于同项目的Areas\Shop\Views\Goods内，其中Index.cshtml页面为主页面，Add.cshtml、Modify.cshtml页面分别用于新建和编辑商品信息，三个页面中调用的后台WebApi接口位于ShenNius.Admin.API项目的GoodsController，主要用到GetListPages（分页获取商品列表）、Add、Deletes、Modify、SoftDelete、AddSpec、UploadImg等函数。
在这里插入图片描述

商品列表主页面的布局如下所示，最上方为搜索栏，中间为工具栏，下方显示商品数据表格。
在这里插入图片描述
页面加载后，通过apiUtil.render函数调用WebApi函数GetListPages分页获取商品数据，搜索框的检索事件其实也是触发表格的重载操作（table.reload），并将检索条件传递给后台获取检索结果。专门设置商品名称列，点击该列可以触发编辑事件，点击商品图片列会另弹出页面查看大图。
在这里插入图片描述

定义事件处理函数处理工具栏按钮点击事件及数据行中的按钮点击事件，添加和编辑按钮调用的分别是Add.cshtml、Modify.cshtml页面，而删除按钮的话，点击工具栏中的删除按钮，处理逻辑是将选中的记录软删除，后续还能在回收站中恢复，而点击数据行中的删除按钮，则是直接删除数据库中的数据，无法恢复。点击数据表格中的商品状态，会调用WebApi接口GoodsController.ChangeState函数更改商品状态。
在这里插入图片描述

添加商品用的Add.cshtml页面，该页面使用开源富文本编辑器tinymce维护商品详情（设置调用WebApi接口GoodsController.UploadImg函数上传图片）。页面加载时调用common.js内的BindParentCategory函数，调用WebApi接口CategoryController.GetAllParentCategory获取多级商品分类列表填充下拉列表，通过在名称前加空格+"|–"表达分类；点击上传图片按钮，在imgUpload.js文件中调用ShenNius.Admin.API项目的GoodsController.MultipleUploadImg函数上传多个商品关联的图片文件，同时基于layui的上传组件进行图片预览；点击商品规格处的单规格和多规格单选框，会出现不同的编辑界面，专门定义goodsSpec.js文件处理多规格时的操作事件。点击确认保存按钮，基于JQuery和Layui获取待保存数据，然后调用WebApi接口Add函数新建商品。
在这里插入图片描述