BJ_ZTEITS-Developers / parking-cloud-yudao

Commit f3c83488a3f0aee95609d80e1a424eb32638a434

Authored by franky
1 parent ed56c71b

spu 修改页面展示

Inline Side-by-side
Showing 1 changed file with 546 additions and 445 deletions
yudao-ui-admin/src/views/mall/product/spu/index.vue
  View file @f3c8348
... ... @@ -55,8 +55,8 @@
55 55 <el-table v-loading="loading" :data="list">
56 56 <el-table-column label="主键" align="center" prop="id"/>
57 57 <el-table-column label="商品名称" align="center" prop="name"/>
58   -<!-- <el-table-column label="卖点" align="center" prop="sellPoint"/>-->
59   -<!-- <el-table-column label="描述" align="center" prop="description"/>-->
  58 + <!-- <el-table-column label="卖点" align="center" prop="sellPoint"/>-->
  59 + <!-- <el-table-column label="描述" align="center" prop="description"/>-->
60 60 <el-table-column label="分类id" align="center" prop="categoryId"/>
61 61 <el-table-column label="商品主图地址" align="center" prop="picUrls">
62 62 <template slot-scope="scope">
... ... @@ -67,7 +67,7 @@
67 67 <el-table-column label="点赞初始人数" align="center" prop="likeCount"/>
68 68 <el-table-column label="价格 (分)" align="center" prop="price"/>
69 69 <el-table-column label="库存数量" align="center" prop="quantity"/>
70   -<!-- <el-table-column label="状态" align="center" prop="status"/>-->
  70 + <!-- <el-table-column label="状态" align="center" prop="status"/>-->
71 71 <el-table-column label="创建时间" align="center" prop="createTime" width="180">
72 72 <template slot-scope="scope">
73 73 <span>{{ parseTime(scope.row.createTime) }}</span>
... ... @@ -115,7 +115,7 @@
115 115 <el-form-item label="商品规格">
116 116 <el-button size="mini" @click="shopTagInput()">添加规格</el-button>
117 117 <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
118   - <span>{{tag.name}}</span>
  118 + <span>{{ tag.name }}</span>
119 119 <el-button style="margin-left: 10px" class="button-new-tag" type="text" icon="el-icon-delete"
120 120 @click="removeTag(tagIndex)">删除
121 121 </el-button>
... ... @@ -125,7 +125,7 @@
125 125 :key="tagItem"
126 126 style="margin-right: 10px"
127 127 :disable-transitions="false">
128   - {{tagItem}}
  128 + {{ tagItem }}
129 129 </el-tag>
130 130 <!-- <el-input-->
131 131 <!-- class="input-new-tag"-->
... ... @@ -176,7 +176,7 @@
176 176 :span-method="tableSpanMethod">
177 177 <el-table-column v-for="(leftTitle, index) in skuTags" :key="index" :label="leftTitle.name">
178 178 <template slot-scope="scope">
179   - {{scope.row.propertyChildNames[index]}}
  179 + {{ scope.row.propertyChildNames[index] }}
180 180 </template>
181 181 </el-table-column>
182 182 <el-table-column v-if="skuTags.length"
... ... @@ -244,7 +244,8 @@
244 244 <el-table-column
245 245 label="操作">
246 246 <template slot-scope="scope">
247   - <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-if="scope.row.status===0">
  247 + <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)"
  248 + v-if="scope.row.status===0">
248 249 正常
249 250 </el-button>
250 251 <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-else>已禁用</el-button>
... ... @@ -280,464 +281,564 @@
280 281 </template>
281 282  
282 283 <script>
283   - import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
284   - import {
285   - createCategory,
286   - deleteCategory,
287   - exportCategoryExcel,
288   - getCategory,
289   - listCategory,
290   - updateCategory
291   - } from "@/api/mall/product/category";
292   - import {
293   - createProperty,
294   - updateProperty,
295   - deleteProperty,
296   - getProperty,
297   - getPropertyPage,
298   - exportPropertyExcel
299   - } from "@/api/mall/product/property";
  284 +import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
  285 +import {
  286 + createCategory,
  287 + deleteCategory,
  288 + exportCategoryExcel,
  289 + getCategory,
  290 + listCategory,
  291 + updateCategory
  292 +} from "@/api/mall/product/category";
  293 +import {
  294 + createProperty,
  295 + updateProperty,
  296 + deleteProperty,
  297 + getProperty,
  298 + getPropertyPage,
  299 + exportPropertyExcel
  300 +} from "@/api/mall/product/property";
300 301  
301   - import Editor from '@/components/Editor';
302   - import ImageUpload from '@/components/ImageUpload';
  302 +import Editor from '@/components/Editor';
  303 +import ImageUpload from '@/components/ImageUpload';
