index.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  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. <div class="layui-form-item">
  15. <label class="layui-form-label">用户名称</label>
  16. <div class="layui-input-block">
  17. <div class="layui-input-block">
  18. <input type="text" autocomplete="off" name="user_name" class="layui-input">
  19. </div>
  20. </div>
  21. </div>
  22. <div class="layui-form-item">
  23. <label class="layui-form-label">电话</label>
  24. <div class="layui-input-block">
  25. <div class="layui-input-block">
  26. <input type="text" autocomplete="off" name="mobile" class="layui-input">
  27. </div>
  28. </div>
  29. </div>
  30. <div class="layui-form-item">
  31. <label class="layui-form-label">商品</label>
  32. <div class="layui-input-block">
  33. <div class="layui-input-block">
  34. <input type="text" autocomplete="off" name="name" class="layui-input">
  35. </div>
  36. </div>
  37. </div>
  38. <div class="layui-form-item">
  39. <label class="layui-form-label">状态</label>
  40. <div class="layui-input-block">
  41. <div name="status" id="status" value=""></div>
  42. </div>
  43. </div>
  44. <input type="hidden" name="type" value="1">
  45. <div class="layui-form-item">
  46. <label class="layui-form-label">提交时间</label>
  47. <div class="layui-input-block">
  48. <div class="layui-input-block" id="created_at">
  49. <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start"
  50. class="layui-input inline-block" placeholder="开始时间">
  51. -
  52. <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end"
  53. class="layui-input inline-block" placeholder="结束时间">
  54. </div>
  55. </div>
  56. </div>
  57. <div class="layui-form-item layui-inline">
  58. <label class="layui-form-label"></label>
  59. <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
  60. <i class="layui-icon layui-icon-search"></i>查询
  61. </button>
  62. <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
  63. <i class="layui-icon layui-icon-refresh"></i>重置
  64. </button>
  65. </div>
  66. <div class="toggle-btn">
  67. <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
  68. <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
  69. </div>
  70. </form>
  71. </div>
  72. </div>
  73. <!-- 数据表格 -->
  74. <div class="layui-card">
  75. <div class="layui-card-body">
  76. <table id="data-table" lay-filter="data-table"></table>
  77. </div>
  78. </div>
  79. <!-- 表格顶部工具栏 -->
  80. <script type="text/html" id="table-toolbar">
  81. <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="pass" permission="app.admin.withdraw.insert">
  82. 通过
  83. </button>
  84. <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="release" permission="app.admin.withdraw.insert">
  85. 发货
  86. </button>
  87. <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="reject" permission="app.admin.withdraw.delete">
  88. 驳回
  89. </button>
  90. </script>
  91. <!-- 表格行工具栏 -->
  92. <script type="text/html" id="table-bar">
  93. <button class="pear-btn pear-btn-xs tool-btn" lay-event="pass" permission="app.admin.withdraw.update">通过</button>
  94. <button class="pear-btn pear-btn-xs tool-btn" lay-event="release" permission="app.admin.withdraw.update">发货</button>
  95. <button class="pear-btn pear-btn-xs tool-btn" lay-event="reject" permission="app.admin.withdraw.delete">驳回
  96. </button>
  97. </script>
  98. <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  99. <script src="/app/admin/component/pear/pear.js"></script>
  100. <script src="/app/admin/admin/js/permission.js"></script>
  101. <script src="/app/admin/admin/js/common.js"></script>
  102. <script>
  103. // 相关常量
  104. const PRIMARY_KEY = "id";
  105. const SELECT_API = "/app/admin/signrecord/select";
  106. const PASS_API = "/app/admin/signrecord/pass";
  107. const RELEASE_API = "/app/admin/signrecord/release";
  108. const REJECT_API = "/app/admin/signrecord/reject";
  109. layui.use('element', function () {
  110. var $ = layui.jquery
  111. , element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  112. });
  113. // 字段 状态 1 待审核 2审核通过 3驳回 status
  114. layui.use(["jquery", "xmSelect"], function () {
  115. let value = layui.$("#status").attr("value");
  116. let initValue = value ? value.split(",") : [];
  117. layui.xmSelect.render({
  118. el: "#status",
  119. name: "status",
  120. filterable: true,
  121. initValue: initValue,
  122. model: {"icon": "hidden", "label": {"type": "text"}},
  123. clickClose: true,
  124. radio: true,
  125. data: [{value: 1, name: '待审核'}, {value: 2, name: '审核通过'}, {value: 3, name: '发货中'}, {value: 4, name: '=驳回'}],
  126. })
  127. });
  128. // 字段 提交时间 created_at
  129. layui.use(["laydate"], function () {
  130. layui.laydate.render({
  131. elem: "#created_at",
  132. range: ["#created_at-date-start", "#created_at-date-end"],
  133. type: "datetime",
  134. });
  135. })
  136. // 表格渲染
  137. layui.use(["table", "form", "common", "popup", "util", "element"], function () {
  138. let table = layui.table;
  139. let form = layui.form;
  140. let $ = layui.$;
  141. let common = layui.common;
  142. let util = layui.util;
  143. let element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  144. // 表头参数
  145. let cols = [
  146. {
  147. type: "checkbox",
  148. align: "center"
  149. }, {
  150. minWidth: 100,
  151. title: "编号", align: "center",
  152. field: "id",
  153. }, {
  154. minWidth: 100,
  155. title: "会员名称", align: "center",
  156. field: "user_name",
  157. }, {
  158. minWidth: 150,
  159. title: "会员电话", align: "center",
  160. field: "user_mobile",
  161. },
  162. {
  163. minWidth: 200,
  164. title: "商品", align: "center",
  165. field: "goods_name",
  166. },
  167. {
  168. width: 120,
  169. title: "数量", align: "center",
  170. field: "num",
  171. sort: true,
  172. }, {
  173. width: 120,
  174. title: "兑换积分", align: "center",
  175. field: "money",
  176. sort: true,
  177. },
  178. {
  179. width: 100,
  180. title: "状态", align: "center",
  181. field: "status",
  182. templet: function (d) {
  183. let field = "status";
  184. if (typeof d[field] == "undefined") return "";
  185. let items = [];
  186. layui.each((d[field] + "").split(","), function (k, v) {
  187. items.push(apiResults[field][v] || v);
  188. });
  189. return util.escape(items.join(","));
  190. }
  191. }, {
  192. width: 120,
  193. title: "姓名", align: "center",
  194. field: "name",
  195. sort: true,
  196. }, {
  197. width: 120,
  198. title: "手机号", align: "center",
  199. field: "mobile",
  200. sort: true,
  201. }, {
  202. width: 120,
  203. title: "地址", align: "center",
  204. field: "address",
  205. sort: true,
  206. }, {
  207. width: 170,
  208. title: "提交时间", align: "center",
  209. field: "created_at",
  210. sort: true,
  211. }
  212. ];
  213. // 渲染表格
  214. table.render({
  215. elem: "#data-table",
  216. url: SELECT_API,
  217. page: true,
  218. cols: [cols],
  219. skin: "line",
  220. size: "lg",
  221. where: {
  222. type: $('input[name=type]').val()
  223. },
  224. toolbar: "#table-toolbar",
  225. autoSort: false,
  226. defaultToolbar: [{
  227. title: "刷新",
  228. layEvent: "refresh",
  229. icon: "layui-icon-refresh",
  230. }, "filter", "print", "exports"],
  231. done: function () {
  232. layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
  233. }
  234. });
  235. element.on('tab(demo)', function (elem) {
  236. $('input[name=type]').val($(this).attr('lay-id'))
  237. table.reload("data-table", {
  238. where: {
  239. type: $('input[name=type]').val()
  240. },
  241. })
  242. });
  243. // 获取表格中下拉或树形组件数据
  244. let apiResults = {};//[{value:1,name:'待审核'},{value:2,name:'审核通过'},{value:3,name:'驳回'}],
  245. apiResults["status"] = {1: "待审核", 2: "审核通过", 3: "发货中", 4: "驳回"};
  246. // 编辑或删除行事件
  247. table.on("tool(data-table)", function (obj) {
  248. if (obj.event === "remove") {
  249. remove(obj);
  250. } else if (obj.event === "edit") {
  251. edit(obj);
  252. }
  253. });
  254. // 表格顶部工具栏事件
  255. table.on("toolbar(data-table)", function (obj) {
  256. if (obj.event === "refresh") {
  257. refreshTable();
  258. } else if (obj.event === "reject") {
  259. reject(obj);
  260. } else if (obj.event === "pass") {
  261. pass(obj);
  262. }else if (obj.event === "release") {
  263. release(obj);
  264. }
  265. });
  266. // 表格顶部搜索事件
  267. form.on("submit(table-query)", function (data) {
  268. table.reload("data-table", {
  269. page: {
  270. curr: 1
  271. },
  272. where: data.field
  273. })
  274. return false;
  275. });
  276. // 表格顶部搜索重置事件
  277. form.on("submit(table-reset)", function (data) {
  278. table.reload("data-table", {
  279. where: {
  280. type: $('input[name=type]').val()
  281. },
  282. })
  283. });
  284. // 表格排序事件
  285. table.on("sort(data-table)", function (obj) {
  286. table.reload("data-table", {
  287. initSort: obj,
  288. scrollPos: "fixed",
  289. where: {
  290. field: obj.field,
  291. order: obj.type,
  292. type: $('input[name=type]').val()
  293. }
  294. });
  295. });
  296. // 删除多行
  297. let pass = function (obj) {
  298. // 创建弹框,设置类型为密码输入
  299. let checkIds = common.checkField(obj, PRIMARY_KEY);
  300. if (checkIds === "") {
  301. layui.popup.warning("未选中数据");
  302. return false;
  303. }
  304. let data = {};
  305. data[PRIMARY_KEY] = checkIds.split(",");
  306. layer.confirm("确认审核通过吗?", {
  307. icon: 3,
  308. title: "提示"
  309. }, function (index) {
  310. layer.close(index);
  311. let loading = layer.load();
  312. $.ajax({
  313. url: PASS_API,
  314. data: data,
  315. dataType: "json",
  316. type: "post",
  317. success: function (res) {
  318. layer.close(loading);
  319. if (res.code == 0) {
  320. return layui.popup.success("操作成功", refreshTable);
  321. }
  322. return layui.popup.failure(res.msg);
  323. }
  324. })
  325. });
  326. }
  327. let release = function (obj) {
  328. // 创建弹框,设置类型为密码输入
  329. let checkIds = common.checkField(obj, PRIMARY_KEY);
  330. if (checkIds === "") {
  331. layui.popup.warning("未选中数据");
  332. return false;
  333. }
  334. let data = {};
  335. data[PRIMARY_KEY] = checkIds.split(",");
  336. layer.confirm("确认发布吗?", {
  337. icon: 3,
  338. title: "提示"
  339. }, function (index) {
  340. layer.close(index);
  341. let loading = layer.load();
  342. $.ajax({
  343. url: RELEASE_API,
  344. data: data,
  345. dataType: "json",
  346. type: "post",
  347. success: function (res) {
  348. layer.close(loading);
  349. if (res.code == 0) {
  350. return layui.popup.success("操作成功", refreshTable);
  351. }
  352. return layui.popup.failure(res.msg);
  353. }
  354. })
  355. });
  356. }
  357. let reject = function (obj) {
  358. let checkIds = common.checkField(obj, PRIMARY_KEY);
  359. if (checkIds === "") {
  360. layui.popup.warning("未选中数据");
  361. return false;
  362. }
  363. let data = {};
  364. data[PRIMARY_KEY] = checkIds.split(",");
  365. layer.confirm("确认驳回吗?", {
  366. icon: 3,
  367. title: "提示"
  368. }, function (index) {
  369. layer.close(index);
  370. let loading = layer.load();
  371. $.ajax({
  372. url: REJECT_API,
  373. data: data,
  374. dataType: "json",
  375. type: "post",
  376. success: function (res) {
  377. layer.close(loading);
  378. if (res.code == 0) {
  379. return layui.popup.success("操作成功", refreshTable);
  380. }
  381. return layui.popup.failure(res.msg);
  382. }
  383. })
  384. });
  385. }
  386. // 执行删除
  387. // 刷新表格数据
  388. window.refreshTable = function (param) {
  389. table.reloadData("data-table", {
  390. scrollPos: "fixed"
  391. });
  392. }
  393. })
  394. </script>
  395. </body>
  396. </html>