index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>浏览页面</title>
  6. <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
  7. <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
  8. </head>
  9. <body class="pear-container">
  10. <!-- 顶部查询表单 -->
  11. <!-- 数据表格 -->
  12. <div class="layui-card">
  13. <div class="layui-card-body">
  14. <table id="data-table" lay-filter="data-table"></table>
  15. </div>
  16. </div>
  17. <!-- 表格顶部工具栏 -->
  18. <script type="text/html" id="table-toolbar">
  19. <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.invite.insert">
  20. <i class="layui-icon layui-icon-add-1"></i>新增
  21. </button>
  22. <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.invite.delete">
  23. <i class="layui-icon layui-icon-delete"></i>删除
  24. </button>
  25. </script>
  26. <!-- 表格行工具栏 -->
  27. <script type="text/html" id="table-bar">
  28. <button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.invite.update">编辑</button>
  29. <button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.invite.delete">删除</button>
  30. </script>
  31. <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  32. <script src="/app/admin/component/pear/pear.js"></script>
  33. <script src="/app/admin/admin/js/permission.js"></script>
  34. <script src="/app/admin/admin/js/common.js"></script>
  35. <script>
  36. // 相关常量
  37. const PRIMARY_KEY = "id";
  38. const SELECT_API = "/app/admin/invite/select";
  39. const UPDATE_API = "/app/admin/invite/update";
  40. const DELETE_API = "/app/admin/invite/delete";
  41. const INSERT_URL = "/app/admin/invite/insert";
  42. const UPDATE_URL = "/app/admin/invite/update";
  43. // 表格渲染
  44. layui.use(["table", "form", "common", "popup", "util"], function() {
  45. let table = layui.table;
  46. let form = layui.form;
  47. let $ = layui.$;
  48. let common = layui.common;
  49. let util = layui.util;
  50. // 表头参数
  51. let cols = [
  52. {
  53. type: "checkbox",
  54. align: "center"
  55. },{
  56. title: "id",align: "center",
  57. field: "id",
  58. hide: true,
  59. },{
  60. title: "邀请人数",align: "center",
  61. field: "num",
  62. },{
  63. title: "赠送USD",align: "center",
  64. field: "money",
  65. },{
  66. title: "台数",align: "center",
  67. field: "money_one",
  68. },{
  69. title: "世界币",align: "center",
  70. field: "money_two",
  71. },
  72. {
  73. title: "排序",align: "center",
  74. field: "sort",
  75. },{
  76. title: "状态",align: "center",
  77. field: "status",
  78. templet: function (d) {
  79. let field = "status";
  80. form.on("switch("+field+")", function (data) {
  81. let load = layer.load();
  82. let postData = {};
  83. postData[field] = data.elem.checked ? 1 : 0;
  84. postData[PRIMARY_KEY] = this.value;
  85. $.post(UPDATE_API, postData, function (res) {
  86. layer.close(load);
  87. if (res.code) {
  88. return layui.popup.failure(res.msg, function () {
  89. data.elem.checked = !data.elem.checked;
  90. form.render();
  91. });
  92. }
  93. return layui.popup.success("操作成功");
  94. })
  95. });
  96. let checked = d[field] === 1 ? "checked" : "";
  97. return '<input type="checkbox" value="'+util.escape(d[PRIMARY_KEY])+'" lay-filter="'+util.escape(field)+'" lay-skin="switch" lay-text="'+util.escape('')+'" '+checked+'/>';
  98. }
  99. },{
  100. title: "操作",
  101. toolbar: "#table-bar",
  102. align: "center",
  103. fixed: "right",
  104. width: 120,
  105. }
  106. ];
  107. // 渲染表格
  108. table.render({
  109. elem: "#data-table",
  110. url: SELECT_API,
  111. page: true,
  112. cols: [cols],
  113. skin: "line",
  114. size: "lg",
  115. toolbar: "#table-toolbar",
  116. autoSort: false,
  117. defaultToolbar: [{
  118. title: "刷新",
  119. layEvent: "refresh",
  120. icon: "layui-icon-refresh",
  121. }, "filter", "print", "exports"],
  122. done: function () {
  123. layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
  124. }
  125. });
  126. // 编辑或删除行事件
  127. table.on("tool(data-table)", function(obj) {
  128. if (obj.event === "remove") {
  129. remove(obj);
  130. } else if (obj.event === "edit") {
  131. edit(obj);
  132. }
  133. });
  134. // 表格顶部工具栏事件
  135. table.on("toolbar(data-table)", function(obj) {
  136. if (obj.event === "add") {
  137. add();
  138. } else if (obj.event === "refresh") {
  139. refreshTable();
  140. } else if (obj.event === "batchRemove") {
  141. batchRemove(obj);
  142. }
  143. });
  144. // 表格顶部搜索事件
  145. form.on("submit(table-query)", function(data) {
  146. table.reload("data-table", {
  147. page: {
  148. curr: 1
  149. },
  150. where: data.field
  151. })
  152. return false;
  153. });
  154. // 表格顶部搜索重置事件
  155. form.on("submit(table-reset)", function(data) {
  156. table.reload("data-table", {
  157. where: []
  158. })
  159. });
  160. // 字段允许为空
  161. form.verify({
  162. phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
  163. email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
  164. url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
  165. number: [/(^$)|^\d+$/,'只能填写数字'],
  166. date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
  167. identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
  168. });
  169. // 表格排序事件
  170. table.on("sort(data-table)", function(obj){
  171. table.reload("data-table", {
  172. initSort: obj,
  173. scrollPos: "fixed",
  174. where: {
  175. field: obj.field,
  176. order: obj.type
  177. }
  178. });
  179. });
  180. // 表格新增数据
  181. let add = function() {
  182. layer.open({
  183. type: 2,
  184. title: "新增",
  185. shade: 0.1,
  186. maxmin: true,
  187. area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
  188. content: INSERT_URL
  189. });
  190. }
  191. // 表格编辑数据
  192. let edit = function(obj) {
  193. let value = obj.data[PRIMARY_KEY];
  194. layer.open({
  195. type: 2,
  196. title: "修改",
  197. shade: 0.1,
  198. maxmin: true,
  199. area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
  200. content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
  201. });
  202. }
  203. // 删除一行
  204. let remove = function(obj) {
  205. return doRemove(obj.data[PRIMARY_KEY]);
  206. }
  207. // 删除多行
  208. let batchRemove = function(obj) {
  209. let checkIds = common.checkField(obj, PRIMARY_KEY);
  210. if (checkIds === "") {
  211. layui.popup.warning("未选中数据");
  212. return false;
  213. }
  214. doRemove(checkIds.split(","));
  215. }
  216. // 执行删除
  217. let doRemove = function (ids) {
  218. let data = {};
  219. data[PRIMARY_KEY] = ids;
  220. layer.confirm("确定删除?", {
  221. icon: 3,
  222. title: "提示"
  223. }, function(index) {
  224. layer.close(index);
  225. let loading = layer.load();
  226. $.ajax({
  227. url: DELETE_API,
  228. data: data,
  229. dataType: "json",
  230. type: "post",
  231. success: function(res) {
  232. layer.close(loading);
  233. if (res.code) {
  234. return layui.popup.failure(res.msg);
  235. }
  236. return layui.popup.success("操作成功", refreshTable);
  237. }
  238. })
  239. });
  240. }
  241. // 刷新表格数据
  242. window.refreshTable = function() {
  243. table.reloadData("data-table", {
  244. scrollPos: "fixed",
  245. done: function (res, curr) {
  246. if (curr > 1 && res.data && !res.data.length) {
  247. curr = curr - 1;
  248. table.reloadData("data-table", {
  249. page: {
  250. curr: curr
  251. },
  252. })
  253. }
  254. }
  255. });
  256. }
  257. })
  258. </script>
  259. </body>
  260. </html>