lisone/EasyAdmin8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(goods): optimize goods add and edit pages

Browse Source 
- Adjust layout of goods add and edit forms for better readability- Enhance editor visibility on the right side of the page
- Increase dialog size for adding and editing goods to improve usability

Signed-off-by: wolfcode <37436228+wolf-leo@users.noreply.github.com>
This commit is contained in:
wolfcode
2024-10-07 13:07:17 +08:00
parent de92299a4f
commit c2762fa2ad
3 changed files with 182 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
app/admin/view/mall/goods/add.html
View File

@@ -1,99 +1,104 @@
<div class="layuimini-container">
<form id="app-form" class="layui-form layuimini-form">
<form id="app-form" class="layui-form layuimini-form layui-form-pane">
<!-- 可以使用该方式 推荐写法-->
<div class="layui-form-item">
<label class="layui-form-label">商品分类</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required" data-select="{:url('mall.cate/index')}" data-fields="id,title">
</select>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xl5 layui-col-lg5 layui-col-md5 layui-col-sm5 layui-col-xs5">
<!-- 可以使用该方式 推荐写法-->
<div class="layui-form-item">
<label class="layui-form-label">商品分类</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required" data-select="{:url('mall.cate/index')}" data-fields="id,title">
</select>
</div>
</div>
<!--也可以使用该方式-->
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">商品分类</label>-->
<!-- <div class="layui-input-block">-->
<!-- <select name="cate_id" lay-verify="required">-->
<!-- <option value="">请选择</option>-->
<!-- {volist name='cate' id='vo'}-->
<!-- <option value="{$key}">{$vo}</option>-->
<!-- {/volist}-->
<!-- </select>-->
<!-- </div>-->
<!-- </div>-->
<!--也可以使用该方式-->
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">商品分类</label>-->
<!-- <div class="layui-input-block">-->
<!-- <select name="cate_id" lay-verify="required">-->
<!-- <option value="">请选择</option>-->
<!-- {volist name='cate' id='vo'}-->
<!-- <option value="{$key}">{$vo}</option>-->
<!-- {/volist}-->
<!-- </select>-->
<!-- </div>-->
<!-- </div>-->
<div class="layui-form-item">
<label class="layui-form-label">商品标题</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入商品标题" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标题</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入商品标题" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">商品LOGO</label>
<div class="layui-input-block layuimini-upload">
<input name="logo" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传分类图片" value="">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="logo" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_logo" data-upload-select="logo" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
<div class="layui-form-item">
<label class="layui-form-label required">商品LOGO</label>
<div class="layui-input-block layuimini-upload">
<input name="logo" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传分类图片" value="">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="logo" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_logo" data-upload-select="logo" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">商品图片</label>
<div class="layui-input-block layuimini-upload">
<input name="images" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传商品图片" value="">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="images" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_images" data-upload-select="images" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">市场价格</label>
<div class="layui-input-block">
<input type="text" name="market_price" class="layui-input" lay-verify="required" placeholder="请输入市场价格" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">折扣价格</label>
<div class="layui-input-block">
<input type="text" name="discount_price" class="layui-input" lay-verify="required" placeholder="请输入折扣价格" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">虚拟销量</label>
<div class="layui-input-block">
<input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类排序</label>
<div class="layui-input-block">
<input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="0">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">商品图片</label>
<div class="layui-input-block layuimini-upload">
<input name="images" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传商品图片" value="">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="images" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_images" data-upload-select="images" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
<div class="layui-col-xl7 layui-col-lg7 layui-col-md7 layui-col-sm7 layui-col-xs7">
<div class="layui-form-item">
<label class="layui-form-label">商品描述</label>
<div class="layui-input-block">
{:editor_textarea('','describe')}
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">市场价格</label>
<div class="layui-input-block">
<input type="text" name="market_price" class="layui-input" lay-verify="required" placeholder="请输入市场价格" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">折扣价格</label>
<div class="layui-input-block">
<input type="text" name="discount_price" class="layui-input" lay-verify="required" placeholder="请输入折扣价格" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">虚拟销量</label>
<div class="layui-input-block">
<input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品描述</label>
<div class="layui-input-block">
{:editor_textarea('','describe')}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类排序</label>
<div class="layui-input-block">
<input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="0">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
<div class="hr-line"></div>
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>

175
app/admin/view/mall/goods/edit.html
View File

