feature(商品添加): 规格调整连带商品调整

yudao-ui-admin/src/views/mall/product/spu/save.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-tabs v-model="activeName" class="tabs"  :before-leave="confirmLeave">
+    <el-tabs v-model="activeName" class="tabs"  >
       <!-- 基础设置 -->
       <el-tab-pane label="基础设置" name="base">
         <el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
@@ -12,7 +12,7 @@
           </el-form-item>
           <!-- TODO @Luowenfeng：商品主图，80 x 80 即可 -->
           <el-form-item label="商品主图" prop="picUrls">
-            <ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10"/>
+            <ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10" />
           </el-form-item>
           <!-- TODO @Luowenfeng：商品视频 -->
           <el-form-item label="商品品牌" prop="brandId">
@@ -38,10 +38,7 @@
         <el-form ref="rates" :model="ratesForm" :rules="rules">
           <el-form-item label="启用多规格">
             <!-- TODO @Luowenfeng：改成开关的按钮；关闭，单规格；开启，多规格 -->
-            <el-radio-group v-model="ratesForm.spec" @change="changeRadio">
-              <el-radio :label="1">单规格</el-radio>
-              <el-radio :label="2">多规格</el-radio>
-            </el-radio-group>
+            <el-switch v-model="activeSwitch" @change="changeRadio"></el-switch>
           </el-form-item>
 
           <!-- 动态添加规格属性 -->
@@ -67,7 +64,7 @@
           <!-- 规格明细 -->
           <el-form-item label="规格明细">
             <el-table :data="ratesForm.rates" border style="width: 100%" ref="ratesTable">
-              <template v-if="ratesForm.spec == 2">
+              <template v-if="this.activeSwitch">
                 <el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v => v.specName !== undefined)"
                                  :label="item.specName">
                   <template slot-scope="scope">
@@ -81,7 +78,7 @@
                                style="width: 100px; height: 50px"/>
                 </template>
               </el-table-column>
-              <template v-if="ratesForm.spec === 2">
+              <template v-if="this.activeSwitch">
                <el-table-column label="sku名称" :render-header="addRedStar" key="91">
                   <template slot-scope="scope">
                     <el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
@@ -142,7 +139,7 @@
                   <el-input v-model="scope.row.barCode"></el-input>
                 </template>
               </el-table-column>
-               <template v-if="ratesForm.spec === 2">
+               <template v-if="this.activeSwitch">
                 <el-table-column fixed="right" label="操作" width="50" key="100">
                   <template slot-scope="scope">
                     <el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
@@ -153,7 +150,6 @@
             </el-table>
           </el-form-item>
           <el-form-item label="虚拟销量" prop="virtualSalesCount">
-            <!-- TODO @Luowenfeng：使用 input 类型即可 -->
             <el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
           </el-form-item>
         </el-form>
@@ -196,8 +192,8 @@
 
 import {getBrandList} from "@/api/mall/product/brand";
 import {getProductCategoryList} from "@/api/mall/product/category";
-import {createSpu, updateSpu, getSpu} from "@/api/mall/product/spu";
-import {getPropertyPage,} from "@/api/mall/product/property";
+import {createSpu, updateSpu, getSpuDetail} from "@/api/mall/product/spu";
+import {getPropertyListAndValue,} from "@/api/mall/product/property";
 import Editor from "@/components/Editor";
 import ImageUpload from "@/components/ImageUpload";
 
@@ -206,16 +202,13 @@ export default {
     Editor,
     ImageUpload
   },
