add_change.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>新增用户</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
  8. <style type="text/css">
  9. .ui-required:before {
  10. content: "*";
  11. color: red;
  12. vertical-align: middle;
  13. }
  14. #roleSelectViwe .layui-form-item {
  15. margin-bottom: 0
  16. }
  17. #roleSelectViwe .layui-input-inline {
  18. width: calc(100% - 110px);
  19. margin-right: 0;
  20. }
  21. .region {
  22. padding-left: 10px;
  23. height: 38px;
  24. line-height: 38px;
  25. background-color: #fff;
  26. border-radius: 2px;
  27. border: 1px solid #e6e6e6;
  28. width: 100% !important;
  29. width: calc(100% - 132px) !important;
  30. }
  31. .userTip {
  32. color: #666;
  33. font-size: 12px;
  34. }
  35. .userTip b {
  36. color: #333;
  37. }
  38. </style>
  39. <script type="text/html" id="typeHtmlTpl">
  40. <option value="">请选择</option>
  41. {{# if(!d.list){d.list = []}; layui.each(d.list, function(index, item){ }}
  42. <option value="{{item.id}}">{{item.name}}</option>
  43. {{# }); }}
  44. </script>
  45. </head>
  46. <body>
  47. <form class="layui-form" action="" lay-filter="addForm" style="padding: 20px 30px 0 0">
  48. <div class="layui-form-item" style="margin-bottom:5px">
  49. <div class="layui-input-block" style="min-height: 20px;">
  50. <span class="userTip">为避免账号名称重复,建议账号名称增加单位或区域的字母缩写,例如:<b>James_GY</b></span>
  51. </div>
  52. </div>
  53. <div class="layui-form-item">
  54. <label class="layui-form-label ui-required">账号</label>
  55. <div class="layui-input-block">
  56. <input type="text" name="name" lay-verify="required|nickname|checkName" maxlength="30" placeholder="请输入账号"
  57. autocomplete="on" class="layui-input">
  58. </div>
  59. </div>
  60. <div class="layui-form-item">
  61. <div class="layui-inline">
  62. <label class="layui-form-label ui-required">姓名</label>
  63. <div class="layui-input-inline">
  64. <input type="text" name="realName" lay-verify="required" maxlength="10" placeholder="请输入姓名" autocomplete="on"
  65. class="layui-input">
  66. </div>
  67. </div>
  68. <div class="layui-inline">
  69. <label class="layui-form-label">性别</label>
  70. <div class="layui-input-inline">
  71. <input type="radio" name="sex" value="男" title="男" checked />
  72. <input type="radio" name="sex" value="女" title="女" />
  73. </div>
  74. </div>
  75. </div>
  76. <div class="layui-form-item">
  77. <label class="layui-form-label ui-required">角色</label>
  78. <div class="layui-input-block">
  79. <select name="roles" lay-verify="required" lay-filter="roles" id="rolesView" placeholder="请选择"></select>
  80. </div>
  81. </div>
  82. <div class="layui-form-item">
  83. <label class="layui-form-label">手机号码</label>
  84. <div class="layui-input-block">
  85. <input type="text" name="phone" lay-verify="phoneNumber" placeholder="请输入手机号码" maxLength="11" autocomplete="on"
  86. class="layui-input">
  87. </div>
  88. </div>
  89. <div class="layui-form-item">
  90. <label class="layui-form-label ui-required">登录密码</label>
  91. <div class="layui-input-block">
  92. <input type="password" id="L_pass" name="pwd" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
  93. </div>
  94. </div>
  95. <div class="layui-form-item">
  96. <label class="layui-form-label ui-required">确认密码</label>
  97. <div class="layui-input-block">
  98. <input type="password" lay-verify="resspaword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
  99. </div>
  100. </div>
  101. <div class="layui-form-item layui-hide">
  102. <button class="layui-btn" lay-submit lay-filter="formSubmit" id="formSubmit">保存</button>
  103. </div>
  104. </form>
  105. <script type="text/javascript">
  106. layui.config({
  107. base: "../../../admin/js/layuiPlugins/"
  108. }).use(["form", 'layer', 'cascade', 'laytpl', 'jquery'], function() {
  109. var form = layui.form,
  110. $ = layui.$,
  111. layer = layui.layer,
  112. laytpl = layui.laytpl,
  113. $ = layui.jquery,
  114. cascade = layui.cascade;
  115. var user = {
  116. id: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().id || null : null, //带参传入ID
  117. roleTableDataId: "roleDataList", //数据ID
  118. currentUser: {}, //当前表单数据
  119. roleDataListPort: {
  120. roles: "roleDataList"
  121. }, //角色数据接口
  122. update_user: "userAddNew", //新增修改接口
  123. select_user: "select_user", //查询用户
  124. roleSelectView: "#roleSelectViwe", //角色列表下拉容器
  125. formLayFilter: "addForm", //表单容器
  126. closeModal: function() { //关闭当前窗口
  127. parent.layer.close(parent.layer.getFrameIndex(window.name));
  128. }
  129. };
  130. //类型下拉列表模板
  131. function typeTpl(obj) {
  132. laytpl(typeHtmlTpl.innerHTML).render(obj, function(html) {
  133. $(obj.elem).html(html);
  134. form.render();
  135. });
  136. }
  137. //初始化
  138. user.main = function() {
  139. var _this = this;
  140. if (this.id) {
  141. _this.getCurrent(_this.id); //获取并初始化表单角色信息
  142. } else {
  143. _this.initialization();
  144. }
  145. return this;
  146. };
  147. //初始化
  148. user.initialization = function() {
  149. var _this = this;
  150. //初始化角色权限下拉
  151. $.ajax({
  152. url: _this.roleDataListPort.roles + '?flag=1',
  153. success: function(res) {
  154. typeTpl({
  155. elem: "#rolesView",
  156. list: res.data
  157. });
  158. form.val(_this.formLayFilter, _this.currentUser);
  159. }
  160. });
  161. //监听提交
  162. form.on('submit(formSubmit)', function(obj) {
  163. //必须return false;
  164. return _this.fusionData(obj.field).submitInfo(); //获取选中权限变数组,提交变化===下拉
  165. });
  166. return _this;
  167. };
  168. //获取当前信息
  169. user.getCurrent = function(id) {
  170. var _this = this;
  171. $.ajax({
  172. url: this.select_user,
  173. data: {
  174. id: id || this.id //当前ID
  175. },
  176. success: function(res) {
  177. $('#provinceId').text(res.data[0].provinceName || '');
  178. $('#cityId').text(res.data[0].cityName || '');
  179. $('#countyId').text(res.data[0].countyName || '');
  180. _this.currentUser = res.data[0];
  181. _this.initialization().formVal();
  182. }
  183. });
  184. return this;
  185. };
  186. //表单赋值
  187. user.formVal = function() {
  188. var _this = this;
  189. form.val(this.formLayFilter, this.currentUser);
  190. return this;
  191. };
  192. //合并表单内容
  193. user.fusionData = function(obj) {
  194. this.currentUser = $.extend(this.currentUser, obj);
  195. if (this.currentUser.id) {
  196. delete this.currentUser.password;
  197. }
  198. this.currentUser.roles = [this.currentUser.roles];
  199. return this;
  200. };
  201. //提交新增修改
  202. user.submitInfo = function() {
  203. var _this = this;
  204. this.currentUser.userId = this.currentUser.id;
  205. $.ajax({
  206. type: this.id ? 'PUT' : 'POST',
  207. url: this.update_user,
  208. data: JSON.stringify(this.currentUser),
  209. contentType: 'application/json',
  210. success: function(res) {
  211. if (!(res.code - 0)) {
  212. parent.layer.msg(res.msg, {
  213. icon: 1
  214. });
  215. parent.layui.table.reload('userDataTable');
  216. _this.closeModal();
  217. } else {
  218. layer.msg(res.msg, {
  219. icon: 2
  220. });
  221. }
  222. }
  223. });
  224. return false;
  225. };
  226. user.main();
  227. //验证规则
  228. form.verify({
  229. nickname: function(value) {
  230. if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
  231. return '用户名必须以英文字母开头,只能包含英文字母、数字、下划线';
  232. }
  233. if (/(^\_)|(\__)|(\_+$)/.test(value)) {
  234. return '用户名首尾不能出现下划线\'_\'';
  235. }
  236. },
  237. checkName: function(value) {
  238. if (user.currentUser.name != value) {
  239. var msg = '用户名已经存在',
  240. code = false;
  241. $.ajax({
  242. url: "userList",
  243. async: false,
  244. timeout: 10000,
  245. data: {
  246. name: value
  247. },
  248. success: function(res) {
  249. if ((res.code - 0) == 7) {
  250. parent.window.location.href = window.hywa.jumpPage.login;
  251. }
  252. code = !!res.total;
  253. }
  254. });
  255. if (code) {
  256. return msg;
  257. }
  258. }
  259. },
  260. phoneNumber: function(value) {
  261. if (value) {
  262. if (!(/^1[3|4|5|7|8]\d{9}$/).test(value)) {
  263. return '请输入正确的手机号码';
  264. }
  265. }
  266. return false;
  267. },
  268. password: function(value) {
  269. if (location.searchObj().id) {
  270. if (value) {
  271. if (!(/^[\S]{6,12}$/).test(value)) {
  272. return '密码必须6到12位,且不能出现空格';
  273. }
  274. }
  275. return false;
  276. }
  277. if (!(/^[\S]{6,12}$/).test(value)) {
  278. return '密码必须6到12位,且不能出现空格';
  279. }
  280. },
  281. resspaword: function(value) {
  282. var pass = $('#L_pass').val();
  283. if (value != pass) {
  284. return '两次密码不一致';
  285. }
  286. },
  287. ageLength: [
  288. /^[0-9]{0,2}$/,
  289. '年龄必须0到2位,且只能是数字'
  290. ],
  291. jobLength: [
  292. /^[a-z\A-Z\u4e00-\u9fa5_]{0,10}$/,
  293. '职务必须是0-10位,且不包含特殊字符与数字'
  294. ],
  295. workUnit: [
  296. /^[0-9\a-z\A-Z\u4e00-\u9fa5_]{0,25}$/,
  297. '工作单位必须是0-25位,且不包含特殊字符'
  298. ],
  299. vcode: [
  300. /^[\w]{4,5}$/,
  301. '验证码不符合规则'
  302. ]
  303. });
  304. });
  305. </script>
  306. </body>
  307. </html>