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

feat(admin): add switchSelect plugin and update goods form

Browse Source 
- Add switchSelect plugin to config-admin.js and easy-admin.js
- Update goods add and edit forms to use switchSelect for category selection
- Remove commented-out category selection code
This commit is contained in:
wolfcode
2025-07-23 17:48:42 +08:00
parent a1044c5287
commit 3d652114a9
6 changed files with 262 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,17 +13,22 @@
</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">商品分类2</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required">
{volist name='cate' id='vo'}
<option value="{$key}">{$vo}</option>
{/volist}
</select>
</div>
</div>
<!-- 展现形式不同的写法-->
<div class="layui-form-item">
<label class="layui-form-label">商品分类3</label>
<div data-show="switchSelect" data-list='{$cate|json_encode|raw}' data-name="cate_id" data-value="" data-target="radio"></div>
</div>
<div class="layui-form-item">
<div class="layui-row">

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

@@ -13,17 +13,22 @@
</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">商品分类2</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required">
{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">商品分类3</label>
<div data-show="switchSelect" data-list='{$cate|json_encode|raw}' data-name="cate_id" data-value="{$row.cate_id}" data-target="radio"></div>
</div>
<div class="layui-form-item">
<div class="layui-row">

1
public/static/config-admin.js
View File

@@ -16,6 +16,7 @@ require.config({
"miniTongji": ["plugs/lay-module/layuimini/miniTongji"],
"treetable": ["plugs/lay-module/treetable-lay/treetable"],
"tableSelect": ["plugs/lay-module/tableSelect/tableSelect"],
"switchSelect": ["plugs/lay-module/switchSelect/switchSelect"],
"iconPickerFa": ["plugs/lay-module/iconPicker/iconPickerFa"],
"autocomplete": ["plugs/lay-module/autocomplete/autocomplete"],
"xmSelect": ["plugs/xmSelect/xm-select"],

21
public/static/plugs/easy-admin/easy-admin.js
View File

@@ -1,4 +1,4 @@
define(["jquery", "tableSelect", "miniTheme", "xmSelect", "lazyload"], function ($, tableSelect, miniTheme, xmSelect, lazyload) {
define(["jquery", "tableSelect", "switchSelect", "miniTheme", "xmSelect", "lazyload"], function ($, tableSelect, switchSelect, miniTheme, xmSelect, lazyload) {
//切换日夜模式
window.onInitElemStyle = function () {
@@ -23,6 +23,7 @@ define(["jquery", "tableSelect", "miniTheme", "xmSelect", "lazyload"], function
element = layui.element,
laytpl = layui.laytpl,
tableSelect = layui.tableSelect,
switchSelect = layui.switchSelect,
util = layui.util;
layer.config({
@@ -1783,6 +1784,24 @@ define(["jquery", "tableSelect", "miniTheme", "xmSelect", "lazyload"], function
}
);
});
let switchSelectList = document.querySelectorAll("[data-show]");
$.each(switchSelectList, function (i, v) {
let _show = $(this).attr('data-show');
if (_show === 'switchSelect') {
let _data = $(this).attr('data-list');
let _value = $(this).attr('data-value') || ''
let _target = $(this).attr('data-target') || ''
let _name = $(this).attr('data-name') || ''
try {
new switchSelect({
elem: $(this), data: JSON.parse(_data), default: _value, target: _target, name: _name
});
} catch (e) {
console.error(e)
}
}
});
},
date: function () {
var dateList = document.querySelectorAll("[data-date]");

39
public/static/plugs/lay-module/switchSelect/switchSelect.css Normal file
View File

@@ -0,0 +1,39 @@
.layui-switch-select {
position: relative;
}
.layui-switch-select .radio-container {
border: 1px solid #eee;
}
.layui-switch-select .toggle-dots {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 8px;
z-index: 999;
background: #e9e9e9;
padding: 5px;
border-radius: 25px;
}
.layui-switch-select .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.layui-switch-select .dot.active {
background-color: #1E9FFF;
}
.layui-switch-select .radio-group {
display: flex;
}
.layui-switch-select .toggle-hidden {
display: none !important;
}

170
public/static/plugs/lay-module/switchSelect/switchSelect.js Normal file
View File

@@ -0,0 +1,170 @@
/**
* @autho wolfcode
* @description switchSelect.js
* @time 2025年7月23日 16:07:06
*/
layui.define(['form'], function (exports) {
let form = layui.form, $ = layui.$;
// 构造函数
let SwitchSelect = function (options) {
this.config = $.extend({
elem: null, // 容器选择器
data: [], // 选项数据 {1:'正常',2:'禁用',3:'删除'} Key => Value 形式
default: '', // 默认值
target: '', // 默认显示形式
name: '', // 表单 name
onSwitch: null // 切换回调
}, options);
this.render();
};
// 原型方法
SwitchSelect.prototype = {
// 渲染组件
render: function () {
let that = this;
let elem = $(this.config.elem);
if (!elem.length) return;
let active, toggleHidden
switch (this.config.target) {
case 'radio':
active = 'radio';
toggleHidden = 'select';
break;
case 'select':
active = 'select';
toggleHidden = 'radio';
break;
default:
active = 'select';
toggleHidden = 'radio';
}
// 创建HTML结构
let html = `
<div class="layui-switch-select">
<div class="toggle-dots">
<span class="dot ${active === 'radio' ? 'active' : ''}" data-target="radio"></span>
<span class="dot ${active === 'select' ? 'active' : ''}" data-target="select"></span>
</div>
<div class="layui-input-block">
<div class="radio-container ${toggleHidden === 'radio' ? 'toggle-hidden' : ''}">${this.generateRadioHtml()}</div>
<div class="select-container ${toggleHidden === 'select' ? 'toggle-hidden' : ''}">
<select name="${this.config.name}" lay-filter="switchSelectFilter" class="layui-select">
${this.generateSelectHtml()}
</select>
</div>
</div>
</div>
`;
elem.html(html);
form.render();
this.bindEvents();
},
// 生成单选框HTML
generateRadioHtml: function () {
let html = '';
$.map(this.config.data, (item, index) => {
let checked = index == this.config.default ? 'checked' : '';
html += `\n<input type="radio" name="${this.config.name}" lay-filter="switchSelectFilter" value="${index}" title="${item}" ${checked}>\n`;
});
return html;
},
// 生成下拉框HTML
generateSelectHtml: function () {
let html = '';
$.map(this.config.data, (item, index) => {
let selected = index == this.config.default ? 'selected' : '';
html += `\n<option value="${index}" ${selected}>${item}</option>\n`;
});
return html;
},
// 绑定事件
bindEvents: function () {
let that = this;
let elem = $(this.config.elem);
let radioContainer = elem.find('.radio-container');
let selectContainer = elem.find('.select-container');
let toggleDots = elem.find('.dot');
// 圆点切换事件
toggleDots.on('click', function () {
let target = $(this).data('target');
if (target === 'radio') {
radioContainer.removeClass('toggle-hidden');
selectContainer.addClass('toggle-hidden');
} else {
radioContainer.addClass('toggle-hidden');
selectContainer.removeClass('toggle-hidden');
}
// 更新激活状态
toggleDots.removeClass('active');
$(this).addClass('active');
// 同步数据
that.syncData(target);
// 触发回调
if (typeof that.config.onSwitch === 'function') {
that.config.onSwitch(target);
}
});
// 监听单选按钮变化
form.on('radio(switchSelectFilter)', function (data) {
let value = data.value;
elem.find(`select[name="${that.config.name}"]`).val(value);
form.render('select');
});
// 监听下拉框变化
form.on('select(selectFilter)', function (data) {
let value = data.value;
elem.find(`input[name="${that.config.name}"][value="${value}"]`).prop('checked', true);
form.render('radio');
});
},
// 同步数据
syncData: function (target) {
let elem = $(this.config.elem);
if (target === 'radio') {
let selectValue = elem.find(`select[name="${this.config.name}"]`).val();
elem.find(`input[name="${this.config.name}"][value="` + selectValue + '"]').prop('checked', true);
form.render('radio');
} else {
let radioValue = elem.find(`input[name="${this.config.name}"]:checked`).val();
elem.find(`select[name="${this.config.name}"]`).val(radioValue);
form.render('select');
}
},
// 获取当前值
getValue: function () {
return $(this.config.elem).find(`input[name="${this.config.name}"]:checked`).val();
},
// 设置值
setValue: function (value) {
let elem = $(this.config.elem);
elem.find(`input[name="${this.config.name}"][value="${value}"]`).prop('checked', true);
elem.find(`select[name="${this.config.name}"]`).val(value);
form.render();
},
};
// 暴露接口
exports('switchSelect', function (options) {
return new SwitchSelect(options);
});
});
let currentScriptPath = document.currentScript.src;
const urlObj = new URL(currentScriptPath);
layui.link(urlObj.pathname.replace('switchSelect.js', 'switchSelect.css'));