add_change.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>新增角色</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="format-detection" content="telephone=no">
  12. <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
  13. <link rel="stylesheet" type="text/css" href="../../css/common.css" />
  14. <style type="text/css">
  15. .ui-required:before {
  16. content: "*";
  17. color: red;
  18. vertical-align: middle;
  19. }
  20. #roleSelectViwe .layui-form-item {
  21. margin-bottom: 0
  22. }
  23. #roleSelectViwe .layui-input-inline {
  24. width: calc(100% - 110px);
  25. margin-right: 0;
  26. }
  27. .region {
  28. padding-left: 10px;
  29. height: 38px;
  30. line-height: 38px;
  31. background-color: #fff;
  32. border-radius: 2px;
  33. border: 1px solid #e6e6e6;
  34. width: 100% !important;
  35. width: calc(100% - 132px) !important;
  36. }
  37. .userTip {
  38. color: #666;
  39. font-size: 12px;
  40. }
  41. .userTip b {
  42. color: #333;
  43. }
  44. </style>
  45. <script type="text/html" id="typeHtmlTpl">
  46. <option value="">请选择</option>
  47. {{# if(!d.list){d.list = []}; layui.each(d.list, function(index, item){ }}
  48. <option value="{{item.guid}}">{{item.roleName}}</option>
  49. {{# }); }}
  50. </script>
  51. </head>
  52. <body>
  53. <form class="layui-form" action="" lay-filter="addForm" style="padding: 20px 20px 0 0">
  54. <div class="layui-form-item">
  55. <label class="layui-form-label ui-required">角色名称</label>
  56. <div class="layui-input-block">
  57. <input type="text" name="roleName" maxlength="32" lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
  58. class="layui-input">
  59. </div>
  60. </div>
  61. <div class="layui-form-item">
  62. <label class="layui-form-label">备注</label>
  63. <div class="layui-input-block">
  64. <textarea type="text" name="remark" maxlength="200" autocomplete="off" class="layui-textarea"></textarea>
  65. </div>
  66. </div>
  67. <div class="layui-form-item layui-layer-btn">
  68. <div class="layui-input-block">
  69. <button type="reset" class="layui-btn layui-btn-primary" id="closeWin">取消</button>
  70. <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
  71. </div>
  72. </div>
  73. </form>
  74. <script type="text/javascript">
  75. function loadJS(url) {
  76. document.write("<script src='" + url + "?ver=" + new Date().getTime() + "'><\/script>")
  77. }
  78. loadJS("../../layui/layui.js");
  79. loadJS("../../js/ajaxhook.min.js");
  80. loadJS("../../js/config.js");
  81. </script>
  82. <script type="text/javascript">
  83. layui.config({
  84. base: "../../js/layuiPlugins/"
  85. }).use(["form", 'layer', 'laytpl', 'jquery'], function () {
  86. var form = layui.form,
  87. layer = layui.layer,
  88. laytpl = layui.laytpl,
  89. $ = layui.jquery;
  90. var funcName = "role";
  91. var formData = {
  92. guid: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().guid || null : null, //带参传入ID
  93. roleTableDataId: "roleDataList", //数据ID
  94. current: {}, //当前表单数据
  95. select_data: "select_" + funcName, //查询用户
  96. save_data: (location.searchObj().guid ? 'edit' : 'add') + '_' + funcName, //查询用户
  97. formLayFilter: "addForm", //表单容器
  98. closeModal: function () { //关闭当前窗口
  99. parent.layer.close(parent.layer.getFrameIndex(window.name));
  100. }
  101. };
  102. //类型下拉列表模板
  103. function typeTpl(obj) {
  104. laytpl(typeHtmlTpl.innerHTML).render(obj, function (html) {
  105. $(obj.elem).html(html);
  106. form.render();
  107. });
  108. }
  109. //初始化
  110. formData.main = function () {
  111. var _this = this;
  112. if (this.guid) {
  113. _this.getCurrent(_this.guid); //获取并初始化表单角色信息
  114. } else {
  115. _this.initialization();
  116. }
  117. if (location.searchObj().event == "view") {
  118. var el = document.getElementsByTagName("INPUT");
  119. for (var i = 0; i < el.length; i++) {
  120. el[i].readOnly = true;
  121. }
  122. el = document.getElementsByTagName("textarea");
  123. for (var i = 0; i < el.length; i++) {
  124. el[i].disabled = true;
  125. }
  126. el = document.getElementsByTagName("checkbox");
  127. for (var i = 0; i < el.length; i++) {
  128. el[i].disabled = true;
  129. }
  130. el = document.getElementsByTagName("button");
  131. for (var i = 0; i < el.length; i++) {
  132. if (el[i].innerText.replace(" ", "") == "保存") {
  133. el[i].style.display = "none";
  134. }
  135. }
  136. }
  137. return this;
  138. };
  139. //初始化
  140. formData.initialization = function () {
  141. var _this = this;
  142. //监听提交
  143. form.on('submit(formDemo)', function (obj) {
  144. //必须return false;
  145. return _this.fusionData(obj.field).submitInfo(); //获取选中权限变数组,提交变化===下拉
  146. });
  147. //关闭窗口
  148. $("#closeWin").on("click", function () {
  149. _this.closeModal();
  150. });
  151. return _this;
  152. };
  153. //获取当前信息
  154. formData.getCurrent = function (id) {
  155. var _this = this;
  156. $.ajax({
  157. url: this.select_data,
  158. method: 'get',
  159. data: {
  160. guid: id || this.guid //当前ID
  161. },
  162. success: function (res) {
  163. _this.current = res.data[0];
  164. _this.initialization().formVal();
  165. }
  166. });
  167. return _this;
  168. };
  169. //表单赋值
  170. formData.formVal = function () {
  171. var _this = this;
  172. form.val(this.formLayFilter, this.current);
  173. return this;
  174. };
  175. //合并表单内容
  176. formData.fusionData = function (obj) {
  177. this.current = $.extend(this.current, obj);
  178. if (this.current.guid) {
  179. delete this.current.password;
  180. }
  181. return this;
  182. };
  183. //提交新增修改
  184. formData.submitInfo = function () {
  185. var _this = this;
  186. $.ajax({
  187. type: 'POST',
  188. url: this.save_data,//+'?userId='+this.guid
  189. data: JSON.stringify(this.current),
  190. contentType: 'application/json',
  191. success: function (res) {
  192. if (!(res.code - 0)) {
  193. parent.layer.msg(res.msg, {
  194. icon: 1
  195. });
  196. _this.closeModal();
  197. } else {
  198. layer.msg(res.msg, {
  199. icon: 2
  200. });
  201. }
  202. }
  203. });
  204. return false;
  205. };
  206. formData.main();
  207. //验证规则
  208. form.verify({
  209. nickname: function (value) {
  210. if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
  211. return '账号必须以英文字母开头,只能包含英文字母、数字、下划线';
  212. }
  213. if (/(^\_)|(\__)|(\_+$)/.test(value)) {
  214. return '账号首尾不能出现下划线\'_\'';
  215. }
  216. },
  217. checkName: function (value) {
  218. },
  219. phoneNumber: function (value) {
  220. if (value) {
  221. if (!(/^1[3|4|5|7|8]\d{9}$/).test(value)) {
  222. return '请输入正确的手机号码';
  223. }
  224. }
  225. return false;
  226. },
  227. password: function (value) {
  228. if (location.searchObj().guid) {
  229. if (value) {
  230. if (!(/^[\S]{6,12}$/).test(value)) {
  231. return '密码必须6到12位,且不能出现空格';
  232. }
  233. }
  234. return false;
  235. }
  236. if (!(/^[\S]{6,12}$/).test(value)) {
  237. return '密码必须6到12位,且不能出现空格';
  238. }
  239. },
  240. resspaword: function (value) {
  241. var pass = $('#L_pass').val();
  242. if (value != pass) {
  243. return '两次密码不一致';
  244. }
  245. },
  246. ageLength: [
  247. /^[0-9]{0,2}$/,
  248. '年龄必须0到2位,且只能是数字'
  249. ],
  250. jobLength: [
  251. /^[a-z\A-Z\u4e00-\u9fa5_]{0,10}$/,
  252. '职务必须是0-10位,且不包含特殊字符与数字'
  253. ],
  254. workUnit: [
  255. /^[0-9\a-z\A-Z\u4e00-\u9fa5_]{0,25}$/,
  256. '工作单位必须是0-25位,且不包含特殊字符'
  257. ],
  258. vcode: [
  259. /^[\w]{4,5}$/,
  260. '验证码不符合规则'
  261. ]
  262. });
  263. });
  264. </script>
  265. </body>
  266. </html>