insert.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>新增页面</title>
  6. <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
  7. <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
  8. </head>
  9. <body>
  10. <form class="layui-form" action="">
  11. <div class="mainBox">
  12. <div class="main-container mr-5">
  13. <div class="layui-form-item">
  14. <label class="layui-form-label">父级</label>
  15. <div class="layui-input-block">
  16. <div name="pid" id="pid" value="1" ></div>
  17. </div>
  18. </div>
  19. <div class="layui-form-item">
  20. <label class="layui-form-label required">角色名</label>
  21. <div class="layui-input-block">
  22. <input type="text" name="name" value="" required lay-verify="required" class="layui-input">
  23. </div>
  24. </div>
  25. <div class="layui-form-item">
  26. <label class="layui-form-label">权限</label>
  27. <div class="layui-input-block">
  28. <div name="rules" id="rules" value="" ></div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="bottom">
  34. <div class="button-container">
  35. <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
  36. lay-filter="save">
  37. 提交
  38. </button>
  39. <button type="reset" class="pear-btn pear-btn-md">
  40. 重置
  41. </button>
  42. </div>
  43. </div>
  44. </form>
  45. <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  46. <script src="/app/admin/component/pear/pear.js"></script>
  47. <script src="/app/admin/admin/js/permission.js"></script>
  48. <script>
  49. // 相关接口
  50. const INSERT_API = "/app/admin/role/insert";
  51. // 字段 权限 rules
  52. layui.use(["jquery", "xmSelect", "popup"], function() {
  53. layui.$.ajax({
  54. url: "/app/admin/role/rules?id=1",
  55. dataType: "json",
  56. success: function (res) {
  57. let value = layui.$("#rules").attr("value");
  58. let initValue = value ? value.split(",") : [];
  59. layui.xmSelect.render({
  60. el: "#rules",
  61. name: "rules",
  62. initValue: initValue,
  63. data: res.data,
  64. tree: {"show":true,expandedKeys:initValue},
  65. toolbar: {show:true,list:["ALL","CLEAR","REVERSE"]},
  66. })
  67. }
  68. });
  69. });
  70. // 字段 父级 pid
  71. layui.use(["jquery", "xmSelect", "popup"], function() {
  72. layui.$.ajax({
  73. url: "/app/admin/role/select?format=tree",
  74. dataType: "json",
  75. success: function (res) {
  76. let value = layui.$("#pid").attr("value");
  77. let initValue = value ? value.split(",") : [];
  78. layui.xmSelect.render({
  79. el: "#pid",
  80. name: "pid",
  81. initValue: initValue,
  82. tips: "请选择",
  83. data: res.data,
  84. value: "0",
  85. model: {"icon":"hidden","label":{"type":"text"}},
  86. clickClose: true,
  87. radio: true,
  88. tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys:true},
  89. on: function(data){
  90. let id = data.arr[0] ? data.arr[0].value : "";
  91. if (!id) return;
  92. layui.$.ajax({
  93. url: '/app/admin/role/rules?id=' + id,
  94. dataType: 'json',
  95. success: function (res) {
  96. if (res.code) {
  97. return layui.popup.failure(res.msg);
  98. }
  99. layui.xmSelect.get('#rules')[0].update({data:res.data});
  100. }
  101. });
  102. }
  103. })
  104. if (res.code) {
  105. layui.popup.failure(res.msg);
  106. }
  107. }
  108. });
  109. });
  110. //提交事件
  111. layui.use(["form", "popup"], function () {
  112. layui.form.on("submit(save)", function (data) {
  113. layui.$.ajax({
  114. url: INSERT_API,
  115. type: "POST",
  116. dateType: "json",
  117. data: data.field,
  118. success: function (res) {
  119. if (res.code) {
  120. return layui.popup.failure(res.msg);
  121. }
  122. return layui.popup.success("操作成功", function () {
  123. parent.refreshTable();
  124. parent.layer.close(parent.layer.getFrameIndex(window.name));
  125. });
  126. }
  127. });
  128. return false;
  129. });
  130. });
  131. </script>
  132. </body>
  133. </html>