src/main/resources/templates/febs/views/modules/goods/goodsAddNew-bak.html | ●●●●● patch | view | raw | blame | history | |
src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html | ●●●●● patch | view | raw | blame | history | |
src/main/resources/templates/febs/views/modules/goods/goodsList.html | ●●●●● patch | view | raw | blame | history |
src/main/resources/templates/febs/views/modules/goods/goodsAddNew-bak.html
New file @@ -0,0 +1,364 @@ <div class="layui-fluid layui-anim febs-anim" id="febs-goods" lay-title="新增商品"> <div class="layui-row febs-container"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-body febs-table-full"> <div class="layui-fluid" id="goods-add"> <form class="layui-form" action="" lay-filter="goods-add-form"> <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="goodsName" 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="goodsNo" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </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"> <select name="categoryId" class="categary-addPeoduct" > <option value="">请选择</option> </select> </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="unit" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </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="originalPrice" 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="presentPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品介绍:</label> <div class="layui-input-block"> <input type="text" name="goodsIntrodution" 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> </div> </div> <div id="attrWrap"></div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">缩略图:</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal layui-btn" id="test2">上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div class="layui-upload-list" id="demo2"></div> </blockquote> </div> </div> </div> <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> <input type="text" id="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">轮播图:</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal layui-btn" id="thumbsBanner">上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div class="layui-upload-list" id="thumbsBanners"></div> </blockquote> </div> </div> </div> <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> <input type="text" id="thumbs" lay-verify="required" name="thumbs" autocomplete="off" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">商品详情:</label> <div class="layui-input-block"> <textarea id="lay_edit" lay-verify="goodsDetails" name = "goodsDetails" class="layui-textarea"></textarea> </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-input-block"> <input type="radio" name="isHot" value="1" title="是" > <input type="radio" name="isHot" value="2" title="否" checked=""> </div> </div> </div> <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> </div> </form> </div> </div> </div> </div> </div> </div> <!-- 表格操作栏 end --> <script data-th-inline="javascript"> layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload'], function () { var $ = layui.jquery, febs = layui.febs, layer = layui.layer, formSelects = layui.formSelects, treeSelect = layui.treeSelect, form = layui.form, laydate = layui.laydate, eleTree = layui.eleTree, member = [[${member}]], $view = $('#goods-add'), layedit = layui.layedit, upload = layui.upload, validate = layui.validate; form.render(); laydate.render({ elem: '#febs-form-group-date' }); formSelects.render(); //(下拉框) $.get(ctx + 'admin/goodsCategory/categorys/allTree', function (data) { for (var k in data) { $(".categary-addPeoduct").append("<option value='" + data[k].parentId + "'>" + data[k].name + "</option>"); } layui.use('form', function () { var form = layui.form; // $("#categarySelect").val(member.parentId) form.render(); }); }); //多图片上传 upload.render({ elem: '#thumbsBanner' ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 ,multiple: true ,before: function(obj){ //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#thumbsBanners').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">') }); } ,done: function(res){ var thumbs = $("#thumbs").val(); if(thumbs == ''){ $("#thumbs").val(res.data.src); }else{ $("#thumbs").val(thumbs + ',' + res.data.src); } // alert($("#thumb").val()); } }); //图片上传 upload.render({ elem: '#test2' ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口 ,multiple: true ,before: function(obj){ //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">') }); } ,done: function(res){ // var thumbs = $("#thumb").val(); // if(thumbs == ''){ $("#thumb").val(res.data.src); // }else{ // $("#thumb").val(thumbs + ',' + res.data.src); // } // alert($("#thumb").val()); } }); layedit.set({ //设置图片接口 uploadImage: { url: 'admin/goods/uploadFileBase64', //接口url type: 'post', } }); //创建一个编辑器 var index = layedit.build('lay_edit',{ height: 300 }); //提交时把值同步到文本域中 form.verify({ //content富文本域中的lay-verify值 goodsDetails: function(value) { return layedit.sync(index); } }); $('#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' //改成您自己的上传接口 ,done: function(res){ febs.alert.success(res.data.src); $('#imageUrls' + index).attr('src', res.data.src); $('#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) $.ajax({ 'url':ctx + 'admin/goods/addMallGoods', 'type':'post', 'dataType':'json', 'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式 'traditional': true,//ajax传递数组必须添加属性 'data':JSON.stringify(data.field), 'success':function (data) { if(data.code==0){ febs.alert.success(data.message); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); }else{ febs.alert.warn(data.message); } }, 'error':function () { febs.alert.warn('服务器繁忙'); } }) return false; }); // $('cancel').on('click', function () { // var currentUrl = window.location.hash.replace('#', ''); // febs.view.tab.del(currentUrl); // febs.view.tab.change("/modules/goods/goodsList/"); // }); }); </script> src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html
@@ -5,119 +5,168 @@ <div class="layui-card-body febs-table-full"> <div class="layui-fluid" id="goods-add"> <form class="layui-form" action="" lay-filter="goods-add-form"> <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="goodsName" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">基础信息</li> <li>详情设置</li> <li>价格设置</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <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> <div class="layui-input-block"> <input type="text" name="goodsName" 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="goodsNo" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </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"> <select name="categoryId" class="categary-addPeoduct" > <option value="">请选择</option> </select> </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="unit" 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="store" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品介绍:</label> <div class="layui-input-block"> <label> <textarea name="goodsIntrodution" rows="5" autocomplete="off" class="layui-textarea" ></textarea> </label> </div> </div> <blockquote class="layui-elem-quote blue-border">商品类型</blockquote> <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" > <option value="1">普通商品区</option> <option value="2">套餐区</option> </select> </div> </div> </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="goodsNo" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> <div class="layui-tab-item"> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">缩略图:</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal layui-btn" id="test2">上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div class="layui-upload-list" id="demo2"></div> </blockquote> </div> </div> </div> <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> <input type="text" id="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">轮播图:</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal layui-btn" id="thumbsBanner">上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div class="layui-upload-list" id="thumbsBanners"></div> </blockquote> </div> </div> </div> <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> <input type="text" id="thumbs" lay-verify="required" name="thumbs" autocomplete="off" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">商品详情:</label> <div class="layui-input-block"> <textarea id="lay_edit" lay-verify="goodsDetails" name = "goodsDetails" class="layui-textarea"></textarea> </div> </div> </div> </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"> <select name="categoryId" class="categary-addPeoduct" > <option value="">请选择</option> </select> <div class="layui-tab-item"> <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="originalPrice" 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="presentPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">成本价:</label> <div class="layui-input-block"> <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> </div> </div> <div id="attrWrap"></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-input-block"> <input type="radio" name="isHot" value="1" title="是" > <input type="radio" name="isHot" value="2" title="否" checked=""> </div> </div> </div> </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="unit" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </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="originalPrice" 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="presentPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">商品介绍:</label> <div class="layui-input-block"> <input type="text" name="goodsIntrodution" 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-xs" id="test3" >添加</button> </div> </div> <div id="attrWrap"></div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">缩略图:</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test2">上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div class="layui-upload-list" id="demo2"></div> </blockquote> </div> </div> </div> <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> <input type="text" id="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">轮播图:</label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="thumbsBanner">上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div class="layui-upload-list" id="thumbsBanners"></div> </blockquote> </div> </div> </div> <div class="layui-form-item febs-hide"> <label class="layui-form-label">缩略图链接:</label> <div class="layui-input-block"> <input type="text" id="thumbs" lay-verify="required" name="thumbs" autocomplete="off" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label febs-form-item-require">商品详情:</label> <div class="layui-input-block"> <textarea id="lay_edit" lay-verify="goodsDetails" name = "goodsDetails" class="layui-textarea"></textarea> </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-input-block"> <input type="radio" name="isHot" value="1" title="是" > <input type="radio" name="isHot" value="2" title="否" checked=""> </div> </div> </div> <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> @@ -130,9 +179,15 @@ </div> </div> </div> <style> .blue-border { border-left-color: #2db7f5; font-size: 18px; } </style> <!-- 表格操作栏 end --> <script data-th-inline="javascript"> layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload'], function () { layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload', 'element'], function () { var $ = layui.jquery, febs = layui.febs, layer = layui.layer, @@ -145,7 +200,8 @@ $view = $('#goods-add'), layedit = layui.layedit, upload = layui.upload, validate = layui.validate; validate = layui.validate, element = layui.element; form.render(); laydate.render({ src/main/resources/templates/febs/views/modules/goods/goodsList.html
@@ -172,7 +172,7 @@ {field: 'thumb', title: '缩略图', templet: function (d) { return '<a lay-event="seeImgThumb"><img id="seeImgThumb'+d.id+'" src="'+d.thumb+'" alt=""></a>'; }, minWidth: 100,align:'center'}, }, minWidth: 150,align:'center'}, {field: 'categaryName', title: '分类', minWidth: 150,align:'left'}, {field: 'isSale', title: '是否上架', templet: function (d) { @@ -206,11 +206,11 @@ + '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detailGoods" shiro:hasPermission="user:update">详情</button>' }else{ return '<button class="layui-btn layui-btn-normal layui-btn-xs febs-bg-green" lay-event="upGoods" shiro:hasPermission="user:update">上架</button>' + '<button class="layui-btn layui-btn-normal layui-btn-xs febs-bg-red" lay-event="delGoods" shiro:hasPermission="user:update">删除</button>' + '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="goodsUpdate" shiro:hasPermission="user:update">编辑</button>' + '<button class="layui-btn layui-btn-normal layui-btn-xs febs-bg-red" lay-event="delGoods" shiro:hasPermission="user:update">删除</button>' } },minWidth: 300,align:'center'} },minWidth: 160,align:'center'} ]] }); }