From c2762fa2ad831b07f1164538fdb644f7d17427c8 Mon Sep 17 00:00:00 2001
From: wolfcode <37436228+wolf-leo@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:07:17 +0800
Subject: [PATCH] feat(goods): optimize goods add and edit pages

- 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>
---
 app/admin/view/mall/goods/add.html   | 175 ++++++++++++++-------------
 app/admin/view/mall/goods/edit.html  | 175 ++++++++++++++-------------
 public/static/admin/js/mall/goods.js |   2 +
 3 files changed, 182 insertions(+), 170 deletions(-)

diff --git a/app/admin/view/mall/goods/add.html b/app/admin/view/mall/goods/add.html
index f150645..5cc3ad3 100644
--- a/app/admin/view/mall/goods/add.html
+++ b/app/admin/view/mall/goods/add.html
@@ -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>
diff --git a/app/admin/view/mall/goods/edit.html b/app/admin/view/mall/goods/edit.html
index af6f9cd..fcdc2f6 100644
--- a/app/admin/view/mall/goods/edit.html
+++ b/app/admin/view/mall/goods/edit.html
@@ -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>
diff --git a/public/static/admin/js/mall/goods.js b/public/static/admin/js/mall/goods.js
index 7ef9a30..3e877ea 100644
--- a/public/static/admin/js/mall/goods.js
+++ b/public/static/admin/js/mall/goods.js
@@ -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,