diff --git a/public/static/config-admin.js b/public/static/config-admin.js
index fb7097e..bcb1746 100644
--- a/public/static/config-admin.js
+++ b/public/static/config-admin.js
@@ -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"],
diff --git a/public/static/plugs/easy-admin/easy-admin.js b/public/static/plugs/easy-admin/easy-admin.js
index 8f241ad..b0c9494 100644
--- a/public/static/plugs/easy-admin/easy-admin.js
+++ b/public/static/plugs/easy-admin/easy-admin.js
@@ -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]");
diff --git a/public/static/plugs/lay-module/switchSelect/switchSelect.css b/public/static/plugs/lay-module/switchSelect/switchSelect.css
new file mode 100644
index 0000000..1e859a3
--- /dev/null
+++ b/public/static/plugs/lay-module/switchSelect/switchSelect.css
@@ -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;
+}
\ No newline at end of file
diff --git a/public/static/plugs/lay-module/switchSelect/switchSelect.js b/public/static/plugs/lay-module/switchSelect/switchSelect.js
new file mode 100644
index 0000000..f093340
--- /dev/null
+++ b/public/static/plugs/lay-module/switchSelect/switchSelect.js
@@ -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 = `
+
+ `;
+ 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
\n`;
+ });
+ return html;
+ },
+
+ // 生成下拉框HTML
+ generateSelectHtml: function () {
+ let html = '';
+ $.map(this.config.data, (item, index) => {
+ let selected = index == this.config.default ? 'selected' : '';
+ html += `\n
\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'));