商品信息-新ui

src/views/product/productInfo/index.vue

@@ -70,7 +70,7 @@
       <el-table-column label="主键" align="center" prop="id"/>
       <el-table-column label="商品名称" align="center" prop="name"/>
       <el-table-column label="商品描述" align="center" prop="introduction"/>
-      <el-table-column label="主类型" align="center" prop="mainType"/>
+      <el-table-column label="主类型" align="center" prop="mianType"/>
       <el-table-column label="父类型" align="center" prop="parentType"/>
       <el-table-column label="商品类型" align="center" prop="type"/>
       <el-table-column label="商品图片" align="center" prop="image" width="100">
@@ -202,7 +202,7 @@
 
         <div v-if="active==2">
           <el-form-item label="商品规格" prop="ruleId">
-            <el-select v-model="form.ruleId" placeholder="商品规格">
+            <el-select v-model="form.ruleId" @change="changeRule" placeholder="商品规格">
               <el-option
                 v-for="rule in ruleList"
                 :key="rule.id"
@@ -216,6 +216,50 @@
               </el-option>
             </el-select>
 
+            <el-form :inline="true" :model="oneSettingValue" class="demo-form-inline">
+              <el-form-item label="商品图片">
+                <image-upload
+                  v-model="oneSettingValue.image"
+                  :limit="1"
+                  :is-show-tip="false">
+                </image-upload>
+              </el-form-item>
+
+              <el-form-item label="商品价格">
+                <el-input v-model="oneSettingValue.price" placeholder="商品价格"></el-input>
+              </el-form-item>
+
+              <el-form-item label="商品库存">
+                <el-input v-model="oneSettingValue.stock" placeholder="商品库存"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit">一键添加</el-button>
+                <el-button type="primary" @click="onClean">一键清空</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]" :step="0.1" :max="10000"></el-input-number>
+                  <div v-else-if="['image'].indexOf(title.prop) > -1" style="width: 30px; height: 30px;">
+                    <image-upload v-model="scope.row[title.prop]"
+                                  :limit="1"
+                                  :is-show-tip="false"
+                                  class="custom-image-upload"
+                    ></image-upload>
+                  </div>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+
           </el-form-item>
         </div>
 
@@ -240,9 +284,9 @@
                         <div slot="header" class="clearfix">
                           <span>属性组名称【{{ templateAttributeGroup.groupName }}】</span>
                         </div>
-                        <div style="width: 50px;height: 100px">
+                        <div style="width: 100px;height: 200px">
-                          <el-form :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
+                          <el-form v-for="attribute in templateAttributeGroup.attributeList">
-                            <el-form-item>
+                            <el-form-item :label="attribute.name">
                               <el-input v-model="attribute.value"></el-input>
                             </el-form-item>
                           </el-form>
@@ -255,7 +299,7 @@
                 <el-tab-pane label="商品属性" name="second">
                   商品属性
                   <el-row style="overflow-x: auto; height: 300px;">
-                    <el-form ref="form" :model="form" label-width="80px">
+                    <el-form label-width="80px">
                       <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
                         <el-form-item :label="templateAttribute.name">
                           <el-input v-model="templateAttribute.value"></el-input>
@@ -356,6 +400,26 @@ export default {
   dicts: ['sys_normal_disable'],
   data() {
     return {
+      oneSettingValue: {
+        "image": null,
+        "stock": null,
+        "price": null
+      },
+      templateTitleList: [
+        {
+          "label": "规格图片",
+          "prop": "image"
+        },
+        {
+          "label": "商品库存",
+          "prop": "stock"
+        }, {
+          "label": "商品价格",
+          "prop": "price"
+        }
+      ],
+      skuList: [],
+      titleList: [],
       attributeIdCheckedList: [],
       attributeCheckedList: [],
       customAttributeForm: {},
@@ -377,7 +441,7 @@ export default {
       },
       ruleAddFormStatus: false,
       addRulePropertyValue: null,
-      active: 1,
+      active: 2,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -449,11 +513,11 @@ export default {
     categoryOptionValue: {
       handler(value) {
         if (value != null && value !== undefined && value.length > 0) {
-          this.form.mainType = value[0];
+          this.form.mianType = value[0];
           this.form.parentType = value[1];
           this.form.type = value[2];
         } else {
-          this.form.mainType = null
+          this.form.mianType = null
           this.form.parentType = null
           this.form.type = null
         }
@@ -481,6 +545,70 @@ export default {
     this.CategoryTree();
   },
   methods: {
+    onSubmit() {
+      this.skuList.forEach(skuInfo => {
+        console.log(this.oneSettingValue)
+        skuInfo.image = this.oneSettingValue.image;
+        skuInfo.stock = this.oneSettingValue.stock;
+        skuInfo.price = this.oneSettingValue.price;
+      })
+    },
+    onClean(){
+      this.skuList=[]
+    },
+    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.ruleList.length;
+      }
+      this.titleList.push(...this.templateTitleList)
+      this.skuList = []
+      for (let i = 0; i < skuTotal; i++) {
+        this.skuList.push(
+          {
+            "image": null,
+            "price": 0,
+            "stock": 0
+          }
+        )
+      }
+
+      //currentIndex 当前下表
+      for (let currentIndex in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[currentIndex];
+        //continuousSize  连续出现次数  forSize 循环出现次数
+        let continuousSize = 1, forSize = 1;
+        for (let continuousIndex = parseInt(currentIndex) + 1; continuousIndex < ruleAttrList.length; continuousIndex++) {
+          continuousSize = continuousSize * ruleAttrList[continuousIndex].ruleList.length
+        }
+        for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--) {
+          forSize = forSize * ruleAttrList[forIndex].ruleList.length
+        }
+        console.log(`${ruleAttrInfo.name} 规格连续出现的次数 ：${continuousSize}  循环出现的次数： ${forSize}`)
+
+        let counter = 0;
+        for (let forIndex = 0; forIndex < forSize; forIndex++) {
+          const {ruleList} = ruleAttrInfo;
+          console.log(ruleList)
+
+          ruleList.forEach(value => {
+            for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
+              this.skuList[counter++]["prop" + currentIndex] = value;
+            }
+          })
+        }
+      }
+
+
+    },
     handleCheckedCitiesChange() {
       let attributeId = this.attributeIdCheckedList
         .find(attributeId => this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1)
@@ -558,7 +686,7 @@ export default {
         id: null,
         name: null,
         introduction: null,
-        mainType: null,
+        mianType: null,
         parentType: null,
         type: null,
         image: null,
@@ -645,3 +773,10 @@ export default {
   }
 };
 </script>
+
+<style>
+.custom-image-upload img {
+  max-width: 30px;
+  max-height: 30px;
+}
+</style>