@@ -1,99 +1,104 @@
<div class="layuimini-container">
<form id="app-form" class="layui-form layuimini-form">
<form id="app-form" class="layui-form layuimini-form layui-form-pane">
<!-- 可以使用该方式 推荐写法-->
<div class="layui-form-item">
<label class="layui-form-label">商品分类</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required" data-select="{:url('mall.cate/index')}" data-fields="id,title" data-value="{$row.cate_id|default=''}">
</select>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xl5 layui-col-lg5 layui-col-md5 layui-col-sm5 layui-col-xs5">
<!-- 可以使用该方式 推荐写法-->
<div class="layui-form-item">
<label class="layui-form-label">商品分类</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required" data-select="{:url('mall.cate/index')}" data-fields="id,title" data-value="{$row.cate_id|default=''}">
</select>
</div>
</div>
<!--也可以使用该方式-->
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">商品分类</label>-->
<!-- <div class="layui-input-block">-->
<!-- <select name="cate_id" lay-verify="required">-->
<!-- <option value="">请选择</option>-->
<!-- {volist name='cate' id='vo'}-->
<!-- <option value="{$key}" {if $key==$row.cate_id}selected{/if}>{$vo}</option>-->
<!-- {/volist}-->
<!-- </select>-->
<!-- </div>-->
<!-- </div>-->
<!--也可以使用该方式-->
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">商品分类</label>-->
<!-- <div class="layui-input-block">-->
<!-- <select name="cate_id" lay-verify="required">-->
<!-- <option value="">请选择</option>-->
<!-- {volist name='cate' id='vo'}-->
<!-- <option value="{$key}" {if $key==$row.cate_id}selected{/if}>{$vo}</option>-->
<!-- {/volist}-->
<!-- </select>-->
<!-- </div>-->
<!-- </div>-->
<div class="layui-form-item">
<label class="layui-form-label">商品标题</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入商品标题" value="{$row.title|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标题</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入商品标题" value="{$row.title|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">商品LOGO</label>
<div class="layui-input-block layuimini-upload">
<input name="logo" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传分类图片" value="{$row.logo|default=''}">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="logo" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_logo" data-upload-select="logo" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
<div class="layui-form-item">
<label class="layui-form-label required">商品LOGO</label>
<div class="layui-input-block layuimini-upload">
<input name="logo" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传分类图片" value="{$row.logo|default=''}">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="logo" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_logo" data-upload-select="logo" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">商品图片</label>
<div class="layui-input-block layuimini-upload">
<input name="images" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传商品图片" value="{$row.images|default=''}">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="images" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_images" data-upload-select="images" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">市场价格</label>
<div class="layui-input-block">
<input type="text" name="market_price" class="layui-input" lay-verify="required" placeholder="请输入市场价格" value="{$row.market_price|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">折扣价格</label>
<div class="layui-input-block">
<input type="text" name="discount_price" class="layui-input" lay-verify="required" placeholder="请输入折扣价格" value="{$row.discount_price|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">虚拟销量</label>
<div class="layui-input-block">
<input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量" value="{$row.virtual_sales|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类排序</label>
<div class="layui-input-block">
<input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="{$row.sort|default=''}">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息">{$row.remark|default=''}</textarea>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">商品图片</label>
<div class="layui-input-block layuimini-upload">
<input name="images" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传商品图片" value="{$row.images|default=''}">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="images" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_images" data-upload-select="images" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
<div class="layui-col-xl7 layui-col-lg7 layui-col-md7 layui-col-sm7 layui-col-xs7">
<div class="layui-form-item">
<label class="layui-form-label">商品描述</label>
<div class="layui-input-block">
{:editor_textarea($row["describe"],'describe')}
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">市场价格</label>
<div class="layui-input-block">
<input type="text" name="market_price" class="layui-input" lay-verify="required" placeholder="请输入市场价格" value="{$row.market_price|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">折扣价格</label>
<div class="layui-input-block">
<input type="text" name="discount_price" class="layui-input" lay-verify="required" placeholder="请输入折扣价格" value="{$row.discount_price|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">虚拟销量</label>
<div class="layui-input-block">
<input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量" value="{$row.virtual_sales|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品描述</label>
<div class="layui-input-block">
{:editor_textarea($row["describe"],'describe')}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类排序</label>
<div class="layui-input-block">
<input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="{$row.sort|default=''}">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息">{$row.remark|default=''}</textarea>
</div>
</div>
<div class="hr-line"></div>
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>

2
public/static/admin/js/mall/goods.js
View File

@@ -25,6 +25,7 @@ define(["jquery", "easy-admin"], function ($, ea) {
auth: 'add',
class: 'layui-btn layui-btn-normal layui-btn-sm',
icon: 'fa fa-plus ',
extend: 'data-width="90%" data-height="95%"',
}],
'delete', 'export'],
cols: [[
@@ -53,6 +54,7 @@ define(["jquery", "easy-admin"], function ($, ea) {
method: 'open',
auth: 'edit',
class: 'layui-btn layui-btn-xs layui-btn-success',
extend: 'data-width="90%" data-height="95%"',
}, {
text: '入库',
url: init.stock_url,