first commit
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
{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" /}
|
||||
Reference in New Issue
Block a user