index.html 16 KB

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