goods.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  1. $(function () {
  2. $("#jqGrid").jqGrid({
  3. url: '../goods/list',
  4. datatype: "json",
  5. colModel: [
  6. {label: 'ID', name: 'id', index: 'id', hidden: true, key: true},
  7. {label: '商品编码', name: 'goodsSn', index: 'goods_Sn', width: 60},
  8. {label: 'SKU', name: 'sku', index: 'sku', width: 80},
  9. {label: '商品类型', name: 'categoryName', index: 'category_id', width: 40},
  10. {label: '名称', name: 'name', index: 'name', width: 160},
  11. {
  12. label: '货品业务类型', name: 'goodsBizType', index: 'goods_biz_type', width: 70,
  13. formatter: function (value) {
  14. if (value == '00') {
  15. return '保税备货';
  16. } else if (value == '02') {
  17. return '保税展示补货';
  18. } else if (value == '10') {
  19. return '保税展示跨境';
  20. }
  21. return '普通货物';
  22. }
  23. },
  24. {label: '零售价格', name: 'retailPrice', index: 'retail_price', width: 80},
  25. {label: '市场价', name: 'marketPrice', index: 'market_price', width: 80},
  26. {
  27. label: '上架', name: 'isOnSale', index: 'is_on_sale', width: 40, align: 'center',
  28. formatter: function (value) {
  29. return transIsNot(value);
  30. }
  31. },
  32. /*{
  33. label: '热销', name: 'isHot', index: 'is_hot', width: 80, formatter: function (value) {
  34. return transIsNot(value);
  35. }
  36. },
  37. {
  38. label: '活动', name: 'goodsType', index: 'goodsType', width: 80,
  39. formatter: function (value) {
  40. if (value == 2) {
  41. return '<span class="label label-warning">团购</span>';
  42. } else {
  43. return '<span class="label label-success">无活动</span>';
  44. }
  45. }
  46. },*/
  47. {
  48. label: '录入日期', name: 'addTime', index: 'add_time', width: 80,
  49. formatter: function (value) {
  50. return transDate(value, 'yyyy-MM-dd hh:mm:ss');
  51. }
  52. },
  53. {
  54. label: '操作', width: 60, align: 'center', sortable: false, formatter: function (value, col, row) {
  55. let htmlStr = '';
  56. if (row.goodsBizType == '02' || row.goodsBizType == '10') {
  57. htmlStr = '<button class="btn btn-outline btn-primary" onclick="vm.qrcodeCanvas(' + row.id + ')"><i class="fa fa-qrcode"></i>二维码</button>';
  58. }
  59. return htmlStr;
  60. }
  61. }
  62. ],
  63. viewrecords: true,
  64. height: 675,
  65. rowNum: 15,
  66. rowList: [15, 30, 50],
  67. rownumbers: true,
  68. rownumWidth: 25,
  69. autowidth: true,
  70. multiselect: true,
  71. pager: "#jqGridPager",
  72. jsonReader: {
  73. root: "page.list",
  74. page: "page.currPage",
  75. total: "page.totalPage",
  76. records: "page.totalCount"
  77. },
  78. prmNames: {
  79. page: "page",
  80. rows: "limit",
  81. order: "order"
  82. },
  83. gridComplete: function () {
  84. $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
  85. }
  86. });
  87. $('#goodsDesc').editable({
  88. inlineMode: false,
  89. alwaysBlank: true,
  90. height: '500px', //高度
  91. minHeight: '200px',
  92. language: "zh_cn",
  93. spellcheck: false,
  94. plainPaste: true,
  95. enableScript: false,
  96. imageButtons: ["floatImageLeft", "floatImageNone", "floatImageRight", "linkImage", "replaceImage", "removeImage"],
  97. allowedImageTypes: ["jpeg", "jpg", "png", "gif"],
  98. imageUploadURL: '../sys/oss/upload',
  99. imageUploadParams: {id: "edit"},
  100. imagesLoadURL: '../sys/oss/queryAll'
  101. })
  102. });
  103. var ztree;
  104. var setting = {
  105. data: {
  106. simpleData: {
  107. enable: true,
  108. idKey: "id",
  109. pIdKey: "parentId",
  110. rootPId: -1
  111. },
  112. key: {
  113. url: "nourl"
  114. }
  115. }
  116. };
  117. var vm = new Vue({
  118. el: '#rrapp',
  119. data: {
  120. showList: true,
  121. title: null,
  122. uploadList: [],
  123. imgName: '',
  124. visible: false,
  125. goods: {primaryPicUrl: '', listPicUrl: '', categoryId: '', isOnSale: 1, isAppExclusive: 0, isLimited: 0, isHot: 0, categoryName: '', retailPrice: '', marketPrice: '', goodsRate: '', sortOrder: '' },
  126. ruleValidate: {
  127. /*name: [
  128. {required: true, message: '名称不能为空', trigger: 'blur'}
  129. ]*/
  130. },
  131. q: {name: '', goodsSn: '', category: '', categoryTwo: ''},
  132. attributes: [],
  133. attributeEntityList: [{'id': '', 'goodsId': '', 'attributeId': '', 'value': '', 'isDelete': 0}],
  134. productEntityList: [{'id': '', 'goodsId': '', 'goodsSpecificationIds': '', 'goodsSpecificationNameValue': '', 'goodsSn': '', 'goodsNumber': '', 'isDelete': 0, 'goodsDefault': 0}],
  135. queryCategories: [],//一级分类
  136. queryCategoriesTwo: [],
  137. categories: [],//一级分类
  138. categoriesTwo: [],
  139. macros: [],//商品单位
  140. attributeCategories: [],//属性类别
  141. specifications: [],
  142. brands: [],
  143. freights: [],
  144. showInput: true
  145. },
  146. methods: {
  147. delSpeRow: function (index) {
  148. //最后一行时禁止删除
  149. if (vm.productEntityList.length == 1) {
  150. return;
  151. }
  152. vm.productEntityList[index].isDelete = 1;
  153. },
  154. addSpeRow: function () {
  155. let goodsId = '';
  156. if (vm.goods) {
  157. goodsId = vm.goods.id;
  158. }
  159. vm.productEntityList.push({'id': '', 'goodsId': '', 'goodsSpecificationIds': '', 'goodsSpecificationNameValue': '', 'goodsSn': '', 'goodsNumber': '', 'isDelete': 0, 'goodsDefault': 0});
  160. },
  161. delAttrRow: function (index) {
  162. //最后一行时禁止删除
  163. if (vm.attributeEntityList.length == 1) {
  164. return;
  165. }
  166. vm.attributeEntityList[index].isDelete = 1;
  167. },
  168. addAttrRow: function () {
  169. let goodsId = '';
  170. if (vm.goods) {
  171. goodsId = vm.goods.id;
  172. }
  173. vm.attributeEntityList.push({'id': '', 'goodsId': goodsId, 'attributeId': '', 'value': '', 'isDelete': 0});
  174. },
  175. reloadSearch: function () {
  176. vm.q = {
  177. name: '',
  178. goodsSn: '',
  179. category: '',
  180. categoryTwo: ''
  181. }
  182. },
  183. query: function () {
  184. vm.reload(1);
  185. },
  186. add: function () {
  187. vm.showList = false;
  188. vm.title = "新增";
  189. vm.uploadList = [];
  190. vm.goods = {primaryPicUrl: '', listPicUrl: '', categoryId: '', isOnSale: 1, isAppExclusive: 0, isLimited: 0, isHot: 0, categoryName: '', retailPrice: '', marketPrice: '', goodsRate: '', sortOrder: '' };
  191. $('#goodsDesc').editable('setHTML', '');
  192. vm.getCategory();
  193. vm.macros = [];
  194. vm.brands = [];
  195. vm.freights = [];
  196. vm.attributeEntityList = [{'id': '', 'goodsId': '', 'attributeId': '', 'value': '', 'isDelete': 0}];
  197. vm.attributeCategories = [];
  198. vm.getMacro();
  199. vm.getBrand();
  200. vm.getFreights();
  201. vm.getAttributeCategories();
  202. vm.getAttributes();
  203. vm.showInput = true;
  204. },
  205. update: function (event) {
  206. var id = getSelectedRow();
  207. if (id == null) {
  208. return;
  209. }
  210. vm.showList = false;
  211. vm.title = "修改";
  212. vm.uploadList = [];
  213. vm.getInfo(id);
  214. vm.getMacro();
  215. vm.getBrand();
  216. vm.getFreights();
  217. vm.getAttributeCategories();
  218. vm.getGoodsGallery(id);
  219. vm.getAttributes();
  220. vm.showInput = true;
  221. if (vm.goods.goodsBizType == '10' || vm.goods.goodsBizType == '02') {
  222. vm.showInput = false;
  223. }
  224. },
  225. getAttributes: function () {
  226. $.get("../attribute/queryAll", function (r) {
  227. vm.attributes = r.list;
  228. });
  229. },
  230. getMacro: function () {
  231. // 获取货品业务类型
  232. $.get("../sys/macro/queryMacrosByValue?value=goodsBizType", function (r) {
  233. vm.macros = r.list;
  234. });
  235. },
  236. getBrand: function () {
  237. // 获取货品业务类型
  238. $.get("../brand/queryAll", function (r) {
  239. vm.brands = r.list;
  240. });
  241. },
  242. getFreights: function() {
  243. $.get("../freight/queryAll", function (r) {
  244. vm.freights = r.list;
  245. });
  246. },
  247. getGoodsGallery: function (id) {//获取商品顶部轮播图
  248. $.get("../goodsgallery/queryAll?goodsId=" + id, function (r) {
  249. vm.uploadList = r.list;
  250. });
  251. },
  252. getAttributeCategories: function () {
  253. $.get("../attributecategory/queryAll", function (r) {
  254. vm.attributeCategories = r.list;
  255. });
  256. },
  257. saveOrUpdate: function (event) {
  258. var url = vm.goods.id == null ? "../goods/save" : "../goods/update";
  259. vm.goods.goodsDesc = $('#goodsDesc').editable('getHTML');
  260. vm.goods.goodsImgList = vm.uploadList;
  261. vm.goods.attributeEntityList = vm.attributeEntityList;
  262. vm.goods.productEntityList = vm.productEntityList;
  263. $.ajax({
  264. type: "POST",
  265. url: url,
  266. dataType: "json",
  267. contentType: "application/json",
  268. data: JSON.stringify(vm.goods),
  269. success: function (r) {
  270. if (r.code === 0) {
  271. alert('操作成功', function (index) {
  272. vm.reload();
  273. });
  274. } else {
  275. alert(r.msg);
  276. }
  277. }
  278. });
  279. },
  280. enSale: function () {
  281. var ids = getSelectedRows();
  282. if (ids == null) {
  283. return;
  284. }
  285. confirm('确定要上架选中的商品?', function () {
  286. $.ajax({
  287. type: "POST",
  288. url: "../goods/enSaleBatch",
  289. contentType: "application/json",
  290. data: JSON.stringify(ids),
  291. success: function (r) {
  292. if (r.code == 0) {
  293. alert('操作成功', function (index) {
  294. $("#jqGrid").trigger("reloadGrid");
  295. });
  296. } else {
  297. alert(r.msg);
  298. }
  299. }
  300. });
  301. });
  302. },
  303. openSpe: function () {
  304. var id = getSelectedRow();
  305. if (id == null) {
  306. return;
  307. }
  308. openWindow({
  309. type: 2,
  310. title: '商品规格',
  311. content: '../shop/goodsspecification.html?goodsId=' + id
  312. })
  313. },
  314. openPro: function () {
  315. var id = getSelectedRow();
  316. if (id == null) {
  317. return;
  318. }
  319. openWindow({
  320. type: 2,
  321. title: '产品设置',
  322. content: '../shop/product.html?goodsId=' + id
  323. });
  324. },
  325. unSale: function () {
  326. var ids = getSelectedRows();
  327. if (ids == null) {
  328. return;
  329. }
  330. confirm('确定要下架选中的商品?', function () {
  331. $.ajax({
  332. type: "POST",
  333. url: "../goods/unSaleBatch",
  334. contentType: "application/json",
  335. data: JSON.stringify(ids),
  336. success: function (r) {
  337. if (r.code == 0) {
  338. alert('操作成功', function (index) {
  339. $("#jqGrid").trigger("reloadGrid");
  340. });
  341. } else {
  342. alert(r.msg);
  343. }
  344. }
  345. });
  346. });
  347. },
  348. del: function (event) {
  349. var ids = getSelectedRows();
  350. if (ids == null) {
  351. return;
  352. }
  353. confirm('确定要删除选中的记录?', function () {
  354. $.ajax({
  355. type: "POST",
  356. url: "../goods/delete",
  357. contentType: "application/json",
  358. data: JSON.stringify(ids),
  359. success: function (r) {
  360. if (r.code == 0) {
  361. alert('操作成功', function (index) {
  362. $("#jqGrid").trigger("reloadGrid");
  363. });
  364. } else {
  365. alert(r.msg);
  366. }
  367. }
  368. });
  369. });
  370. },
  371. getInfo: function (id) {
  372. $.get("../goods/info/" + id, function (r) {
  373. vm.goods = r.goods;
  374. // vm.getCategory();
  375. var opt = {}; opt.value = vm.goods.attributeCategory;
  376. vm.changeCategories(opt);
  377. if (r.goods.attributeEntityList.length > 0) {
  378. vm.attributeEntityList = r.goods.attributeEntityList;
  379. } else {
  380. vm.attributeEntityList = [{'id': '', 'goodsId': '', 'attributeId': '', 'value': '', 'isDelete': 0}];
  381. }
  382. if (r.goods.productEntityList.length > 0) {
  383. vm.productEntityList = r.goods.productEntityList;
  384. } else {
  385. vm.productEntityList = [{'id': '', 'goodsId': '', 'goodsSpecificationIds': '', 'goodsSpecificationNameValue': '', 'goodsSn': '', 'goodsNumber': '', 'isDelete': 0, 'goodsDefault': 0}];
  386. }
  387. $('#goodsDesc').editable('setHTML', vm.goods.goodsDesc);
  388. });
  389. },
  390. reload: function (event) {
  391. vm.showList = true;
  392. let page = event;
  393. if (event != 1) {
  394. page = $("#jqGrid").jqGrid('getGridParam', 'page');
  395. }
  396. $("#jqGrid").jqGrid('setGridParam', {
  397. postData: {
  398. 'name': vm.q.name,
  399. 'goodsSn': vm.q.goodsSn,
  400. 'category': vm.q.category,
  401. 'categoryTwo': vm.q.categoryTwo
  402. },
  403. page: page
  404. }).trigger("reloadGrid");
  405. vm.handleReset('formValidate');
  406. },
  407. getCategory: function () {
  408. //加载分类树
  409. $.get("../category/query", function (r) {
  410. ztree = $.fn.zTree.init($("#categoryTree"), setting, r.list);
  411. var node = ztree.getNodeByParam("id", vm.goods.categoryId);
  412. if (node) {
  413. ztree.selectNode(node);
  414. vm.goods.categoryName = node.name;
  415. } else {
  416. node = ztree.getNodeByParam("id", 0);
  417. ztree.selectNode(node);
  418. vm.goods.categoryName = node.name;
  419. }
  420. })
  421. },
  422. categoryTree: function () {
  423. openWindow({
  424. title: "选择类型",
  425. area: ['300px', '450px'],
  426. content: jQuery("#categoryLayer"),
  427. btn: ['确定', '取消'],
  428. btn1: function (index) {
  429. var node = ztree.getSelectedNodes();
  430. if (node[0].isParent) {
  431. alert("只能选择");
  432. return;
  433. }
  434. //选择上级菜单
  435. vm.goods.categoryId = node[0].id;
  436. vm.goods.categoryName = node[0].name;
  437. layer.close(index);
  438. }
  439. });
  440. },
  441. changeGoodsBizType: function(opt) {
  442. var goodsBizType = opt.value;
  443. if (vm.goods.goodsBizType == '10' || vm.goods.goodsBizType == '02') {
  444. vm.showInput = false;
  445. } else {
  446. vm.showInput = true;
  447. }
  448. },
  449. handleView(name) {
  450. this.imgName = name;
  451. this.visible = true;
  452. },
  453. changeQueryCategories: function (opt) {
  454. var value = opt.value;
  455. $.get("../category/getCategorySelectByParent?parentId=" + value, function (r) {
  456. vm.queryCategoriesTwo = r.list;
  457. // vm.reload();
  458. });
  459. },
  460. changeCategories: function (opt) {
  461. var value = opt.value;
  462. $.get("../category/getCategorySelectByParent?parentId=" + value, function (r) {
  463. vm.categoriesTwo = r.list;
  464. });
  465. },
  466. handleRemove(file) {
  467. // 从 upload 实例删除数据
  468. const fileList = vm.uploadList;
  469. vm.uploadList.splice(fileList.indexOf(file), 1);
  470. },
  471. handleSuccess(res, file) {
  472. // 因为上传过程为实例,这里模拟添加 url
  473. file.imgUrl = res.url;
  474. file.name = res.url;
  475. vm.uploadList.add(file);
  476. },
  477. handleBeforeUpload() {
  478. const check = vm.uploadList.length < 5;
  479. if (!check) {
  480. this.$Notice.warning({
  481. title: '最多只能上传 5 张图片。'
  482. });
  483. }
  484. return check;
  485. },
  486. handleSubmit: function (name) {
  487. // handleSubmitValidate(this, name, function () {
  488. vm.saveOrUpdate()
  489. // });
  490. },
  491. handleFormatError: function (file) {
  492. this.$Notice.warning({
  493. title: '文件格式不正确',
  494. desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
  495. });
  496. },
  497. handleMaxSize: function (file) {
  498. this.$Notice.warning({
  499. title: '超出文件大小限制',
  500. desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
  501. });
  502. },
  503. handleReset: function (name) {
  504. handleResetForm(this, name);
  505. },
  506. handleSuccessPicUrl: function (res, file) {
  507. vm.goods.primaryPicUrl = file.response.url;
  508. },
  509. handleSuccessListPicUrl: function (res, file) {
  510. vm.goods.listPicUrl = file.response.url;
  511. },
  512. eyeImagePicUrl: function () {
  513. var url = vm.goods.primaryPicUrl;
  514. eyeImage(url);
  515. },
  516. eyeImageListPicUrl: function () {
  517. var url = vm.goods.listPicUrl;
  518. eyeImage(url);
  519. },
  520. eyeImage: function (e) {
  521. eyeImage($(e.target).attr('src'));
  522. },
  523. qrcodeCanvas: function(id) {
  524. $("#qrcodeCanvas").html("");
  525. $("#qrcodeCanvas").qrcode({
  526. render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
  527. text : "emato../goods/goods?id=" + id, //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
  528. width : "100", //二维码的宽度
  529. height : "100", //二维码的高度
  530. background : "#ffffff", //二维码的后景色
  531. foreground : "#000000", //二维码的前景色
  532. src: '../../statics/img/logo.jpg' //二维码中间的图片
  533. });
  534. var qrcSrc = $("canvas")[0].toDataURL();
  535. $("#qrcImg .qrcImg").attr("src", qrcSrc);
  536. var upLogSrc = "../../statics/img/logo.jpg";
  537. $("#qrcImg .upLogo").attr("src", upLogSrc);
  538. $("#qrcImg").show();//隐藏canvas部分
  539. openWindow({
  540. title: "二维码",
  541. area: ['400px', '400px'],
  542. content: jQuery("#qrcode"),
  543. btn: ["打印"],
  544. btn1: function (index) {
  545. $("#qrcImg").print({});
  546. $("#qrcImg").hide();
  547. layer.close(index);
  548. }
  549. });
  550. }
  551. },
  552. mounted() {
  553. // this.uploadList = this.$refs.upload.fileList;
  554. $.get("../category/getCategorySelect", function (r) {
  555. vm.queryCategories = r.list;
  556. vm.categories = r.list;
  557. })
  558. }
  559. });