添加属性功能完善

src/views/pms/product/add.vue

@@ -8,7 +8,7 @@
     </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]"></add-product-attr>
+    <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>
@@ -71,7 +71,7 @@
     ],
     previewStatus: 0,
     price: 0,
-    productAttributeCategoryId: 0,
+    productAttributeCategoryId: null,
     //商品属性相关
     productAttributeValueList: [
       {
@@ -158,7 +158,7 @@
 </script>
 <style>
   .form-container {
-    width: 800px;
+    width: 860px;
   }
 </style>
 

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

@@ -1,15 +1,316 @@
 <template>
   <div style="margin-top: 50px">
-
+    <el-form :model="value" ref="productAttrForm" label-width="120px" style="width: 780px" size="small">
+      <el-form-item label="属性类型：">
+        <el-select v-model="value.productAttributeCategoryId"
+                   placeholder="请选择属性类型"
+                   @change="handleProductAttrChange">
+          <el-option
+            v-for="item in productAttributeCategoryOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品规格：">
+        <el-card shadow="never" class="cardBg">
+          <div v-for="(productAttr,idx) in selectProductAttr">
+            {{productAttr.name}}：
+            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
+              <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
+                           class="littleMarginLeft"></el-checkbox>
+            </el-checkbox-group>
+            <div v-else>
+              <el-checkbox-group v-model="selectProductAttr[idx].values">
+                <div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
+                     class="littleMarginLeft">
+                  <el-checkbox :label="item" :key="item"></el-checkbox>
+                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
+                  </el-button>
+                </div>
+              </el-checkbox-group>
+              <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
+              <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
+            </div>
+          </div>
+        </el-card>
+        <el-table style="width: 100%;margin-top: 20px"
+                  :data="value.skuStockList"
+                  border>
+          <el-table-column
+            v-for="(item,index) in selectProductAttr"
+            :label="item.name"
+            :key="item.id"
+            align="center">
+            <template slot-scope="scope">
+              {{getProductSkuSp(scope.row,index)}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="销售价格"
+            width="80"
+            align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.price"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="商品库存"
+            width="80"
+            align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.stock"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="库存预警值"
+            width="80"
+            align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.lowStock"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="SKU编号"
+            align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.skuCode"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="80"
+            align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                @click="handleRemoveProductSku(scope.$index, scope.row)">删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-button
+          type="primary"
+          style="margin-top: 20px"
+          @click="handleRefreshProductSkuList">刷新列表
+        </el-button>
+      </el-form-item>
+      <el-form-item label="属性图片：" v-if="hasAttrPic">
+        <div v-for="(item,index) in selectProductAttr[0].values">
+          <span style="position:relative;top: -150px;">{{item}}:</span>
+          <single-upload v-model="selectProductAttr[0].pics[index]" style="width: 250px;display: inline-block;margin-left: 10px"></single-upload>
+        </div>
+      </el-form-item>
+      <el-form-item label="商品参数：">
+        <el-card shadow="never" class="cardBg">
+        <div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
+          <div class="paramInputLabel">{{item.name}}:</div>
+          <el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
+            <el-option
+              v-for="item in getParamInputList(item.inputList)"
+              :key="item"
+              :label="item"
+              :value="item">
+            </el-option>
+          </el-select>
+          <el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
+        </div>
+        </el-card>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
+  import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
+  import {fetchList as fetchProductAttrList} from '@/api/productAttr'
+  import SingleUpload from '@/components/Upload/singleUpload'
+
   export default {
-    name: "addProductAttr"
+    name: "addProductAttr",
+    components:{SingleUpload},
+    props: {
+      value: Object
+    },
+    data() {
+      return {
+        productAttributeCategoryOptions: [],
+        selectProductAttr: [],
+        selectProductParam:[],
+        addProductAttrValue: null
+      }
+    },
+    computed: {
+      hasAttrPic() {
+        if(this.selectProductAttr.length<1){
+          return false;
+        }
+        if(this.selectProductAttr[0].values.length<1){
+          return false;
+        }
+        return true;
+      }
+    },
+    created() {
+      this.getProductAttrCateList();
+      if (this.value.productAttributeCategoryId != null) {
+        this.handleProductAttrChange(this.value.productAttributeCategoryId);
+      }
+    },
+    methods: {
+      getProductAttrCateList() {
+        let param = {pageNum: 1, pageSize: 100};
+        fetchProductAttrCateList(param).then(response => {
+          this.productAttributeCategoryOptions = [];
+          let list = response.data.list;
+          for (let i = 0; i < list.length; i++) {
+            this.productAttributeCategoryOptions.push({label: list[i].name, value: list[i].id});
+          }
+        });
+      },
+      getProductAttrList(type, cid) {
+        let param = {pageNum: 1, pageSize: 100, type: type};
+        fetchProductAttrList(cid, param).then(response => {
+          let list = response.data.list;
+          if (type === 0) {
+            this.selectProductAttr = [];
+            for (let i = 0; i < list.length; i++) {
+              this.selectProductAttr.push({
+                id: list[i].id,
+                name:list[i].name,
+                handAddStatus: list[i].handAddStatus,
+                inputList:list[i].inputList,
+                values: [],
+                options: [],
+                pics:[]
+              });
+            }
+          } else {
+            this.selectProductParam = [];
+            for (let i = 0; i < list.length; i++) {
+              this.selectProductParam.push({
+                id: list[i].id,
+                name:list[i].name,
+                value: null,
+                inputType:list[i].inputType,
+                inputList:list[i].inputList
+              });
+            }
+          }
+        });
+      },
+      handleProductAttrChange(value) {
+        this.getProductAttrList(0, value);
+        this.getProductAttrList(1, value);
+      },
+      getInputListArr(inputList) {
+        return inputList.split(',');
+      },
+      handleAddProductAttrValue(idx) {
+        let options = this.selectProductAttr[idx].options;
+        if (this.addProductAttrValue == null || this.addProductAttrValue == '') {
+          this.$message({
+            message: '属性值不能为空',
+            type: 'warning',
+            duration: 1000
+          });
+          return
+        }
+        if (options.indexOf(this.addProductAttrValue) !== -1) {
+          this.$message({
+            message: '属性值不能重复',
+            type: 'warning',
+            duration: 1000
+          });
+          return;
+        }
+        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
+        this.addProductAttrValue = null;
+      },
+      handleRemoveProductAttrValue(idx, index) {
+        this.selectProductAttr[idx].options.splice(index, 1);
+      },
+      getProductSkuSp(row, index) {
+        if (index === 0) {
+          return row.sp1;
+        } else if (index === 1) {
+          return row.sp2;
+        } else {
+          return row.sp3;
+        }
+      },
+      handleRefreshProductSkuList() {
+        this.value.skuStockList = [];
+        let skuList = this.value.skuStockList;
+        //只有一个属性时
+        if (this.selectProductAttr.length === 1) {
+          let values = this.selectProductAttr[0].values;
+          for (let i = 0; i < values.length; i++) {
+            skuList.push({
+              sp1: values[i]
+            });
+          }
+        } else if (this.selectProductAttr.length === 2) {
+          let values0 = this.selectProductAttr[0].values;
+          let values1 = this.selectProductAttr[1].values;
+          for (let i = 0; i < values0.length; i++) {
+            for (let j = 0; j < values1.length; j++) {
+              skuList.push({
+                sp1: values0[i],
+                sp2: values1[j]
+              });
+            }
+          }
+        } else {
+          let values0 = this.selectProductAttr[0].values;
+          let values1 = this.selectProductAttr[1].values;
+          let values2 = this.selectProductAttr[2].values;
+          for (let i = 0; i < values0.length; i++) {
+            for (let j = 0; j < values1.length; j++) {
+              for (let k = 0; k < values2.length; k++) {
+                skuList.push({
+                  sp1: values0[i],
+                  sp2: values1[j],
+                  sp3: values2[k]
+                });
+              }
+            }
+          }
+        }
+      },
+      handleRemoveProductSku(index, row) {
+        let list = this.value.skuStockList;
+        if (list.length === 1) {
+          list.pop();
+        } else {
+          list.splice(index, 1);
+        }
+      },
+      getParamInputList(inputList){
+        return inputList.split(',');
+      }
+    }
   }
 </script>
 
 <style scoped>
-
+  .littleMarginLeft {
+    margin-left: 10px;
+  }
+  .littleMarginTop {
+    margin-top: 10px;
+  }
+  .paramInput{
+    width: 250px;
+  }
+  .paramInputLabel{
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+    padding-right: 10px
+  }
+  .cardBg{
+    background: #F8F9FC;
+  }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div style="margin-top: 50px">
-    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="150px" style="width: 600px" size="small">
+    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
       <el-form-item label="商品分类：" prop="productCategoryId">
         <el-cascader
           v-model="selectProductCateValue"

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

@@ -1,6 +1,6 @@
 <template>
   <div style="margin-top: 50px">
-    <el-form :model="value" ref="productSaleForm" label-width="150px" style="width: 600px" size="small">
+    <el-form :model="value" ref="productSaleForm" label-width="120px" style="width: 600px" size="small">
       <el-form-item label="赠送积分：">
         <el-input v-model="value.giftPoint"></el-input>
       </el-form-item>

src/views/pms/productAttr/productAttrList.vue

@@ -194,7 +194,7 @@
     filters: {
       inputTypeFilter(value) {
         if (value === 1) {
-          return '手工录入';
+          return '从列表中选取';
         } else {
           return '手工录入'
         }