属性组的修改 商品添加

src/views/product/info/index.vue

@@ -211,7 +211,7 @@
           </el-row>
         </div>
         <div v-show="stepNumber === 1">
-          <el-form-item label="品类" prop="ruleId">
+          <el-form-item label="品类" prop="type">
             <el-cascader
               style="width: 100%"
               v-model="categoryOptionValue"
@@ -229,7 +229,7 @@
                       <span>属性组【{{templateAttributeGroup.groupName}}】</span>
                     </div>
                     <div style="height: 200px; width: 100%;">
-                      <el-form ref="form" label-width="80px">
+                      <el-form ref="templateAttributeGroupForm" label-width="80px">
                         <el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
                           <el-input v-model="attribute.value"></el-input>
                         </el-form-item>
@@ -256,19 +256,19 @@
                   <span>添加商品属性</span>
                 </div>
                 <el-row>
-                  <el-button v-show="!customPropertiesFormStatus" @click="customPropertiesFormStatus = true">添加自有属性</el-button>
-                  <el-form v-show="customPropertiesFormStatus" :inline="true" :model="customPropertiesForm" class="demo-form-inline">
+                  <el-button v-show="!customAttributeFormStatus" @click="customAttributeFormStatus = true">添加自有属性</el-button>
+                  <el-form v-show="customAttributeFormStatus" :inline="true" :model="customAttributeForm" class="demo-form-inline">
                     <el-form-item label="属性编码">
-                      <el-input v-model="customPropertiesForm.code" placeholder="属性编码"></el-input>
+                      <el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
                     </el-form-item>
                     <el-form-item label="属性名称">
-                      <el-input v-model="customPropertiesForm.name" placeholder="属性名称"></el-input>
+                      <el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
                     </el-form-item>
                     <el-form-item label="属性值">
-                      <el-input v-model="customPropertiesForm.value" placeholder="属性值"></el-input>
+                      <el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
                     </el-form-item>
                     <el-form-item>
-                      <el-button type="primary" @click="customPropertiesFormStatus = false">确定</el-button>
+                      <el-button type="primary" @click="saveCustomAttribute">确定</el-button>
                     </el-form-item>
                   </el-form>
                 </el-row>
@@ -291,7 +291,7 @@
                   <span>属性值填写</span>
                 </div>
                 <el-row style="overflow-x: auto; height: 300px;">
-                  <el-form ref="form" :model="form" label-width="80px">
+                  <el-form ref="attributeForm" :model="form" label-width="80px">
                     <el-col :span="6" v-for="attribute in attributeCheckedList">
                       <el-form-item :label="attribute.name">
                         <el-input v-model="attribute.value"></el-input>
@@ -305,7 +305,7 @@
         </div>
         <div v-show="stepNumber === 2">
           <el-form-item label="规格" prop="ruleId">
-            <el-select v-model="form.ruleId" placeholder="请选择" style="width: 100%;">
+            <el-select v-model="form.ruleId" placeholder="请选择" @change="changeRule" style="width: 100%;">
               <el-option
                 v-for="rule in ruleList"
                 :key="rule.id"
@@ -315,9 +315,41 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
+            <el-form-item label="图片">
+              <image-upload
+                :limit="1"
+                :is-show-tip="false"
+                v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
+            </el-form-item>
+            <el-form-item label="价格">
+              <el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
+            </el-form-item>
+            <el-form-item label="库存">
+              <el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="oneSetting">一键设置</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            :data="skuList"
+            border
+            style="width: 100%">
+            <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
+              <template slot-scope="scope">
+                <span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
+                <el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
+                <image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
+                :limit="1"
+                :is-show-tip="false"
+                ></image-upload>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
         <div v-show="stepNumber === 3">
-          <el-form-item label="商品描述">
+          <el-form-item label="商品描述" prop="introduction">
             <editor v-model="form.introduction" :min-height="192"/>
           </el-form-item>
         </div>
@@ -337,6 +369,7 @@ import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/i
 import {listBrand} from "@/api/product/brand";
 import {getTemplateAttribute, listCategory} from "@/api/product/category";
 import {listRule} from "@/api/product/rule";
