add.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:mo="https://gitee.com/aun/Timo">
  4. <head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
  5. <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
  6. </head>
  7. <body>
  8. <div class="layui-form timo-compile">
  9. <form th:action="@{/rbac/menu}">
  10. <div class="layui-form-item">
  11. <label class="layui-form-label required">菜单类型</label>
  12. <div class="layui-input-inline">
  13. <label>
  14. <select name="type" mo:dict="MENU_TYPE" mo-selected="${menu?.type}" mo-empty="" lay-verify="type"></select>
  15. </label>
  16. </div>
  17. </div>
  18. <div class="layui-form-item">
  19. <label class="layui-form-label required">父级菜单</label>
  20. <div class="layui-input-inline">
  21. <label>
  22. <input class="layui-input select-tree" th:attr="data-url=@{/rbac/menu/ztree/parent}"
  23. type="text" name="pid" placeholder="请选择父级菜单">
  24. </label>
  25. </div>
  26. </div>
  27. <div class="layui-form-item">
  28. <label class="layui-form-label required">名字</label>
  29. <div class="layui-input-inline">
  30. <label>
  31. <input class="layui-input" type="text" name="name" placeholder="请输入名字">
  32. </label>
  33. </div>
  34. </div>
  35. <div class="layui-form-item">
  36. <label class="layui-form-label required">URL 地址</label>
  37. <div class="layui-input-inline">
  38. <label>
  39. <input class="layui-input url-input" type="text" name="url" placeholder="请输入URL地址">
  40. </label>
  41. </div>
  42. </div>
  43. <!--<div class="layui-form-item">
  44. <label class="layui-form-label required">排序</label>
  45. <div class="layui-input-inline">
  46. <label>
  47. <select class="select-pos" name="pos" lay-verify="pos"
  48. th:attr="data-url=@{/rbac/menu/sorted}"></select>
  49. </label>
  50. </div>
  51. <div class="layui-input-info">(之后)</div>
  52. </div>-->
  53. <!--<div class="layui-form-item">
  54. <label class="layui-form-label required">分配角色</label>
  55. <div class="layui-input-block">
  56. <input th:each="item:${allRoles}" type="checkbox" name="roles" th:title="${item.name}"
  57. th:value="${item.id}" th:checked="${#sets.contains(menuRoles, item)}" lay-skin="primary">
  58. </div>
  59. </div>-->
  60. <div class="layui-form-item timo-finally">
  61. <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
  62. <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
  63. </div>
  64. </form>
  65. </div>
  66. <script th:replace="/common/template :: script"></script>
  67. <script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
  68. <script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
  69. <script type="text/javascript" th:src="@{/js/timoTree.js}"></script>
  70. <script type="text/javascript">
  71. layui.use(['form'], function () {
  72. window.form = layui.form;
  73. // 初始化排序字段下拉选项
  74. // var pid = $(".select-tree").data('value');
  75. // if (pid !== undefined){
  76. // sortRender({id: pid});
  77. // }
  78. });
  79. // 初始化下拉树
  80. $.fn.selectTree({
  81. rootTree: '根',
  82. // 选中后事件
  83. // onSelected: sortRender
  84. });
  85. // 重新渲染排序字段的下拉选项
  86. function sortRender(treeNode) {
  87. var pid = treeNode.id;
  88. var pos = $(".select-pos");
  89. var id = 0;
  90. var url = pos.data('url') + "/" + pid + "/" + id;
  91. $.get(url, function (result) {
  92. result = result.data
  93. var options = '';
  94. var posNum = Object.keys(result).length;
  95. result[0] = "首位";
  96. for(var key in result){
  97. var selected = posNum === parseInt(key) ? "selected=''" : "";
  98. options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
  99. }
  100. pos.html(options);
  101. form.render('select');
  102. });
  103. }
  104. // 监听变动图标
  105. $(".icon-input").on("input propertychange", function(){
  106. $(".icon-show").attr("class", "icon-show "+$(this).val());
  107. });
  108. </script>
  109. </body>
  110. </html>