-  props:{//props列表
-    type:{
-      type:String,
-      default:"add" //定义参数默认值
-    },
+  props:{
     obj: Object
   },
   data() {
     return {
-      activeName: "base", // TODO @Luowenfeng：切换时，不需要校验通过
+      activeSwitch: false,
+      activeName: "base",
       propName: {
         checkStrictly: true,
         label: "name",
@@ -271,7 +264,7 @@ export default {
     this.getListBrand();
     this.getListCategory();
     this.getPropertyPageList();
-    if(this.type == 'upd'){
+    if(this.obj.id != null){
       this.updateType(this.obj.id)
     }
   },
@@ -280,14 +273,6 @@ export default {
         this.dynamicSpec.splice(index, 1);
         this.changeRadio()
     },
-    async confirmLeave(active, old){
-      await this.$refs[old].validate((valid) => {
-        console.log(valid)
-        if (!valid) {
-          return reject();
-        }
-      });
-    },
     // 必选标识
     addRedStar(h, { column }) {
       return [
@@ -296,13 +281,13 @@ export default {
       ];
     },
     changeRadio() {
+      this.activeSwitch ? this.ratesForm.spec = 2:  this.ratesForm.spec = 1;
       this.$refs.ratesTable.doLayout();
       if (this.ratesForm.spec == 1) {
         this.ratesForm.rates = [{}]
       } else {
         this.ratesForm.rates = []
         if (this.dynamicSpec.length > 0) {
-          console.log( this.dynamicSpec)
           this.buildRatesFormRates()
         }
       }
@@ -316,6 +301,7 @@ export default {
           last.forEach(par1 => {
             current.forEach(par2 => {
               let v
+              // 当两个对象合并时，需使用[1,2]方式生成数组，而当数组和对象合并时，需使用concat
               if (par1 instanceof Array) {
                 v = par1.concat(par2)
               } else {
@@ -327,7 +313,12 @@ export default {
           return array;
         })
         .forEach(v => {
-          rates.push({spec: v, status: 0, name: Array.of(v).join()})
+          let spec = v;
+          // 当v为单个规格项时，会变成字符串。造成表格只截取第一个字符串，而不是数组的第一个元素
+          if (typeof v == 'string') {
+            spec = Array.of(v)
+          }
+          rates.push({spec: spec, status: 0, name: Array.of(v).join()})
         });
       this.ratesForm.rates = rates
     },
@@ -363,7 +354,7 @@ export default {
       })
 
       // 动态规格调整字段
-      if (this.ratesForm.spec == 2) {
+      if (this.activeSwitch) {
         rates.forEach(r => {
           let properties = []
             Array.of(r.spec).forEach(s => {
@@ -396,43 +387,42 @@ export default {
       }else{
         form.picUrls = Array.of(form.picUrls)
       }
-      console.log(rates)
       form.skus = rates;
       form.specType = this.ratesForm.spec;
       form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
 
-
       if(form.id == null){
         createSpu(form).then((response) => {
           this.$modal.msgSuccess("新增成功");
+          this.$emit("closeDialog");
         })
       }else{
         updateSpu(form).then((response) => {
           this.$modal.msgSuccess("修改成功");
+          this.$emit("closeDialog");
         })
       }
       });
-      this.$emit("closeDialog");
+
     },
     /** 查询规格 */
     getPropertyPageList() {
       // 执行查询
-      getPropertyPage().then((response) => {
-        this.propertyPageList = response.data.list;
+      getPropertyListAndValue().then((response) => {
+        this.propertyPageList = response.data;
       });
     },
+    // 添加规格项目
     changeSpec(val) {
       let obj = this.propertyPageList.find(o => o.id == val);
-      let dynamicSpec = this.dynamicSpec;
-      let spec = dynamicSpec.find(o => o.specId == val)
+      let spec = this.dynamicSpec.find(o => o.specId == val)
       spec.specId = obj.id;
       spec.specName = obj.name;
-      spec.specValue = obj.propertyValueList;
-      this.dynamicSpec = dynamicSpec;
+      spec.specValue = obj.values;
       this.buildRatesFormRates();
     },
     updateType(id){
-        getSpu(id).then((response) =>{
+      getSpuDetail(id).then((response) =>{
             let data = response.data;
             this.baseForm.id=data.id;
             this.baseForm.name=data.name;
@@ -452,6 +442,7 @@ export default {
               r.costPrice = this.divide(r.costPrice, 100)
             })
             if(this.ratesForm.spec == 2){
+              this.activeSwitch = true;
               data.productPropertyViews.forEach(p=>{
                 let obj = {};
                 obj.specId = p.propertyId;