+import {addAttribute} from "@/api/product/attribute";
 
 export default {
   name: "Info",
@@ -380,29 +413,69 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" }
+        name: [
+          { required: true, message: "商品名称不能为空", trigger: "blur" }
         ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        status: [
+          { required: true, message: "商品状态不能为空", trigger: "blur" }
+        ],
+        brandId: [
+          { required: true, message: "商品品牌不能为空", trigger: "blur" }
+        ],
+        image: [
+          { required: true, message: "商品图片不能为空", trigger: "blur" }
+        ],
+        carouselImages: [
+          { required: true, message: "商品轮播图不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "商品品类不能为空", trigger: "blur" }
+        ],
+        ruleId: [
+          { required: true, message: "商品规格不能为空", trigger: "blur" }
         ],
       },
-      stepNumber: 1,
+      rulesTemplateMap: {
+        0: ["name", "status", "brandId", "image", "carouselImages"],
+        1: ["type"],
+        2: ["ruleId"],
+      },
+      stepNumber: 0,
       brandList: [],
       categoryOptions: [],
       categoryOptionValue: [],
       ruleList: [],
       activeName: "attributeGroup",
-      customPropertiesForm: {
+      customAttributeForm: {
 
       },
-      customPropertiesFormStatus: false,
+      customAttributeFormStatus: false,
       attributeIdCheckedList: [],
       attributeCheckedList: [],
       categoryCommonElement: {
         templateAttributeGroupList: [],
         templateAttributeList: [],
         attributeList: []
+      },
+      templateTitleList: [
+        {
+          "label":"规格图片",
+          "prop":"image"
+        },
+        {
+          "label":"商品库存",
+          "prop":"stock"
+        }, {
+          "label":"商品价格",
+          "prop":"price"
+        }
+      ],
+      titleList: [],
+      skuList: [],
+      oneSettingForm: {
+        "image": null,
+        "stock": null,
+        "price": null
       }
     };
   },
@@ -440,6 +513,88 @@ export default {
     this.getList();
   },
   methods: {
+    oneSetting(){
+      this.skuList.forEach(skuInfo => {
+        skuInfo.image = this.oneSettingForm.image;
+        skuInfo.stock = this.oneSettingForm.stock;
+        skuInfo.price = this.oneSettingForm.price;
+      })
+    },
+    changeRule(ruleId){
+      this.titleList = []
+      let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
+      const {ruleAttrList} = ruleInfo;
+      let skuTotal = 1;
+      for (let ruleAttrListKey in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
+        this.titleList.push({
+          "label":ruleAttrInfo.name,
+          "prop":"prop"+ruleAttrListKey
+        })
+        skuTotal = skuTotal * ruleAttrInfo.valueList.length;
+      }
+      this.titleList.push(...this.templateTitleList) ;
+      console.log(this.titleList);
+      this.skuList = [];
+      for (let i = 0; i < skuTotal; i++) {
+        this.skuList.push(
+          {
+            "image": null,
+            "price": 85.62,
+            "stock": 236
+          }
+        );
+      }
+      // currentIndex 当前下标
+      for (let currentIndex in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[currentIndex];
+        // 连续出现次数  循环出现次数
+        let continuousSize = 1, forSize = 1;
+        for (let continuousIndex = parseInt(currentIndex) + 1 ; continuousIndex < ruleAttrList.length ; continuousIndex++ ){
+          continuousSize = continuousSize * ruleAttrList[continuousIndex].valueList.length;
+        }
+        for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--){
+          forSize = forSize * ruleAttrList[forIndex].valueList.length
+        }
+        console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize}  循环出现次数：${forSize}`)
+        let counter = 0;
+        for (let forIndex = 0; forIndex < forSize; forIndex++) {
+          const {valueList} = ruleAttrInfo;
+          valueList.forEach(value => {
+            for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
+              this.skuList[counter++]["prop"+currentIndex] = value;
+            }
+          })
+        }
+      }
+    },
+    saveCustomAttribute(){
+      addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
+        if (response.code === 200){
+          // 添加逻辑
+          let attributeId = response.data,
+              code = this.customAttributeForm.code,
+              name = this.customAttributeForm.name,
+              value = this.customAttributeForm.value;
+          // categoryCommonElement / attributeIdCheckedList / attributeCheckedList
+          this.categoryCommonElement.attributeList.push({
+            "id": attributeId,
+            "name": name,
+            "code": code
+          });
+          this.attributeIdCheckedList.push(attributeId);
+          this.attributeCheckedList.push(
+            {
+              "id": attributeId,
+              "name": name,
+              "value": value
+            }
+          );
+          this.customAttributeForm = {}
+          this.customAttributeFormStatus = false;
+        }
+      })
+    },
     attributeCheckedFun() {
       // attributeIdCheckedList -> attributeCheckedList 不在
       // 1 -> ID 1 : attributeCheckedList[] -> 1
@@ -483,7 +638,16 @@ export default {
       this.stepNumber--
     },
     next() {
-      this.stepNumber++
+      let isValidate = true;
+      this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
+        console.log(valid)
+        if (valid) {
+          isValidate = false;
+        }
+      });
+      if (isValidate){
+        this.stepNumber++
+      }
     },
     /** 查询商品信息列表 */
     getList() {

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://127.0.0.1:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''