role_form.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>角色表单</title>
  7. <link rel="stylesheet" href="../../lib/layui/css/layui.css">
  8. <style>
  9. body { padding: 20px; }
  10. .required { color: #ff5722; }
  11. </style>
  12. </head>
  13. <body>
  14. <form class="layui-form" lay-filter="roleForm" id="roleForm">
  15. <input type="hidden" name="id" id="roleId">
  16. <div class="layui-form-item">
  17. <label class="layui-form-label"><span class="required">*</span>角色名称</label>
  18. <div class="layui-input-block">
  19. <input type="text" name="roleName" lay-verify="required" placeholder="请输入角色名称" class="layui-input" style="width: 250px;">
  20. </div>
  21. </div>
  22. <div class="layui-form-item">
  23. <label class="layui-form-label"><span class="required">*</span>权限标识</label>
  24. <div class="layui-input-block">
  25. <input type="text" name="roleKey" lay-verify="required" placeholder="如: system:user:add" class="layui-input" style="width: 250px;">
  26. </div>
  27. </div>
  28. <div class="layui-form-item">
  29. <label class="layui-form-label"><span class="required">*</span>排序</label>
  30. <div class="layui-input-block">
  31. <input type="number" name="sort" lay-verify="required|number" value="0" class="layui-input" style="width: 150px;">
  32. </div>
  33. </div>
  34. <div class="layui-form-item">
  35. <label class="layui-form-label"><span class="required">*</span>状态</label>
  36. <div class="layui-input-block">
  37. <input type="radio" name="status" value="1" title="正常" checked>
  38. <input type="radio" name="status" value="0" title="停用">
  39. </div>
  40. </div>
  41. <div class="layui-form-item">
  42. <label class="layui-form-label">备注</label>
  43. <div class="layui-input-block">
  44. <textarea name="remark" placeholder="请输入备注" class="layui-textarea" style="width: 350px; height: 80px;"></textarea>
  45. </div>
  46. </div>
  47. <div class="layui-form-item">
  48. <div class="layui-input-block">
  49. <button type="submit" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
  50. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  51. </div>
  52. </div>
  53. </form>
  54. <script src="../../lib/layui/layui.js"></script>
  55. <script src="../../js/config.js"></script>
  56. <script src="../../js/common.js"></script>
  57. <script>
  58. layui.use(['form'], function() {
  59. var form = layui.form;
  60. var id = Common.getQueryString('id');
  61. var isEdit = !!id;
  62. if (isEdit) {
  63. Common.get(Config.api.role.getInfo + '/' + id, function(res) {
  64. if (res.code === 200) {
  65. var data = res.data;
  66. form.val('roleForm', {
  67. id: data.id,
  68. roleName: data.roleName,
  69. roleKey: data.roleKey,
  70. sort: data.sort,
  71. status: data.status,
  72. remark: data.remark
  73. });
  74. }
  75. });
  76. }
  77. form.on('submit(submitForm)', function(data) {
  78. Common.ajax({
  79. url: isEdit ? Config.api.role.update : Config.api.role.save,
  80. type: isEdit ? 'PUT' : 'POST',
  81. data: data.field,
  82. success: function(res) {
  83. Common.success(isEdit ? '修改成功' : '添加成功', function() {
  84. var index = parent.layer.getFrameIndex(window.name);
  85. parent.layer.close(index);
  86. parent.table.reload('tableList');
  87. });
  88. }
  89. });
  90. return false;
  91. });
  92. });
  93. </script>
  94. </body>
  95. </html>