商品关联功能完善

src/api/prefrenceArea.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+export function fetchList() {
+  return request({
+    url:'/prefrenceArea/listAll',
+    method:'get',
+  })
+}

src/api/subject.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+export function fetchList() {
+  return request({
+    url:'/subject/listAll',
+    method:'get',
+  })
+}

src/views/pms/product/add.vue

@@ -6,16 +6,32 @@
       <el-step title="填写商品属性"></el-step>
       <el-step title="选择商品关联"></el-step>
     </el-steps>
-    <add-product-info v-show="showStatus[0]" v-model="productParam"></add-product-info>
+    <add-product-info
-    <add-product-sale v-show="showStatus[1]" v-model="productParam"></add-product-sale>
+      v-show="showStatus[0]"
-    <add-product-attr v-show="showStatus[2]" v-model="productParam"></add-product-attr>
+      v-model="productParam"
-    <add-product-relation v-show="showStatus[3]"></add-product-relation>
+      @nextStep="nextStep">
-    <div style="display: block;text-align: center;margin-top: 50px">
+    </add-product-info>
-      <el-button-group>
+    <add-product-sale
-        <el-button icon="el-icon-arrow-left" @click="prev">上一步</el-button>
+      v-show="showStatus[1]"
-        <el-button type="primary" @click="next">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+      v-model="productParam"
-      </el-button-group>
+      @nextStep="nextStep"
-    </div>
+      @prevStep="prevStep"
+    >
+    </add-product-sale>
+    <add-product-attr
+      v-show="showStatus[2]"
+      v-model="productParam"
+      @nextStep="nextStep"
+      @prevStep="prevStep"
+    >
+    </add-product-attr>
+    <add-product-relation
+      v-show="showStatus[3]"
+      v-model="productParam"
+      @prevStep="prevStep"
+      @finishCommit="finishCommit"
+    >
+    </add-product-relation>
   </el-card>
 </template>
 <script>
@@ -48,61 +64,23 @@
     note: '',
     originalPrice: 0,
     pic: '',
-    //促销价格相关
+    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
-    memberPriceList: [
+    memberPriceList: [],
-      {
+    //商品满减
-        memberLevelId: 0,
+    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
-        memberPrice: 0,
+    //商品阶梯价格
-        memberLevelName:null
+    productLadderList: [{count: 0,discount: 0,price: 0}],
-      }
-    ],
-    productFullReductionList: [
-      {
-        fullPrice: 0,
-        reducePrice: 0
-      }
-    ],
-    productLadderList: [
-      {
-        count: 0,
-        discount: 0,
-        price: 0
-      }
-    ],
     previewStatus: 0,
     price: 0,
     productAttributeCategoryId: null,
-    //商品属性相关
+    //商品属性相关{productAttributeId: 0, value: ''}
-    productAttributeValueList: [
+    productAttributeValueList: [],
-      {
+    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', sp1: '', sp2: '', sp3: '', stock: 0}
-        productAttributeId: 0,
+    skuStockList: [],
-        value: ''
+    //商品相关专题{subjectId: 0}
-      }
+    subjectProductRelationList: [],
-    ],
+    //商品相关优选{prefrenceAreaId: 0}
-    skuStockList: [
+    prefrenceAreaProductRelationList: [],
-      {
-        lowStock: 0,
-        pic: '',
-        price: 0,
-        sale: 0,
-        skuCode: '',
-        sp1: '',
-        sp2: '',
-        sp3: '',
-        stock: 0
-      }
-    ],
-    //商品关联信息
-    subjectProductRelationList: [
-      {
-        subjectId: 0
-      }
-    ],
-    prefrenceAreaProductRelationList: [
-      {
-        prefrenceAreaId: 0,
-      }
-    ],
     productCategoryId: null,
     productCategoryName: '',
     productSn: '',
@@ -139,19 +117,22 @@
           this.showStatus[i] = false;
         }
       },
-      prev() {
+      prevStep() {
         if (this.active > 0 && this.active < this.showStatus.length) {
           this.active--;
           this.hideAll();
           this.showStatus[this.active] = true;
         }
       },
-      next() {
+      nextStep() {
         if (this.active < this.showStatus.length - 1) {
           this.active++;
           this.hideAll();
           this.showStatus[this.active] = true;
         }
+      },
+      finishCommit() {
+        alert('finishCommit');
       }
     }
   }

src/views/pms/product/components/addProductAttr.vue

@@ -133,6 +133,10 @@
           </el-tab-pane>
         </el-tabs>
       </el-form-item>
+      <el-form-item style="text-align: center">
+        <el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
+        <el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -341,6 +345,12 @@
       },
       getParamInputList(inputList){
         return inputList.split(',');
+      },
+      handlePrev(){
+        this.$emit('prevStep')
+      },
+      handleNext(){
+        this.$emit('nextStep')
       }
     }
   }

src/views/pms/product/components/addProductInfo.vue

@@ -23,23 +23,23 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="商品介绍：" prop="description">
+      <el-form-item label="商品介绍：">
         <el-input
           :autoSize="true"
           v-model="value.description"
           type="textarea"
           placeholder="请输入内容"></el-input>
       </el-form-item>
-      <el-form-item label="商品货号：" prop="requiredProp">
+      <el-form-item label="商品货号：">
         <el-input v-model="value.productSn"></el-input>
       </el-form-item>
