layui前端+springboot框架--多商品规格代码

淩亂°似流年 2023-07-23 11:55 23阅读 0赞

直接上效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70]  
添加数据效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 1]

--------------------

上干货：

<div class="row cl">
                <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>商品规格：</label>
                <table class="layui-table text-c" id="table" style="width: 80%;">
                    <thead>
                    <tr class="text-c">
                        <td>序号</td>
                        <td>规格名称</td>
                        <td>价格</td>
                        <td>库存</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
    
                    </tbody>
                </table>
                
                <a title="添加规格" href="javascript:;"
                   th:onclick="'javascript:add()'"
                   class="ml-5" style="text-decoration:none;margin-left: 145px;"><i class="Hui-iconfont"></i></a>
            </div>
    
    
    
    <link rel="stylesheet" type="text/css" th:href="@{/xadmin/lib/formSelect/formSelects-v4.css}" href="static/xadmin/lib/formSelect/formSelects-v4.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" href="/layui/css/layui.css" />
    <script type="text/javascript" th:src="@{/xadmin/lib/formselect/formSelects-v4.js}" src="static/xadmin/lib/formselect/formSelects-v4.js"></script>
    
    <script>
        var table = document.getElementById("table") ;
        //表格行数
        var index = table.rows.length-1 ;
        if(index>=1){
            $("#goodsPrice").hide();
            $("#goodsNum").hide();
        }
        function add(){
            var tab = document.getElementById("table") ;
            //表格行数
            var row = tab.rows.length-1 ;
            row++;
            if(row==1){
                $("#goodsPrice").hide();
                $("#goodsNum").hide();
            }
            var $li = $(
                "<tr class=\"text-c\" id="+row+" style=\"background: #fff;\"><td>"+row+"</td><td><input class=\"input-text\" style='width: 100%;height: 100%;border: none;outline: none;' type='text' name='stardardName' required></td>"+
                "<td><input class=\"input-text\" type='text' name='stardardPrices' style='width: 100%;height: 100%;border: none;outline: none;' required></td>"+
                "<td><input class=\"input-text\" type='text' name='stardardNums' style='width: 100%;height: 100%;border: none;outline: none;' required></td>"+
                "<td><span style='cursor: pointer;' id='span"+row+"' onclick='sub("+row+")'><i class=\"Hui-iconfont\"></i></span></td></tr>"
            );
            $("tbody").append($li);
        }
        function sub(id){
            var tab = document.getElementById("table") ;
            //表格行数
            var row = tab.rows.length-1 ;
            $("#"+id).remove();
            $("#span"+id).remove();
            row--;
            if(row==0){
                $("#goodsPrice").show();
                $("#goodsNum").show();
            }
            var row1 = tab.rows.length-1 ;
            for(var i=1;i<=row1;i++){
                tab.rows[i].cells[0].innerHTML=i;
            }
        }
    </script>

--------------------

//商品多规格实体类  在数据库中建对应的规格表
     
    @Data
    @EqualsAndHashCode()
    @Accessors(chain = true)
    public class GoodsStardard {
        //规格id
        private Long id;
        //商品id
        private Long goodsId;
        //多个规格
        private String stardardName;
        private String stardardPrices;
        private String stardardNums;
    
        //单个规格
        private BigDecimal stardardPrice;
        private Integer stardardNum;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 2]

--------------------

然后在Controller中进行增删改查操作即可

@PostMapping("add")//添加为例
        @ResponseBody
        @NoRepeatSubmit
        public AjaxResult add(Goods goods, String lunbotu, GoodsStardard goodsStardard) {
            goods.setCreatetime(LocalDateTime.now());
            goods.setUpdatetime(LocalDateTime.now());
            goods.setStatus(0);//默认待上架
            goods.setExamineStatus(0);//默认审核中
    
            Boolean flag1 = goodsService.addGoods(goods,goodsStardard);
            long goodsId = goods.getId();
            boolean  flag= goodsService.add(goodsId,lunbotu);
            if (flag1) {
                return toAjax(flag);
            } else {
                return toAjax(false);
            }
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70]: /images/20230528/ca18d66d925a4658b7147a16e0a1dc1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/3a55e35a6bbe47c09855fd96ba1c138f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyaXN0amNqZG5jZw_size_16_color_FFFFFF_t_70 2]: /images/20230528/cebc44f1a32b4e3c98e0752b3add16dd.png