ruankao/app/admin/view/yunzer/menuedit.php

{include file="public/header" /}
<form class="layui-form">
	<input type="hidden" name="smid" value="{$lists.smid}">
	<div class="layui-form-item">
		<label class="layui-form-label">菜单名</label>
		<div class="layui-input-block">
			<input type="text" class="layui-input" name="label" placeholder="请输入菜单名" value="{$lists['label']}">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">图标</label>
		<div class="layui-input-block" style="position:relative;">
			<input type="text" readonly class="layui-input" name="icon_class" id="icon_class_input"
				value="{$lists['icon_class']|default=''}" placeholder="请选择图标" autocomplete="off"
				style="background:#fff;cursor:pointer;">
			<div class="icon-dropdown" id="iconDropdown"
				style="display:none;position:absolute;z-index:9999;width:400px;max-height:320px;overflow:auto;background:#fff;border:1px solid #eee;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.08);padding:12px;">
				<input type="text" class="layui-input" id="iconSearchInput" placeholder="搜索图标名称或class"
					style="margin-bottom:10px;">
				<div class="icon-card-list">
					{foreach $iconfont as $icon_v}
					<div class="icon-card{if($icon_v['icon_css'] == $lists['icon_class'])} selected{/if}"
						data-icon="{$icon_v['icon_css']}" data-name="{$icon_v['icon_name']}"
						data-css="{$icon_v['icon_css']}">
						<i class="layui-icon {$icon_v['icon_css']}" style="font-size:24px;"></i>
						<div class="icon-name">{$icon_v['icon_name']}</div>
					</div>
					{/foreach}
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">排序</label>
		<div class="layui-input-block">
			<input type="number" class="layui-input" name="sort" placeholder="值越大越靠前" value="{$lists['sort']}">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">状态</label>
		<div class="layui-input-block">
			<input type="radio" name="status" value="1" title="开启" {$lists['status']==1?'checked':''}>
			<input type="radio" name="status" value="0" title="禁用" {$lists['status']==0?'checked':''}>
		</div>
	</div>
</form>
<div class="layui-form-item" style="margin-top:10px;">
	<div class="layui-input-block">
		<button type="button" class="layui-btn" onclick="save()">保存</button>
	</div>
</div>
<script>
	layui.use(['form', 'jquery', 'layer'], function () {
		var $ = layui.jquery;
		var form = layui.form;
		var layer = layui.layer;
		var $input = $('#icon_class_input');
		var $dropdown = $('#iconDropdown');
		var $search = $('#iconSearchInput');
		var $cards = $dropdown.find('.icon-card');
		// 显示下拉
		$input.on('focus click', function (e) {
			var offset = $input.offset();
			$dropdown.css({
				left: '-15px',
				top: '40px',
				display: 'block'
			});
			$search.val('').trigger('input');
		});
		// 选中卡片
		$dropdown.on('click', '.icon-card', function () {
			$cards.removeClass('selected');
			$(this).addClass('selected');
			$input.val($(this).data('icon'));
			$dropdown.hide();
		});
		// 搜索
		$search.on('input', function () {
			var val = $(this).val().toLowerCase();
			$cards.each(function () {
				var name = $(this).data('name').toLowerCase();
				var css = $(this).data('css').toLowerCase();
				if (name.indexOf(val) !== -1 || css.indexOf(val) !== -1) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		});
		// 点击外部关闭
		$(document).on('mousedown', function (e) {
			if (!$(e.target).closest('.icon-dropdown').length && !$(e.target).is($input)) {
				$dropdown.hide();
			}
		});
		// 回显
		var selected = $input.val();
		if (selected) {
			$cards.each(function () {
				if ($(this).data('icon') == selected) {
					$(this).addClass('selected');
				}
			});
		}
		//保存
		window.save = function () {
			var data = {};
			// 获取表单数据
			data.smid = $('input[name="smid"]').val();
			data.label = $('input[name="label"]').val();
			data.icon_class = $('input[name="icon_class"]').val();
			data.sort = $('input[name="sort"]').val();
			data.status = $('input[name="status"]:checked').val();

			// 简单校验
			if (!data.label) {
				layer.msg('菜单名不能为空', { icon: 2 });
				return;
			}

			$.post(
				'{$config["admin_route"]}yunzer/menuedit',
				data,
				function (res) {
					if (res.code == 0) {
						layer.msg(res.msg, { icon: 1 });
						// 1秒后关闭弹窗并刷新父页面
						setTimeout(function () {
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
							parent.location.reload();
						}, 1000);
					} else {
						layer.alert(res.msg, { icon: 2 });
					}
				},
				'json'
			);
		}
	});
</script>
<style>
	.icon-card-list {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.icon-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border: 1px solid #eee;
		border-radius: 6px;
		cursor: pointer;
		transition: border 0.2s, box-shadow 0.2s;
		background: #fafbfc;
		font-size: 12px;
		color: #666;
		position: relative;
	}

	.icon-card.selected {
		border: 2px solid #409eff;
		box-shadow: 0 2px 8px rgba(64, 158, 255, 0.10);
		color: #409eff;
	}

	.icon-card .icon-name {
		margin-top: 4px;
		font-size: 9px;
		text-align: center;
		word-break: break-all;
	}

	.icon-dropdown {
		min-width: 320px;
		max-width: 600px;
	}
</style>
{include file="public/tail" /}