-      <el-form-item label="商品售价：" prop="requiredProp">
+      <el-form-item label="商品售价：">
         <el-input v-model="value.price"></el-input>
       </el-form-item>
       <el-form-item label="市场价：">
         <el-input v-model="value.originalPrice"></el-input>
       </el-form-item>
-      <el-form-item label="商品库存：" prop="requiredProp">
+      <el-form-item label="商品库存：">
         <el-input v-model="value.stock"></el-input>
       </el-form-item>
       <el-form-item label="计量单位：">
@@ -49,6 +49,9 @@
         <el-input v-model="value.weight" style="width: 300px"></el-input>
         <span style="margin-left: 20px">克</span>
       </el-form-item>
+      <el-form-item style="text-align: center">
+        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -64,7 +67,8 @@
     },
     data() {
       return {
-        selectProductCateValue: null,
+        //选中商品分类的值
+        selectProductCateValue: [],
         productCateOptions: [],
         brandOptions: [],
         rules: {
@@ -86,7 +90,7 @@
     },
     watch: {
       selectProductCateValue: function (newValue) {
-        if (newValue != null && newValue.length == 2) {
+        if (newValue != null && newValue.length === 2) {
           this.value.productCategoryId = newValue[1];
         } else {
           this.value.productCategoryId = null;
@@ -119,12 +123,23 @@
           }
         });
       },
+      handleNext(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$emit('nextStep');
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration:1000
+            });
+            return false;
+          }
+        });
+      }
     }
   }
 </script>
 
 <style scoped>
-  .smallInput {
-    width: 150px;
-  }
 </style>

src/views/pms/product/components/addProductRelation.vue

@@ -1,10 +1,116 @@
 <template>
-  <div>选择商品关联</div>
+  <div style="margin-top: 50px">
+    <el-form :model="value"
+             ref="productRelationForm"
+             label-width="120px"
+             style="width: 680px"
+             size="small">
+      <el-form-item label="关联专题：">
+        <el-transfer
+          style="display: inline-block"
+          filterable
+          :filter-method="filterMethod"
+          filter-placeholder="请输入专题名称"
+          v-model="selectSubject"
+          :titles="subjectTitles"
+          :data="subjectList">
+        </el-transfer>
+      </el-form-item>
+      <el-form-item label="关联优选：">
+        <el-transfer
+          style="display: inline-block"
+          filterable
+          :filter-method="filterMethod"
+          filter-placeholder="请输入优选名称"
+          v-model="selectPrefrenceArea"
+          :titles="prefrenceAreaTitles"
+          :data="prefrenceAreaList">
+        </el-transfer>
+      </el-form-item>
+      <el-form-item style="text-align: center">
+        <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
+        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+  import {fetchList as fetchSubjectList} from '@/api/subject'
+  import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
+
   export default {
-    name: "addProductRelation"
+    name: "addProductRelation",
+    props: {
+      value: Object
+    },
+    data() {
+      return {
+        //选中的专题
+        selectSubject: [],
+        //所有专题列表
+        subjectList: [],
+        //专题左右标题
+        subjectTitles: ['待选择', '已选择'],
+        //选中的专题
+        selectPrefrenceArea: [],
+        //所有专题列表
+        prefrenceAreaList: [],
+        //专题左右标题
+        prefrenceAreaTitles: ['待选择', '已选择']
+      };
+    },
+    created() {
+      this.getSubjectList();
+      this.getPrefrenceAreaList();
+    },
+    watch: {
+      selectSubject: function (newValue) {
+        this.value.subjectProductRelationList=[];
+        for(let i=0;i<newValue.length;i++){
+          this.value.subjectProductRelationList.push({subjectId:newValue[i]});
+        }
+      },
+      selectPrefrenceArea: function (newValue) {
+        this.value.prefrenceAreaProductRelationList=[];
+        for(let i=0;i<newValue.length;i++){
+          this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
+        }
+      }
+    },
+    methods: {
+      filterMethod(query, item) {
+        return item.label.indexOf(query) > -1;
+      },
+      getSubjectList() {
+        fetchSubjectList().then(response => {
+          let list = response.data;
+          for (let i = 0; i < list.length; i++) {
+            this.subjectList.push({
+              label: list[i].title,
+              key: list[i].id
+            });
+          }
+        });
+      },
+      getPrefrenceAreaList() {
+        fetchPrefrenceAreaList().then(response=>{
+          let list = response.data;
+          for (let i = 0; i < list.length; i++) {
+            this.prefrenceAreaList.push({
+              label: list[i].name,
+              key: list[i].id
+            });
+          }
+        });
+      },
+      handlePrev(){
+        this.$emit('prevStep')
+      },
+      handleFinishCommit(){
+        this.$emit('finishCommit')
+      }
+    }
   }
 </script>
 

src/views/pms/product/components/addProductSale.vue

@@ -156,6 +156,10 @@
           </el-table-column>
         </el-table>
       </el-form-item>
+      <el-form-item style="text-align: center">
+        <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
+        <el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -169,7 +173,9 @@
     },
     data() {
       return {
+        //选中的服务保证
         selectServiceList: [],
+        //日期选择器配置
         pickerOptions1: {
           disabledDate(time) {
             return time.getTime() < Date.now();
@@ -258,6 +264,12 @@
             type: 'warning'
           });
         }
+      },
+      handlePrev(){
+        this.$emit('prevStep')
+      },
+      handleNext(){
+        this.$emit('nextStep')
       }
     }
   }