index.html 11 KB

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