goods.spec.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. (function () {
  2. // 配置信息
  3. var setting = {
  4. el: 'many-app',
  5. baseData: null,
  6. isSpecLocked: false,
  7. batchData: {
  8. goods_no: '',
  9. goods_price: '',
  10. sharing_price: '',
  11. line_price: '',
  12. stock_num: '',
  13. goods_weight: ''
  14. }
  15. };
  16. /**
  17. * 构造方法
  18. * @param options
  19. * @param baseData
  20. * @constructor
  21. */
  22. function GoodsSpec(options, baseData) {
  23. // 配置信息
  24. setting = $.extend(true, {}, setting, options);
  25. // 初始化
  26. this.initialize();
  27. }
  28. GoodsSpec.prototype = {
  29. // vue组件句柄
  30. appVue: null,
  31. /**
  32. * 初始化
  33. */
  34. initialize: function () {
  35. // 已存在的规格数据
  36. var spec_attr = [], spec_list = [];
  37. if (typeof setting.baseData !== 'undefined' && setting.baseData !== null) {
  38. spec_attr = setting.baseData['spec_attr'];
  39. spec_list = setting.baseData['spec_list'];
  40. }
  41. // 实例化vue对象
  42. this.appVue = new Vue({
  43. el: setting.el,
  44. data: {
  45. spec_attr: spec_attr,
  46. spec_list: spec_list,
  47. // 显示添加规格组按钮
  48. showAddGroupBtn: true,
  49. // 显示添加规格组表单
  50. showAddGroupForm: false,
  51. // 新增规格组值
  52. addGroupFrom: {
  53. specName: '',
  54. specValue: ''
  55. },
  56. // 当前规格属性是否锁定
  57. isSpecLocked: setting.isSpecLocked,
  58. // 批量设置sku属性
  59. batchData: setting.batchData
  60. },
  61. methods: {
  62. /**
  63. * 显示/隐藏添加规则组
  64. */
  65. onToggleAddGroupForm: function () {
  66. this.showAddGroupBtn = !this.showAddGroupBtn;
  67. this.showAddGroupForm = !this.showAddGroupForm;
  68. },
  69. /**
  70. * 表单提交:新增规格组
  71. * @returns {boolean}
  72. */
  73. onSubmitAddGroup: function () {
  74. var _this = this;
  75. if (_this.addGroupFrom.specName === '' || _this.addGroupFrom.specValue === '') {
  76. layer.msg('请填写规则名或规则值');
  77. return false;
  78. }
  79. // 添加到数据库
  80. var load = layer.load();
  81. $.post(STORE_URL + '/goods.spec/addSpec', {
  82. spec_name: _this.addGroupFrom.specName,
  83. spec_value: _this.addGroupFrom.specValue
  84. }, function (result) {
  85. layer.close(load);
  86. if (result.code !== 1) {
  87. layer.msg(result.msg);
  88. return false;
  89. }
  90. // 记录规格数据
  91. _this.spec_attr.push({
  92. group_id: result.data['spec_id'],
  93. group_name: _this.addGroupFrom.specName,
  94. spec_items: [{
  95. item_id: result.data['spec_value_id'],
  96. spec_value: _this.addGroupFrom.specValue
  97. }],
  98. tempValue: ''
  99. });
  100. // 清空输入内容
  101. _this.addGroupFrom.specName = '';
  102. _this.addGroupFrom.specValue = '';
  103. // 隐藏添加规则组
  104. _this.onToggleAddGroupForm();
  105. // 构建规格组合列表
  106. _this.buildSkulist();
  107. });
  108. },
  109. /**
  110. * 新增规格值
  111. * @param index
  112. */
  113. onSubmitAddValue: function (index) {
  114. var _this = this
  115. , specAttr = _this.spec_attr[index];
  116. if (!specAttr.hasOwnProperty('tempValue') || specAttr.tempValue === '') {
  117. layer.msg('规格值不能为空');
  118. return false;
  119. }
  120. // 添加到数据库
  121. var load = layer.load();
  122. $.post(STORE_URL + '/goods.spec/addSpecValue', {
  123. spec_id: specAttr.group_id,
  124. spec_value: specAttr.tempValue
  125. }, function (result) {
  126. layer.close(load);
  127. if (result.code !== 1) {
  128. layer.msg(result.msg);
  129. return false;
  130. }
  131. // 记录规格数据
  132. specAttr.spec_items.push({
  133. item_id: result.data['spec_value_id'],
  134. spec_value: specAttr.tempValue
  135. });
  136. // 清空输入内容
  137. specAttr.tempValue = '';
  138. // 构建规格组合列表
  139. _this.buildSkulist();
  140. });
  141. },
  142. /**
  143. * 构建规格组合列表
  144. */
  145. buildSkulist: function () {
  146. var _this = this;
  147. // 规格组合总数 (table行数)
  148. var totalRow = 1;
  149. for (var i = 0; i < _this.spec_attr.length; i++) {
  150. totalRow *= _this.spec_attr[i].spec_items.length;
  151. }
  152. // 遍历tr 行
  153. var specList = [];
  154. for (i = 0; i < totalRow; i++) {
  155. var rowData = [], rowCount = 1, specSkuIdAttr = [];
  156. // 遍历td 列
  157. for (var j = 0; j < _this.spec_attr.length; j++) {
  158. var skuValues = _this.spec_attr[j].spec_items;
  159. rowCount *= skuValues.length;
  160. var anInterBankNum = (totalRow / rowCount)
  161. , point = ((i / anInterBankNum) % skuValues.length);
  162. if (0 === (i % anInterBankNum)) {
  163. rowData.push({
  164. rowspan: anInterBankNum,
  165. item_id: skuValues[point].item_id,
  166. spec_value: skuValues[point].spec_value
  167. });
  168. }
  169. specSkuIdAttr.push(skuValues[parseInt(point.toString())].item_id);
  170. }
  171. specList.push({
  172. spec_sku_id: specSkuIdAttr.join('_'),
  173. rows: rowData,
  174. form: {}
  175. });
  176. }
  177. // return false;
  178. // 合并旧sku数据
  179. if (_this.spec_list.length > 0 && specList.length > 0) {
  180. for (i = 0; i < specList.length; i++) {
  181. var overlap = _this.spec_list.filter(function (val) {
  182. return val.spec_sku_id === specList[i].spec_sku_id;
  183. });
  184. if (overlap.length > 0) specList[i].form = overlap[0].form;
  185. }
  186. }
  187. _this.spec_list = specList;
  188. // 注册上传sku图片事件
  189. _this.onSelectImagesEvent();
  190. },
  191. /**
  192. * 删除规则组事件
  193. * @param index
  194. */
  195. onDeleteGroup: function (index) {
  196. var _this = this;
  197. layer.confirm('确定要删除该规则吗?确认后不可恢复请谨慎操作'
  198. , function (layerIndex) {
  199. // 删除指定规则组
  200. _this.spec_attr.splice(index, 1);
  201. // 构建规格组合列表
  202. _this.buildSkulist();
  203. layer.close(layerIndex);
  204. });
  205. },
  206. /**
  207. * 删除规则值事件
  208. * @param index
  209. * @param itemIndex
  210. */
  211. onDeleteValue: function (index, itemIndex) {
  212. var _this = this;
  213. layer.confirm('确定要删除该规则吗?确认后不可恢复请谨慎操作'
  214. , function (layerIndex) {
  215. // 删除指定规则组
  216. _this.spec_attr[index].spec_items.splice(itemIndex, 1);
  217. // 构建规格组合列表
  218. _this.buildSkulist();
  219. layer.close(layerIndex);
  220. });
  221. },
  222. /**
  223. * 批量设置sku属性
  224. */
  225. onSubmitBatchData: function () {
  226. var _this = this;
  227. _this.spec_list.forEach(function (value) {
  228. for (var key in _this.batchData) {
  229. if (_this.batchData.hasOwnProperty(key) && _this.batchData[key]) {
  230. _this.$set(value.form, key, _this.batchData[key]);
  231. }
  232. }
  233. });
  234. },
  235. /**
  236. * 注册上传sku图片事件
  237. */
  238. onSelectImagesEvent: function () {
  239. var _this = this;
  240. // 注册上传sku图片
  241. _this.$nextTick(function () {
  242. $(_this.$el).find('.j-selectImg').selectImages({
  243. done: function (data, $addon) {
  244. var index = $addon.data('index');
  245. _this.$set(_this.spec_list[index].form, 'image_id', data[0]['file_id']);
  246. _this.$set(_this.spec_list[index].form, 'image_path', data[0]['file_path']);
  247. }
  248. });
  249. });
  250. },
  251. /**
  252. * 删除sku图片
  253. */
  254. onDeleteSkuImage: function (index) {
  255. this.spec_list[index].form['image_id'] = 0;
  256. this.spec_list[index].form['image_path'] = '';
  257. },
  258. /**
  259. * 获取当前data
  260. */
  261. getData: function () {
  262. return this.$data;
  263. },
  264. /**
  265. * sku列表是否为空
  266. * @returns {boolean}
  267. */
  268. isEmptySkuList: function () {
  269. return !this.spec_list.length;
  270. }
  271. }
  272. });
  273. // 初始化生成sku列表
  274. spec_list.length > 0 && this.appVue.buildSkulist();
  275. }
  276. };
  277. window.GoodsSpec = GoodsSpec;
  278. })();