index.js 7.5 KB

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