userManage.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>操作员管理</title>
  6. <script src="../../js/min-loader-next.js"></script>
  7. </head>
  8. <body class="content">
  9. <div class="order-body">
  10. <div class="order-tiaojian back-gray">
  11. <div class="tiaojian-part1" id = "conditions">
  12. <div class="fl f12-gray4-op mt4">所选条件:</div>
  13. </div>
  14. <div class="tiaojian-part2 fr demoTable">
  15. <button class="layui-btn order-bnt1" data-type="reload" >搜索</button>
  16. <button class="layui-btn order-bnt2" data-type="reset">重置</button>
  17. <button class="layui-btn order-bnt2" id = "addUser">添加</button>
  18. <a href="#" id="toggle" class="top">收起</a>
  19. </div>
  20. </div>
  21. <form class="layui-form" action="javascript:void(0)" id = "formName">
  22. <div class="order-select back-border" id="content">
  23. <div class="layui-inline">
  24. <label class="f12-gray4">登录名:</label>
  25. <input onchange = "changeSelectCon(0,this,'inp')" class="search-select" type="tel" name="logonname" id ="logonname" value="" placeholder="请输入登录名" />
  26. </div>
  27. <div class="layui-inline">
  28. <label class="f12-gray4">日期:</label>
  29. <input class="search-select" type="text" id="dates" placeholder="日期(区间)" readonly />
  30. </div>
  31. <div class="layui-inline">
  32. <label class="f12-gray4">状态:</label>
  33. <div class="" style="display:inline-block" id = 'state'></div>
  34. </div>
  35. <div class="d-dashed" style="margin: 10px 0;"></div>
  36. <div class="layui-inline">
  37. <label class="f12-gray4">姓名:</label>
  38. <input onchange = "changeSelectCon(3,this,'inp')" class="search-select" type="tel" name="name" id ="name" value="" placeholder="请输入姓名" />
  39. </div>
  40. <div class="layui-inline">
  41. <label class="f12-gray4">角色:</label>
  42. <div class="" style="display:inline-block" id = 'seleRoleid'></div>
  43. </div>
  44. </div>
  45. </form>
  46. </div>
  47. <div class="shadow-content" style="margin:1.5rem;">
  48. <table id="userManage" lay-filter="tableFilter"></table>
  49. </div>
  50. <!--操作功能-->
  51. <script type="text/html" id="barDemo">
  52. <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  53. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  54. {{# if(d.stt == '0'){ }}
  55. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">冻结</a>
  56. {{# }; }}
  57. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="esetLogin">重置登录密码</a>
  58. {{# if(d.stt != '0'){ }}
  59. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable">解冻</a>
  60. {{# }; }}
  61. </script>
  62. <script>
  63. $("#toggle").click(function() {
  64. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  65. "<i class='iconfont up iconSelect_drop-down'/></i>");
  66. $("#content").slideToggle();
  67. });
  68. layui.use(['table','laydate','form'], function(){
  69. var laydate = layui.laydate;
  70. //日期范围
  71. laydate.render({
  72. elem: '#dates'
  73. ,range: true
  74. ,format:'yyyyMMdd'
  75. ,done: function(value, date, endDate){
  76. changeSelectCon(1,"dates",'date',value)
  77. }
  78. });
  79. form = layui.form;
  80. initSelect('state', "IM_USER_STATE", "state", ' ', true);
  81. form.on('select(state)', function(data){
  82. changeSelectCon(2, data.elem, "sel","state");
  83. });
  84. $.request({
  85. action : '../../RoleManageAction/roleQueryByBranchId',
  86. data : { },
  87. success : function(data) {
  88. var selectName ="roleid";
  89. var html = '<select name="';
  90. html = html + selectName;
  91. html = html + '" lay-filter="';
  92. html = html + selectName;
  93. html = html + '"';
  94. html = html + '><option value="">全部</option>';
  95. $.each(data.MINQueryResult, function(i, j) {
  96. html = html + '<option ';
  97. html = html + 'value="';
  98. html = html + j.id + '">';
  99. html = html + j.name+ '</option>';
  100. })
  101. html = html + '</select>';
  102. $("#seleRoleid").html(html);
  103. form.render();
  104. }
  105. });
  106. form.on('select(roleid)', function(data){
  107. changeSelectCon(4, data.elem, "sel","roleid");
  108. });
  109. form.render();
  110. })
  111. /* layui.use('form', function(){
  112. var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  113. }) */
  114. var table;
  115. layui.use('table', function(){
  116. table = layui.table;
  117. table.render({
  118. //tbname:'userManage',
  119. id : 'userManage'
  120. ,elem: '#userManage'
  121. ,limit:10
  122. ,url: 'UserManageAction/userQuery' //数据接口
  123. ,method: 'post'
  124. ,where:{MINView:"JSON", token: 'sasasas'}
  125. ,page: true //开启分页
  126. ,cols: [[ //表头
  127. {type:'numbers',title: '序号',width:'5%'}
  128. ,{field: 'id', title: '编号', width:'10%', sort: true}
  129. ,{field: 'logonname', title: '登录名', width:'12%'}
  130. ,{field: 'name', title: '姓名', width:'12%'}
  131. ,{field: 'rolename', title: '角色', width:'15%'}
  132. ,{field: 'createdate', title: '创建日期',width:'15%'}
  133. ,{field: 'lastlogon', title: '最后登录日期',width:'15%'}
  134. ,{field: 'sttdesc', title: '状态',width:'8%'}
  135. ,{field: 'operate', title: '操作', width: '25%', toolbar: '#barDemo',fixed: 'right'}
  136. ]]
  137. ,done: function(res, curr, count){
  138. //如果是异步请求数据方式,res即为你接口返回的信息。
  139. console.log(res);
  140. //得到当前页码
  141. console.log(curr);
  142. //得到数据总量
  143. console.log(count);
  144. }
  145. ,even: true //开启隔行背景
  146. });
  147. // 监听工具条(操作)
  148. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  149. var data = obj.data; //获得当前行数据
  150. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  151. var tr = obj.tr; //获得当前行 tr 的DOM对象
  152. var id = data.id;
  153. if(layEvent == 'detail'){ //查看
  154. showDetail(data);
  155. } else if(layEvent == 'del'){ //删除
  156. layer.confirm('真的要注销吗', function(index){
  157. $.request({
  158. action : '../../UserManageAction/userDelete',
  159. data : {
  160. id : id //用户名
  161. },
  162. success : function(data) {
  163. //成功后刷新
  164. var btn=$(".layui-laypage-btn")[0];
  165. btn.click();
  166. layer.alert('操作成功!', {
  167. icon: 6,
  168. title: "提示"
  169. });
  170. },
  171. error : function(data) {
  172. layer.alert('操作失败!', {
  173. icon: 5,
  174. title: "提示"
  175. });
  176. }
  177. });
  178. });
  179. } else if(layEvent == 'edit'){ //编辑
  180. editDetail(data);
  181. } else if(layEvent == 'esetLogin'){//重置登陆密码
  182. layer.confirm('确定要重置密码吗?', function(index){
  183. $.request({
  184. action : '../../UserManageAction/resetLoginPassword',
  185. data : {
  186. id : id //用户名
  187. },
  188. success : function(data) {
  189. layer.alert('操作成功!', {
  190. icon: 6,
  191. title: "提示"
  192. });
  193. },
  194. error : function(data) {
  195. layer.alert('操作失败!', {
  196. icon: 5,
  197. title: "提示"
  198. });
  199. }
  200. });
  201. });
  202. }else if(layEvent =='enable'){
  203. layer.confirm('确定要解冻吗?', function(index){
  204. $.request({
  205. action : '../../UserManageAction/userThaw',
  206. data : {
  207. id : id,
  208. state : '0'
  209. },
  210. success : function(data) {
  211. //成功后刷新
  212. $(".layui-laypage-btn")[0].click();
  213. layer.alert('操作成功!', {
  214. icon: 6,
  215. title: "提示"
  216. });
  217. },
  218. error : function(data) {
  219. layer.alert(data.MINErrorMessage, {
  220. icon: 5,
  221. title: "提示"
  222. });
  223. }
  224. });
  225. });
  226. }
  227. });
  228. var $ = layui.$, active = {
  229. reload: function(){
  230. reLoadFun();
  231. }
  232. ,reset: function(){
  233. $('#formName')[0].reset();
  234. $("#conditions").html('<div class="fl f12-gray4-op mt4">所选条件:</div>');
  235. }
  236. };
  237. $('.layui-btn').on('click', function(){
  238. var type = $(this).data('type');
  239. active[type] ? active[type].call(this) : '';
  240. });
  241. });
  242. function reLoadFun() {
  243. var name = $('#name').val();
  244. var logonname = $('#logonname').val();
  245. var state = $("select[name='state']").val();
  246. var roleid = $("select[name='roleid']").val();
  247. var dates = $("#dates").val();
  248. //执行重载
  249. table.reload('userManage', {
  250. page: {
  251. curr: 1 //重新从第 1 页开始
  252. }
  253. ,where: {
  254. name : name,
  255. logonname : logonname,
  256. roleid : roleid,
  257. stt : state,
  258. dates :dates
  259. }
  260. });
  261. }
  262. function showDetail(data) {
  263. var params = {};
  264. params.columnNumber = 2; //每行显示两个字段
  265. // 要显示的数据
  266. params.fields = [
  267. {field: 'id', title: 'ID'}
  268. ,{field: 'logonname', title: '登录名'}
  269. ,{field: 'name', title: '姓名'}
  270. ,{field: 'rolename', title: '角色'}
  271. ,{field: 'phone', title: '手机号'}
  272. ,{field: 'createdate', title: '创建日期'}
  273. ,{field: 'lastlogon', title: '最后登录日期'}
  274. ,{field: 'sttdesc', title: '状态'}
  275. ];
  276. // 寄存当前数据
  277. setNowRowData(data, params);
  278. layer.open({
  279. type: 2,
  280. title: '用户详情',
  281. shadeClose: true,
  282. shade: 0.8,
  283. //maxmin: true, //开启最大化最小化按钮
  284. area: ['800px', '500px'],
  285. content: '../../web/showDetail.html'
  286. });
  287. }
  288. //添加操作员
  289. $(document).on('click','#addUser',function(){
  290. openMainTabPage('315002-01', ' 增加操作员', 'userManage/addUser.html', '', '315002', reLoadFun);
  291. });
  292. //编辑
  293. function editDetail(data) {
  294. // 寄存当前数据
  295. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  296. openMainTabPage('315002-02', ' 编辑操作员', 'userManage/editUser.html', '', '315002', reLoadFun);
  297. }
  298. function changeSelectCon(index, t, type, dateValue){
  299. if (type == "date") {
  300. if (isEmpty(dateValue)) {
  301. $("#search" + index).remove();
  302. } else {
  303. $("#search" + index).remove();
  304. if (isEmpty($("#search" + index).attr("name"))) {
  305. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  306. }
  307. }
  308. } else if (type == 'inp') {
  309. if (isEmpty($(t).val())) {
  310. $("#search" + index).remove();
  311. } else {
  312. $("#search" + index).remove();
  313. if (isEmpty($("#search" + index).attr("name"))) {
  314. $("#conditions").append(getSelectConHtml(index, t, type));
  315. }
  316. }
  317. } else {
  318. if (isEmpty($(t).val())) {
  319. $("#search" + index).remove();
  320. } else {
  321. $("#search" + index).remove();
  322. if (isEmpty($("#search" + index).attr("name"))) {
  323. $(t).attr("id",dateValue);
  324. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  325. }
  326. }
  327. }
  328. }
  329. var array = new Array('登录名','日期','状态','姓名','角色');
  330. function getSelectConHtml(index, t, type,dateValue){
  331. var name;
  332. var value;
  333. if(type == "inp"){
  334. value = t.value.substr(0,5)+"..";
  335. }
  336. if (type == "date") {
  337. value = dateValue;
  338. }
  339. if(type == "sel" && dateValue =="state"){
  340. value = $("#state").find("option:selected").text();
  341. }
  342. if(type == "sel" && dateValue =="roleid"){
  343. value = $("#roleid").find("option:selected").text();
  344. }
  345. if (type == "date") {
  346. name = $("#"+t).attr("id");
  347. } else {
  348. name = $(t).attr("id");
  349. }
  350. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  351. '<div class="fl">' + array[index] + '</div>' +
  352. ':<i class="iconfont">'+value+'</i>' +
  353. '<svg class="icon" aria-hidden="true">' +
  354. '<use xlink:href="#iconicon_close1"></use>' +
  355. '</svg>' +
  356. '</div>';
  357. return html;
  358. }
  359. function removeSearch(t) {
  360. if ($(t).attr("name") == 'state') {
  361. initSelect('state', "IM_USER_STATE", "state", ' ', true);
  362. form.render();
  363. $(t).remove();
  364. } if ($(t).attr("name") == 'roleid') {
  365. $.request({
  366. action : '../../RoleManageAction/roleQueryByBranchId',
  367. data : { },
  368. success : function(data) {
  369. var selectName ="roleid";
  370. var html = '<select name="';
  371. html = html + selectName;
  372. html = html + '" lay-filter="';
  373. html = html + selectName;
  374. html = html + '"';
  375. html = html + '><option value="">全部</option>';
  376. $.each(data.MINQueryResult, function(i, j) {
  377. html = html + '<option ';
  378. html = html + 'value="';
  379. html = html + j.id + '">';
  380. html = html + j.name+ '</option>';
  381. })
  382. html = html + '</select>';
  383. $("#seleRoleid").html(html);
  384. form.render();
  385. }
  386. });
  387. form.on('select(roleid)', function(data){
  388. changeSelectCon(4, data.elem, "sel","roleid");
  389. });
  390. $(t).remove();
  391. } else {
  392. $("#"+$(t).attr("name")).val('');
  393. $(t).remove();
  394. }
  395. }
  396. </script>
  397. </body>
  398. </html>