index.js 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  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() {
  119. var _this = this;
  120. //时间选择开始时间
  121. var startTimeForm = laydate.render({
  122. elem: _this.startTime || '',
  123. type: 'date',
  124. max: new Date().toLocaleDateString(),
  125. done: function(value, date) {
  126. date.month--;
  127. endTimeForm.config.min = date;
  128. if (new Date(date.year + _this.config.dateTime.year + '-' + date.month + '-' + date.date).valueOf() < new Date()
  129. .valueOf()) {
  130. endTimeForm.config.max = {
  131. year: date.year + _this.config.dateTime.year,
  132. month: date.month,
  133. date: date.date + _this.config.dateTime.day
  134. };
  135. } else {
  136. endTimeForm.config.max = {
  137. year: new Date().getFullYear(),
  138. month: new Date().getMonth(),
  139. date: new Date().getDate()
  140. };
  141. }
  142. }
  143. });
  144. //时间选择结束时间
  145. var endTimeForm = laydate.render({
  146. elem: _this.endTime || "",
  147. type: 'date',
  148. max: new Date().toLocaleDateString(),
  149. done: function(value, date) {
  150. date.month--;
  151. startTimeForm.config.max = date;
  152. startTimeForm.config.min = {
  153. year: date.year - _this.config.dateTime.year,
  154. month: date.month,
  155. date: date.date - _this.config.dateTime.day
  156. };
  157. }
  158. });
  159. };
  160. //jquer事件绑定
  161. vm.prototype.$event = function() {
  162. var _this = this;
  163. $(_this.dataExportBtn).on("click", function(e) {
  164. _this.dataExport();
  165. });
  166. };
  167. //数据导出处理函数
  168. vm.prototype.dataExport = function() {
  169. var _this = this;
  170. _this.downloadParameter = '?';
  171. for (var i in _this.dataListObj.config.where) {
  172. _this.downloadParameter += "&" + i + '=' + _this.dataListObj.config.where[i];
  173. }
  174. _this.startDownload();
  175. };
  176. //启动下载
  177. vm.prototype.startDownload = function() {
  178. var _this = this;
  179. window.open(window.hywa.config.href + window.hywa.config.port[_this.dataDownload] + _this.downloadParameter);
  180. };
  181. //模板引擎
  182. function typeTpl(obj) {
  183. laytpl(selectTpl.innerHTML).render(obj, function(html) {
  184. $(obj.elem).html(html);
  185. form.render();
  186. });
  187. }
  188. // 表格列表
  189. let tableId = "tableData";
  190. var tableVm = new vm({
  191. dataId: 'tableData',
  192. elem: '#tableData',
  193. url: 'riderTableUrl',
  194. toolbar: '#toolbar',
  195. page: true,
  196. cols: [
  197. [{
  198. field: 'name',
  199. title: '骑手姓名'
  200. }, {
  201. field: 'phone',
  202. title: '联系手机号',
  203. align: 'center'
  204. }, {
  205. field: 'status',
  206. title: '状态',
  207. align: 'center',
  208. templet: '#riderStatus'
  209. }, {
  210. field: 'isUserble',
  211. title: '是否可用',
  212. align: 'center',
  213. sort: true,
  214. templet: '<div>{{# d.checked = ((d.available == 1)? "checked" : ""); }}<input type="checkbox" id="{{d.id}}" value="{{d.available}}" lay-skin="switch" lay-text="是|否" lay-filter="available" {{d.checked}}></div>',
  215. width: 100
  216. }, {
  217. field: 'operating',
  218. title: '操作',
  219. toolbar: "#operatingTool",
  220. align: 'center',
  221. fixed: 'right',
  222. width: 150
  223. }]
  224. ],
  225. done: function() {
  226. if (!layui.data('auth').data.add) {
  227. $('.add-btn').hide();
  228. }
  229. }
  230. });
  231. //初始化事件监听
  232. tableVm.formEvent = ['tableSearch'];
  233. tableVm.eventMonitor();
  234. tableVm.$event();
  235. tableVm.startTime = '#startDate'; //开始时间容器
  236. tableVm.endTime = '#endDate'; //结束时间容器
  237. tableVm.showTimeSelect();
  238. //监听头部工具栏
  239. table.on('toolbar(' + tableId + ')', function(obj) {
  240. switch (obj.event) {
  241. case 'add':
  242. layer.open({
  243. type: 2,
  244. title: "新增",
  245. area: ['600px', '350px'],
  246. maxmin: true,
  247. content: 'add_change.html',
  248. btn: ['确认', '取消'],
  249. yes: function(index, layero) {
  250. var submit = layero.find('iframe').contents().find("#formSubmit");
  251. submit.click();
  252. },
  253. });
  254. break;
  255. };
  256. });
  257. //可用性修改
  258. form.on('switch(available)', function(data) {
  259. var field = {
  260. id: data.elem.id,
  261. available: data.value == 0 ? 1 : 0,
  262. }
  263. $.ajax({
  264. type: 'PUT',
  265. url: 'riderStatusUrl?id=' + field.id + '&available=' + field.available,
  266. // data: JSON.stringify(field),
  267. contentType: 'application/json',
  268. success: function(res) {
  269. if (!(res.code - 0)) {
  270. layer.msg(res.msg, {
  271. icon: 1
  272. });
  273. tableVm.reload();
  274. } else {
  275. data.elem.checked = !data.elem.checked;
  276. form.render();
  277. }
  278. }
  279. });
  280. });
  281. //工具条处理
  282. function toolOperating(name, obj) {
  283. if (obj.event === 'del') { //删除
  284. layer.confirm('真的删除吗?', function(index) {
  285. layer.close(index);
  286. var index = layer.msg('删除中,请稍候', {
  287. icon: 16,
  288. time: false,
  289. shade: 0.8
  290. });
  291. $.ajax({
  292. type: 'delete',
  293. url: 'riderDelUrl?id=' + obj.data.id,
  294. success: function(res) {
  295. if (!(res.code - 0)) {
  296. obj.del();
  297. layer.close(index);
  298. layer.msg(res.msg, {
  299. icon: 1
  300. });
  301. table.reload(name);
  302. } else {
  303. layer.msg(res.msg, {
  304. icon: 2
  305. });
  306. }
  307. }
  308. });
  309. });
  310. } else if (obj.event === 'edit') { //修改
  311. layer.open({
  312. type: 2,
  313. title: "修改",
  314. area: ['600px', '350px'],
  315. maxmin: true,
  316. content: 'add_change.html?id=' + obj.data.id + '&name=' + obj.data.name + '&phone=' + obj.data.phone,
  317. btn: ['确认', '取消'],
  318. yes: function(index, layero) {
  319. var submit = layero.find('iframe').contents().find("#formSubmit");
  320. submit.click();
  321. },
  322. });
  323. }
  324. }
  325. //监听事件条
  326. table.on('tool(' + tableId + ')', function(obj) {
  327. toolOperating(tableId, obj);
  328. });
  329. });