umlist.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>欢迎页面</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport"
  9. content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  10. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
  11. <link rel="stylesheet" href="./css/font.css">
  12. <link rel="stylesheet" href="./css/xadmin.css">
  13. <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  14. <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
  15. <script type="text/javascript" src="js/admin.js"></script>
  16. <script type="text/javascript" src="./js/jquery_cookie_min.js"></script>
  17. <script type="text/javascript" src="./js/jqhttpsdk.js"></script>
  18. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  19. <!--[if lt IE 9]>
  20. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  21. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  22. <![endif]-->
  23. </head>
  24. <body>
  25. <div class="x-nav">
  26. <span class="layui-breadcrumb">
  27. <a href="">首页</a>
  28. <a href="">UID管理</a>
  29. <a>
  30. <cite>管理</cite></a>
  31. </span>
  32. <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
  33. href="javascript:location.replace(location.href);" title="刷新">
  34. <i class="layui-icon" style="line-height:30px">ဂ</i></a>
  35. </div>
  36. <div class="x-body">
  37. <div class="layui-row">
  38. <form class="layui-form layui-col-md12 x-so">
  39. <input class="layui-input" placeholder="开始日" name="start" id="start">
  40. <input class="layui-input" placeholder="截止日" name="end" id="end">
  41. <div class="layui-input-inline">
  42. <label class="layui-inline">
  43. <select lay-filter="is_use_select" id="status_use_id">
  44. <option value="">状态</option>
  45. <option value="0">未占用</option>
  46. <option value="1">待占用</option>
  47. <option value="2">已占用</option>
  48. </select>
  49. </label>
  50. </div>
  51. <div class="layui-inline x-right">
  52. <div class="layui-input-inline">
  53. <input type="text" class="layui-input searchVal" placeholder="请输入搜索的uid"/>
  54. </div>
  55. <a class="layui-btn search_btn" data-type="reload">搜索</a>
  56. </div>
  57. </form>
  58. </div>
  59. <xblock>
  60. <button class="layui-btn layui-btn-danger delAll_btn"><i class="layui-icon"></i>批量删除</button>
  61. <button class="layui-btn layui-btn-normal history_btn">转为历史</button>
  62. <button class="layui-btn" onclick="x_admin_show('添加用户','./order-add.html')" style="display: none;"><i class="layui-icon"></i>添加
  63. </button>
  64. <a class="layui-btn layui-btn-normal distribute_btn" style="display: none;">开启分发</a>
  65. <button type="button" class="layui-btn" id="imuidlist" style="display: none;">
  66. <i class="layui-icon">&#xe67c;</i>导入
  67. </button>
  68. </xblock>
  69. <table id="uidlisttab" lay-filter="uidlisttab"></table>
  70. </div>
  71. <script>
  72. function print(data) {
  73. console.log(data)
  74. }
  75. layui.use(['table', 'upload', 'layer', 'form', 'laydate'], function () {
  76. var table = layui.table;
  77. var $ = jQuery = layui.$;
  78. var form = layui.form;
  79. var upload = layui.upload;
  80. var laydate = layui.laydate;
  81. //执行一个laydate实例
  82. laydate.render({
  83. elem: '#start' //指定元素
  84. , done: function (value, date, endDate) {
  85. // console.log(Date.parse(value))
  86. // print(Date.parse($('#start').val())/1000)
  87. var starttime = $('#start').val()
  88. var endtime = $('#end').val()
  89. if (starttime) {
  90. starttime = Date.parse(starttime) / 1000
  91. } else {
  92. starttime = ''
  93. }
  94. if (endtime) {
  95. endtime = Date.parse(endtime) / 1000
  96. } else {
  97. endtime = ''
  98. }
  99. searchTable({
  100. // is_use: $('#status_use_id').val(),
  101. // uid: $(".searchVal").val(),
  102. starttime: starttime,
  103. endtime: endtime
  104. })
  105. }
  106. });
  107. //执行一个laydate实例
  108. laydate.render({
  109. elem: '#end' //指定元素
  110. , done: function (value, date, endDate) {
  111. var starttime = $('#start').val()
  112. var endtime = $('#end').val()
  113. if (starttime) {
  114. starttime = Date.parse(starttime) / 1000
  115. } else {
  116. starttime = ''
  117. }
  118. if (endtime) {
  119. endtime = Date.parse(endtime) / 1000
  120. } else {
  121. endtime = ''
  122. }
  123. searchTable({
  124. // is_use: $('#status_use_id').val(),
  125. // uid: $(".searchVal").val(),
  126. starttime: starttime,
  127. endtime: endtime
  128. })
  129. }
  130. });
  131. //第一个实例
  132. var tableIns = table.render({
  133. elem: '#uidlisttab',
  134. //height: 600,
  135. height: 'full',
  136. url: http_ip_port + '/uid/list', //数据接口
  137. page: true, //开启分页
  138. limit: 10,
  139. cols: [[ //表头
  140. {type: "checkbox", fixed: "left", width: 50},
  141. {field: 'uid', title: 'UID', width: 250, sort: true,},
  142. {field: 'mac', title: 'mac地址', width: 250},
  143. {field: 'status', title: '使用状态', width: 100, templet: '#isUse'},
  144. {field: 'add_time', title: '添加时间', width: 250, sort: true, templet: '#add_time'},
  145. {field: 'update_time', title: '修改时间', width: 250, templet:'#update_time'},
  146. {title: '操作', templet: '#ListBar', fixed: "right", align: "center"}
  147. ]],
  148. where: {token: $.cookie('access_token')},
  149. parseData: function (res) {
  150. console.log(res)
  151. return {
  152. "code": res['code'],
  153. "msg": res['msg'],
  154. "count": res['res']['count'],
  155. "data": res['res']['data'],
  156. }
  157. }
  158. });
  159. //列表操作
  160. table.on('tool(uidlisttab)', function (obj) {
  161. var layEvent = obj.event,
  162. data = obj.data;
  163. if (layEvent === 'edit') { //编辑
  164. var url = './uid-edit.html?uid=' + data.uid + '&mac=' + data.mac + '&status=' + data.status
  165. + '&add_time=' + data.add_time + '&update_time=' + data.update_time;
  166. x_admin_show('编辑', url);
  167. } else if (layEvent === 'del') { //删除
  168. layer.confirm('确定删除\r\n' + data.uid + '?', {icon: 3, title: '提示信息'}, function (index) {
  169. console.log(data)
  170. $.post(http_ip_port + "/uid/delete", {
  171. uid: data.uid, //将需要删除的newsId作为参数传入
  172. token: $.cookie('access_token')
  173. }, function (data) {
  174. console.log(data)
  175. tableIns.reload();
  176. layer.close(index);
  177. })
  178. });
  179. } else if (layEvent === 'look') { //预览
  180. layer.alert("此功能需要前台展示,实际开发中传入对应的必要参数进行文章内容页面访问")
  181. }
  182. });
  183. //执行实例
  184. upload.render({
  185. elem: '#imuidlist', //绑定元素
  186. url: http_ip_port + '/uid/register/', //上传接口
  187. accept: 'file',
  188. data: {
  189. token: function () {
  190. return $.cookie('access_token')
  191. }
  192. },
  193. done: function (res) {
  194. console.log(res)
  195. layer.msg(res['msg'])
  196. //上传完毕回调
  197. if (res['code'] == 0) {
  198. tableIns.reload();
  199. }
  200. }
  201. , error: function () {
  202. //请求异常回调
  203. }
  204. });
  205. //批量删除
  206. $(".delAll_btn").click(function () {
  207. var checkStatus = table.checkStatus('uidlisttab'),
  208. data = checkStatus.data,
  209. uidlist = [];
  210. if (data.length > 0) {
  211. for (var i in data) {
  212. uidlist.push(data[i].uid);
  213. }
  214. console.log(JSON.stringify(uidlist))
  215. layer.confirm('确定删除选中的数据?', {icon: 3, title: '提示信息'}, function (index) {
  216. console.log(uidlist)
  217. $.post(
  218. http_ip_port + '/uid/batchDelete',
  219. {
  220. "uidlist": JSON.stringify(uidlist),
  221. 'token': $.cookie('access_token')
  222. },
  223. function (data) {
  224. console.log(data);
  225. tableIns.reload();
  226. layer.close(index);
  227. }
  228. );
  229. })
  230. } else {
  231. layer.msg("请选择需要删除的数据");
  232. }
  233. })
  234. function searchTable(where) {
  235. // where['token'] = $.cookie('access_token')
  236. print(where);
  237. table.reload("uidlisttab", {
  238. page: {
  239. curr: 1 //重新从第 1 页开始
  240. },
  241. where: where
  242. // {
  243. // uid: $(".searchVal").val(), //搜索的关键字
  244. // mac: $(".searchVal").val()
  245. // }
  246. , parseData: function (res) { //res 即为原始返回的数据
  247. print(res);
  248. console.log(res);
  249. return {
  250. "code": res['code'],
  251. "msg": res['msg'],
  252. "count": res['res']['count'],
  253. "data": res['res']['data'],
  254. };
  255. }
  256. });
  257. }
  258. //搜索【此功能需要后台配合,所以暂时没有动态效果演示】
  259. $(".search_btn").on("click", function () {
  260. if ($(".searchVal").val() != '') {
  261. searchTable({uid: $(".searchVal").val()});
  262. } else {
  263. tableIns.reload();
  264. layer.msg("请输入搜索的内容");
  265. }
  266. });
  267. // select框bind事件
  268. form.on('select(is_use_select)', function (data) {
  269. console.log(data['value']);
  270. var is_use = data['value'];
  271. // tableIns.reload()
  272. searchTable({
  273. status: is_use,
  274. uid: $(".searchVal").val(),
  275. })
  276. });
  277. //开启关闭分发
  278. $(".distribute_btn").on("click", function () {
  279. var distribute;
  280. var thisBtn = $(this);
  281. if ($(".distribute_btn").hasClass('layui-btn-normal')) {
  282. distribute = false;
  283. } else if ($(".distribute_btn").hasClass('layui-btn-danger')) {
  284. distribute = true;
  285. }
  286. $.ajax({
  287. method: "post",
  288. url: http_ip_port + '/sys/change/',
  289. contentType: 'application/json',
  290. data: JSON.stringify({
  291. "distribute": distribute,
  292. "token": $.cookie('access_token')
  293. }),
  294. success: function (data) {
  295. console.log(data)
  296. data = JSON.parse(data)
  297. if (data['code'] == 0) {
  298. tableIns.reload();
  299. if (data['res']['distribute']) {
  300. thisBtn.removeClass('layui-btn-danger')
  301. thisBtn.addClass('layui-btn-normal')
  302. thisBtn.html('开启分发')
  303. layer.msg('开启分发成功');
  304. } else {
  305. thisBtn.removeClass('layui-btn-normal')
  306. thisBtn.addClass('layui-btn-danger')
  307. thisBtn.html('关闭分发')
  308. layer.msg('关闭分发成功');
  309. }
  310. } else {
  311. layer.msg(data['msg']);
  312. }
  313. },
  314. error: function (data) {
  315. layer.msg(data['msg']);
  316. }
  317. });
  318. });
  319. // 初始化分发状态按钮
  320. function IndexSys() {
  321. /*$.ajax({
  322. method: "get",
  323. url: http_ip_port + '/sys/'+'?token='+$.cookie('access_token'),
  324. dataType: 'json',
  325. success: function (data) {
  326. if (data['code'] == 0) {
  327. tableIns.reload();
  328. console.log(data)
  329. if (data['res']['distribute']) {
  330. $(".distribute_btn").removeClass('layui-btn-danger')
  331. $(".distribute_btn").addClass('layui-btn-normal')
  332. $(".distribute_btn").html('开启分发')
  333. } else {
  334. $(".distribute_btn").removeClass('layui-btn-normal')
  335. $(".distribute_btn").addClass('layui-btn-danger')
  336. $(".distribute_btn").html('关闭分发')
  337. }
  338. } else {
  339. layer.msg('失败');
  340. }
  341. }
  342. });*/
  343. //tableIns.reload();
  344. }
  345. IndexSys();
  346. });
  347. </script>
  348. <script type="text/html" id="ListBar">
  349. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  350. <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  351. <!--<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">预览</a>-->
  352. </script>
  353. <script type="text/html" id="isUse">
  354. {{# if(d.status == 2){ }}
  355. <span class="layui-red x-red">已占用</span>
  356. {{# } else if(d.status == 1){ }}
  357. <span class="layui-blue">待占用</span>
  358. {{# } else if(d.status == 0) {}}
  359. <span class="layui-green">未占用</span>
  360. {{# }}}
  361. </script>
  362. <script type="text/html" id="add_time">
  363. {{#
  364. var fun = function formatDate(date) {
  365. var date = new Date(date);
  366. var YY = date.getFullYear() + '-';
  367. var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  368. var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  369. var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  370. var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  371. var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  372. return YY + MM + DD +" "+hh + mm + ss;
  373. };
  374. }}
  375. <span class="layui-green">{{ fun(d.add_time * 1000) }}</span>
  376. </script>
  377. <script type="text/html" id="update_time">
  378. {{#
  379. var fun = function formatDate(date) {
  380. var date = new Date(date);
  381. var YY = date.getFullYear() + '-';
  382. var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  383. var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  384. var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  385. var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  386. var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  387. return YY + MM + DD +" "+hh + mm + ss;
  388. };
  389. }}
  390. <span class="layui-green">{{ fun(d.update_time * 1000) }}</span>
  391. </script>
  392. </body>
  393. </html>