From 4f187d41afd5290b5cd159520af219afdbbd9b35 Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Sat, 07 May 2022 11:44:01 +0800 Subject: [PATCH] fix goods-form not complete --- src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html | 334 +++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 210 insertions(+), 124 deletions(-) diff --git a/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html b/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html index 5d2d761..4fd7fc1 100644 --- a/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html +++ b/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html @@ -46,10 +46,18 @@ <input type="text" name="unit" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> + </div> + <div class="layui-form-item"> <div class="layui-col-lg6"> <label class="layui-form-label febs-form-item-require">库存:</label> <div class="layui-input-block"> - <input type="text" name="store" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> + <input type="text" name="stock" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> + </div> + </div> + <div class="layui-col-lg6"> + <label class="layui-form-label febs-form-item-require">销量:</label> + <div class="layui-input-block"> + <input type="text" name="volume" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> </div> @@ -67,13 +75,30 @@ <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">商品类型</label> <div class="layui-input-block"> - <select name="goodsType" class="goods-type" > + <select name="goodsType" class="goods-type" lay-filter="goods-type-select"> <option value="1">普通商品区</option> <option value="2">套餐区</option> </select> </div> </div> + + <div class="layui-form-item febs-hide tc-set"> + <label class="layui-form-label">静态倍数</label> + <div class="layui-input-block"> + <input type="text" name="staticMulti" placeholder="请输入静态倍数" autocomplete="off" class="layui-input"> + <div class="layui-form-mid layui-word-aux">支付后,赠送(购买金额*静态倍数)的赠送积分</div> + </div> + </div> + + <div class="layui-form-item febs-hide tc-set"> + <label class="layui-form-label">静态占比(%)</label> + <div class="layui-input-block"> + <input type="text" name="staticProp" placeholder="请输入静态占比" autocomplete="off" class="layui-input"> + <div class="layui-form-mid layui-word-aux">所有套餐静态占比相加应等于100%</div> + </div> + </div> </div> + <div class="layui-tab-item"> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">缩略图:</label> @@ -86,6 +111,7 @@ </div> </div> </div> + <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> @@ -104,6 +130,7 @@ </div> </div> </div> + <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> @@ -119,6 +146,7 @@ </div> </div> <div class="layui-tab-item"> + <blockquote class="layui-elem-quote blue-border">价格设置</blockquote> <div class="layui-row layui-col-space10 layui-form-item"> <div class="layui-col-lg6"> <label class="layui-form-label febs-form-item-require">原价:</label> @@ -140,25 +168,31 @@ <input type="text" name="costPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> - <div class="layui-row layui-col-space10 layui-form-item"> - <div class="layui-col-lg6"> - <label class="layui-form-label febs-form-item-require">样式:</label> - <div class="layui-input-block"> - <input type="text" name="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName"> - </div> - </div> - <div class="layui-col-lg6"> - <button type="button" class="layui-btn layui-btn-normal layui-btn" id="test3" >添加</button> + + <blockquote class="layui-elem-quote blue-border">多规格设置</blockquote> + <div class="layui-col-lg6"> + <label class="layui-form-label">开启多规格:</label> + <div class="layui-input-block"> + <input type="radio" name="isSku" value="1" title="是" lay-filter="isSku" /> + <input type="radio" name="isSku" value="2" title="否" lay-filter="isSku" checked /> </div> </div> - <div id="attrWrap"></div> + <div class="layui-form-item multi-sku-table febs-hide"> + <div class="layui-row layui-col-space10 layui-form-item"> + <div class="layui-col-lg6"> + <label class="layui-form-label febs-form-item-require">样式:</label> + <div class="layui-input-block"> + <input type="text" name="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName"> + </div> + </div> + <div class="layui-col-lg6"> + <button type="button" class="layui-btn layui-btn-normal layui-btn" id="test3" >添加</button> + </div> + </div> - <div class="layui-row layui-col-space10 layui-form-item"> - <div class="layui-col-lg6"> - <label class="layui-form-label">是否热卖:</label> + <div class="layui-form-item"> <div class="layui-input-block"> - <input type="radio" name="isHot" value="1" title="是" > - <input type="radio" name="isHot" value="2" title="否" checked=""> + <table id="multiSku" lay-filter="multiSku"></table> </div> </div> </div> @@ -169,7 +203,7 @@ <div class="layui-form-item" style="text-align:center"> <button class="layui-btn" lay-submit="" lay-filter="goods-add-form-submit" id="submit">保存</button> - <button class="layui-btn" lay-submit="" lay-filter="goods-add-form-cancel" id="cancel">取消</button> + <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="goods-add-form-cancel" id="cancel">取消</button> </div> </form> </div> @@ -184,13 +218,29 @@ border-left-color: #2db7f5; font-size: 18px; } + .layui-table-cell { + height:auto; + } </style> +<script type="text/html" id="toolbar"> + <div class="layui-btn-container"> + <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event="delSku">删除</button> + </div> +</script> +<script type="text/html" id="tableImgUpload"> + <div class="layui-upload"> + <button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="skuImg{{d.index}}">上传</button></br> + <img class="layui-upload-img" id="imageUrls{{d.index}}" style="width: 100px; display:none;" src="{{d.skuImage}}" > + <input type="text" id="skuImage{{d.index}}" name="skuImage{{d.index}}" autocomplete="off" value="{{d.skuImage}}" class="layui-input febs-hide"> + </div> +</script> <!-- 表格操作栏 end --> <script data-th-inline="javascript"> - layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload', 'element'], function () { + layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload', 'element', 'table'], function () { var $ = layui.jquery, febs = layui.febs, layer = layui.layer, + table = layui.table, formSelects = layui.formSelects, treeSelect = layui.treeSelect, form = layui.form, @@ -210,6 +260,134 @@ formSelects.render(); + var tableSkuData=[]; + var tableIns = table.render({ + elem: '#multiSku' + ,limit:999 + ,toolbar:"#toolbar" + ,defaultToolbar:[] + ,cols: [[ //表头 + {type: 'checkbox'} + ,{field: 'index', title: '序号', width:70} + ,{field: 'styleName', title: '样式', edit:'text'} + ,{field: 'skuName', title: '规格', edit:'text'} + ,{field: 'presentPrice', title: '现价', edit:'text'} + ,{field: 'originalPrice', title: '原价', edit:'text'} + ,{field: 'costPrice', title: '成本价', edit:'text'} + ,{templet: '#tableImgUpload', title: '缩略图', width:150} + ,{field: 'stock', title: '库存', edit:'text'} + ,{field: 'skuVolume', title: '销量', edit:'text'} + ,{field: 'skuImage', title: '缩略图地址', hide:true} + ]] + ,data: [] + }); + + table.on('toolbar(multiSku)', function(obj){ + var data = obj.data; + + var hasData = table.cache['multiSku']; + var checkData = table.checkStatus('multiSku').data; + + if (checkData.length <= 0) { + febs.alert.warn('请选择删除数据'); + return; + } + if(obj.event === 'delSku'){ + for (let i = 0; i < checkData.length; i++) { + var delData = checkData[i]; + for (let j = 0; j < hasData.length; j++) { + if (hasData[j].index == delData.index) { + hasData.splice(j, 1); + break; + } + } + } + + for (let i = 0; i < hasData.length; i++) { + hasData[i].index = i + 1; + } + reloadTable(hasData); + } + }); + + form.on('radio(isSku)', function(data){ + + if (data.value == 2) { + $('.multi-sku-table').hide(); + } else { + $('.multi-sku-table').show(); + } + }); + + function addTableDate(data) { + var hasData = table.cache['multiSku']; + + data.index = hasData.length + 1; + tableSkuData.push(data); + + reloadTable(tableSkuData); + return data.index; + } + + function reloadTable(data) { + table.reload('multiSku', { + data : data + }); + + for (let i = 0; i < data.length; i++) { + if (data[i].skuImage) { + $('#imageUrls'+ (i+1)).css('display','block'); + } + // 重新绑定图片上传 + bindUpload(i+1); + } + } + + table.on('edit(multiSku)', function(obj){ + var value = obj.value //得到修改后的值 + ,data = obj.data //得到所在行所有键值 + ,field = obj.field; //得到字段 + + for (let i = 0; i < tableSkuData.length; i++) { + if (tableSkuData[i].index == data.index) { + tableSkuData[i] = data; + } + } + }); + + $('#test3').on('click', function (){ + let attrNameVal = $('#attrName').val(); + if(attrNameVal == null || attrNameVal == ""){ + febs.alert.warn('样式名称不能为空'); + return false; + } + + var data = {}; + data.styleName = attrNameVal; + var index = addTableDate(data); + bindUpload(index); + }); + + function bindUpload(index) { + // 普通图片上传 + upload.render({ + elem: '#skuImg' + index + ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 + ,done: function(res){ + febs.alert.success(res.data.src); + $('#imageUrls' + index).attr('src', res.data.src); + $('#imageUrls'+ index).css('display','block'); + $('#skuImage'+ index).val(res.data.src); + + + for (let i = 0; i < tableSkuData.length; i++) { + if(tableSkuData[i].index == index) { + tableSkuData[i].skuImage = res.data.src; + } + } + } + }); + } //(下拉框) $.get(ctx + 'admin/goodsCategory/categorys/allTree', function (data) { @@ -242,7 +420,6 @@ }else{ $("#thumbs").val(thumbs + ',' + res.data.src); } - // alert($("#thumb").val()); } }); @@ -258,13 +435,7 @@ }); } ,done: function(res){ - // var thumbs = $("#thumb").val(); - // if(thumbs == ''){ - $("#thumb").val(res.data.src); - // }else{ - // $("#thumb").val(thumbs + ',' + res.data.src); - // } - // alert($("#thumb").val()); + $("#thumb").val(res.data.src); } }); @@ -286,73 +457,7 @@ } }); - $('#test3').on('click', function (){ - var index = $("#attrWrap").children().length; - let attrNameVal = $('#attrName').val(); - if(attrNameVal==null || attrNameVal==""){ - febs.alert.warn('样式名称不能为空'); - return false; - } - $('#attrWrap').append(` - <div class="layui-form-item item"> - <div style="float:left" > - <input type="text" name="styleName` + index + `" value="` + $('#attrName').val() + `" autocomplete="off" class="layui-input" readonly > - </div> - <div style="float:left" > - <div> - <input type="text" name="skuName` + index +`" placeholder="规格名称" autocomplete="off" class="layui-input" > - </div> - </div> - <div style="float:left" > - <label class="layui-form-label">图片:</label> - <div class="layui-input-block"> - <div class="layui-upload"> - <button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="skuImg` + index + `">上传</button> - <img class="layui-upload-img" id="imageUrls` + index + `" style="width: 100px" > - </div> - </div> - </div> - <div style="float:left" class="febs-hide"> - <div> - <input type="text" id="skuImage` + index +`" name="skuImage` + index + `" autocomplete="off" class="layui-input"> - </div> - </div> - <div style="float:left" > - <div> - <input type="number" name="stock` + index +`" placeholder="库存" autocomplete="off" class="layui-input" > - </div> - </div> - <div style="float:left" > - <div> - <input type="number" name="skuVolume` + index +`" placeholder="销售数量" autocomplete="off" class="layui-input" > - </div> - </div> - <div style="float:left" > - <div> - <input type="number" name="originalPrice` + index +`" placeholder="原价" autocomplete="off" class="layui-input" > - </div> - </div> - <div style="float:left" > - <div> - <input type="number" name="presentPrice` + index + `" placeholder="现价" autocomplete="off" class="layui-input" > - </div> - </div> - <div style="float:left" > - <button type="button" class="layui-btn del-attr-btn" data-index="` + index +`">删除</button> - </div> - </div> - `) - //普通图片上传 - upload.render({ - elem: '#skuImg' + index - ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 - ,done: function(res){ - febs.alert.success(res.data.src); - $('#imageUrls' + index).attr('src', res.data.src); - $('#skuImage'+ index).val(res.data.src); - } - }); - }); + upload.render({ elem: '#skuImg'+index ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 @@ -362,31 +467,9 @@ $('#skuImage'+ index).val(res.data.src); } }); - $("#attrWrap").on("click",".del-attr-btn",function(){ - var index = $(this).attr('data-index') - $($("#attrWrap").find(".item")[index].remove()); - }); + form.on('submit(goods-add-form-submit)', function (data) { - let skuArrs = []; - var skuArr = $("#attrWrap").find(".item"); - for(var i = 0;i < skuArr.length;i++){ - skuArrs.push({ - styleName: $("input[name='styleName" + i + "']").val(), - skuName: $("input[name='skuName" + i + "']").val(), - skuImage: $("input[name='skuImage" + i + "']").val(), - stock: $("input[name='stock" + i + "']").val(), - skuVolume: $("input[name='skuVolume" + i + "']").val(), - originalPrice:$("input[name='originalPrice" + i + "']").val(), - presentPrice: $("input[name='presentPrice" + i + "']").val() - }) - } - // if(skuArr.length < 0){ - // febs.alert.warn("请填写商品规格"); - // return false; - // } - // console.log(skuArrs) - data.field.addMallGoodsSkuDtos = skuArrs; - // console.log(data.field) + data.field.addMallGoodsSkuDtos = tableSkuData; $.ajax({ 'url':ctx + 'admin/goods/addMallGoods', 'type':'post', @@ -410,11 +493,14 @@ return false; }); - // $('cancel').on('click', function () { - // var currentUrl = window.location.hash.replace('#', ''); - // febs.view.tab.del(currentUrl); - // febs.view.tab.change("/modules/goods/goodsList/"); - // }); - + form.on('select(goods-type-select)', function(data){ + $('.tc-set').each(function() { + if (data.value == 2) { + $(this).show(); + } else { + $(this).hide(); + } + }) + }); }); </script> \ No newline at end of file -- Gitblit v1.9.1