商品关联功能完善

2018-06-01 17:13:06 +08:00 · 2018-06-01 17:13:06 +08:00 · 4ad36f8f15
commit 4ad36f8f15
parent 02a28d65df
7 changed files with 213 additions and 75 deletions
--- a/src/api/prefrenceArea.js
+++ b/src/api/prefrenceArea.js
@ -0,0 +1,7 @@
+import request from '@/utils/request'
+export function fetchList() {
+  return request({
+    url:'/prefrenceArea/listAll',
+    method:'get',
+  })
+}
--- a/src/api/subject.js
+++ b/src/api/subject.js
@ -0,0 +1,7 @@
+import request from '@/utils/request'
+export function fetchList() {
+  return request({
+    url:'/subject/listAll',
+    method:'get',
+  })
+}
--- a/src/views/pms/product/add.vue
+++ b/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-sale v-show="showStatus[1]" v-model="productParam"></add-product-sale>
-    <add-product-attr v-show="showStatus[2]" v-model="productParam"></add-product-attr>
-    <add-product-relation v-show="showStatus[3]"></add-product-relation>
-    <div style="display: block;text-align: center;margin-top: 50px">
-      <el-button-group>
-        <el-button icon="el-icon-arrow-left" @click="prev">上一步</el-button>
-        <el-button type="primary" @click="next">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
-      </el-button-group>
-    </div>
+    <add-product-info
+      v-show="showStatus[0]"
+      v-model="productParam"
+      @nextStep="nextStep">
+    </add-product-info>
+    <add-product-sale
+      v-show="showStatus[1]"
+      v-model="productParam"
+      @nextStep="nextStep"
+      @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: '',
-    //促销价格相关
-    memberPriceList: [
-      {
-        memberLevelId: 0,
-        memberPrice: 0,
-        memberLevelName:null
-      }
-    ],
-    productFullReductionList: [
-      {
-        fullPrice: 0,
-        reducePrice: 0
-      }
-    ],
-    productLadderList: [
-      {
-        count: 0,
-        discount: 0,
-        price: 0
-      }
-    ],
+    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
+    memberPriceList: [],
+    //商品满减
+    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
+    //商品阶梯价格
+    productLadderList: [{count: 0,discount: 0,price: 0}],
    previewStatus: 0,
    price: 0,
    productAttributeCategoryId: null,
-    //商品属性相关
-    productAttributeValueList: [
-      {
-        productAttributeId: 0,
-        value: ''
-      }
-    ],
-    skuStockList: [
-      {
-        lowStock: 0,
-        pic: '',
-        price: 0,
-        sale: 0,
-        skuCode: '',
-        sp1: '',
-        sp2: '',
-        sp3: '',
-        stock: 0
-      }
-    ],
-    //商品关联信息
-    subjectProductRelationList: [
-      {
-        subjectId: 0
-      }
-    ],
-    prefrenceAreaProductRelationList: [
-      {
-        prefrenceAreaId: 0,
-      }
-    ],
+    //商品属性相关{productAttributeId: 0, value: ''}
+    productAttributeValueList: [],
+    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', sp1: '', sp2: '', sp3: '', stock: 0}
+    skuStockList: [],
+    //商品相关专题{subjectId: 0}
+    subjectProductRelationList: [],
+    //商品相关优选{prefrenceAreaId: 0}
+    prefrenceAreaProductRelationList: [],
    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');
      }
    }
  }
--- a/src/views/pms/product/components/addProductAttr.vue
+++ b/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')
      }
    }
  }
--- a/src/views/pms/product/components/addProductInfo.vue
+++ b/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>
--- a/src/views/pms/product/components/addProductRelation.vue
+++ b/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>

--- a/src/views/pms/product/components/addProductSale.vue
+++ b/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')
      }
    }
  }