index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. ;
  2. layui.config({
  3. base: "../../../admin/js/layuiPlugins/"
  4. }).use(['form', 'layer', 'jquery', 'laypage', 'element', 'table', 'laydate', 'laytpl', 'cascade'], function() {
  5. var form = layui.form,
  6. layer = layui.layer,
  7. laytpl = layui.laytpl,
  8. laypage = layui.laypage,
  9. $ = layui.jquery,
  10. table = layui.table,
  11. element = layui.element,
  12. laydate = layui.laydate,
  13. cascade = layui.cascade;
  14. //自定义验证
  15. form.verify({
  16. namelength: [
  17. /^.{0,18}$/,
  18. "长度限制在0-18个字符噢"
  19. ]
  20. });
  21. //监听一级Tab切换
  22. element.on('tab(productTabBrief)', function(obj) {
  23. switch (obj.index) {
  24. case 0:
  25. tableVm.reload();
  26. break;
  27. }
  28. });
  29. var vm = function(obj) {
  30. var _this = this;
  31. _this.dataId = obj.dataId || 'dataListId'; //数据表ID
  32. _this.elem = obj.elem || 'dataListBox'; //数据表容器
  33. _this.toolbar = obj.toolbar || '';
  34. _this.url = obj.url || ''; //数据表接口URL
  35. _this.page = obj.page; //分页
  36. _this.limit = obj.limit;
  37. _this.cols = obj.cols || []; //表头
  38. _this.done = obj.done || ''; //表头
  39. _this.formObj = {}; //当前表单对象
  40. _this.searchParameter = {}; //搜索参数
  41. _this.config = {};
  42. _this.where = obj.where;
  43. _this.config.dateTime = obj.dateTime;
  44. _this.dateTime = {
  45. year: 365 * 1 * 24 * 3600 * 1000,
  46. month: 30 * 1 * 24 * 3600 * 1000,
  47. day: 24 * 3600 * 1000,
  48. }
  49. _this.main();
  50. };
  51. //入口函数
  52. vm.prototype.main = function() {
  53. var _this = this;
  54. _this.initializationData()
  55. };
  56. //初始化表格
  57. vm.prototype.initializationData = function() {
  58. var _this = this;
  59. _this.dataListObj = table.render({
  60. id: _this.dataId,
  61. elem: _this.elem,
  62. toolbar: _this.toolbar,
  63. defaultToolbar: ['filter'],
  64. url: _this.url,
  65. page: _this.page,
  66. cols: _this.cols,
  67. done: _this.done,
  68. where: $.extend(_this.where, _this.searchParameter),
  69. limit: _this.limit,
  70. });
  71. };
  72. //重新加载数据表
  73. vm.prototype.reload = function() {
  74. var _this = this;
  75. _this.dataListObj = table.reload(_this.dataId, { //执行重载数据表
  76. where: _this.searchParameter,
  77. page: {
  78. curr: 1
  79. }
  80. });
  81. };
  82. //初始化组件
  83. vm.prototype.initializationModule = function(obj) {
  84. var _this = this;
  85. $.ajax({
  86. url: obj.url,
  87. data: obj.data,
  88. success: function(res) {
  89. var html = '<option value="">' + obj.prompt + '</option>';
  90. for (var i in res.data) {
  91. html += '<option value="' + res.data[i].id + '">' + res.data[i].name +
  92. '</option>';
  93. }
  94. $(obj.elem).html(html);
  95. form.render();
  96. }
  97. });
  98. };
  99. //初始化事件监听
  100. vm.prototype.eventMonitor = function(id) {
  101. var _this = this;
  102. //监听搜索表单事件
  103. if (typeof(_this.formEvent) == "object") {
  104. form.on('submit(' + _this.formEvent + ')', function(obj) {
  105. _this.formInfoSearch(_this.formEvent, obj);
  106. return false;
  107. });
  108. }
  109. return _this;
  110. };
  111. //搜索处理函数
  112. vm.prototype.formInfoSearch = function(id, obj) {
  113. var _this = this;
  114. _this.searchParameter = obj.field;
  115. _this.reload();
  116. };
  117. //渲染时间选择器
  118. vm.prototype.showTimeSelect = function(obj) {
  119. laydate.render({
  120. elem: obj.elem,
  121. type: "month",
  122. value: ((new Date().getMonth() + 1) < 10) ? new Date().getFullYear() + '-0' + (new Date().getMonth() + 1) : new Date()
  123. .getFullYear() + '-' + (new Date().getMonth() + 1)
  124. });
  125. };
  126. //jquer事件绑定
  127. vm.prototype.$event = function() {
  128. var _this = this;
  129. $(_this.dataExportBtn).on("click", function(e) {
  130. _this.dataExport();
  131. });
  132. };
  133. //数据导出处理函数
  134. vm.prototype.dataExport = function() {
  135. var _this = this;
  136. _this.downloadParameter = '?';
  137. for (var i in _this.dataListObj.config.where) {
  138. _this.downloadParameter += "&" + i + '=' + _this.dataListObj.config.where[i];
  139. }
  140. _this.startDownload();
  141. };
  142. //启动下载
  143. vm.prototype.startDownload = function() {
  144. var _this = this;
  145. window.open(window.hywa.config.href + window.hywa.config.port[_this.dataDownload] + _this.downloadParameter);
  146. };
  147. //模板引擎
  148. function typeTpl(obj) {
  149. laytpl(selectTpl.innerHTML).render(obj, function(html) {
  150. $(obj.elem).html(html);
  151. form.render();
  152. });
  153. }
  154. // 表格列表
  155. let tableId = "tableData";
  156. var tableVm = new vm({
  157. dataId: 'tableData',
  158. elem: '#tableData',
  159. url: 'shopTableUrl',
  160. toolbar: '#toolbar',
  161. page: true,
  162. cols: [
  163. [{
  164. field: 'name',
  165. title: '店铺名称'
  166. },
  167. {
  168. field: 'contact',
  169. title: '店铺联系人',
  170. align: 'center'
  171. },
  172. {
  173. field: 'phone',
  174. title: '绑定手机号',
  175. align: 'center'
  176. }, {
  177. field: 'businessAddress',
  178. title: '经营地址',
  179. align: 'center'
  180. }, {
  181. field: 'available',
  182. title: '是否可用',
  183. align: 'center',
  184. templet: '<div>{{# d.checked = ((d.available == 0)? "checked" : ""); }}<input type="checkbox" id="{{d.id}}" value="{{d.available}}" lay-skin="switch" lay-text="是|否" lay-filter="available" {{d.checked}}></div>',
  185. width: 100
  186. }, {
  187. field: 'operating',
  188. title: '操作',
  189. toolbar: "#operatingTool",
  190. align: 'center',
  191. fixed: 'right',
  192. width: 80
  193. }]
  194. ] //设置表头
  195. });
  196. //初始化事件监听
  197. tableVm.formEvent = ['tableSearch'];
  198. tableVm.eventMonitor();
  199. tableVm.$event();
  200. //可用性修改
  201. form.on('switch(available)', function(data) {
  202. var field = {
  203. id: data.elem.id,
  204. isAvailable: data.value == 0 ? 1 : 0,
  205. }
  206. $.ajax({
  207. type: 'put',
  208. url: 'shopStatusUrl',
  209. contentType: 'application/json',
  210. data: JSON.stringify(field),
  211. success: function(res) {
  212. if (!(res.code - 0)) {
  213. layer.msg(res.msg, {
  214. icon: 1
  215. });
  216. tableVm.reload();
  217. } else {
  218. data.elem.checked = !data.elem.checked;
  219. form.render();
  220. }
  221. }
  222. });
  223. });
  224. //工具条处理
  225. function toolOperating(name, obj) {
  226. if (obj.event === 'detail') {
  227. let index = layer.open({
  228. type: 2,
  229. title: "详情",
  230. area: ['1100px', '800px'],
  231. maxmin: true,
  232. content: 'detail.html?id=' + obj.data.id
  233. });
  234. }
  235. }
  236. //监听事件条
  237. table.on('tool(' + tableId + ')', function(obj) {
  238. toolOperating(tableId, obj);
  239. });
  240. });