<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header"></head>
<body>
<div class="x-body">
<form id="formId" onsubmit="return false;">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">
<span class="x-red">*</span>菜单名称
</label>
<div class="layui-input-inline">
<input type="text" name="menuName" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单图标</label>
<div class="layui-input-inline" id="icondiv">
<span id="icon" class="iconfont"></span>
<button class="layui-btn layui-btn-sm" onclick="selectIcon()">选择图标</button>
<input type="text" style="display: none" name="menuIcon">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">
<span class="x-red">*</span>父级菜单
</label>
<div class="layui-input-inline">
<select name="menuPid">
<option th:each="list:${pIdList}" th:value="${list.menuId}"
th:text="${list.menuName }"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">
菜单顺序
</label>
<div class="layui-input-inline">
<input type="text" name="menuOrder" class="layui-input" placeholder="不填写时默认在最后">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">
菜单路径
</label>
<div class="layui-input-inline">
<input type="text" name="menuUrl" class="layui-input" placeholder="有子菜单无效(勿改)">
</div>
</div>
<div class="layui-form-item" align="center">
<input type="text" name="menuId" style="display: none;" value="0">
<button class="layui-btn" onclick="checkToSave()">
保存
</button>
<button class="layui-btn layui-btn-danger" onclick="closeLayer()">
取消
</button>
</div>
</div>
</form>
</div>
<script type="text/javascript" th:src="@{/js/addOrEdit.js}"></script>
<style type="text/css">
#icondiv {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
<script>
function checkToSave() {
var menuName = $("#formId input[name='menuName']").val().trim();
var menuOrder = $("#formId input[name='menuOrder']").val().trim();
if (menuName == '') {
layer.msg('菜单名称不能为空!');
return false;
}
var reg = /^[1-9]\d*$/;
if (menuOrder != '' && !reg.test(menuOrder)) {
layer.msg('菜单顺序必须为正整数!');
return false;
}
setFormData();
save(formdata);
}
$(function () {
var id = [[${id}]];
getObjById(id);
})
function setOtherObj(obj) {
if (obj.menuIcon != null && obj.menuIcon != '') {
$("#icon").html('&#' + obj.menuIcon + ';');
} else {
$("#icon").html('无');
}
}
var unicode;
function selectIcon() {
var w = ($(window).width() * 0.9);
var h = ($(window).height() * 0.8);
unicode = layer.open({
type: 2,
area: [w + 'px', h + 'px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade: 0.4,
title: "选择图标",
content: '/menu/Icon'
});
}
function setIcon(name, code) {
layer.close(unicode);
$('#icon').html(' &#' + code + ';');
$("#formId input[name='menuIcon']").val(code);
}
</script>
</body>
</html>