303 304  
304   - export default {
305   - name: "Spu",
306   - components: {
307   - Editor, ImageUpload
308   - },
309   - data() {
310   - return {
311   - tableLeftTitles: [],
312   - dbTagValues: [],
313   - allhistoryTags: [],
314   - unUseTags: [],
315   - propertyPageList: [],
316   - isShowTagInput: false,
317   - addTagInput: {
318   - name: '',
319   - propertyId: '',
320   - selectValues: [],
321   - selectValueIds: [],
322   - },
323   - skuTags: [],
324   - propName: {
325   - checkStrictly: true,
326   - label: 'name',
327   - value: 'id'
328   - },
329   - categoryList: [],
330   - // 遮罩层
331   - loading: true,
332   - // 导出遮罩层
333   - exportLoading: false,
334   - // 显示搜索条件
335   - showSearch: true,
336   - // 总条数
337   - total: 0,
338   - // 商品spu列表
339   - list: [],
340   - // 弹出层标题
341   - title: "",
342   - // 是否显示弹出层
343   - open: false,
344   - dateRangeCreateTime: [],
345   - // 查询参数
346   - queryParams: {
347   - pageNo: 1,
348   - pageSize: 10,
349   - name: null,
350   - sellPoint: null,
351   - description: null,
352   - categoryId: null,
353   - picUrls: null,
354   - sort: null,
355   - likeCount: null,
356   - price: null,
357   - quantity: null,
358   - status: null,
359   - },
360   - // 表单参数
361   - form: {
362   - id: undefined,
363   - name: undefined,
364   - sellPoint: undefined,
365   - description: undefined,
366   - categoryId: undefined,
367   - categoryIds: [],
368   - picUrls: undefined,
369   - sort: undefined,
370   - likeCount: undefined,
371   - price: undefined,
372   - quantity: undefined,
373   - status: undefined,
374   - isShowTagInput: undefined,
375   - skus:[],
376   - },
377   - // 表单校验
378   - rules: {
379   - sellPoint: [{required: true, message: "卖点不能为空", trigger: "blur"}],
380   - description: [{required: true, message: "描述不能为空", trigger: "blur"}],
381   - categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"}],
382   - picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
383   - sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
384   - },
385   - tagIndex:0,
386   - };
387   - },
388   - created() {
  305 +export default {
  306 + name: "Spu",
  307 + components: {
  308 + Editor, ImageUpload
  309 + },
  310 + data() {
  311 + return {
  312 + tableLeftTitles: [],
  313 + dbTagValues: [],
  314 + allhistoryTags: [],
  315 + unUseTags: [],
  316 + propertyPageList: [],
  317 + isShowTagInput: false,
  318 + addTagInput: {
  319 + name: '',
  320 + propertyId: '',
  321 + selectValues: [],
  322 + selectValueIds: [],
  323 + selectObect:[],
  324 + },
  325 + skuTags: [],
  326 + propName: {
  327 + checkStrictly: true,
  328 + label: 'name',
  329 + value: 'id'
  330 + },
  331 + categoryList: [],
  332 + // 遮罩层
  333 + loading: true,
  334 + // 导出遮罩层
  335 + exportLoading: false,
  336 + // 显示搜索条件
  337 + showSearch: true,
  338 + // 总条数
  339 + total: 0,
  340 + // 商品spu列表
  341 + list: [],
  342 + // 弹出层标题
  343 + title: "",
  344 + // 是否显示弹出层
  345 + open: false,
  346 + dateRangeCreateTime: [],
  347 + // 查询参数
  348 + queryParams: {
  349 + pageNo: 1,
  350 + pageSize: 10,
  351 + name: null,
  352 + sellPoint: null,
  353 + description: null,
  354 + categoryId: null,
  355 + picUrls: null,
  356 + sort: null,
  357 + likeCount: null,
  358 + price: null,
  359 + quantity: null,
  360 + status: null,
  361 + },
  362 + // 表单参数
  363 + form: {
  364 + id: undefined,
  365 + name: undefined,
  366 + sellPoint: undefined,
  367 + description: undefined,
  368 + categoryId: undefined,
  369 + categoryIds: [],
  370 + picUrls: undefined,
  371 + sort: undefined,
  372 + likeCount: undefined,
  373 + price: undefined,
  374 + quantity: undefined,
  375 + status: undefined,
  376 + isShowTagInput: undefined,
  377 + skus: [],
  378 + },
  379 + // 表单校验
  380 + rules: {
  381 + sellPoint: [{required: true, message: "卖点不能为空", trigger: "blur"}],
  382 + description: [{required: true, message: "描述不能为空", trigger: "blur"}],
  383 + categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"}],
  384 + picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
  385 + sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
  386 + },
  387 + tagIndex: 0,
  388 + };
  389 + },
  390 + created() {
389 391  
390   - this.getList();
  392 + this.getList();
  393 + this.getPropertyPageList();
  394 + this.getListCategory();
  395 + },
  396 + methods: {
  397 + getTableSpecData() {
  398 + return this.value
  399 + },
  400 + tableSpanMethod({row, column, rowIndex, columnIndex}) {
  401 +
  402 + },
  403 + changeSkuStatus(tagIndex) {
  404 + if (this.form.skus[tagIndex].status == 0) {
  405 + this.form.skus[tagIndex].status = 1;
  406 + } else {
  407 + this.form.skus[tagIndex].status = 0;
  408 + }
  409 +
  410 + },
  411 + skuAddProdName() {
  412 + if (this.initing) {
  413 + return
  414 + }
  415 + let skuList = []
  416 + for (let i = 0; i < this.value.length; i++) {
  417 + const sku = Object.assign({}, this.value[i])
  418 + if (!sku.properties) {
  419 + return
  420 + }
  421 + sku.skuName = ''
  422 + let properties = sku.properties.split(';')
  423 + for (const propertiesKey in properties) {
  424 + sku.skuName += properties[propertiesKey].split(':')[1] + ' '
  425 + }
  426 + sku.prodName = this.prodName + ' ' + sku.skuName
  427 + skuList.push(sku)
  428 + }
  429 + this.$emit('input', skuList)
  430 + },
  431 + handleTagClose(tagIndex, tagItemIndex) {
391 432  
392   - },
393   - methods: {
394   - getTableSpecData() {
395   - return this.value
396   - },
397   - tableSpanMethod({row, column, rowIndex, columnIndex}) {
  433 + },
  434 + //确定添加sku规格
  435 + addTag() {
398 436  
399   - },
400   - changeSkuStatus(tagIndex) {
401   - if(this.form.skus[tagIndex].status == 0){
402   - this.form.skus[tagIndex].status = 1 ;
403   - }else {
404   - this.form.skus[tagIndex].status = 0 ;
405   - }
  437 + let skus = this.unUseTags.map(function (item, index) {
  438 + return item.name
  439 + });
  440 + let index = skus.indexOf(this.addTagInput.name);
  441 +
  442 + this.addTagInput.propertyId = this.unUseTags[index].id;
  443 + for (let i = 0; i < this.addTagInput.selectValues.length; i++) {
  444 + for (let j = 0; j < this.unUseTags[index].propertyValueList.length; j++) {
  445 + if (this.addTagInput.selectValues[i] === this.unUseTags[index].propertyValueList[j].name) {
  446 + this.addTagInput.selectValueIds.push(this.unUseTags[index].propertyValueList[j].id)
  447 + this.addTagInput.selectObect.push({
  448 + id:this.unUseTags[index].propertyValueList[j].id,
  449 + name:this.unUseTags[index].propertyValueList[j].name,
  450 + })
  451 + }
  452 + }
  453 + }
  454 + let addTagInput = JSON.parse(JSON.stringify(this.addTagInput))
  455 + this.skuTags.push(addTagInput);
406 456  
407   - },
408   - skuAddProdName() {
409   - if (this.initing) {
410   - return
411   - }
412   - let skuList = []
413   - for (let i = 0; i < this.value.length; i++) {
414   - const sku = Object.assign({}, this.value[i])
415   - if (!sku.properties) {
416   - return
417   - }
418   - sku.skuName = ''
419   - let properties = sku.properties.split(';')
420   - for (const propertiesKey in properties) {
421   - sku.skuName += properties[propertiesKey].split(':')[1] + ' '
422   - }
423   - sku.prodName = this.prodName + ' ' + sku.skuName
424   - skuList.push(sku)
425   - }
426   - this.$emit('input', skuList)
427   - },
428   - handleTagClose(tagIndex, tagItemIndex) {
  457 + // if (this.skuTags.length > 1) {
  458 + this.skuTags = this.skuTags.sort((a, b) => a.propertyId - b.propertyId);
  459 + this.skuTags.forEach(function (item,index) {
  460 + item.selectObect = item.selectObect.sort((a, b) => a.id - b.id)
  461 + })
429 462  
430   - },
431   - //确定添加sku规格
432   - addTag() {
  463 + for (let i = 0; i <this.skuTags.length ; i++) {
  464 + let selectValueIds=[];
  465 + let selectValues=[];
  466 + for (let j = 0; j < this.skuTags[i].selectObect.length; j++) {
  467 + selectValueIds.push(this.skuTags[i].selectObect[j].id);
  468 + selectValues.push(this.skuTags[i].selectObect[j].name);
  469 + }
  470 + this.skuTags[i].selectValues = selectValues;
  471 + this.skuTags[i].selectValueIds = selectValueIds;
  472 + }
433 473  
434   - let skus = this.unUseTags.map(function (item, index) {
435   - return item.name
436   - });
437   - console.log("skus=="+JSON.stringify(skus))
438   - let index = skus.indexOf(this.addTagInput.name);
439   - console.log("index=="+index)
440   - console.log("skus[index].id=="+this.unUseTags[index].id)
441   - console.log("this.unUseTags[index].propertyValueList=="+JSON.stringify(this.unUseTags[index].propertyValueList))
442   - this.addTagInput.propertyId = this.unUseTags[index].id;
443   - for (let i = 0; i < this.addTagInput.selectValues.length; i++) {
444   - for (let j = 0; j < this.unUseTags[index].propertyValueList.length; j++) {
445   - if (this.addTagInput.selectValues[i] === this.unUseTags[index].propertyValueList[j].name) {
446   - this.addTagInput.selectValueIds.push(this.unUseTags[index].propertyValueList[j].id)
447   - }
448   - }
449   - }
450   - let addTagInput = JSON.parse(JSON.stringify(this.addTagInput))
451   - console.log("addTagInput=="+JSON.stringify(addTagInput))
452   - this.skuTags.push(addTagInput);
453   - this.unUseTags.splice(index, 1);
454   - this.isShowTagInput = false;
455   - this.getTable();
456   - },
457   - getTable(){
458   - this.form.skus=[];
459   - let skuTags = JSON.parse(JSON.stringify(this.skuTags));
460   - let sku1s = [];
461   - let skuIds = [];
462   - let propertyIds = [];
463   - let propertyNames = [];
464   - for (let i = 0; i < skuTags.length; i++) {
465   - sku1s.push(skuTags[i].selectValues);
466   - skuIds.push(skuTags[i].selectValueIds);
467   - propertyIds.push(skuTags[i].propertyId);
468   - propertyNames.push(skuTags[i].name);
469   - }
470   - let skuAll = sku1s.reduce((x,y) =>{
471   - let arr = [];
472   - x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
473   - return arr;
474   - },[[]])
475   - console.log(skuAll);
  474 + this.unUseTags.splice(index, 1);
  475 + this.isShowTagInput = false;
  476 + this.getTable();
  477 + },
  478 + getTable() {
  479 + this.form.skus = [];
  480 + let skuTags = JSON.parse(JSON.stringify(this.skuTags));
  481 + let sku1s = [];
  482 + let skuIds = [];
  483 + let propertyIds = [];
  484 + let propertyNames = [];
  485 + for (let i = 0; i < skuTags.length; i++) {
  486 + sku1s.push(skuTags[i].selectValues);
  487 + skuIds.push(skuTags[i].selectValueIds);
  488 + propertyIds.push(skuTags[i].propertyId);
  489 + propertyNames.push(skuTags[i].name);
  490 + }
476 491  
477   - let skuIdAll = skuIds.reduce((x,y) =>{
478   - let arr = [];
479   - x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
480   - return arr;
481   - },[[]])
482   - console.log(skuIdAll);
483   - for (let i = 0; i < skuAll.length; i++) {
484   - let han = {
485   - propertyNames:propertyNames,
486   - propertyIds:propertyIds,
487   - propertyChildNames:skuAll[i],
488   - propertyChildIds:skuIdAll[i],
489   - properties: [],
490   - picUrl: '',
491   - costPrice: '',
492   - originalPrice: '',
493   - spuId: '',
494   - prodName: '',
495   - price: '',
496   - barCode: '',
497   - status: '0',
498   - }
499   - this.form.skus.push(han);
500   - }
501   - this.form.skus.forEach(x=>{
502   - x.properties=[];
503   - for (let i = 0; i <x.propertyIds.length ; i++) {
504   - x.properties.push({
505   - propertyId:x.propertyIds[i],
506   - valueId:x.propertyChildIds[i]
507   - })
508   - }
509   - })
  492 + let skuAll = sku1s.reduce((x, y) => {
  493 + let arr = [];
  494 + x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
  495 + return arr;
  496 + }, [[]])
510 497  
511   - console.log("this.skus=="+JSON.stringify(this.form.skus))
512   - },
513   - hideTagInput() {
514   - this.isShowTagInput = false;
515   - this.addTagInput = {
516   - name: '',
517   - propertyId: '',
518   - selectValues: [],
519   - selectValueIds: [],
520   - };
521   - },
522   - shopTagInput() {
523   - if (this.unUseTags.length <= 0) {
524   - return this.$message.error("规格已经添加完毕")
525   - }
526   - this.isShowTagInput = true;
527   - this.addTagInput = {
528   - name: '',
529   - propertyId: '',
530   - selectValues: [],
531   - selectValueIds: [],
532   - };
533   - },
534   - //删除已选的规格
535   - removeTag(row) {
536   - let skus = this.allhistoryTags.map(function (item, index) {
537   - return item.name
538   - })
539   - let index = skus.indexOf(this.skuTags[row].name);
540   - this.unUseTags.push(this.allhistoryTags[index]);
541   - this.skuTags.splice(row, 1);
542   - this.getTable();
543   - },
544   - handleTagClick(row) {
545   - for (let i = 0; i < this.propertyPageList.length; i++) {
546   - if (row == this.propertyPageList[i].name) {
547   - this.dbTagValues = this.propertyPageList[i].propertyValueList
548   - }
549   - }
550   - },
551   - /** 查询规格 */
552   - getPropertyPageList() {
553   - // 执行查询
554   - getPropertyPage().then(response => {
555   - this.propertyPageList = response.data.list;
  498 + let skuIdAll = skuIds.reduce((x, y) => {
  499 + let arr = [];
  500 + x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
  501 + return arr;
  502 + }, [[]])
556 503  
557   - this.unUseTags = this.propertyPageList.map(function (item, index) {
558   - return item
559   - })
560   - this.allhistoryTags = JSON.parse(JSON.stringify(this.unUseTags));
561   - console.log(this.propertyPageList)
562   - });
563   - },
564   - /** 查询分类 */
565   - getListCategory() {
566   - // 执行查询
567   - listCategory().then(response => {
568   - this.categoryList = this.handleTree(response.data, "id", "parentId");
  504 + for (let i = 0; i < skuAll.length; i++) {
  505 + let han = {
  506 + propertyNames: propertyNames,
  507 + propertyIds: propertyIds,
  508 + propertyChildNames: skuAll[i],
  509 + propertyChildIds: skuIdAll[i],
  510 + properties: [],
  511 + picUrl: '',
  512 + costPrice: '',
  513 + originalPrice: '',
  514 + spuId: '',
  515 + prodName: '',
  516 + price: '',
  517 + barCode: '',
  518 + status: '0',
  519 + }
  520 + this.form.skus.push(han);
  521 + }
  522 + this.form.skus.forEach(x => {
  523 + x.properties = [];
  524 + for (let i = 0; i < x.propertyIds.length; i++) {
  525 + x.properties.push({
  526 + propertyId: x.propertyIds[i],
  527 + valueId: x.propertyChildIds[i]
  528 + })
  529 + }
  530 + })
569 531  
570   - });
571   - },
572   - /** 查询列表 */
573   - getList() {
574   - this.loading = true;
575   - // 处理查询参数
576   - let params = {...this.queryParams};
577   - this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
578   - // 执行查询
579   - getSpuPage(params).then(response => {
580   - this.list = response.data.list;
581   - this.total = response.data.total;
582   - this.loading = false;
583   - });
584   - },
585   - /** 取消按钮 */
586   - cancel() {
587   - this.open = false;
588   - this.reset();
589   - },
590   - /** 表单重置 */
591   - reset() {
  532 + },
  533 + hideTagInput() {
  534 + this.isShowTagInput = false;
  535 + this.addTagInput = {
  536 + name: '',
  537 + propertyId: '',
  538 + selectValues: [],
  539 + selectValueIds: [],
  540 + selectObect: [],
  541 + };
  542 + },
  543 + shopTagInput() {
  544 + if (this.unUseTags.length <= 0) {
  545 + return this.$message.error("规格已经添加完毕")
  546 + }
  547 + this.isShowTagInput = true;
  548 + this.addTagInput = {
  549 + name: '',
  550 + propertyId: '',
  551 + selectValues: [],
  552 + selectValueIds: [],
  553 + selectObect: [],
  554 + };
  555 + },
  556 + //删除已选的规格
  557 + removeTag(row) {
  558 + let skus = this.allhistoryTags.map(function (item, index) {
  559 + return item.name
  560 + })
  561 + let index = skus.indexOf(this.skuTags[row].name);
  562 + this.unUseTags.push(this.allhistoryTags[index]);
  563 + this.skuTags.splice(row, 1);
  564 + this.getTable();
  565 + },
  566 + handleTagClick(row) {
  567 + for (let i = 0; i < this.propertyPageList.length; i++) {
  568 + if (row == this.propertyPageList[i].name) {
  569 + this.dbTagValues = this.propertyPageList[i].propertyValueList
  570 + }
  571 + }
  572 + },
  573 + /** 查询规格 */
  574 + getPropertyPageList() {
  575 + // 执行查询
  576 + getPropertyPage().then(response => {
  577 + this.propertyPageList = response.data.list;
592 578  
593   - this.form = {
594   - id: undefined,
595   - name: undefined,
596   - sellPoint: undefined,
597   - description: undefined,
598   - categoryId: undefined,
599   - categoryIds: [],
600   - picUrls: undefined,
601   - sort: undefined,
602   - likeCount: undefined,
603   - price: undefined,
604   - quantity: undefined,
605   - status: undefined,
606   - isShowTagInput: undefined,
607   - skus:[],
608   - };
609   - this.skuTags=[];
610   - this.resetForm("form");
611   - },
612   - /** 搜索按钮操作 */
613   - handleQuery() {
614   - this.queryParams.pageNo = 1;
615   - this.getList();
616   - },
617   - /** 重置按钮操作 */
618   - resetQuery() {
619   - this.dateRangeCreateTime = [];
620   - this.resetForm("queryForm");
621   - this.handleQuery();
622   - },
623   - /** 新增按钮操作 */
624   - handleAdd() {
625   - this.reset();
626   - this.open = true;
627   - this.title = "添加商品spu";
628   - this.getListCategory();
629   - this.getPropertyPageList();
630   - },
631   - /** 修改按钮操作 */
632   - handleUpdate(row) {
633   - this.reset();
634   - const id = row.id;
635   - getSpu(id).then(response => {
636   - console.log(">>>>>> response.data:" + JSON.stringify(response.data))
637   - let dataSpu = response.data;
638   - this.form = {
639   - id: dataSpu.id,
640   - name: dataSpu.name,
641   - sellPoint: dataSpu.sellPoint,
642   - description: dataSpu.sellPoint,
643   - categoryId: dataSpu.sellPoint,
644   - categoryIds: dataSpu.categoryIds,
645   - picUrls: dataSpu.picUrls,
646   - sort: dataSpu.sort,
647   - likeCount: dataSpu.likeCount,
648   - price: dataSpu.price,
649   - quantity: dataSpu.quantity,
650   - status: dataSpu.status,
651   - isShowTagInput:undefined,
652   - skus:dataSpu.skus
653   - // skus:dataSpu.productSkuRespVOS,
654   - };
655   - this.open = true;
656   - this.title = "修改商品spu";
657   - });
658   - },
  579 + this.unUseTags = this.propertyPageList.map(function (item, index) {
  580 + return item
  581 + })
  582 + this.allhistoryTags = JSON.parse(JSON.stringify(this.unUseTags));
  583 + });
  584 + },
  585 + /** 查询分类 */
  586 + getListCategory() {
  587 + // 执行查询
  588 + listCategory().then(response => {
  589 + this.categoryList = this.handleTree(response.data, "id", "parentId");
659 590  
660   - /** 提交按钮 */
661   - submitForm() {
662   - console.log(this.form.picUrls.split(','));
  591 + });
  592 + },
  593 + /** 查询列表 */
  594 + getList() {
  595 + this.loading = true;
  596 + // 处理查询参数
  597 + let params = {...this.queryParams};
  598 + this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
  599 + // 执行查询
  600 + getSpuPage(params).then(response => {
  601 + this.list = response.data.list;
  602 + this.total = response.data.total;
  603 + this.loading = false;
  604 + });
  605 + },
  606 + /** 取消按钮 */
  607 + cancel() {
  608 + this.open = false;
  609 + this.reset();
  610 + },
  611 + /** 表单重置 */
  612 + reset() {
663 613  
664   - this.$refs["form"].validate(valid => {
665   - if (!valid) {
666   - return;
667   - }
668   - this.form.picUrls = this.form.picUrls.split(',');
669   - this.form.categoryId = this.form.categoryIds[(this.form.categoryIds.length - 1)];
670   - this.form.status = Number(this.form.status);
671   - // 修改的提交
672   - if (this.form.id != null) {
673   - updateSpu(this.form).then(response => {
674   - this.$modal.msgSuccess("修改成功");
675   - this.open = false;
676   - this.getList();
677   - });
678   - return;
679   - }
680   - // 添加的提交
681   - createSpu(this.form).then(response => {
682   - this.$modal.msgSuccess("新增成功");
683   - this.open = false;
684   - this.getList();
685   - });
686   - });
687   - },
688   - /** 删除按钮操作 */
689   - handleDelete(row) {
690   - const id = row.id;
691   - this.$modal.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?').then(function () {
692   - return deleteSpu(id);
693   - }).then(() => {
694   - this.getList();
695   - this.$modal.msgSuccess("删除成功");
696   - }).catch(() => {
697   - });
698   - },
699   - /** 导出按钮操作 */
700   - handleExport() {
701   - // 处理查询参数
702   - let params = {...this.queryParams};
703   - params.pageNo = undefined;
704   - params.pageSize = undefined;
705   - this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
706   - // 执行导出
707   - this.$modal.confirm('是否确认导出所有商品spu数据项?').then(() => {
708   - this.exportLoading = true;
709   - return exportSpuExcel(params);
710   - }).then(response => {
711   - this.$download.excel(response, '商品spu.xls');
712   - this.exportLoading = false;
713   - }).catch(() => {
714   - });
715   - }
  614 + this.form = {
  615 + id: undefined,
  616 + name: undefined,
  617 + sellPoint: undefined,
  618 + description: undefined,
  619 + categoryId: undefined,
  620 + categoryIds: [],
  621 + picUrls: undefined,
  622 + sort: undefined,
  623 + likeCount: undefined,
  624 + price: undefined,
  625 + quantity: undefined,
  626 + status: undefined,
  627 + isShowTagInput: undefined,
  628 + skus: [],
  629 + };
  630 + this.skuTags = [];
  631 + this.resetForm("form");
  632 + },
  633 + /** 搜索按钮操作 */
  634 + handleQuery() {
  635 + this.queryParams.pageNo = 1;
  636 + this.getList();
  637 + },
  638 + /** 重置按钮操作 */
  639 + resetQuery() {
  640 + this.dateRangeCreateTime = [];
  641 + this.resetForm("queryForm");
  642 + this.handleQuery();
  643 + },
  644 + /** 新增按钮操作 */
  645 + handleAdd() {
  646 + this.reset();
  647 + this.open = true;
  648 + this.title = "添加商品spu";
  649 + this.getPropertyPageList();
  650 + },
  651 + /** 修改按钮操作 */
  652 + handleUpdate(row) {
  653 + this.reset();
  654 + const id = row.id;
  655 + getSpu(id).then(response => {
  656 + let dataSpu = response.data;
  657 + this.form = {
  658 + id: dataSpu.id,
  659 + name: dataSpu.name,
  660 + sellPoint: dataSpu.sellPoint,
  661 + description: dataSpu.sellPoint,
  662 + categoryId: dataSpu.sellPoint,
  663 + categoryIds: dataSpu.categoryIds,
  664 + picUrls: dataSpu.picUrls,
  665 + sort: dataSpu.sort,
  666 + likeCount: dataSpu.likeCount,
  667 + price: dataSpu.price,
  668 + quantity: dataSpu.quantity,
  669 + status: dataSpu.status,
  670 + isShowTagInput: undefined,
  671 + skus: [],
  672 + skusList: dataSpu.skus,
  673 + productPropertyViews: dataSpu.productPropertyViews,
  674 + // skus:dataSpu.productSkuRespVOS,
  675 + };
  676 + this.getDataHandle();
  677 + this.open = true;
  678 + this.title = "修改商品spu";
  679 + });
  680 + },
  681 + getDataHandle() {
  682 + let that = this;
  683 + let productPropertyViews = JSON.parse(JSON.stringify(this.form.productPropertyViews));
  684 + productPropertyViews = productPropertyViews.sort((a, b) => a.propertyId - b.propertyId);
  685 + productPropertyViews.forEach(item => {
  686 + item.propertyValues = item.propertyValues.sort((a, b) => a.v1 - b.v1);
  687 + })
  688 + let skuIds = [];
  689 + for (let i = 0; i < productPropertyViews.length; i++) {
  690 + let han = {
  691 + name: productPropertyViews[i].name,
  692 + propertyId: productPropertyViews[i].propertyId,
  693 + selectValues: [],
  694 + selectValueIds: [],
716 695 }
717   - };
  696 + for (let j = 0; j < productPropertyViews[i].propertyValues.length; j++) {
  697 + han.selectValues.push(productPropertyViews[i].propertyValues[j].v2);
  698 + han.selectValueIds.push(productPropertyViews[i].propertyValues[j].v1);
  699 + }
  700 + skuIds.push(han)
  701 + }
  702 + this.skuTags = skuIds;
  703 + this.unUseTags = this.allhistoryTags.filter((v) =>
  704 + skuIds.every((val) => val.name != v.name)
  705 + )
  706 + this.getHandleTable();
  707 + },
  708 + getHandleTable() {
  709 + this.form.skus = [];
  710 + let skuTags = JSON.parse(JSON.stringify(this.skuTags));
  711 + let sku1s = [];
  712 + let skuIds = [];
  713 + let propertyIds = [];
  714 + let propertyNames = [];
  715 + for (let i = 0; i < skuTags.length; i++) {
  716 + sku1s.push(skuTags[i].selectValues);
  717 + skuIds.push(skuTags[i].selectValueIds);
  718 + propertyIds.push(skuTags[i].propertyId);
  719 + propertyNames.push(skuTags[i].name);
  720 + }
  721 + let skuAll = sku1s.reduce((x, y) => {
  722 + let arr = [];
  723 + x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
  724 + return arr;
  725 + }, [[]])
  726 +
  727 + let skuIdAll = skuIds.reduce((x, y) => {
  728 + let arr = [];
  729 + x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
  730 + return arr;
  731 + }, [[]])
  732 +
  733 + for (let i = 0; i < skuAll.length; i++) {
  734 + let han = {
  735 + propertyNames: propertyNames,
  736 + propertyIds: propertyIds,
  737 + propertyChildNames: skuAll[i],
  738 + propertyChildIds: skuIdAll[i],
  739 + properties: this.form.skusList[i].properties,
  740 + picUrl: this.form.skusList[i].picUrl,
  741 + costPrice: this.form.skusList[i].costPrice,
  742 + originalPrice: this.form.skusList[i].originalPrice,
  743 + spuId: this.form.skusList[i].spuId,
  744 + prodName: this.form.skusList[i].prodName,
  745 + price: this.form.skusList[i].price,
  746 + barCode: this.form.skusList[i].barCode,
  747 + status: this.form.skusList[i].status,
  748 + }
  749 + this.form.skus.push(han);
  750 + }
  751 + this.form.skus.forEach(x => {
  752 + x.properties = [];
  753 + for (let i = 0; i < x.propertyIds.length; i++) {
  754 + x.properties.push({
  755 + propertyId: x.propertyIds[i],
  756 + valueId: x.propertyChildIds[i]
  757 + })
  758 + }
  759 + })
  760 +
  761 + },
  762 + /** 提交按钮 */
  763 + submitForm() {
  764 +
  765 + this.$refs["form"].validate(valid => {
  766 + if (!valid) {
  767 + return;
  768 + }
  769 + this.form.picUrls = this.form.picUrls.split(',');
  770 + this.form.categoryId = this.form.categoryIds[(this.form.categoryIds.length - 1)];
  771 + this.form.status = Number(this.form.status);
  772 + // 修改的提交
  773 + if (this.form.id != null) {
  774 + updateSpu(this.form).then(response => {
  775 + this.$modal.msgSuccess("修改成功");
  776 + this.open = false;
  777 + this.getList();
  778 + });
  779 + return;
  780 + }
  781 + // 添加的提交
  782 + createSpu(this.form).then(response => {
  783 + this.$modal.msgSuccess("新增成功");
  784 + this.open = false;
  785 + this.getList();
  786 + });
  787 + });
  788 + },
  789 + /** 删除按钮操作 */
  790 + handleDelete(row) {
  791 + const id = row.id;
  792 + this.$modal.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?').then(function () {
  793 + return deleteSpu(id);
  794 + }).then(() => {
  795 + this.getList();
  796 + this.$modal.msgSuccess("删除成功");
  797 + }).catch(() => {
  798 + });
  799 + },
  800 + /** 导出按钮操作 */
  801 + handleExport() {
  802 + // 处理查询参数
  803 + let params = {...this.queryParams};
  804 + params.pageNo = undefined;
  805 + params.pageSize = undefined;
  806 + this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
  807 + // 执行导出
  808 + this.$modal.confirm('是否确认导出所有商品spu数据项?').then(() => {
  809 + this.exportLoading = true;
  810 + return exportSpuExcel(params);
  811 + }).then(response => {
  812 + this.$download.excel(response, '商品spu.xls');
  813 + this.exportLoading = false;
  814 + }).catch(() => {
  815 + });
  816 + }
  817 + }
  818 +};
718 819 </script>
719 820 <style lang="scss">
720   - .app-container {
721   - .el-tag + .el-tag {
722   - margin-left: 10px;
723   - }
  821 +.app-container {
  822 + .el-tag + .el-tag {
  823 + margin-left: 10px;
  824 + }
724 825  
725   - .button-new-tag {
726   - margin-left: 10px;
727   - height: 32px;
728   - line-height: 30px;
729   - padding-top: 0;
730   - padding-bottom: 0;
731   - }
  826 + .button-new-tag {
  827 + margin-left: 10px;
  828 + height: 32px;
  829 + line-height: 30px;
  830 + padding-top: 0;
  831 + padding-bottom: 0;
  832 + }
732 833  
733   - .input-new-tag {
734   - width: 90px;
735   - margin-left: 10px;
736   - vertical-align: bottom;
737   - }
  834 + .input-new-tag {
  835 + width: 90px;
  836 + margin-left: 10px;
  837 + vertical-align: bottom;
  838 + }
738 839  
739   - .img-height {
740   - height: 65px;
741   - }
  840 + .img-height {
  841 + height: 65px;
742 842 }
  843 +}
743 844 </style>
... ...