logManage.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  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. <a href="#" id="toggle" class="top">收起</a>
  18. </div>
  19. </div>
  20. <form class="layui-form" id = "formName" >
  21. <div class="order-select back-border" id="content">
  22. <div class="layui-inline">
  23. <label class="f12-gray4">登录名:</label>
  24. <input onchange = "changeSelectCon(0,this,'inp')" class="search-select" type="tel" name="logonname" id ="logonname" value="" placeholder="请输入登录名" />
  25. </div>
  26. <div class="layui-inline">
  27. <label class="f12-gray4">姓名:</label>
  28. <input onchange = "changeSelectCon(1,this,'inp')" class="search-select" type="tel" name="name" id ="name" value="" placeholder="请输入姓名" />
  29. </div>
  30. <div class="layui-inline">
  31. <label class="f12-gray4">操作:</label>
  32. <input onchange = "changeSelectCon(2,this,'inp')" class="search-select" type="tel" name="desc" id ="desc" value="" placeholder="请输入操作" />
  33. </div>
  34. <div class="d-dashed" style="margin: 10px 0;"></div>
  35. <div class="layui-inline">
  36. <label class="f12-gray4">日期:</label>
  37. <input class="search-select" type="text" id="dates" placeholder="日期(区间)" readonly />
  38. </div>
  39. </div>
  40. </form>
  41. </div>
  42. <div class="shadow-content" style="margin:1.5rem;">
  43. <table id="logTable" lay-filter="tableFilter"></table>
  44. </div>
  45. <!--操作功能-->
  46. <script type="text/html" id="barDemo">
  47. <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
  48. </script>
  49. <script>
  50. // 仅选择日期
  51. layui.use('laydate', function(){
  52. var laydate = layui.laydate;
  53. /* laydate.render({
  54. elem: '#date'
  55. });
  56. laydate.render({
  57. elem: '#date1'
  58. }); */
  59. //日期范围
  60. laydate.render({
  61. elem: '#dates'
  62. ,range: true
  63. ,format:'yyyyMMdd'
  64. ,done: function(value, date, endDate){
  65. changeSelectCon(3,"dates",'date',value)
  66. }
  67. });
  68. })
  69. layui.use('form', function(){
  70. var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  71. $.request({
  72. action : '../../RoleManageAction/roleQueryByBranchId',
  73. data : { },
  74. success : function(data) {
  75. var selectName ="roleid";
  76. var html = '<select name="';
  77. html = html + selectName;
  78. html = html + '" lay-filter="';
  79. html = html + '"';
  80. html = html + '><option value="">全部</option>';
  81. $.each(data.MINQueryResult, function(i, j) {
  82. html = html + '<option ';
  83. html = html + 'value="';
  84. html = html + j.id + '">';
  85. html = html + j.name+ '</option>';
  86. })
  87. html = html + '</select>';
  88. $("#seleRoleid").html(html);
  89. initSelectb('state', "IM_USER_STATE", "state", ' ', true);
  90. form.render();
  91. },
  92. });
  93. $.request({
  94. action : '../../RoleManageAction/roleQueryBranch',
  95. data : { },
  96. success : function(data) {
  97. var selectName ="branchid";
  98. var html1 = '<select name="';
  99. html1 = html1 + selectName;
  100. html1 = html1 + '" lay-filter="';
  101. html1 = html1 + '"';
  102. html1 = html1 + '><option value="">全部</option>';
  103. $.each(data.MINQueryResult, function(i, j) {
  104. html1 = html1 + '<option ';
  105. html1 = html1 + 'value="';
  106. html1 = html1 + j.id + '">';
  107. html1 = html1 + j.name+ '</option>';
  108. })
  109. html1 = html1 + '</select>';
  110. $("#branchId").html(html1);
  111. form.render();
  112. },
  113. });
  114. })
  115. var table;
  116. layui.use('table', function(){
  117. table = layui.table;
  118. table.render({
  119. id : 'logTable'
  120. //tbname:'userLoger',
  121. ,elem: '#logTable'
  122. ,limit:10
  123. ,url: '../../LogManageAction/queryLogs' //数据接口
  124. ,method: 'post'
  125. ,page: true //开启分页
  126. ,cols: [[ //表头
  127. {field:'no', type : 'numbers', title: '序号'}//
  128. //,{field: 'logId', title: '操作员编号', width:140, sort: true}
  129. ,{field: 'logonname', title: '登录名', width:100}
  130. ,{field: 'name', title: '姓名', width:120}
  131. ,{field: 'logdatetime', title: '执行时间', width:140}
  132. ,{field: 'branchname', title: '所属商户',width:100}
  133. ,{field: 'rolename', title: '角色', width:100}
  134. ,{field: 'loginfo', title: '操作描述', width:200}
  135. ,{field: 'logresult', title: '操作结果', width:100}
  136. ,{field: 'ip', title: 'IP地址',width:180}
  137. ,{field: 'operate', title: '操作', toolbar: '#barDemo', width:100}
  138. ]]
  139. ,done: function(res, curr, count){
  140. //如果是异步请求数据方式,res即为你接口返回的信息。
  141. console.log(res);
  142. //得到当前页码
  143. console.log(curr);
  144. //得到数据总量
  145. console.log(count);
  146. }
  147. ,even: true //开启隔行背景
  148. });
  149. // 监听工具条(操作)
  150. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  151. var data = obj.data; //获得当前行数据
  152. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  153. var tr = obj.tr; //获得当前行 tr 的DOM对象
  154. if(layEvent === 'delete'){ //详情
  155. layer.confirm('确认删除此数据?', function(index){
  156. layer.close(index);
  157. //向服务端发送删除指令roleDelete
  158. $.request({
  159. action : "../../LogManageAction/deleteLogs",
  160. data : {
  161. id : data.logId
  162. },
  163. success : function(resData) {
  164. if (resData.MINStatus == 0) {
  165. //成功后刷新
  166. var btn=$(".layui-laypage-btn")[0];
  167. btn.click();
  168. layer.alert('操作成功!', {
  169. icon: 6,
  170. title: "提示"
  171. });
  172. } else {
  173. layer.alert(resData.MINErrorMessage, {
  174. icon: 5,
  175. title: "提示"
  176. });
  177. }
  178. },
  179. error : function(data2){
  180. layer.alert(data2.MINErrorMessage, {
  181. icon: 5,
  182. title: "提示"
  183. });
  184. // layer.alert(resData.MINErrorMessage, {icon: 2});
  185. }
  186. });
  187. })
  188. }
  189. });
  190. $('.demoTable .layui-btn').on('click', function(){
  191. var type = $(this).data('type');
  192. active[type] ? active[type].call(this) : '';
  193. });
  194. });
  195. var $ = layui.$, active = {
  196. reload: function(){
  197. queryReload();
  198. }
  199. ,reset: function(){
  200. $("form")[0].reset();
  201. }
  202. };
  203. function showDetail(data) {
  204. var params = {};
  205. params.columnNumber = 2; //每行显示两个字段
  206. // 要显示的数据
  207. params.fields = [
  208. {field: 'id', title: 'ID'}
  209. ,{field: 'logonname', title: '登录名'}
  210. ,{field: 'name', title: '姓名'}
  211. ,{field: 'rolename', title: '角色'}
  212. ,{field: 'phone', title: '手机号'}
  213. ,{field: 'branchname', title: '所属机构'}
  214. ,{field: 'createdate', title: '创建日期'}
  215. ,{field: 'lastlogon', title: '最后登录日期'}
  216. ,{field: 'sttdesc', title: '状态'}
  217. ];
  218. // 寄存当前数据
  219. setNowRowData(data, params);
  220. layer.open({
  221. type: 2,
  222. title: '用户详情',
  223. shadeClose: true,
  224. shade: 0.8,
  225. //maxmin: true, //开启最大化最小化按钮
  226. area: ['800px', '500px'],
  227. content: '../../web/showDetail.html'
  228. });
  229. }
  230. // 重新加载
  231. function queryReload() {
  232. //供应商名称
  233. var name = $('#name').val();
  234. //订单编号
  235. var logonname = $('#logonname').val();
  236. //所属部门
  237. var seleRoleid = $("#seleRoleid option:selected").val();
  238. var branchId = $("#branchId option:selected").val();
  239. //日期范围
  240. var dates = $('#dates').val();
  241. var desc = $('#desc').val();
  242. desc
  243. //执行重载
  244. table.reload('logTable', {
  245. page: {
  246. curr: 1 //重新从第 1 页开始
  247. }
  248. ,where: {
  249. name : name,
  250. logonname : logonname,
  251. roleid : seleRoleid,
  252. branchid : branchId,
  253. date : dates,
  254. desc : desc
  255. }
  256. });
  257. }
  258. function changeSelectCon(index, t, type, dateValue){
  259. if (type == "date") {
  260. if (isEmpty(dateValue)) {
  261. $("#search" + index).remove();
  262. } else {
  263. $("#search" + index).remove();
  264. if (isEmpty($("#search" + index).attr("name"))) {
  265. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  266. }
  267. }
  268. } else if (type == 'inp') {
  269. if (isEmpty($(t).val())) {
  270. $("#search" + index).remove();
  271. } else {
  272. $("#search" + index).remove();
  273. if (isEmpty($("#search" + index).attr("name"))) {
  274. $("#conditions").append(getSelectConHtml(index, t, type));
  275. }
  276. }
  277. } else {
  278. if (isEmpty($(t).val())) {
  279. $("#search" + index).remove();
  280. } else {
  281. $("#search" + index).remove();
  282. if (isEmpty($("#search" + index).attr("name"))) {
  283. $(t).attr("id",dateValue);
  284. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  285. }
  286. }
  287. }
  288. }
  289. var array = new Array('登录名','姓名','操作','日期');
  290. function getSelectConHtml(index, t, type,dateValue){
  291. var name;
  292. var value;
  293. if(type == "inp"){
  294. value = t.value.substr(0,5)+"..";
  295. }
  296. if (type == "date") {
  297. value = dateValue;
  298. }
  299. if(type == "sel" && dateValue =="state"){
  300. value = $("#state").find("option:selected").text();
  301. }
  302. if(type == "sel" && dateValue =="roleid"){
  303. value = $("#roleid").find("option:selected").text();
  304. }
  305. if (type == "date") {
  306. name = $("#"+t).attr("id");
  307. } else {
  308. name = $(t).attr("id");
  309. }
  310. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  311. '<div class="fl">' + array[index] + '</div>' +
  312. ':<i class="iconfont">'+value+'</i>' +
  313. '<svg class="icon" aria-hidden="true">' +
  314. '<use xlink:href="#iconicon_close1"></use>' +
  315. '</svg>' +
  316. '</div>';
  317. return html;
  318. }
  319. function removeSearch(t) {
  320. $("#"+$(t).attr("name")).val('');
  321. $(t).remove();
  322. }
  323. $("#toggle").click(function() {
  324. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  325. "<i class='iconfont up iconSelect_drop-down'/></i>");
  326. $("#content").slideToggle();
  327. });
  328. </script>
  329. </body>
  330. </html>