add.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增用户')" />
  5. <th:block th:include="include :: select2-css" />
  6. </head>
  7. <body>
  8. <div class="main-content">
  9. <form id="form-user-add" class="form-horizontal">
  10. <input name="deptId" type="hidden" id="treeId"/>
  11. <h4 class="form-header h4">基本信息</h4>
  12. <div class="row">
  13. <div class="col-sm-6">
  14. <div class="form-group">
  15. <label class="col-sm-4 control-label"><span style="color: red; ">*</span>用户名称:</label>
  16. <div class="col-sm-8">
  17. <input name="userName" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" required>
  18. </div>
  19. </div>
  20. </div>
  21. <div class="col-sm-6">
  22. <div class="form-group">
  23. <label class="col-sm-4 control-label"><span style="color: red; ">*</span>归属部门:</label>
  24. <div class="col-sm-8">
  25. <div class="input-group">
  26. <input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属部门" class="form-control" required>
  27. <span class="input-group-addon"><i class="fa fa-search"></i></span>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="row">
  34. <div class="col-sm-6">
  35. <div class="form-group">
  36. <label class="col-sm-4 control-label"><span style="color: red; ">*</span>手机号码:</label>
  37. <div class="col-sm-8">
  38. <input id="phonenumber" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" required>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="col-sm-6">
  43. <div class="form-group">
  44. <label class="col-sm-4 control-label"><span style="color: red; ">*</span>邮箱:</label>
  45. <div class="col-sm-8">
  46. <input id="email" name="email" class="form-control email" type="text" maxlength="50" placeholder="请输入邮箱" required>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="row">
  52. <div class="col-sm-6">
  53. <div class="form-group">
  54. <label class="col-sm-4 control-label"><span style="color: red; ">*</span>登录账号:</label>
  55. <div class="col-sm-8">
  56. <input id="loginName" name="loginName" placeholder="请输入登录账号" class="form-control" type="text" maxlength="30" required>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="col-sm-6">
  61. <div class="form-group">
  62. <label class="col-sm-4 control-label"><span style="color: red; ">*</span>登录密码:</label>
  63. <div class="col-sm-8">
  64. <input name="password" placeholder="请输入登录密码" class="form-control" type="password" th:value="${@config.getKey('sys.user.initPassword')}" required>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="row">
  70. <div class="col-sm-6">
  71. <div class="form-group">
  72. <label class="col-sm-4 control-label">用户性别:</label>
  73. <div class="col-sm-8">
  74. <select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
  75. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  76. </select>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="col-sm-6">
  81. <div class="form-group">
  82. <label class="col-sm-4 control-label">用户状态:</label>
  83. <div class="col-sm-8">
  84. <label class="toggle-switch switch-solid">
  85. <input type="checkbox" id="status" checked>
  86. <span></span>
  87. </label>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="row">
  93. <div class="col-sm-12">
  94. <div class="form-group">
  95. <label class="col-xs-2 control-label">岗位:</label>
  96. <div class="col-xs-4">
  97. <select id="post" class="form-control select2-multiple" multiple>
  98. <option th:each="post:${posts}" th:value="${post.postId}" th:text="${post.postName}" th:disabled="${post.status == '1'}"></option>
  99. </select>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="row">
  105. <div class="col-sm-12">
  106. <div class="form-group">
  107. <label class="col-xs-2 control-label">角色:</label>
  108. <div class="col-xs-10">
  109. <label th:each="role:${roles}" class="check-box">
  110. <input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:disabled="${role.status == '1'}">
  111. </label>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <h4 class="form-header h4" style="line-height: 2.1;">扩展信息
  117. <div style="float: right">
  118. <!--<button type="button" class="btn btn-sm btn-primary" onclick="editExt()"><i class="fa fa-check"></i>自定义</button>&nbsp;-->
  119. <button type="button" class="btn btn-sm btn-primary" onclick="selectExt()"><i class="fa fa-check"></i>选择扩展信息</button>&nbsp;
  120. </div>
  121. </h4>
  122. <input type="hidden" readonly="true" name="sysUserExt.isChangeExt" />
  123. <div class="row">
  124. <div class="col-sm-4">
  125. <div class="form-group">
  126. <label class="col-sm-4 control-label">用户类别:</label>
  127. <input type="hidden" name="sysUserExt.salesLevel" onchange="changeLevelText">
  128. <div class="col-sm-8">
  129. <input class="form-control" type="text" readonly="true" id="salesText" />
  130. </div>
  131. </div>
  132. </div>
  133. <div class="col-sm-4">
  134. <div class="form-group">
  135. <label class="col-sm-4 control-label">岗位名称:</label>
  136. <div class="col-sm-8">
  137. <input class="form-control" type="text" readonly="true" name="sysUserExt.postName" />
  138. </div>
  139. </div>
  140. </div>
  141. <div class="col-sm-4">
  142. <div class="form-group">
  143. <label class="col-sm-4 control-label">组织Code:</label>
  144. <div class="col-sm-8">
  145. <input class="form-control" type="text" readonly="true" name="sysUserExt.orgCode" />
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <div id="salesDiv">
  151. <div class="row">
  152. <div class="col-sm-6">
  153. <div class="form-group">
  154. <label class="col-sm-4 control-label">岗位Code:</label>
  155. <div class="col-sm-8">
  156. <input class="form-control" type="text" readonly="true" name="sysUserExt.postCode"/>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="col-sm-6">
  161. <div class="form-group">
  162. <label class="col-sm-4 control-label">组织名称:</label>
  163. <div class="col-sm-8">
  164. <input class="form-control" type="text" readonly="true" name="sysUserExt.orgName" />
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="row">
  170. <div class="col-sm-6">
  171. <div class="form-group">
  172. <label class="col-sm-4 control-label">领导名称:</label>
  173. <div class="col-sm-8">
  174. <input class="form-control" type="text" readonly="true" name="sysUserExt.bossName"/>
  175. </div>
  176. </div>
  177. </div>
  178. <div class="col-sm-6">
  179. <div class="form-group">
  180. <label class="col-sm-4 control-label">领导id:</label>
  181. <div class="col-sm-8">
  182. <input class="form-control" type="text" readonly="true" name="sysUserExt.bossEmployeeId"/>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="row" id="customerDiv">
  189. <div class="col-sm-6">
  190. <div class="form-group">
  191. <label class="col-sm-4 control-label">经销商Code:</label>
  192. <div class="col-sm-8">
  193. <input class="form-control" type="text" readonly="true" name="sysUserExt.customerCode" />
  194. </div>
  195. </div>
  196. </div>
  197. <div class="col-sm-6">
  198. <div class="form-group">
  199. <label class="col-sm-4 control-label">是否是经理:</label>
  200. <div class="col-sm-8">
  201. <input class="form-control" type="text" readonly="true" name="sysUserExt.isCustomerManager" />
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. <h4 class="form-header h4">其他信息</h4>
  207. <div class="row">
  208. <div class="col-sm-12">
  209. <div class="form-group">
  210. <label class="col-xs-2 control-label">备注:</label>
  211. <div class="col-xs-10">
  212. <textarea name="remark" maxlength="500" class="form-control" rows="3">[[*{remark}]]</textarea>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </form>
  218. </div>
  219. <div class="row">
  220. <div class="col-sm-offset-5 col-sm-10">
  221. <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
  222. <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
  223. </div>
  224. </div>
  225. <th:block th:include="include :: footer" />
  226. <th:block th:include="include :: select2-js" />
  227. <script th:inline="javascript">
  228. var prefix = ctx + "system/user";
  229. var salesLevelDict = [[${@dict.getType('sales_level')}]];//销售人员等级
  230. $("#form-user-add").validate({
  231. onkeyup: false,
  232. rules:{
  233. loginName:{
  234. minlength: 2,
  235. maxlength: 20,
  236. remote: {
  237. url: prefix + "/checkLoginNameUnique",
  238. type: "post",
  239. dataType: "json",
  240. data: {
  241. "loginName": function() {
  242. return $.common.trim($("#loginName").val());
  243. }
  244. },
  245. dataFilter: function(data, type) {
  246. return $.validate.unique(data);
  247. }
  248. }
  249. },
  250. password:{
  251. minlength: 5,
  252. maxlength: 20
  253. },
  254. email:{
  255. email:true,
  256. remote: {
  257. url: prefix + "/checkEmailUnique",
  258. type: "post",
  259. dataType: "json",
  260. data: {
  261. "email": function () {
  262. return $.common.trim($("#email").val());
  263. }
  264. },
  265. dataFilter: function (data, type) {
  266. return $.validate.unique(data);
  267. }
  268. }
  269. },
  270. phonenumber:{
  271. isPhone:true,
  272. remote: {
  273. url: prefix + "/checkPhoneUnique",
  274. type: "post",
  275. dataType: "json",
  276. data: {
  277. "phonenumber": function () {
  278. return $.common.trim($("#phonenumber").val());
  279. }
  280. },
  281. dataFilter: function (data, type) {
  282. return $.validate.unique(data);
  283. }
  284. }
  285. },
  286. },
  287. messages: {
  288. "loginName": {
  289. remote: "用户已经存在"
  290. },
  291. "email": {
  292. remote: "Email已经存在"
  293. },
  294. "phonenumber":{
  295. remote: "手机号码已经存在"
  296. }
  297. },
  298. focusCleanup: true
  299. });
  300. function submitHandler() {
  301. if ($.validate.form()) {
  302. var data = $("#form-user-add").serializeArray();
  303. var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
  304. var roleIds = $.form.selectCheckeds("role");
  305. var postIds = $.form.selectSelects("post");
  306. data.push({"name": "status", "value": status});
  307. data.push({"name": "roleIds", "value": roleIds});
  308. data.push({"name": "postIds", "value": postIds});
  309. $.operate.saveTab(prefix + "/add", data);
  310. }
  311. }
  312. /*用户管理-新增-选择部门树*/
  313. function selectDeptTree() {
  314. var treeId = $("#treeId").val();
  315. var deptId = $.common.isEmpty(treeId) ? "1" : $("#treeId").val();
  316. var url = ctx + "system/dept/selectDeptTree/" + deptId;
  317. var options = {
  318. title: '选择部门',
  319. width: "380",
  320. url: url,
  321. callBack: doSubmit
  322. };
  323. $.modal.openOptions(options);
  324. }
  325. function doSubmit(index, layero){
  326. var tree = layero.find("iframe")[0].contentWindow.$._tree;
  327. if ($.tree.notAllowParents(tree)) {
  328. var body = layer.getChildFrame('body', index);
  329. $("#treeId").val(body.find('#treeId').val());
  330. $("#treeName").val(body.find('#treeName').val());
  331. layer.close(index);
  332. }
  333. }function changeLevel(){
  334. var level = $("input[name='sysUserExt.salesLevel']").val();
  335. if(level=="customer_level"){
  336. $("#customerDiv").show();
  337. $("#salesDiv").hide();
  338. }else if(level=="diy_level"){
  339. $("#customerDiv").show();
  340. $("#salesDiv").show();
  341. }else{
  342. $("#customerDiv").hide();
  343. $("#salesDiv").show();
  344. }
  345. }
  346. /*用户管理-修改-选择其他用户扩展信息*/
  347. function selectExt() {
  348. var url = ctx + "system/user/selectUser/";
  349. var options = {
  350. title: '选择部门',
  351. url: url,
  352. callBack: doExtSubmit
  353. };
  354. $.modal.openOptions(options);
  355. }
  356. function doExtSubmit(index, layero){
  357. var body = layer.getChildFrame('body', index);
  358. var userId = body.find('#selectUserId').val();
  359. if(userId==null||userId==""){
  360. alert("请选择一个用户!");
  361. return;
  362. }
  363. $.ajax({
  364. url: ctx + "/system/user/getExt/"+userId,
  365. type: "GET",
  366. success: function(result) {
  367. if(result.code==0){
  368. $("input[name='sysUserExt.salesLevel']").val(result.data.salesLevel);
  369. changeLevelText();
  370. changeLevel();
  371. $("input[name='sysUserExt.postName']").val(result.data.postName);
  372. $("input[name='sysUserExt.orgCode']").val(result.data.orgCode);
  373. $("input[name='sysUserExt.postCode']").val(result.data.postCode);
  374. $("input[name='sysUserExt.orgName']").val(result.data.orgName);
  375. $("input[name='sysUserExt.bossName']").val(result.data.bossName);
  376. $("input[name='sysUserExt.bossEmployeeId']").val(result.data.bossEmployeeId);
  377. $("input[name='sysUserExt.customerCode']").val(result.data.customerCode);
  378. $("input[name='sysUserExt.isCustomerManager']").val(result.data.isCustomerManager);
  379. }else{
  380. $.modal.alertWarning(result.msg);
  381. }
  382. }
  383. })
  384. layer.close(index);
  385. }
  386. function changeLevelText(){
  387. var v = $("input[name='sysUserExt.salesLevel']").val();
  388. console.log(salesLevelDict);
  389. for(var i =0;i<salesLevelDict.length;i++){
  390. if(salesLevelDict[i].dictValue==v){
  391. $("#salesText").val(salesLevelDict[i].dictLabel);
  392. break;
  393. }
  394. }
  395. }
  396. $(function() {
  397. $('#post').select2({
  398. placeholder:"请选择岗位",
  399. allowClear: true
  400. });
  401. })
  402. </script>
  403. </body>
  404. </html>