index.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>帐号管理</title>
  8. <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
  10. <link rel="stylesheet" href="../../../assets/module/zTree/css/metroStyle/metroStyle.css"/>
  11. <link rel="stylesheet" href="../../../assets/module/formSelects/formSelects-v4.css"/>
  12. <body>
  13. <!-- 页面加载loading -->
  14. <div class="page-loading">
  15. <div class="ball-loader">
  16. <span></span><span></span><span></span><span></span>
  17. </div>
  18. </div>
  19. <!-- 正文开始 -->
  20. <div class="layui-fluid">
  21. <div class="layui-row layui-col-space15">
  22. <!-- 左栏 -->
  23. <div class="layui-col-sm12 layui-col-md1 layui-col-lg2">
  24. <div class="layui-card">
  25. <div class="layui-card-body mini-bar zTree" id="treeTbTree">
  26. <ul id="groupTree" class="ztree"></ul>
  27. <input type="hidden" id="curGroupId" value=""/>
  28. </div>
  29. </div>
  30. </div>
  31. <!-- 右栏 -->
  32. <div class="layui-col-sm12 layui-col-md11 layui-col-lg10">
  33. <div class="layui-card">
  34. <div class="layui-card-body">
  35. <div class="layui-form toolbar">
  36. <div class="layui-form-item text-right">
  37. <div class="layui-inline pull-left" style="margin-top:10px;">
  38. <span><i class="layui-icon layui-icon-group"></i>
  39. </span><span id="curGroupName"></span>
  40. </div>
  41. <div class="layui-inline">
  42. <label class="layui-form-label w-auto">搜索:</label>
  43. <div class="layui-input-inline mr0">
  44. <input name="keyword" class="layui-input" type="text" placeholder="输入关键字"/>
  45. </div>
  46. </div>
  47. <div class="layui-inline">
  48. <button class="layui-btn icon-btn" lay-filter="formSubSearchRole" lay-submit>
  49. <i class="layui-icon">&#xe615;</i>搜索
  50. </button>
  51. </div>
  52. <div class="layui-inline">
  53. <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
  54. </div>
  55. </div>
  56. </div>
  57. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- 状态列 -->
  64. <script type="text/html" id="accountStatusTpl">
  65. <input type="checkbox" lay-filter="accountStatus" value="{{d.accountStatus}}" accountId="{{d.aId}}" lay-skin="switch"
  66. lay-text="正常|锁定" {{d.accountStatus==0?'checked':''}}/>
  67. </script>
  68. <script type="text/html" id="grantGroupTpl">
  69. {{# if(d.grantGroupId > 0){ }}
  70. <a class="layui-table-link" lay-event="editGrantGroup"><i class="layui-icon layui-icon-friends"></i>{{d.grantGroupName}}</a>
  71. {{# }else{ }}
  72. <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="addGrantGroup"><i class="layui-icon layui-icon-add-1"></i>部门</a>
  73. {{# } }}
  74. </script>
  75. <!-- 表格操作列 -->
  76. <script type="text/html" id="optionTpl">
  77. <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
  78. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  79. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetPwd">重置密码</a>
  80. </script>
  81. <!-- 表单弹窗 -->
  82. <script type="text/html" id="modelTpl">
  83. <form id="modelForm" lay-filter="modelForm" class="layui-form model-form">
  84. <div class="layui-form-item">
  85. <label class="layui-form-label">所属部门</label>
  86. <div class="layui-input-block">
  87. <input type="hidden" class="layui-input" id="groupId" name="groupId" value="" lay-verify="required"/>
  88. <input type="text" class="layui-input layui-disabled" id="groupName" name="groupName" value="" disabled/>
  89. </div>
  90. </div>
  91. <div class="layui-form-item">
  92. <label class="layui-form-label">帐号名称</label>
  93. <div class="layui-input-block">
  94. <input type="hidden" class="layui-input" id="accountId" name="accountId" value=""/>
  95. <input type="hidden" class="layui-input" id="oldAccountName" name="oldAccountName" value=""/>
  96. <input type="text" class="layui-input" id="accountName" name="accountName" value=""
  97. autocomplete="off" lay-verify="accountName|required" maxlength="128"/>
  98. </div>
  99. </div>
  100. <div class="layui-form-item pwd">
  101. <label class="layui-form-label">密码</label>
  102. <div class="layui-input-block">
  103. <input type="password" class="layui-input" id="password" name="password"
  104. placeholder="输入密码" value="" maxlength="32"/>
  105. </div>
  106. </div>
  107. <div class="layui-form-item">
  108. <label class="layui-form-label">姓名</label>
  109. <div class="layui-input-block">
  110. <input type="text" class="layui-input" id="accountRealName" name="accountRealName"
  111. placeholder="输入姓名" value="" autocomplete="off" lay-verify="required" maxlength="64"/>
  112. </div>
  113. </div>
  114. <div class="layui-form-item">
  115. <label class="layui-form-label">性别</label>
  116. <div class="layui-input-block">
  117. <input type="radio" name="accountSex" value="1" title="男">
  118. <input type="radio" name="accountSex" value="2" title="女">
  119. </div>
  120. </div>
  121. <div class="layui-form-item">
  122. <label class="layui-form-label">手机号码</label>
  123. <div class="layui-input-block">
  124. <input type="hidden" class="layui-input" id="oldAccountTel" name="oldAccountTel" placeholder="手机号码"/>
  125. <input type="text" class="layui-input" id="accountTel" name="accountTel" placeholder="手机号码"
  126. autocomplete="off" lay-verify="phone" maxlength="11"/>
  127. </div>
  128. </div>
  129. <div class="layui-form-item">
  130. <label class="layui-form-label">岗位</label>
  131. <div class="layui-input-block">
  132. <select id="positionId" name="positionId" xm-select="positionId" xm-select-radio></select>
  133. <input type="hidden" id="gmpId" name="gmpId" value=""/>
  134. </div>
  135. </div>
  136. <div class="layui-form-item">
  137. <label class="layui-form-label">身份证号</label>
  138. <div class="layui-input-block">
  139. <input type="text" class="layui-input" id="accountIdCard" name="accountIdCard" placeholder="身份证号"
  140. autocomplete="off" maxlength="18"/>
  141. </div>
  142. </div>
  143. <div class="layui-form-item">
  144. <label class="layui-form-label">职称</label>
  145. <div class="layui-input-block">
  146. <input type="text" class="layui-input" id="accountRank" name="accountRank" placeholder="职称"
  147. autocomplete="off" maxlength="64"/>
  148. </div>
  149. </div>
  150. <div class="layui-form-item">
  151. <label class="layui-form-label">工种</label>
  152. <div class="layui-input-block">
  153. <input type="text" class="layui-input" id="accountWorkType" name="accountWorkType" placeholder="工种"
  154. autocomplete="off" maxlength="64"/>
  155. </div>
  156. </div>
  157. <div class="layui-form-item text-right">
  158. <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
  159. <button class="layui-btn" lay-filter="modelSubmit" lay-submit>保存</button>
  160. </div>
  161. </form>
  162. </script>
  163. <script type="text/html" id="resetPwdModelTpl">
  164. <form id="resetPwdModelForm" lay-filter="resetPwdModelForm" class="layui-form model-form">
  165. <div class="layui-form-item">
  166. <label class="layui-form-label">新密码</label>
  167. <div class="layui-input-block">
  168. <input type="hidden" name="aId" value=""/>
  169. <input type="password" class="layui-input" id="newPassword" name="newPassword" value=""
  170. lay-verify="pwd|required" maxlength="32"/>
  171. </div>
  172. </div>
  173. <div class="layui-form-item">
  174. <label class="layui-form-label">再输一遍</label>
  175. <div class="layui-input-block">
  176. <input type="password" class="layui-input" id="rePassword" name="rePassword" value=""
  177. lay-verify="pwd|required" maxlength="32"/>
  178. </div>
  179. </div>
  180. <div class="layui-form-item text-right">
  181. <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
  182. <button class="layui-btn" lay-filter="resetPwdModelSubmit" lay-submit>保存</button>
  183. </div>
  184. </form>
  185. </script>
  186. <!-- js部分 -->
  187. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  188. <script type="text/javascript" src="../../../assets/js/common.js?v=313"></script>
  189. <script>
  190. layui.use(['iconPicker', 'layer', 'element', 'form', 'table', 'admin', 'uParas', 'util', 'zTree', 'formSelects'], function () {
  191. var $ = layui.jquery;
  192. var layer = layui.layer;
  193. var form = layui.form;
  194. var table = layui.table;
  195. var admin = layui.admin;
  196. var uParas = layui.uParas;
  197. form.verify({
  198. accountName: function (value, item) {
  199. var checkValue = value.trim();
  200. //用户名正则,4到16位(字母,数字,下划线,减号)
  201. if (!(/^[[a-zA-Z0-9_]{2,16}$/.test(checkValue))) {
  202. return "请输入正确的用户名";
  203. }
  204. var oldAccountName = $("#oldAccountName").val();
  205. if (((oldAccountName != "") && (oldAccountName != checkValue))
  206. || ((oldAccountName == "") && (checkValue != ""))) {
  207. //初始化群组树
  208. var url1 = uParas.baseUrl + '/ent/groupAccount/checkAccountNameExist/' + checkValue;
  209. admin.req(url1, {}, function (resp) {
  210. if (resp.code == 1) {
  211. return "用户名已存在!";
  212. }
  213. }, 'GET');
  214. }
  215. },
  216. accountTel: function (value, item) {
  217. var checkValue = value.trim();
  218. if (!(/^1\d{10}$/.test(value))) {
  219. return "请输入正确的手机号码";
  220. }
  221. var oldAccountTel = $("#accountTel").val();
  222. if (((oldAccountTel != "") && (oldAccountTel != checkValue))
  223. || ((oldAccountTel == "") && (checkValue != ""))) {
  224. //初始化群组树
  225. var url1 = uParas.baseUrl + '/org/groupAccount/checkAccountTelExist/' + checkValue;
  226. admin.req(url1, {}, function (resp) {
  227. if (resp.code == 1) {
  228. return "手机号已存在,请更换手机号!";
  229. }
  230. }, 'GET');
  231. }
  232. },
  233. phone: [/^1\d{10}$/, '手机必须11位,只能是数字!'],
  234. email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对'],
  235. pwd: function () {
  236. var newPwd = $('#newPassword').val();
  237. var rePwd = $('#rePassword').val();
  238. ;
  239. if (newPwd != rePwd) {
  240. return "两次输入不一致!";
  241. }
  242. }
  243. });
  244. //左树设置
  245. var leftgroupTreeSetting = {
  246. data: {
  247. simpleData: {
  248. enable: true,
  249. idKey: "gId",
  250. pIdKey: "groupParent",
  251. rootPId: 0,
  252. },
  253. key: {
  254. name: "groupName",
  255. title: "groupName",
  256. }
  257. },
  258. callback: {
  259. onClick: leftNodeClick,
  260. }
  261. };
  262. function leftNodeClick(e, treeId, treeNode) {
  263. var groupId = treeNode.gId;
  264. var groupName = treeNode.groupName;
  265. $("#curGroupId").val(groupId);
  266. $("#curGroupName").html(groupName);
  267. refreshTable();
  268. }
  269. function refreshTable() {
  270. var groupId = $("#curGroupId").val();
  271. insTb.reload({where: {
  272. gId:groupId,
  273. }}, 'data');
  274. }
  275. //初始化群组树
  276. var url1 = uParas.baseUrl + '/org/groupAccount/getGroupTreeList';
  277. admin.req(url1, {}, function (resp) {
  278. if (resp.code == 1) {
  279. var zNodes = resp.data;
  280. $.fn.zTree.init($('#groupTree'), leftgroupTreeSetting, zNodes);
  281. selectNode();
  282. layer.closeAll('loading');
  283. } else {
  284. layer.msg(resp.msg);
  285. }
  286. }, 'GET');
  287. //选择节点
  288. function selectNode() {
  289. var treeObj = $.fn.zTree.getZTreeObj("groupTree");
  290. var nodes = treeObj.getNodes();
  291. if (nodes.length > 0) {
  292. var node = nodes[0];
  293. treeObj.selectNode(node);
  294. treeObj.expandNode(node, true, false, false);
  295. var groupId = node.gId;
  296. var groupName = node.groupName;
  297. $("#curGroupId").val(groupId);
  298. $("#curGroupName").html(groupName);
  299. initDataTable();
  300. }
  301. }
  302. var insTb = null;
  303. function initDataTable() {
  304. console.log($("#curGroupId").val())
  305. // 渲染表格
  306. if (!insTb && typeof (insTb) != "undefined" && insTb != 0) {
  307. insTb = table.render({
  308. elem: '#datatable',
  309. url: uParas.baseUrl + '/org/groupAccount/queryAccount',
  310. where: {
  311. gId: $("#curGroupId").val(),
  312. },
  313. page: true,
  314. cellMinWidth: 100,
  315. cols: [[
  316. {type: 'numbers', align: 'center', title: '#', width: 60},
  317. {field: 'accountName', align: 'center', sort: false, title: '名称', width: 150},
  318. {field: 'accountRealName', align: 'center', sort: false, title: '姓名', width: 150},
  319. {field: 'accountTel', align: 'center', sort: false, title: '联系方式', width: 150},
  320. {field: 'groupName', align: 'left', sort: false, title: '所在部门'},
  321. {field: 'positionTitle', align: 'center', sort: false, title: '岗位', width: 150},
  322. {
  323. field: 'accountStatus',
  324. align: 'center',
  325. sort: false,
  326. title: '状态',
  327. templet: '#accountStatusTpl',
  328. width: 120,
  329. unresize: true
  330. },
  331. /*{field: 'grantGroupName', align: 'center', sort: false, title: '授权部门', templet: '#grantGroupTpl'},*/
  332. {align: 'center', toolbar: '#optionTpl', title: '操作', width: 200},
  333. ]]
  334. });
  335. }
  336. }
  337. // 添加按钮点击事件
  338. $('#btnAdd').click(function () {
  339. var curGroupId = $("#curGroupId").val();
  340. showAddModel(curGroupId);
  341. });
  342. // 搜索
  343. form.on('submit(formSubSearchRole)', function (data) {
  344. insTb.reload({where: data.field}, 'data');
  345. });
  346. //监听帐号状态操作
  347. form.on('switch(accountStatus)', function (obj) {
  348. console.log(obj);
  349. var accountId = obj.elem.attributes['accountId'].nodeValue;
  350. var accountStatus = obj.elem.checked ? 0 : 1;
  351. layer.load();
  352. var url = uParas.baseUrl + '/org/groupAccount/updateAccountStatus/' + accountId + "/" + accountStatus;
  353. admin.req(url, {}, function (resp) {
  354. layer.closeAll('loading');
  355. if (resp.code == 1) {
  356. layer.msg(resp.msg);
  357. } else {
  358. layer.msg(resp.msg);
  359. insTb.reload({}, 'data');
  360. }
  361. }, 'POST');
  362. });
  363. // 工具条点击事件
  364. table.on('tool(datatable)', function (obj) {
  365. var data = obj.data;
  366. var layEvent = obj.event;
  367. if (layEvent == 'edit') { // 修改
  368. showEditModel(data);
  369. } else if (layEvent == 'del') { // 删除
  370. doDel(obj);
  371. } else if (layEvent == 'resetPwd') {
  372. resetPwd(data);
  373. } else if (layEvent == 'addGrantGroup') {
  374. addGrantGroup(data);
  375. } else if (layEvent == 'editGrantGroup') {
  376. editGrantGroup(data);
  377. }
  378. });
  379. function reLoadData() {
  380. insTb.reload({}, 'data');
  381. }
  382. function addGrantGroup(data) {
  383. admin.open({
  384. type: 2,
  385. title: '授权部门',
  386. content: "./grantGroup.html?gmpId=" + data.gmpId,
  387. area: ['600px', '500px'],
  388. success: function (layero, dIndex) {
  389. layer.setTop(layero);
  390. },
  391. end: function () {
  392. reLoadData();
  393. }
  394. });
  395. }
  396. function editGrantGroup(data) {
  397. admin.open({
  398. type: 2,
  399. title: '授权部门',
  400. content: "./grantGroup.html?gmpId=" + data.gmpId,
  401. area: ['600px', '500px'],
  402. success: function (layero, dIndex) {
  403. layer.setTop(layero);
  404. },
  405. end: function () {
  406. reLoadData();
  407. }
  408. });
  409. }
  410. // 显示新增弹窗
  411. function showAddModel(data) {
  412. var curGroupId = $("#curGroupId").val();
  413. var curGroupName = $("#curGroupName").html();
  414. admin.open({
  415. type: 1,
  416. title: '添加帐号',
  417. content: $('#modelTpl').html(),
  418. success: function (layero, dIndex) {
  419. uParas.initSimpleSelect("positionId", 'modelForm', "/ent/position/getList", "positionTitle", "pId");
  420. form.val('modelForm', {
  421. 'groupId': curGroupId,
  422. 'groupName': curGroupName,
  423. 'accountSex': '1',
  424. });
  425. var url = uParas.baseUrl + '/org/groupAccount/saveAccountGroupPosition';
  426. // 保存处理
  427. form.on('submit(modelSubmit)', function (data) {
  428. layer.load();
  429. admin.req(url, data.field, function (resp) {
  430. layer.closeAll('loading');
  431. if (resp.code == 1) {
  432. layer.close(dIndex);
  433. layer.msg(resp.msg);
  434. insTb.reload({}, 'data');
  435. } else {
  436. layer.msg(resp.msg);
  437. }
  438. }, 'POST');
  439. return false;
  440. });
  441. }
  442. });
  443. }
  444. // 显示表单弹窗
  445. function showEditModel(data) {
  446. admin.open({
  447. type: 1,
  448. title: '编辑帐号',
  449. content: $('#modelTpl').html(),
  450. success: function (layero, dIndex) {
  451. var index = layer.load('loading');
  452. $(".pwd").hide();
  453. var url1 = uParas.baseUrl + "/org/groupAccount/getAccount/" + data.gmId;
  454. admin.req(url1, {}, function (resp) {
  455. if (resp.code == 1) {
  456. form.val('modelForm', {
  457. 'groupId': resp.data.gId,
  458. 'groupName': resp.data.groupName,
  459. 'accountId': resp.data.aId,
  460. 'accountName': resp.data.accountName,
  461. 'password': resp.data.password,
  462. 'accountSex': "" + resp.data.accountSex + "",
  463. 'oldAccountName': resp.data.accountName,
  464. 'accountRealName': resp.data.accountRealName,
  465. 'accountTel': resp.data.accountTel,
  466. 'oldAccountTel': resp.data.accountTel,
  467. 'accountRank': resp.data.accountRank,
  468. 'accountIdCard': resp.data.accountIdCard,
  469. 'accountWorkType': resp.data.accountWorkType,
  470. }); // 回显数据
  471. uParas.initSimpleSelect("positionId", 'modelForm', "/ent/position/getList", "positionTitle", "pId", resp.data.positionId);
  472. layer.close(index);
  473. } else {
  474. layer.msg(resp.msg)
  475. }
  476. }, 'GET');
  477. var url = uParas.baseUrl + '/org/groupAccount/updateAccountGroupPosition';
  478. // 表单提交事件
  479. form.on('submit(modelSubmit)', function (dataF) {
  480. layer.load();
  481. dataF.field.gmId = data.gmId;
  482. dataF.field.gmpId = data.gmpId;
  483. dataF.field.aId = dataF.field.accountId;
  484. admin.req(url, dataF.field, function (resp) {
  485. layer.closeAll('loading');
  486. if (resp.code == 1) {
  487. layer.close(dIndex);
  488. layer.msg(resp.msg);
  489. insTb.reload({}, 'data');
  490. } else {
  491. layer.msg(resp.msg);
  492. }
  493. }, 'POST');
  494. return false;
  495. });
  496. }
  497. });
  498. }
  499. // 删除
  500. function doDel(obj) {
  501. layer.confirm('确定要删除“' + obj.data.accountRealName + '”吗?', {
  502. skin: 'layui-layer-admin',
  503. shade: .1
  504. }
  505. , function (i) {
  506. layer.close(i);
  507. layer.load();
  508. var url = uParas.baseUrl + '/org/groupAccount/deleteAccountGroupPosition/' + obj.data.aId;
  509. admin.req(url, {}, function (resp) {
  510. layer.closeAll('loading');
  511. if (resp.code == 1) {
  512. layer.msg(resp.msg);
  513. obj.del();
  514. } else {
  515. layer.msg(resp.msg);
  516. }
  517. }, 'GET');
  518. });
  519. }
  520. //重置密码
  521. function resetPwd(data) {
  522. admin.open({
  523. type: 1,
  524. title: '重置密码',
  525. content: $('#resetPwdModelTpl').html(),
  526. success: function (layero, dIndex) {
  527. form.val('resetPwdModelForm', {
  528. 'aId': data.aId,
  529. }); // 回显数据
  530. var url = uParas.baseUrl + '/org/groupAccount/resetPassword';
  531. // 表单提交事件
  532. form.on('submit(resetPwdModelSubmit)', function (data) {
  533. layer.load();
  534. data.field.password = data.field.newPassword;
  535. admin.req(url, data.field, function (resp) {
  536. layer.closeAll('loading');
  537. if (resp.code == 1) {
  538. layer.close(dIndex);
  539. layer.msg(resp.msg);
  540. } else {
  541. layer.msg(resp.msg);
  542. }
  543. }, 'POST');
  544. return false;
  545. });
  546. }
  547. });
  548. }
  549. });
  550. </script>
  551. </body>
  552. </html>