diff --git a/yudao-module-mall/yudao-module-product-api/src/main/java/cn/iocoder/yudao/module/product/enums/ErrorCodeConstants.java b/yudao-module-mall/yudao-module-product-api/src/main/java/cn/iocoder/yudao/module/product/enums/ErrorCodeConstants.java
index 06ca657eb..e328d2512 100644
--- a/yudao-module-mall/yudao-module-product-api/src/main/java/cn/iocoder/yudao/module/product/enums/ErrorCodeConstants.java
+++ b/yudao-module-mall/yudao-module-product-api/src/main/java/cn/iocoder/yudao/module/product/enums/ErrorCodeConstants.java
@@ -28,4 +28,5 @@ public interface ErrorCodeConstants {
 
     // ========== 商品sku 1008006000 ==========
     ErrorCode SKU_NOT_EXISTS = new ErrorCode(1008006000, "商品sku不存在");
+    ErrorCode SKU_PROPERTIES_DUPLICATED = new ErrorCode(1008006001, "商品sku的属性组合存在重复");
 }
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/sku/vo/ProductSkuBaseVO.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/sku/vo/ProductSkuBaseVO.java
index c3c84d3cc..7f8d00f71 100755
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/sku/vo/ProductSkuBaseVO.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/sku/vo/ProductSkuBaseVO.java
@@ -45,7 +45,9 @@ public class ProductSkuBaseVO {
 
     @Data
     public static class Property {
+        @NotNull(message = "规格属性名id不能为空")
         private Integer propertyId;
+        @NotNull(message = "规格属性值id不能为空")
         private Integer valueId;
     }
 
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/convert/sku/ProductSkuConvert.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/convert/sku/ProductSkuConvert.java
index 0aac851c3..232ce3178 100755
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/convert/sku/ProductSkuConvert.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/convert/sku/ProductSkuConvert.java
@@ -37,6 +37,8 @@ public interface ProductSkuConvert {
 
     List<ProductSkuRespVO> convertList(List<ProductSkuDO> list);
 
+    List<ProductSkuDO> convertSkuDOList(List<ProductSkuCreateReqVO> list);
+
     PageResult<ProductSkuRespVO> convertPage(PageResult<ProductSkuDO> page);
 
     List<ProductSkuExcelVO> convertList02(List<ProductSkuDO> list);
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyService.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyService.java
index ec2622af5..1e6d13c3a 100644
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyService.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyService.java
@@ -76,4 +76,10 @@ public interface ProductPropertyService {
 
     ProductPropertyRespVO getPropertyResp(Long id);
 
+    /**
+     * 根据数据名id集合查询属性名以及属性值的集合
+     * @param propertyIds 属性名id集合
+     * @return
+     */
+    List<ProductPropertyRespVO> selectByIds(List<Integer> propertyIds);
 }
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyServiceImpl.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyServiceImpl.java
index b940b6799..f6fadaae0 100644
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyServiceImpl.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/property/ProductPropertyServiceImpl.java
@@ -1,5 +1,6 @@
 package cn.iocoder.yudao.module.product.service.property;
 
+import cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.module.product.controller.admin.property.vo.*;
 import cn.iocoder.yudao.module.product.controller.admin.property.vo.ProductPropertyCreateReqVO;
@@ -113,13 +114,13 @@ public class ProductPropertyServiceImpl implements ProductPropertyService {
         //获取属性列表
         PageResult<ProductPropertyDO> pageResult = productPropertyMapper.selectPage(pageReqVO);
         PageResult<ProductPropertyRespVO> propertyRespVOPageResult = ProductPropertyConvert.INSTANCE.convertPage(pageResult);
-        List<Long> propertyIds = propertyRespVOPageResult.getList().stream().map(x -> x.getId()).collect(Collectors.toList());
+        List<Long> propertyIds = propertyRespVOPageResult.getList().stream().map(ProductPropertyRespVO::getId).collect(Collectors.toList());
 
         //获取属性值列表
         List<ProductPropertyValueDO> productPropertyValueDOList = productPropertyValueService.getPropertyValueListByPropertyId(propertyIds);
         List<ProductPropertyValueRespVO> propertyValueRespVOList = ProductPropertyValueConvert.INSTANCE.convertList(productPropertyValueDOList);
         //组装一对多
-        propertyRespVOPageResult.getList().stream().forEach(x->{
+        propertyRespVOPageResult.getList().forEach(x->{
             Long propertyId = x.getId();
             List<ProductPropertyValueRespVO> valueDOList = propertyValueRespVOList.stream().filter(v -> v.getPropertyId().equals(propertyId)).collect(Collectors.toList());
             x.setPropertyValueList(valueDOList);
@@ -140,4 +141,8 @@ public class ProductPropertyServiceImpl implements ProductPropertyService {
         return propertyRespVO;
     }
 
+    @Override
+    public List<ProductPropertyRespVO> selectByIds(List<Integer> propertyIds) {
+        return ProductPropertyConvert.INSTANCE.convertList(productPropertyMapper.selectBatchIds(propertyIds));
+    }
 }
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuService.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuService.java
index ea0c4651a..df10d777e 100755
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuService.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuService.java
@@ -72,4 +72,11 @@ public interface ProductSkuService {
      * @param skuCreateReqList sku组合的集合
      */
     void validatedSkuReq(List<ProductSkuCreateReqVO> skuCreateReqList);
+
+    /**
+     * 批量保存sku
+     * @param skuDOList sku对象集合
+     * @return
+     */
+    void batchSave(List<ProductSkuDO> skuDOList);
 }
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuServiceImpl.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuServiceImpl.java
index c0b90db45..eed0ee91f 100755
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuServiceImpl.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/sku/ProductSkuServiceImpl.java
@@ -1,21 +1,25 @@
 package cn.iocoder.yudao.module.product.service.sku;
 
+import cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.module.product.controller.admin.property.vo.ProductPropertyRespVO;
+import cn.iocoder.yudao.module.product.controller.admin.propertyvalue.vo.ProductPropertyValueRespVO;
+import cn.iocoder.yudao.module.product.controller.admin.sku.vo.*;
+import cn.iocoder.yudao.module.product.convert.sku.ProductSkuConvert;
+import cn.iocoder.yudao.module.product.dal.dataobject.sku.ProductSkuDO;
+import cn.iocoder.yudao.module.product.dal.mysql.sku.ProductSkuMapper;
+import cn.iocoder.yudao.module.product.enums.ErrorCodeConstants;
+import cn.iocoder.yudao.module.product.service.property.ProductPropertyService;
 import org.springframework.stereotype.Service;
-import javax.annotation.Resource;
 import org.springframework.validation.annotation.Validated;
 
+import javax.annotation.Resource;
 import java.util.*;
 import java.util.stream.Collectors;
 
-import cn.iocoder.yudao.module.product.controller.admin.sku.vo.*;
-import cn.iocoder.yudao.module.product.dal.dataobject.sku.ProductSkuDO;
-import cn.iocoder.yudao.framework.common.pojo.PageResult;
-
-import cn.iocoder.yudao.module.product.convert.sku.ProductSkuConvert;
-import cn.iocoder.yudao.module.product.dal.mysql.sku.ProductSkuMapper;
-
 import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception;
-import static cn.iocoder.yudao.module.product.enums.ErrorCodeConstants.*;
+import static cn.iocoder.yudao.module.product.enums.ErrorCodeConstants.PROPERTY_NOT_EXISTS;
+import static cn.iocoder.yudao.module.product.enums.ErrorCodeConstants.SKU_NOT_EXISTS;
 
 /**
  * 商品sku Service 实现类
@@ -27,13 +31,16 @@ import static cn.iocoder.yudao.module.product.enums.ErrorCodeConstants.*;
 public class ProductSkuServiceImpl implements ProductSkuService {
 
     @Resource
-    private ProductSkuMapper ProductSkuMapper;
+    private ProductSkuMapper productSkuMapper;
+
+    @Resource
+    private ProductPropertyService productPropertyService;
 
     @Override
     public Long createSku(ProductSkuCreateReqVO createReqVO) {
         // 插入
         ProductSkuDO sku = ProductSkuConvert.INSTANCE.convert(createReqVO);
-        ProductSkuMapper.insert(sku);
+        productSkuMapper.insert(sku);
         // 返回
         return sku.getId();
     }
@@ -44,7 +51,7 @@ public class ProductSkuServiceImpl implements ProductSkuService {
         this.validateSkuExists(updateReqVO.getId());
         // 更新
         ProductSkuDO updateObj = ProductSkuConvert.INSTANCE.convert(updateReqVO);
-        ProductSkuMapper.updateById(updateObj);
+        productSkuMapper.updateById(updateObj);
     }
 
     @Override
@@ -52,40 +59,67 @@ public class ProductSkuServiceImpl implements ProductSkuService {
         // 校验存在
         this.validateSkuExists(id);
         // 删除
-        ProductSkuMapper.deleteById(id);
+        productSkuMapper.deleteById(id);
     }
 
     private void validateSkuExists(Long id) {
-        if (ProductSkuMapper.selectById(id) == null) {
+        if (productSkuMapper.selectById(id) == null) {
             throw exception(SKU_NOT_EXISTS);
         }
     }
 
     @Override
     public ProductSkuDO getSku(Long id) {
-        return ProductSkuMapper.selectById(id);
+        return productSkuMapper.selectById(id);
     }
 
     @Override
     public List<ProductSkuDO> getSkuList(Collection<Long> ids) {
-        return ProductSkuMapper.selectBatchIds(ids);
+        return productSkuMapper.selectBatchIds(ids);
     }
 
     @Override
     public PageResult<ProductSkuDO> getSkuPage(ProductSkuPageReqVO pageReqVO) {
-        return ProductSkuMapper.selectPage(pageReqVO);
+        return productSkuMapper.selectPage(pageReqVO);
     }
 
     @Override
     public List<ProductSkuDO> getSkuList(ProductSkuExportReqVO exportReqVO) {
-        return ProductSkuMapper.selectList(exportReqVO);
+        return productSkuMapper.selectList(exportReqVO);
     }
 
     @Override
     public void validatedSkuReq(List<ProductSkuCreateReqVO> skuCreateReqList) {
+        List<ProductSkuBaseVO.Property> skuPropertyList = skuCreateReqList.stream().flatMap(p -> p.getProperties().stream()).collect(Collectors.toList());
         // 校验规格属性以及规格值是否存在
-        List<Integer> propertyIds = skuCreateReqList.stream().flatMap(p -> p.getProperties().stream()).map(ProductSkuBaseVO.Property::getPropertyId).collect(Collectors.toList());
-
+        List<Integer> propertyIds = skuPropertyList.stream().map(ProductSkuBaseVO.Property::getPropertyId).collect(Collectors.toList());
+        List<ProductPropertyRespVO> propertyAndValueList = productPropertyService.selectByIds(propertyIds);
+        if (propertyAndValueList.isEmpty())
+            throw ServiceExceptionUtil.exception(PROPERTY_NOT_EXISTS);
+        Map<Long, ProductPropertyRespVO> propertyMap = propertyAndValueList.stream().collect(Collectors.toMap(ProductPropertyRespVO::getId, p -> p));
+        skuPropertyList.forEach(p -> {
+            ProductPropertyRespVO productPropertyRespVO = propertyMap.get(p.getPropertyId());
+            // 如果对应的属性名不存在或属性名下的属性值集合为空，给出提示
+            if (null == productPropertyRespVO || productPropertyRespVO.getPropertyValueList().isEmpty())
+                throw ServiceExceptionUtil.exception(PROPERTY_NOT_EXISTS);
+            // 判断改属性名对应的属性值是否存在,不存在，给出提示
+            if (!productPropertyRespVO.getPropertyValueList().stream().map(ProductPropertyValueRespVO::getId).collect(Collectors.toSet()).contains(p.getValueId())) {
+                throw ServiceExceptionUtil.exception(ErrorCodeConstants.PROPERTY_VALUE_NOT_EXISTS);
+            }
+        });
         // 校验是否有重复的sku组合
+        List<List<ProductSkuBaseVO.Property>> skuProperties = skuCreateReqList.stream().map(ProductSkuBaseVO::getProperties).collect(Collectors.toList());
+        Set<String> skuPropertiesConvertSet = new HashSet<>();
+        skuProperties.forEach(p -> {
+            // 组合属性值id为 1~2~3.... 形式的字符串，通过set的特性判断是否有重复的组合
+            if (!skuPropertiesConvertSet.add(p.stream().map(pr -> String.valueOf(pr.getValueId())).sorted().collect(Collectors.joining("～")))) {
+                throw ServiceExceptionUtil.exception(ErrorCodeConstants.SKU_PROPERTIES_DUPLICATED);
+            }
+        });
+    }
+
+    @Override
+    public void batchSave(List<ProductSkuDO> skuDOList) {
+        productSkuMapper.insertBatch(skuDOList);
     }
 }
diff --git a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/spu/ProductSpuServiceImpl.java b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/spu/ProductSpuServiceImpl.java
index 5ebbabb33..d0eb5879a 100755
--- a/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/spu/ProductSpuServiceImpl.java
+++ b/yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/spu/ProductSpuServiceImpl.java
@@ -1,6 +1,8 @@
 package cn.iocoder.yudao.module.product.service.spu;
 
 import cn.iocoder.yudao.module.product.controller.admin.sku.vo.ProductSkuCreateReqVO;
+import cn.iocoder.yudao.module.product.convert.sku.ProductSkuConvert;
+import cn.iocoder.yudao.module.product.dal.dataobject.sku.ProductSkuDO;
 import cn.iocoder.yudao.module.product.service.category.CategoryService;
 import cn.iocoder.yudao.module.product.service.sku.ProductSkuService;
 import org.springframework.stereotype.Service;
@@ -11,6 +13,8 @@ import org.springframework.transaction.annotation.Transactional;
 import org.springframework.validation.annotation.Validated;
 
 import java.util.*;
+import java.util.stream.Collectors;
+
 import cn.iocoder.yudao.module.product.controller.admin.spu.vo.*;
 import cn.iocoder.yudao.module.product.dal.dataobject.spu.ProductSpuDO;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
@@ -47,12 +51,16 @@ public class ProductSpuServiceImpl implements ProductSpuService {
         // 校验SKU
         List<ProductSkuCreateReqVO> skuCreateReqList = createReqVO.getProductSkuCreateReqVOS();
         productSkuService.validatedSkuReq(skuCreateReqList);
-        // 插入
+        // 插入SPU
         ProductSpuDO spu = ProductSpuConvert.INSTANCE.convert(createReqVO);
+        ProductSpuMapper.insert(spu);
+        // sku关联SPU属性
         skuCreateReqList.forEach(p -> {
             p.setSpuId(spu.getId());
         });
-        ProductSpuMapper.insert(spu);
+        List<ProductSkuDO> skuDOList = ProductSkuConvert.INSTANCE.convertSkuDOList(skuCreateReqList);
+        // 批量插入sku
+        productSkuService.batchSave(skuDOList);
         // 返回
         return spu.getId();
     }
diff --git a/yudao-ui-admin/src/views/mall/product/spu/index.vue b/yudao-ui-admin/src/views/mall/product/spu/index.vue
index 4fba24ac4..0596ebb03 100644
--- a/yudao-ui-admin/src/views/mall/product/spu/index.vue
+++ b/yudao-ui-admin/src/views/mall/product/spu/index.vue
@@ -20,14 +20,14 @@
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择上下架状态" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
-          <el-option label="上架" value="0" />
-          <el-option label="下架" value="1" />
+          <el-option label="请选择字典生成" value=""/>
+          <el-option label="上架" value="0"/>
+          <el-option label="下架" value="1"/>
         </el-select>
       </el-form-item>
       <el-form-item label="创建时间">
         <el-date-picker v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd"
-                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
+                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -39,28 +39,31 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['product:spu:create']">新增</el-button>
+                   v-hasPermi="['product:spu:create']">新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['product:spu:export']">导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                   :loading="exportLoading"
+                   v-hasPermi="['product:spu:export']">导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="商品名称" align="center" prop="name" />
-      <el-table-column label="卖点" align="center" prop="sellPoint" />
-      <el-table-column label="描述" align="center" prop="description" />
-      <el-table-column label="分类id" align="center" prop="categoryId" />
-      <el-table-column label="商品主图地址" align="center" prop="picUrls" />
-      <el-table-column label="排序字段" align="center" prop="sort" />
-      <el-table-column label="点赞初始人数" align="center" prop="likeCount" />
-      <el-table-column label="价格 (分)" align="center" prop="price" />
-      <el-table-column label="库存数量" align="center" prop="quantity" />
-      <el-table-column label="状态" align="center" prop="status" />
+      <el-table-column label="主键" align="center" prop="id"/>
+      <el-table-column label="商品名称" align="center" prop="name"/>
+      <el-table-column label="卖点" align="center" prop="sellPoint"/>
+      <el-table-column label="描述" align="center" prop="description"/>
+      <el-table-column label="分类id" align="center" prop="categoryId"/>
+      <el-table-column label="商品主图地址" align="center" prop="picUrls"/>
+      <el-table-column label="排序字段" align="center" prop="sort"/>
+      <el-table-column label="点赞初始人数" align="center" prop="likeCount"/>
+      <el-table-column label="价格 (分)" align="center" prop="price"/>
+      <el-table-column label="库存数量" align="center" prop="quantity"/>
+      <el-table-column label="状态" align="center" prop="status"/>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -69,9 +72,11 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['product:spu:update']">修改</el-button>
+                     v-hasPermi="['product:spu:update']">修改
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['product:spu:delete']">删除</el-button>
+                     v-hasPermi="['product:spu:delete']">删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -83,31 +88,91 @@
     <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="商品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入商品名称" />
+          <el-input v-model="form.name" placeholder="请输入商品名称"/>
         </el-form-item>
         <el-form-item label="卖点" prop="sellPoint">
-          <el-input v-model="form.sellPoint" placeholder="请输入卖点" />
+          <el-input v-model="form.sellPoint" placeholder="请输入卖点"/>
         </el-form-item>
         <el-form-item label="描述">
           <editor v-model="form.description" :min-height="192"/>
         </el-form-item>
-        <el-form-item label="分类id" prop="categoryId">
-          <el-input v-model="form.categoryId" placeholder="请输入分类id" />
+        <el-form-item label="分类id" prop="categoryIds">
+          <el-cascader
+            v-model="form.categoryIds"
+            placeholder="请输入分类id"
+            style="width: 100%"
+            :options="categoryList"
+            :props="propName"
+            clearable></el-cascader>
         </el-form-item>
         <el-form-item label="商品主图地址" prop="picUrls">
-          <ImageUpload v-model="form.picUrls" :limit="1"/>
+          <ImageUpload v-model="form.picUrls" :limit="10"/>
         </el-form-item>
+        <el-form-item label="商品规格">
+          <el-button size="mini" @click="shopTagInput()">添加规格</el-button>
+          <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
+            <span>{{tag.tagName}}</span>
+            <el-button class="button-new-tag" type="text"  icon="el-icon-delete" @click="removeTag(tagIndex)">删除</el-button>
+            <br/>
+            <el-tag
+              v-for="(tagItem, tagItemIndex) in tag.tagItems"
+              :key="tagItem.valueId"
+              closable
+              :disable-transitions="false"
+              @close="handleTagClose(tagIndex, tagItemIndex)">
+              {{tagItem.propValue}}
+            </el-tag>
+            <el-input
+              class="input-new-tag"
+              v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
+              v-model="tagItemInputs[tagIndex].value"
+              :ref="`saveTagInput${tagIndex}`"
+              size="small"
+              @keyup.enter.native="handleInputConfirm(tagIndex)"
+              @blur="handleInputConfirm(tagIndex)">
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="规格名" v-show="isShowTagInput">
+          <el-col :span="8">
+            <el-select v-model="addTagInput.name" filterable allow-create default-first-option placeholder="请选择" @change="handleTagClick">
+              <el-option
+                v-for="item in unUseTags"
+                :key="item.id"
+                :label="item.name"
+                :value="item.name">
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="规格值" v-show="isShowTagInput">
+          <el-col :span="8">
+            <el-select v-model="addTagInput.selectValues" multiple filterable allow-create default-first-option placeholder="请选择">
+              <el-option
+                v-for="item in dbTagValues"
+                :key="item.valueId"
+                :label="item.propValue"
+                :value="item.propValue">
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click="addTag()" v-show="isShowTagInput">确定</el-button>
+          <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button>
+        </el-form-item>
+
         <el-form-item label="排序字段" prop="sort">
-          <el-input v-model="form.sort" placeholder="请输入排序字段" />
+          <el-input v-model="form.sort" placeholder="请输入排序字段"/>
         </el-form-item>
         <el-form-item label="点赞初始人数" prop="likeCount">
-          <el-input v-model="form.likeCount" placeholder="请输入点赞初始人数" />
+          <el-input v-model="form.likeCount" placeholder="请输入点赞初始人数"/>
         </el-form-item>
         <el-form-item label="价格 单位使用：分" prop="price">
-          <el-input v-model="form.price" placeholder="请输入价格 单位使用：分" />
+          <el-input v-model="form.price" placeholder="请输入价格 单位使用：分"/>
         </el-form-item>
         <el-form-item label="库存数量" prop="quantity">
-          <el-input v-model="form.quantity" placeholder="请输入库存数量" />
+          <el-input v-model="form.quantity" placeholder="请输入库存数量"/>
         </el-form-item>
         <el-form-item label="上下架状态" prop="status">
           <el-radio-group v-model="form.status">
@@ -125,173 +190,242 @@
 </template>
 
 <script>
-import { createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel } from "@/api/mall/product/spu";
-import Editor from '@/components/Editor';
+    import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
+    import {
+        createCategory,
+        deleteCategory,
+        exportCategoryExcel,
+        getCategory,
+        listCategory,
+        updateCategory
+    } from "@/api/mall/product/category";
+    import { createProperty, updateProperty, deleteProperty, getProperty, getPropertyPage, exportPropertyExcel } from "@/api/mall/product/property";
 
-export default {
-  name: "Spu",
-  components: {
-    Editor,
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 商品spu列表
-      list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      dateRangeCreateTime: [],
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        name: null,
-        sellPoint: null,
-        description: null,
-        categoryId: null,
-        picUrls: null,
-        sort: null,
-        likeCount: null,
-        price: null,
-        quantity: null,
-        status: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        sellPoint: [{ required: true, message: "卖点不能为空", trigger: "blur" }],
-        description: [{ required: true, message: "描述不能为空", trigger: "blur" }],
-        categoryId: [{ required: true, message: "分类id不能为空", trigger: "blur" }],
-        picUrls: [{ required: true, message: "商品主图地址", trigger: "blur" }],
-        sort: [{ required: true, message: "排序字段不能为空", trigger: "blur" }],
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询列表 */
-    getList() {
-      this.loading = true;
-      // 处理查询参数
-      let params = {...this.queryParams};
-      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-      // 执行查询
-      getSpuPage(params).then(response => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    /** 表单重置 */
-    reset() {
-      this.form = {
-        id: undefined,
-        name: undefined,
-        sellPoint: undefined,
-        description: undefined,
-        categoryId: undefined,
-        picUrls: undefined,
-        sort: undefined,
-        likeCount: undefined,
-        price: undefined,
-        quantity: undefined,
-        status: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRangeCreateTime = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加商品spu";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id;
-      getSpu(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改商品spu";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        // 修改的提交
-        if (this.form.id != null) {
-          updateSpu(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
+    import Editor from '@/components/Editor';
+    import ImageUpload from '@/components/ImageUpload';
+    export default {
+        name: "Spu",
+        components: {
+            Editor,ImageUpload
+        },
+        data() {
+            return {
+                dbTagValues:[],
+                unUseTags:[],
+                propertyPageList:[],
+                isShowTagInput: false,
+                addTagInput: {
+                    name: '',
+                    selectValues: []
+                },
+                skuTags:[],
+                propName: {
+                    checkStrictly: true,
+                    label:'name',
+                    value:'id'
+                },
+                categoryList: [],
+                // 遮罩层
+                loading: true,
+                // 导出遮罩层
+                exportLoading: false,
+                // 显示搜索条件
+                showSearch: true,
+                // 总条数
+                total: 0,
+                // 商品spu列表
+                list: [],
+                // 弹出层标题
+                title: "",
+                // 是否显示弹出层
+                open: false,
+                dateRangeCreateTime: [],
+                // 查询参数
+                queryParams: {
+                    pageNo: 1,
+                    pageSize: 10,
+                    name: null,
+                    sellPoint: null,
+                    description: null,
+                    categoryId: null,
+                    picUrls: null,
+                    sort: null,
+                    likeCount: null,
+                    price: null,
+                    quantity: null,
+                    status: null,
+                },
+                // 表单参数
+                form: {},
+                // 表单校验
+                rules: {
+                    sellPoint: [{required: true, message: "卖点不能为空", trigger: "blur"}],
+                    description: [{required: true, message: "描述不能为空", trigger: "blur"}],
+                    categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"}],
+                    picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
+                    sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
+                }
+            };
+        },
+        created() {
             this.getList();
-          });
-          return;
+            this.getListCategory();
+            this.getPropertyPageList();
+        },
+        methods: {
+            addTag(){
+
+            },
+            hideTagInput(){
+
+            },
+            shopTagInput(){
+
+            },
+            removeTag(row){
+
+            },
+            handleTagClick(row){
+
+            },
+            /** 查询规格 */
+            getPropertyPageList() {
+                // 执行查询
+                getPropertyPage().then(response => {
+                    this.propertyPageList = response.data.list;
+                    this.unUseTags= this.propertyPageList.map(function (item,index) {
+                        return item
+                    })
+                    console.log(this.propertyPageList)
+                });
+            },
+            /** 查询分类 */
+            getListCategory() {
+                // 执行查询
+                listCategory().then(response => {
+                    this.categoryList = this.handleTree(response.data, "id", "parentId");
+
+                });
+            },
+            /** 查询列表 */
+            getList() {
+                this.loading = true;
+                // 处理查询参数
+                let params = {...this.queryParams};
+                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+                // 执行查询
+                getSpuPage(params).then(response => {
+                    this.list = response.data.list;
+                    this.total = response.data.total;
+                    this.loading = false;
+                });
+            },
+            /** 取消按钮 */
+            cancel() {
+                this.open = false;
+                this.reset();
+            },
+            /** 表单重置 */
+            reset() {
+                this.form = {
+                    id: undefined,
+                    name: undefined,
+                    sellPoint: undefined,
+                    description: undefined,
+                    categoryId: undefined,
+                    categoryIds: [],
+                    picUrls: undefined,
+                    sort: undefined,
+                    likeCount: undefined,
+                    price: undefined,
+                    quantity: undefined,
+                    status: undefined,
+                    isShowTagInput:undefined,
+
+                };
+                this.resetForm("form");
+            },
+            /** 搜索按钮操作 */
+            handleQuery() {
+                this.queryParams.pageNo = 1;
+                this.getList();
+            },
+            /** 重置按钮操作 */
+            resetQuery() {
+                this.dateRangeCreateTime = [];
+                this.resetForm("queryForm");
+                this.handleQuery();
+            },
+            /** 新增按钮操作 */
+            handleAdd() {
+                this.reset();
+                this.open = true;
+                this.title = "添加商品spu";
+            },
+            /** 修改按钮操作 */
+            handleUpdate(row) {
+                this.reset();
+                const id = row.id;
+                getSpu(id).then(response => {
+                    this.form = response.data;
+                    this.open = true;
+                    this.title = "修改商品spu";
+                });
+            },
+            /** 提交按钮 */
+            submitForm() {
+                console.log(this.form.picUrls.split(','));
+
+                this.$refs["form"].validate(valid => {
+                    if (!valid) {
+                        return;
+                    }
+                    this.form.categoryId= this.form.categoryIds[(this.form.categoryIds.length-1)]
+                    // 修改的提交
+                    if (this.form.id != null) {
+                        updateSpu(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                        return;
+                    }
+                    // 添加的提交
+                    createSpu(this.form).then(response => {
+                        this.$modal.msgSuccess("新增成功");
+                        this.open = false;
+                        this.getList();
+                    });
+                });
+            },
+            /** 删除按钮操作 */
+            handleDelete(row) {
+                const id = row.id;
+                this.$modal.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?').then(function () {
+                    return deleteSpu(id);
+                }).then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess("删除成功");
+                }).catch(() => {
+                });
+            },
+            /** 导出按钮操作 */
+            handleExport() {
+                // 处理查询参数
+                let params = {...this.queryParams};
+                params.pageNo = undefined;
+                params.pageSize = undefined;
+                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+                // 执行导出
+                this.$modal.confirm('是否确认导出所有商品spu数据项?').then(() => {
+                    this.exportLoading = true;
+                    return exportSpuExcel(params);
+                }).then(response => {
+                    this.$download.excel(response, '商品spu.xls');
+                    this.exportLoading = false;
+                }).catch(() => {
+                });
+            }
         }
-        // 添加的提交
-        createSpu(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
-        });
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?').then(function() {
-          return deleteSpu(id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-      // 执行导出
-      this.$modal.confirm('是否确认导出所有商品spu数据项?').then(() => {
-          this.exportLoading = true;
-          return exportSpuExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '商品spu.xls');
-          this.exportLoading = false;
-        }).catch(() => {});
-    }
-  }
-};
+    };
 </script>