useredit.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. <!DOCTYPE html>
  2. <html class="x-admin-sm">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport"
  8. content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  9. <link rel="shortcut icon" href="/static/favicon.ico">
  10. <link rel="bookmark" href="/static/favicon.ico">
  11. <link rel="stylesheet" href="/static/css/font.css">
  12. <link rel="stylesheet" href="/static/css/xadmin.css">
  13. <link rel="stylesheet" href="/static/layui/css/modules/layer/default/layer.css">
  14. <link rel="stylesheet" href="/static/layui/css/modules/laydate/default/laydate.css">
  15. <script src="/static/js/jquery.min.js"></script>
  16. <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
  17. <!-- <script src="/static/lib/layui/lay/modules/laydate.js"/>-->
  18. <script src="/static/lib/layui/lay/modules/layer.js" charset="utf-8"></script>
  19. <script type="text/javascript" src="/static/js/xadmin.js"></script>
  20. <style>
  21. .red-text {
  22. color: red;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="x-nav">
  28. <span class="layui-breadcrumb">
  29. <a href="">首页</a>
  30. <a><cite>设备管理</cite></a>
  31. </span>
  32. <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
  33. onclick="location.reload()" title="刷新">
  34. <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  35. </a>
  36. </div>
  37. <div class="layui-fluid">
  38. <div class="layui-row layui-col-space15">
  39. <div class="layui-col-md12">
  40. <div class="layui-card">
  41. <div class="layui-card-body ">
  42. <div class="layui-form layui-col-space5">
  43. <div class="layui-input-inline layui-show-xs-block">
  44. <input id="deviceName" type="text" name="Name"
  45. placeholder="用户名称"
  46. autocomplete="off" class="layui-input"></div>
  47. <div class="layui-input-inline layui-show-xs-block">
  48. <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search"
  49. onclick="getDeviceDataList(1)">
  50. <i class="layui-icon">&#xe615;</i></button>
  51. </div>
  52. <div class="layui-input-inline layui-show-xs-block">
  53. <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search"
  54. onclick="showAddUserForm()">
  55. <i class="layui-icon">&#xe615;</i>添加用户
  56. </button>
  57. </div>
  58. </div>
  59. </div>
  60. <!--数据列表部分-->
  61. <div class="layui-card-body " style="min-height: 400px">
  62. <table class="layui-table" lay-size="lg">
  63. <colgroup>
  64. <!-- <col width="20">-->
  65. <col>
  66. <col>
  67. <col>
  68. <col>
  69. <col>
  70. </colgroup>
  71. <thead>
  72. <!-- <th>选择</th>-->
  73. <th>用户名</th>
  74. <th>用户账号</th>
  75. <th>公司</th>
  76. <th>用户状态</th>
  77. <th>操作</th>
  78. </thead>
  79. <tbody id="tableBody">
  80. </tbody>
  81. </table>
  82. </div>
  83. <div class="layui-card-body ">
  84. <div class="page">
  85. <div id="pageTool">
  86. <!--上一页-->
  87. </div>
  88. </div>
  89. </div>
  90. <!--分页、选择区域 start-->
  91. <!-- 分页、选择区域 end -->
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <script>
  97. //数据表格
  98. let pageInfo = null
  99. let currentPage = 1
  100. function getDeviceDataList(currentPage) {
  101. // 显示加载页面
  102. layui.layer.load();
  103. let searchDeviceName = $('#deviceName').val()
  104. let searchDeviceClass = $('#searchClass').val()
  105. console.log(searchDeviceName, searchDeviceClass)
  106. let formData = new FormData();
  107. formData.set('page', currentPage)
  108. formData.set('T_name', searchDeviceName)
  109. $.ajax({
  110. type: "POST",
  111. data: formData,
  112. contentType: false,
  113. processData: false,
  114. url: "/User/list?search=",
  115. success: function (result) {
  116. pageInfo = result
  117. let b = $('#tableBody')
  118. b.html("")
  119. if (result.list != null) {
  120. layui.layer.closeAll("loading");
  121. for (let v of result.list) {
  122. let buttonHtml = '';
  123. if (v.T_State === 1) {
  124. buttonHtml = `<button onclick="updateUserState('${v.State}', '${v.Id}', 0)" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-green">启用</button>`;
  125. } else if (v.T_State === 0) {
  126. buttonHtml = `<button onclick="updateUserState('${v.State}', '${v.Id}', 1)" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-red">禁用</button>`;
  127. }
  128. let isTrueStyle = v.Is_true === 1 ? 'style="background-color: #00FF97FF;"' : '';
  129. b.append(`<tr ${isTrueStyle}>
  130. <td>${v.T_name}</td>
  131. <td>${v.T_user}</td>
  132. <td>${v.T_Company}【${v.T_pid}】</td>
  133. <td>
  134. ${buttonHtml}
  135. </td>
  136. <td>
  137. <button onclick="DeleteUser('${v.Id}')" class="layui-btn layui-btn-normal layui-btn-sm layui-bg-red">删除</button>
  138. <button onclick="showEditUserForm('${v.Id}')" class="layui-btn layui-btn-normal layui-btn-sm">编辑</button>
  139. </td>
  140. </tr>
  141. `)
  142. }
  143. } else {
  144. b.append(`<tr>
  145. <td colspan="5" rowspan="10" style="height: 590px;text-align: center">没有设备数据!</td>
  146. </tr>`)
  147. }
  148. //渲染分页
  149. $('#pageTool').html('')
  150. if (!pageInfo.previousPage) {
  151. $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-sm " onclick="getDeviceDataList(${pageInfo.currentPage - 1})">上一页</button>`)
  152. } else {
  153. $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-disabled layui-btn-sm" onclick="getDeviceDataList(${pageInfo.currentPage - 1})">上一页</button>`)
  154. }
  155. //页码
  156. let start, end
  157. start = pageInfo.currentPage - 2 <= 0 ? 1 : pageInfo.currentPage - 2
  158. end = pageInfo.currentPage + 2 >= pageInfo.totalPage ? pageInfo.totalPage : pageInfo.currentPage + 2
  159. end = end + (Math.abs(end - start)) >= pageInfo.totalPage ? pageInfo.totalPage : end + (Math.abs(end - start))
  160. start = start - (Math.abs(end - start)) <= 0 ? 1 : start - (Math.abs(end - start))
  161. for (; start <= end; start++) {
  162. if (pageInfo.currentPage == start) {
  163. $('#pageTool').append(`<button class="layui-btn layui-btn-disabled layui-btn-primary layui-btn-sm" onclick="getDeviceDataList(${start})">${start}</button>`)
  164. } else {
  165. $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="getDeviceDataList(${start})">${start}</button>`)
  166. }
  167. }
  168. if (!pageInfo.nextPage) {
  169. $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-sm " onclick="getDeviceDataList(${pageInfo.currentPage + 1})">下一页</button>`)
  170. } else {
  171. $('#pageTool').append(`<button class="layui-btn layui-btn-primary layui-btn-disabled layui-btn-sm " onclick="getDeviceDataList(${pageInfo.currentPage + 1})">下一页</button>`)
  172. }
  173. }
  174. })
  175. }
  176. $(function () {
  177. getDeviceDataList(1) //获取数据列表
  178. })
  179. layui.use(['form', 'layer'], function () {
  180. var form = layui.form;
  181. var layer = layui.layer;
  182. window.showAddUserForm = function () { // 将 showAddUserForm 定义在 window 对象上
  183. layer.open({
  184. type: 1,
  185. title: '添加用户',
  186. area: ['500px', '400px'],
  187. content: ` <form class="layui-form" action="" style="margin: 20px;" lay-filter="formDemo">
  188. <div class="layui-form-item">
  189. <label class="layui-form-label">用户名</label>
  190. <div class="layui-input-block">
  191. <input type="text" name="T_name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
  192. </div>
  193. </div>
  194. <div class="layui-form-item">
  195. <label class="layui-form-label">用户账号</label>
  196. <div class="layui-input-block">
  197. <input type="text" name="T_user" required lay-verify="required" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
  198. </div>
  199. </div>
  200. <div class="layui-form-item">
  201. <label class="layui-form-label">密码</label>
  202. <div class="layui-input-block">
  203. <input type="password" name="T_pass" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  204. </div>
  205. </div>
  206. <div class="layui-form-item">
  207. <label class="layui-form-label">公司</label>
  208. <div class="layui-input-block">
  209. <select id="companySelect" name="T_pid" lay-verify="required" lay-search>
  210. <option value="">请选择公司</option>
  211. </select>
  212. </div>
  213. </div>
  214. <div class="layui-form-item">
  215. <label class="layui-form-label">是否管理员</label>
  216. <div class="layui-input-block">
  217. <input type="radio" name="noCompany" value="0" title="无公司" lay-filter="noCompany">
  218. </div>
  219. </div>
  220. <div class="layui-form-item">
  221. <div class="layui-input-block">
  222. <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  223. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  224. <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
  225. </div>
  226. </div>
  227. </form>
  228. `,
  229. success: function (layero, index) {
  230. $.ajax({
  231. type: "GET",
  232. url: "/company/list",
  233. success: function (result) {
  234. let companySelect = $('#companySelect');
  235. result.Data.forEach(function (company) {
  236. companySelect.append(`<option value="${company.Id}">${company.T_name}</option>`);
  237. });
  238. form.render('select'); // 重新渲染select元素
  239. form.render('radio'); // 重新渲染radio元素
  240. }
  241. });
  242. }
  243. });
  244. }
  245. form.on('submit(formDemo)', function (data) {
  246. console.log(data.field);
  247. const jsonData = JSON.stringify(data.field);
  248. let url = "/User/add";
  249. let method = "POST";
  250. if (data.field.Id) { // 检查是否存在Id字段
  251. url = "/User/updateUser";
  252. method = "POST";
  253. }
  254. $.ajax({
  255. type: method,
  256. url: url,
  257. data: jsonData,
  258. contentType: "application/json",
  259. success: function (result) {
  260. if (result.Code === 200) {
  261. layui.layer.msg('操作成功');
  262. getDeviceDataList(currentPage);
  263. layer.closeAll();
  264. } else {
  265. layui.layer.msg(result.Msg);
  266. }
  267. },
  268. error: function () {
  269. layui.layer.msg('操作失败');
  270. }
  271. });
  272. return false;
  273. });
  274. // 添加 radio 监听事件
  275. form.on('radio(noCompany)', function (data) {
  276. if (data.value === '0') {
  277. $('#companySelect').removeAttr('lay-verify');
  278. } else {
  279. $('#companySelect').attr('lay-verify', 'required');
  280. }
  281. form.render('select'); // 重新渲染select元素
  282. });
  283. window.showEditUserForm = function (userId) {
  284. layui.layer.open({
  285. type: 1,
  286. title: '编辑用户',
  287. area: ['500px', '400px'],
  288. content: `<form class="layui-form" action="" style="margin: 20px;" lay-filter="formDemo">
  289. <div class="layui-form-item">
  290. <label class="layui-form-label">用户名</label>
  291. <div class="layui-input-block">
  292. <input type="text" name="T_name" required placeholder="请输入用户名" autocomplete="off" class="layui-input">
  293. </div>
  294. </div>
  295. <div class="layui-form-item">
  296. <label class="layui-form-label">用户账号</label>
  297. <div class="layui-input-block">
  298. <input type="text" name="T_user" required placeholder="请输入用户账号" autocomplete="off" class="layui-input">
  299. </div>
  300. </div>
  301. <div class="layui-form-item">
  302. <label class="layui-form-label">密码</label>
  303. <div class="layui-input-block">
  304. <input type="password" lay-affix="eye" name="T_pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
  305. </div>
  306. </div>
  307. <div class="layui-form-item">
  308. <label class="layui-form-label">公司</label>
  309. <div class="layui-input-block">
  310. <select id="companySelect" name="T_pid" lay-search>
  311. <option value="">请选择公司</option>
  312. </select>
  313. </div>
  314. </div>
  315. <div class="layui-form-item">
  316. <label class="layui-form-label">是否管理员</label>
  317. <div class="layui-input-block">
  318. <input type="radio" name="noCompany" value="0" title="无公司" lay-filter="noCompany">
  319. </div>
  320. </div>
  321. <div class="layui-form-item">
  322. <div class="layui-input-block">
  323. <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  324. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  325. <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
  326. </div>
  327. </div>
  328. <input type="hidden" name="Id" id="userIdInput">
  329. </form>
  330. `,
  331. success: function (layero, index) {
  332. $.ajax({
  333. type: "GET",
  334. url: "/User/detail?Id=" + userId,
  335. success: function (result) {
  336. let user = result.Data;
  337. console.log("================", user)
  338. $('#companySelect').append(`<option value="${user.T_pid}">${user.T_pid}</option>`); // 修改此处显示公司名称
  339. $('input[name="T_name"]').val(user.T_name);
  340. $('input[name="T_user"]').val(user.T_user);
  341. $('input[name="T_pass"]').val('');
  342. $('#userIdInput').val(user.Id); // 设置Id字段
  343. form.render('select'); // 重新渲染select元素
  344. form.render('radio'); // 重新渲染radio元素
  345. }
  346. });
  347. $.ajax({
  348. type: "GET",
  349. url: "/company/list",
  350. success: function (result) {
  351. let companySelect = $('#companySelect');
  352. result.Data.forEach(function (company) {
  353. companySelect.append(`<option value="${company.Id}">${company.T_name}</option>`);
  354. });
  355. form.render('select'); // 重新渲染select元素
  356. form.render('radio'); // 重新渲染radio元素
  357. }
  358. });
  359. }
  360. });
  361. }
  362. // 添加 radio 监听事件
  363. form.on('radio(noCompany)', function (data) {
  364. if (data.value === '0') {
  365. $('#companySelect').removeAttr('lay-verify');
  366. } else {
  367. $('#companySelect').attr('lay-verify', 'required');
  368. }
  369. form.render('select'); // 重新渲染select元素
  370. });
  371. });
  372. // 新增函数 updateUserState
  373. function updateUserState(uuid, id, newState) {
  374. const params = {
  375. T_State: newState,
  376. Id: id
  377. };
  378. $.ajax({
  379. type: "GET",
  380. url: "/User/update",
  381. data: params,
  382. success: function (result) {
  383. if (result.Code === 200) {
  384. layui.layer.msg('更新成功');
  385. getDeviceDataList(currentPage); // 重新加载数据列表
  386. } else {
  387. layui.layer.msg(result.Msg);
  388. }
  389. },
  390. error: function () {
  391. layui.layer.msg('更新失败');
  392. }
  393. });
  394. }
  395. function DeleteUser(id) {
  396. layui.layer.confirm('确定要删除该用户吗?', {
  397. btn: ['是', '否'] // 按钮
  398. }, function (index) {
  399. // 用户点击是
  400. const params = {
  401. Id: id
  402. };
  403. $.ajax({
  404. type: "GET",
  405. url: "/User/delete",
  406. data: params,
  407. success: function (result) {
  408. if (result.Code === 200) {
  409. layui.layer.msg('更新成功');
  410. getDeviceDataList(currentPage); // 重新加载数据列表
  411. } else {
  412. layui.layer.msg(result.Msg);
  413. }
  414. },
  415. error: function () {
  416. layui.layer.msg('更新失败');
  417. }
  418. });
  419. layui.layer.close(index);
  420. }, function (index) {
  421. // 用户点击否
  422. layui.layer.close(index);
  423. });
  424. }
  425. </script>
  426. </body>
  427. </html>