category.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. $(function () {
  2. initialPage();
  3. getGrid();
  4. });
  5. let cacheData = {
  6. }
  7. function initialPage() {
  8. $(window).resize(function () {
  9. TreeGrid.table.resetHeight({height: $(window).height() - 100});
  10. });
  11. }
  12. function getGrid() {
  13. var colunms = TreeGrid.initColumn();
  14. var table = new TreeTable(TreeGrid.id, '../category/queryAll', colunms);
  15. table.setExpandColumn(2);
  16. table.setIdField("id");
  17. table.setCodeField("id");
  18. table.setParentCodeField("parentId");
  19. table.setExpandAll(false);
  20. table.setHeight($(window).height() - 100);
  21. table.init();
  22. TreeGrid.table = table;
  23. }
  24. var TreeGrid = {
  25. id: "jqGrid",
  26. table: null,
  27. layerIndex: -1
  28. };
  29. /**
  30. * 初始化表格的列
  31. */
  32. TreeGrid.initColumn = function () {
  33. var columns = [
  34. {field: 'selectItem', radio: true,width: '10px'},
  35. // {title: 'id', field: 'id', align: 'id', width: '50px'},
  36. {title: '级别', field: 'level', align: 'center', valign: 'middle', width: '300px'},
  37. {title: '分类名称', field: 'name', align: 'center', valign: 'middle', width: '600px'},
  38. // {title: '描述', field: 'frontDesc', align: 'center', valign: 'middle', width: '150px'},
  39. // {title: '首页展示', field: 'showIndex', align: 'center', valign: 'middle', width: '50px'},
  40. {
  41. title: '显示',
  42. field: 'isShow',
  43. align: 'center',
  44. valign: 'middle',
  45. width: '50px',
  46. formatter: function (item, index,row) {
  47. cacheData[item.id] = item
  48. return transIsNot(item.show)
  49. }
  50. },
  51. // {title: '类型', field: 'type', align: 'center', valign: 'middle', width: '50px'},
  52. ]
  53. return columns;
  54. };
  55. var vm = new Vue({
  56. el: '#rrapp',
  57. data: {
  58. showList: true,
  59. title: null,
  60. category: {isShow: 1, type: 0, level: 'L1', bannerUrl: '', iconUrl: '', imgUrl: '', wapBannerUrl: ''},
  61. ruleValidate: {
  62. name: [
  63. {required: true, message: '分类名称不能为空', trigger: 'blur'}
  64. ],
  65. wapBannerUrl: [
  66. {required: true, message: '分类图片不能为空'}
  67. ]
  68. },
  69. q: {
  70. name: ''
  71. },
  72. categoryList: []
  73. },
  74. watch:{
  75. 'category.level':function (newVal) {
  76. let temp = []
  77. vm.categoryList.forEach(function(item){
  78. if (vm.category.name!==item.name) {
  79. temp.push(item)
  80. }
  81. })
  82. vm.categoryList = temp
  83. }
  84. },
  85. methods: {
  86. query: function () {
  87. vm.reload();
  88. },
  89. add: function () {
  90. vm.showList = false;
  91. vm.title = "新增";
  92. vm.category = {isShow: 1, type: 0, level: 'L1', bannerUrl: '', iconUrl: '', imgUrl: '', wapBannerUrl: ''};
  93. this.getParentCategory();
  94. },
  95. update: function (event) {
  96. var id = TreeGrid.table.getSelectedRow();
  97. if (id.length == 0) {
  98. alert("请选择一条记录");
  99. return;
  100. }
  101. vm.showList = false;
  102. vm.title = "修改";
  103. vm.getInfo(id[0].id);
  104. this.getParentCategory();
  105. },
  106. getParentCategory: function () {
  107. Ajax.request({
  108. url: "../category/getCategorySelect",
  109. async: true,
  110. successCallback: function (r) {
  111. vm.categoryList = r.list;
  112. }
  113. });
  114. },
  115. saveOrUpdate: function (event) {
  116. var url = vm.category.id == null ? "../category/save" : "../category/update";
  117. Ajax.request({
  118. type: "POST",
  119. url: url,
  120. contentType: "application/json",
  121. params: JSON.stringify(vm.category),
  122. successCallback: function (r) {
  123. alert('操作成功', function (index) {
  124. vm.reload();
  125. });
  126. }
  127. });
  128. },
  129. del: function (event) {
  130. var id = TreeGrid.table.getSelectedRow(), ids = [];
  131. var msg = '确定要删除选中的记录?'
  132. if (id.length == 0) {
  133. alert("请选择一条记录");
  134. return;
  135. }
  136. $.each(id, function (idx, item) {
  137. ids[idx] = item.id;
  138. console.log(cacheData[item.id])
  139. if (cacheData[item.id].level === 'L1') {
  140. msg = '确定要删除选中的记录及其以下的子分类?'
  141. }
  142. });
  143. confirm(msg, function () {
  144. Ajax.request({
  145. type: "POST",
  146. url: "../category/delete",
  147. contentType: "application/json",
  148. params: JSON.stringify(ids),
  149. successCallback: function (r) {
  150. alert('操作成功', function (index) {
  151. vm.reload();
  152. });
  153. }
  154. });
  155. });
  156. },
  157. getInfo: function (id) {
  158. Ajax.request({
  159. url: "../category/info/" + id,
  160. async: true,
  161. successCallback: function (r) {
  162. vm.category = r.category;
  163. }
  164. });
  165. },
  166. reload: function (event) {
  167. vm.showList = true;
  168. TreeGrid.table.refresh();
  169. },
  170. handleSubmit: function (name) {
  171. handleSubmitValidate(this, name, function () {
  172. if (vm.category.level === 'L2' && !vm.category.parentId) {
  173. alert('请先选择父节点')
  174. return
  175. }
  176. vm.saveOrUpdate()
  177. });
  178. },
  179. handleReset: function (name) {
  180. handleResetForm(this, name);
  181. },
  182. handleFormatError: function (file) {
  183. this.$Notice.warning({
  184. title: '文件格式不正确',
  185. desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
  186. });
  187. },
  188. handleMaxSize: function (file) {
  189. this.$Notice.warning({
  190. title: '超出文件大小限制',
  191. desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
  192. });
  193. },
  194. handleSuccessBannerUrl: function (res, file) {
  195. vm.category.bannerUrl = file.response.url;
  196. },
  197. eyeImageBannerUrl: function () {
  198. var url = vm.category.bannerUrl;
  199. eyeImage(url);
  200. },
  201. handleSuccessIconUrl: function (res, file) {
  202. vm.category.iconUrl = file.response.url;
  203. },
  204. eyeImageIconUrl: function () {
  205. var url = vm.category.iconUrl;
  206. eyeImage(url);
  207. },
  208. handleSuccessImgUrl: function (res, file) {
  209. vm.category.imgUrl = file.response.url;
  210. },
  211. eyeImageImgUrl: function () {
  212. var url = vm.category.imgUrl;
  213. eyeImage(url);
  214. },
  215. handleSuccessWapBannerUrl: function (res, file) {
  216. vm.category.wapBannerUrl = file.response.url;
  217. },
  218. eyeImageWapBannerUrl: function () {
  219. var url = vm.category.wapBannerUrl;
  220. eyeImage(url);
  221. }
  222. }
  223. });