feature(uniapp商品): 新增商品

luowenfeng
1 parent 81666e3b
Showing 6 changed files with 156 additions and 93 deletions
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/sku/vo/ProductSkuBaseVO.java
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/admin/spu/vo/ProductSpuBaseVO.java
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/service/spu/ProductSpuServiceImpl.java
yudao-ui-admin/src/components/ImageUpload/index.vue
yudao-ui-admin/src/views/mall/product/spu/index.vue
yudao-ui-admin/src/views/mall/product/spu/save.vue
@@ -21,10 +21,7 @@ public class ProductSkuBaseVO {
     @NotEmpty(message = "商品 SKU 名字不能为空")
     private String name;
-    /**
-     * 规格值数组
-     */
-    @NotNull(message = "规格值数组不能为空")
+    @ApiModelProperty(value = "规格值数组-json格式 单规格中无此列表， [{propertyId: , valueId: }, {propertyId: , valueId: }]")
     private List<Property> properties;
     @ApiModelProperty(value = "销售价格，单位：分", required = true, example = "1024", notes = "单位：分")
@@ -32,7 +29,7 @@ public class ProductSkuBaseVO {
     private Integer price;
     @ApiModelProperty(value = "市场价", example = "1024", notes = "单位：分")
-    private Integer originalPrice;
+    private Integer marketPrice;
     @ApiModelProperty(value = "成本价", example = "1024", notes = "单位：分")
     private Integer costPrice;
@@ -36,7 +36,7 @@ public class ProductSpuBaseVO {
     private Long categoryId;
     @ApiModelProperty(value = "商品品牌编号", required = true, example = "1")
-    @NotNull(message = "商品品牌编号不能为空")
+//    @NotNull(message = "商品品牌编号不能为空")
     private Long brandId;
     @ApiModelProperty(value = "商品图片的数组", required = true)
@@ -44,7 +44,6 @@ public class ProductSpuBaseVO {
     private List<String> picUrls;
     @ApiModelProperty(value = "商品视频", required = true)
-    @NotEmpty(message = "商品视频不能为空")
     private String videoUrl;
     @ApiModelProperty(value = "排序字段", required = true, example = "1")
@@ -15,6 +15,7 @@ import cn.iocoder.yudao.module.product.convert.spu.ProductSpuConvert;
 import cn.iocoder.yudao.module.product.dal.dataobject.sku.ProductSkuDO;
 import cn.iocoder.yudao.module.product.dal.dataobject.spu.ProductSpuDO;
 import cn.iocoder.yudao.module.product.dal.mysql.spu.ProductSpuMapper;
+import cn.iocoder.yudao.module.product.enums.spu.ProductSpuSpecTypeEnum;
 import cn.iocoder.yudao.module.product.service.category.ProductCategoryService;
 import cn.iocoder.yudao.module.product.service.property.ProductPropertyService;
 import cn.iocoder.yudao.module.product.service.sku.ProductSkuService;
@@ -57,13 +58,18 @@ public class ProductSpuServiceImpl implements ProductSpuService {
         categoryService.validateProductCategory(createReqVO.getCategoryId());
         // 校验SKU
         List<ProductSkuCreateOrUpdateReqVO> skuCreateReqList = createReqVO.getSkus();
-        if(createReqVO.getSpecType() == 1) {
+        // 多规格才需校验
+        if(Objects.equals(createReqVO.getSpecType(), ProductSpuSpecTypeEnum.DISABLE.getType())) {
             productSkuService.validateSkus(skuCreateReqList);
         }
         // 插入SPU
         ProductSpuDO spu = ProductSpuConvert.INSTANCE.convert(createReqVO);
+        spu.setMarketPrice(skuCreateReqList.stream().map(ProductSkuCreateOrUpdateReqVO::getMarketPrice).max(Integer::compare).orElse(0));
+        spu.setMaxPrice(skuCreateReqList.stream().map(ProductSkuCreateOrUpdateReqVO::getPrice).max(Integer::compare).orElse(0));
+        spu.setMinPrice(skuCreateReqList.stream().map(ProductSkuCreateOrUpdateReqVO::getPrice).min(Integer::compare).orElse(0));
         ProductSpuMapper.insert(spu);
         List<ProductSkuDO> skuDOList = ProductSkuConvert.INSTANCE.convertSkuDOList(skuCreateReqList);
+        skuDOList.forEach(v->v.setSpuId(spu.getId()));
         // 批量插入sku
         productSkuService.createSkus(skuDOList);
         // 返回
@@ -79,7 +85,8 @@ public class ProductSpuServiceImpl implements ProductSpuService {
         categoryService.validateProductCategory(updateReqVO.getCategoryId());
         // 校验SKU
         List<ProductSkuCreateOrUpdateReqVO> skuCreateReqList = updateReqVO.getSkus();
-        if(updateReqVO.getSpecType() == 1) {
+        // 多规格才需校验
+        if(updateReqVO.getSpecType().equals(ProductSpuSpecTypeEnum.DISABLE.getType())) {
             productSkuService.validateSkus(skuCreateReqList);
         }
         // 更新
@@ -85,8 +85,8 @@ export default {
     value: {
       handler(val) {
         if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 首先将值转为数组, 当只穿了一个图片时，会报map方法错误
+          const list = Array.isArray(val) ? val :  Array.isArray(this.value.split(',')) ? this.value.split(','): Array.of(this.value);
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
@@ -178,7 +178,7 @@
     />
-    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close>
+    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false" >
       <save @closeDialog="open = false; getList()"/>
     </el-dialog>
   </div>
 <template>
   <div class="container">
-    <el-tabs v-model="activeName" class="tabs">
+    <el-tabs v-model="activeName" class="tabs"  :before-leave="confirmLeave">
       <!-- 基础设置 -->
       <el-tab-pane label="基础设置" name="base">
-        <el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
+        <el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
           <el-form-item label="商品名称" prop="name">
             <el-input v-model="baseForm.name" placeholder="请输入商品名称"/>
           </el-form-item>
-          <el-form-item label="卖点" prop="sellPoint">
+          <el-form-item label="卖点">
             <el-input v-model="baseForm.sellPoint" placeholder="请输入卖点"/>
           </el-form-item>
           <el-form-item label="分类id" prop="categoryIds">
@@ -20,30 +20,27 @@
               clearable
             ></el-cascader>
           </el-form-item>
-          <el-form-item label="商品主图" prop="bannerUrl">
-            <ImageUpload v-model="baseForm.bannerUrl" :limit="1"/>
-          </el-form-item>
           <el-form-item label="商品轮播图" prop="picUrls">
-            <ImageUpload v-model="baseForm.picUrls" :limit="10"/>
+            <ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10"/>
           </el-form-item>
-          <el-form-item label="排序字段" prop="sort">
-            <el-input v-model="baseForm.sort" placeholder="请输入排序字段"/>
+          <el-form-item label="排序字段">
+            <el-input v-model="baseForm.sort" placeholder="请输入排序字段" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
           </el-form-item>
         </el-form>
       </el-tab-pane>
       <!-- 价格库存 -->
       <el-tab-pane label="价格库存" name="rates" class="rates">
-        <el-form :model="ratesForm" :rules="rules.ratesForm">
+        <el-form ref="rates" :model="ratesForm" :rules="rules">
           <el-form-item label="商品规格">
             <el-radio-group v-model="ratesForm.spec" @change="changeRadio">
-              <el-radio :label="0">单规格</el-radio>
-              <el-radio :label="1">多规格</el-radio>
+              <el-radio :label="1">单规格</el-radio>
+              <el-radio :label="2">多规格</el-radio>
             </el-radio-group>
           </el-form-item>
           <!-- 动态添加规格属性 -->
-          <div v-show="ratesForm.spec === 1">
+          <div v-show="ratesForm.spec === 2">
             <div
               v-for="(specs, index) in dynamicSpec"
               :key="index"
@@ -71,14 +68,8 @@
               </div>
               <div class="spec-values">
                 <template v-for="(v, i) in specs.specValue">
-                  <el-input v-model="v.name" class="spec-value" :key="i"/>
+                  <el-input v-model="v.name" class="spec-value" :key="i" disabled/>
                 </template>
-                <!-- <el-button
-                  type="primary"
-                  icon="el-icon-plus"
-                  circle
-                  @click="dialogForSpec = true; currentSpec = index"
-                ></el-button> -->
               </div>
             </div>
             <el-button type="primary" @click="dynamicSpec.push({specValue: []}); ratesForm.rates = []"
@@ -89,9 +80,8 @@
           <!-- 规格明细 -->
           <el-form-item label="规格明细">
-            <el-table :data="ratesForm.rates" border style="width: 100%" ref="rates">
-
-              <template v-if="ratesForm.spec == 1">
+            <el-table :data="ratesForm.rates" border style="width: 100%" ref="ratesTable">
+              <template v-if="ratesForm.spec == 2">
                 <el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v=>v.specName != undefined)"
                                  :label="item.specName">
                   <template slot-scope="scope">
@@ -103,54 +93,90 @@
                   </template>
                 </el-table-column>
               </template>
-
-              <el-table-column label="规格图片" width="120px">
+              <el-table-column label="规格图片" width="120px" :render-header="addRedStar" key="90">
                 <template slot-scope="scope">
-                  <ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
+                    <ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false"
                                style="width: 100px; height: 50px"/>
                 </template>
               </el-table-column>
-              <el-table-column label="市场价(元)">
+              <template v-if="ratesForm.spec == 2">
+               <el-table-column label="sku名称" :render-header="addRedStar" key="91">
+                  <template slot-scope="scope">
+                  <el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
+                      <el-input
+                        v-model="scope.row.name"
+                      ></el-input>
+                      </el-form-item>
+                  </template>
+                </el-table-column>
+                </template>
+
+              <el-table-column label="市场价(元)" :render-header="addRedStar" key="92">
                 <template slot-scope="scope">
-                  <el-input
-                    v-model="scope.row.marketPrice"
-                    type="number"
-                  ></el-input>
+                  <el-form-item :prop="'rates.'+ scope.$index + '.marketPrice'" :rules="[{required: true, trigger: 'change'}]">
+                    <el-input
+                      v-model="scope.row.marketPrice"
+                      oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
+                    ></el-input>
+                  </el-form-item>
                 </template>
               </el-table-column>
-              <el-table-column label="销售价(元)" re>
+              <el-table-column label="销售价(元)" :render-header="addRedStar" key="93">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.price" type="number"></el-input>
+                 <el-form-item :prop="'rates.'+ scope.$index + '.price'" :rules="[{required: true, trigger: 'change'}]">
+                  <el-input v-model="scope.row.price" oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
+                  </el-form-item>
                 </template>
               </el-table-column>
-              <el-table-column label="成本价">
+              <el-table-column label="成本价" :render-header="addRedStar" key="94">
                 <template slot-scope="scope">
+                <el-form-item :prop="'rates.'+ scope.$index + '.costPrice'" :rules="[{required: true, trigger: 'change'}]">
                   <el-input
                     v-model="scope.row.costPrice"
-                    type="number"
+                    oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''"
                   ></el-input>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column label="库存" :render-header="addRedStar" key="95">
+                <template slot-scope="scope">
+                  <el-form-item :prop="'rates.'+ scope.$index + '.stock'" :rules="[{required: true, trigger: 'change'}]">
+                    <el-input v-model="scope.row.stock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
+                  </el-form-item>
                 </template>
               </el-table-column>
-              <el-table-column label="库存">
+              <el-table-column label="预警库存" key="96">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.stock" type="number"></el-input>
+                  <el-input v-model="scope.row.warnStock" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column label="体积">
+              <el-table-column label="体积" key="97">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.volume" type="number"></el-input>
+                  <el-input v-model="scope.row.volume" ></el-input>
                 </template>
               </el-table-column>
-              <el-table-column label="重量">
+              <el-table-column label="重量" key="98">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.weight" type="number"></el-input>
+                  <el-input v-model="scope.row.weight" ></el-input>
                 </template>
               </el-table-column>
-              <el-table-column label="条码">
+              <el-table-column label="条码" key="99">
                 <template slot-scope="scope">
                   <el-input v-model="scope.row.barCode"></el-input>
                 </template>
               </el-table-column>
+               <template v-if="ratesForm.spec == 2">
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="50"
+                  key="100">
+                  <template slot-scope="scope">
+                    <el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
+                    <el-button @click="scope.row.status = 0" type="text" size="small" v-show="scope.row.status == 1">启用</el-button>
+                  </template>
+                </el-table-column>
+              </template>
             </el-table>
           </el-form-item>
         </el-form>
@@ -158,16 +184,26 @@
       <!-- 商品详情 -->
       <el-tab-pane label="商品描述" name="third">
-        <editor v-model="baseForm.description" :min-height="400"/>
+      <el-form ref="third" :model="baseForm" :rules="rules">
+        <el-form-item prop="description">
+          <editor v-model="baseForm.description" :min-height="380"/>
+        </el-form-item>
+      </el-form>
       </el-tab-pane>
       <!-- 销售设置 -->
       <el-tab-pane label="销售设置" name="fourth">
-        <el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
-          <el-form-item label="库存数量" prop="totalStock">
-            <el-input v-model="baseForm.totalStock" placeholder="请输入库存数量"/>
+        <el-form ref="fourth" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
+          <el-form-item label="虚拟销量" prop="virtualSalesCount">
+            <el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
           </el-form-item>
-          <el-form-item label="上下架状态" prop="status">
+           <el-form-item label="是否展示库存" prop="showStock">
+             <el-radio-group v-model="baseForm.showStock">
+              <el-radio :label="true">是</el-radio>
+              <el-radio :label="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="商品状态" prop="status">
             <el-radio-group v-model="baseForm.status">
               <el-radio :label="0">上架</el-radio>
               <el-radio :label="1">下架</el-radio>
@@ -212,15 +248,15 @@ export default {
         categoryIds: null,
         sort: null,
         description: null,
-        bannerUrl: null,
-        picUrls: [],
-        totalStock: null,
-        status: 0
+        picUrls: null,
+        status: 0,
+        virtualSalesCount: 0,
+        showStock: true,
       },
       categoryList: [],
       // 价格库存
       ratesForm: {
-        spec: 0,
+        spec: 1,
         // 规格明细
         rates: [{}]
       },
@@ -239,28 +275,39 @@ export default {
       // 表单校验
       rules: {
-        description: [
-          {required: true, message: "描述不能为空", trigger: "blur"},
-        ],
-        categoryIds: [
-          {required: true, message: "分类id不能为空", trigger: "blur"},
-        ],
-        bannerUrl: [{required: true, message: "商品主图地址", trigger: "blur"}],
-        sort: [
-          {required: true, message: "排序字段不能为空", trigger: "blur"},
-        ],
+        name:[{required: true, message: "商品名称不能为空", trigger: "blur"},],
+        description: [{required: true, message: "描述不能为空", trigger: "blur"},],
+        categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"},],
+        status: [{required: true, message: "商品状态不能为空", trigger: "blur"}],
+        picUrls: [{required: true, message: "商品轮播图地址不能为空", trigger: "blur"}],
+        virtualSalesCount: [{required: true, message: "虚拟销量不能为空", trigger: "blur"}],
       },
     };
   },
+
   created() {
     this.getListCategory();
     this.getPropertyPageList();
   },
   methods: {
+    async confirmLeave(active, old){
+      await this.$refs[old].validate((valid) => {
+        console.log(valid)
+        if (!valid) {
+          return reject();
+        }
+      });
+    },
+    // 必选标识
+    addRedStar(h, { column }) {
+      return [
+        h('span', { style: 'color: #F56C6C' }, '*'),
+        h('span', ' ' + column.label)
+      ];
+    },
     changeRadio() {
-
-      this.$refs.rates.doLayout()
-      if (this.ratesForm.spec == 0) {
+      this.$refs.ratesTable.doLayout()
+      if (this.ratesForm.spec == 1) {
         this.ratesForm.rates = [{}]
       } else {
         this.ratesForm.rates = []
@@ -289,7 +336,7 @@ export default {
           return array;
         })
         .forEach(v => {
-          rates.push({spec: v})
+          rates.push({spec: v, status: 0, name: Array.of(v).join()})
         });
       this.ratesForm.rates = rates
     },
@@ -304,38 +351,51 @@ export default {
       this.$emit("closeDialog");
     },
     submit() {
+       this.$refs[this.activeName].validate((valid) => {
+        if (!valid) {
+          return;
+        }
       let rates = this.ratesForm.rates;
       // 动态规格调整字段
-      if (this.ratesForm.spec == 1) {
+      if (this.ratesForm.spec == 2) {
         rates.forEach(r => {
           let properties = []
-          if(r.spec instanceof Array){
-            r.spec.forEach((v, i) => {
+            Array.of(r.spec).forEach((v, i) => {
               let specValue = this.dynamicSpec[i].specValue.find(o => o.name == v);
               let propertie = {};
               propertie.propertyId = this.dynamicSpec[i].specId;
               propertie.valueId = specValue.id;
               properties.push(propertie);
             })
-          }else{
-              let specValue = this.dynamicSpec[0].specValue.find(o => o.name == r.spec);
-              let propertie = {};
-              propertie.propertyId = this.dynamicSpec[0].specId;
-              propertie.valueId = specValue.id;
-              properties.push(propertie);
-          }
           r.properties = properties;
         })
+      }else{
+        rates[0].name = this.baseForm.name;
+        rates[0].status = this.baseForm.status;
       }
-      this.baseForm.skus = rates;
-      this.baseForm.specType = this.ratesForm.spec;
-      this.baseForm.categoryId = this.baseForm.categoryIds[this.baseForm.categoryIds.length - 1];
-      createSpu(this.baseForm).then((response) => {
+
+      console.log(rates)
+
+      let form = this.baseForm
+      if(form.picUrls instanceof Array){
+        form.picUrls = form.picUrls.flatMap(m=>m.split(','))
+      }else if(form.picUrls.split(',') instanceof Array){
+        form.picUrls = form.picUrls.split(',').flatMap(m=>m.split(','))
+      }else{
+        form.picUrls = Array.of(form.picUrls)
+      }
+
+      form.skus = rates;
+      form.specType = this.ratesForm.spec;
+      form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
+      createSpu(form).then((response) => {
         console.log(response)
         this.$modal.msgSuccess("新增成功");
         this.$emit("closeDialog");
+        }).catch((err) => {
+          console.log(this.baseForm.picUrls)
+        });
       });
-
     },
     /** 查询规格 */
     getPropertyPageList() {