1、spu管理功能实现

ruoyi-ui/src/api/mall/product/spu-info.js

@@ -8,3 +8,13 @@ export function saveSpuInfo(data) {
     data: data
   })
 }
+
+// 获取spu列表分页数据
+export function getSpuList(data) {
+  return request({
+    url: '/mall-product/product/spuinfo/list',
+    method: 'get',
+    params: data
+  })
+}
+

ruoyi-ui/src/views/mall/product/maintain/manager.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="mod-config">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item label="分类">
+          <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
+        </el-form-item>
+        <el-form-item label="品牌">
+          <brand-select style="width:160px"></brand-select>
+        </el-form-item>
+        <el-form-item label="价格">
+          <el-input-number style="width:160px" v-model="dataForm.price.min" :min="0"></el-input-number>-
+          <el-input-number style="width:160px" v-model="dataForm.price.max" :min="0"></el-input-number>
+        </el-form-item>
+        <el-form-item label="检索">
+          <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchSkuInfo">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;"
+      @expand-change="getSkuDetails"
+    >
+      <el-table-column type="expand">
+        <template slot-scope="scope">
+          商品标题：{{scope.row.skuTitle}}
+          <br />
+          商品副标题：{{scope.row.skuSubtitle}}
+          <br />
+          商品描述：{{scope.row.skuDesc}}
+          <br />
+          分类ID：{{scope.row.catalogId}}
+          <br />
+          SpuID：{{scope.row.spuId}}
+          <br />
+          品牌ID：{{scope.row.brandId}}
+          <br />
+        </template>
+      </el-table-column>
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      <el-table-column prop="skuId" header-align="center" align="center" label="skuId"></el-table-column>
+      <el-table-column prop="skuName" header-align="center" align="center" label="名称"></el-table-column>
+      <el-table-column prop="skuDefaultImg" header-align="center" align="center" label="默认图片">
+        <template slot-scope="scope">
+          <img :src="scope.row.skuDefaultImg" style="width:80px;height:80px;" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="price" header-align="center" align="center" label="价格"></el-table-column>
+      <el-table-column prop="saleCount" header-align="center" align="center" label="销量"></el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="previewHandle(scope.row.skuId)">预览</el-button>
+          <el-button type="text" size="small" @click="commentHandle(scope.row.skuId)">评论</el-button>
+          <el-dropdown
+            @command="handleCommand(scope.row,$event)"
+            size="small"
+            split-button
+            type="text"
+          >
+            更多
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="uploadImages">上传图片</el-dropdown-item>
+              <el-dropdown-item command="seckillSettings">参与秒杀</el-dropdown-item>
+              <el-dropdown-item command="reductionSettings">满减设置</el-dropdown-item>
+              <el-dropdown-item command="discountSettings">折扣设置</el-dropdown-item>
+              <el-dropdown-item command="memberPriceSettings">会员价格</el-dropdown-item>
+              <el-dropdown-item command="stockSettings">库存管理</el-dropdown-item>
+              <el-dropdown-item command="couponSettings">优惠劵</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import CategoryCascader from "../common/category-cascader";
+import BrandSelect from "../common/brand-select";
+export default {
+  data() {
+    return {
+      catPathSub: null,
+      brandIdSub: null,
+      dataForm: {
+        key: "",
+        brandId: 0,
+        catelogId: 0,
+        price: {
+          min: 0,
+          max: 0
+        }
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      catelogPath: []
+    };
+  },
+  components: {
+    CategoryCascader,
+    BrandSelect
+  },
+  activated() {
+    this.getDataList();
+  },
+  methods: {
+    getSkuDetails(row, expand) {
+      //sku详情查询
+      console.log("展开某行...", row, expand);
+    },
+    //处理更多指令
+    handleCommand(row, command) {
+      console.log("~~~~~", row, command);
+      if ("stockSettings" == command) {
+        this.$router.push({ path: "/ware-sku", query: { skuId: row.skuId } });
+      }
+    },
+    searchSkuInfo() {
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/product/skuinfo/list"),
+        method: "get",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          key: this.dataForm.key,
+          catelogId: this.dataForm.catelogId,
+          brandId: this.dataForm.brandId,
+          min: this.dataForm.price.min,
+          max: this.dataForm.price.max
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list;
+          this.totalPage = data.page.totalCount;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    }
+  },
+  mounted() {
+    this.catPathSub = PubSub.subscribe("catPath", (msg, val) => {
+      this.dataForm.catelogId = val[val.length - 1];
+    });
+    this.brandIdSub = PubSub.subscribe("brandId", (msg, val) => {
+      this.dataForm.brandId = val;
+    });
+  },
+  beforeDestroy() {
+    PubSub.unsubscribe(this.catPathSub);
+    PubSub.unsubscribe(this.brandIdSub);
+  } //生命周期 - 销毁之前
+};
+</script>

ruoyi-ui/src/views/mall/product/maintain/spu.vue

@@ -17,10 +17,13 @@
             </el-select>
           </el-form-item>
           <el-form-item label="检索">
-            <el-input style="width:160px" v-model="dataForm.key" clearable></el-input>
+            <el-input style="width:200px" v-model="dataForm.key" clearable placeholder="请输入spu名称或描述"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="searchSpuInfo">查询</el-button>
+            <el-button-group>
+            <el-button type="primary" @click="searchSpuInfo" size="mini">查询</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-button-group>
           </el-form-item>
         </el-form>
       </el-col>
@@ -37,7 +40,6 @@ import BrandSelect from "../../../components/mall/brand-select";
 import Spuinfo from "./spuinfo";
 
 export default {
-  //import引入的组件需要注入到对象中才能使用
   components: {CategoryCascader, Spuinfo, BrandSelect},
   props: {},
   name: "SpuList",
@@ -49,11 +51,11 @@ export default {
       dataForm: {
         status: "",
         key: "",
-        brandId: 0,
+        brandId: null,
-        catelogId: 0
+        catelogId: null
       },
       catPathSub: null,
-      brandIdSub: null
+      brandIdSub: null,
 
     };
   },
@@ -63,9 +65,18 @@ export default {
   //方法集合
   methods: {
     searchSpuInfo() {
-      console.log("搜索条件", this.dataForm);
       this.PubSub.publish("dataForm", this.dataForm);
-    }
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dataForm={}
+      // this.catelogPath= []
+      this.$bus.$emit('clearCategoryCascader',[])
+      this.$bus.$emit('clearBrandSelect',[])
+    },
+
+
   },
   created() {
   },

ruoyi-ui/src/views/mall/product/maintain/spuinfo.vue

@@ -8,21 +8,21 @@
       style="width: 100%;"
     >
       <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
-      <el-table-column prop="spuName" header-align="center" align="center" label="名称"></el-table-column>
+      <el-table-column prop="spuName" header-align="center" align="center" label="名称" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="spuDescription" header-align="center" align="center" label="描述"></el-table-column>
+      <el-table-column prop="spuDescription" header-align="center" align="center" label="描述" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="catalogId" header-align="center" align="center" label="分类"></el-table-column>
+      <el-table-column prop="catalogId" header-align="center" align="center" label="分类" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="brandId" header-align="center" align="center" label="品牌"></el-table-column>
+      <el-table-column prop="brandId" header-align="center" align="center" label="品牌" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="weight" header-align="center" align="center" label="重量"></el-table-column>
+      <el-table-column prop="weight" header-align="center" align="center" width="80px" label="重量(kg)" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="publishStatus" header-align="center" align="center" label="上架状态">
+      <el-table-column prop="publishStatus" header-align="center" width="80px" align="center" label="上架状态" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.publishStatus === 0">新建</el-tag>
           <el-tag v-if="scope.row.publishStatus === 1">已上架</el-tag>
           <el-tag v-if="scope.row.publishStatus === 2">已下架</el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"></el-table-column>
+      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间"></el-table-column>
+      <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <el-button
             v-if="scope.row.publishStatus === 0"
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import {getSpuList} from "@/api/mall/product/spu-info";
+
 export default {
   data() {
     return {
@@ -66,10 +68,10 @@ export default {
     catId: {
       type: Number,
       default: 0
-    }
+    },
   },
   components: {},
-  activated() {
+  created() {
     this.getDataList();
   },
   methods: {
@@ -107,27 +109,20 @@ export default {
         page: this.pageIndex,
         limit: this.pageSize
       });
-      this.$http({
+      getSpuList(param).then(res =>{
-        url: this.$http.adornUrl("/product/spuinfo/list"),
+        this.dataList = res.page.list;
-        method: "get",
+        this.totalPage = res.page.totalCount;
-        params: this.$http.adornParams(param)
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          this.dataList = data.page.list;
-          this.totalPage = data.page.totalCount;
-        } else {
-          this.dataList = [];
-          this.totalPage = 0;
-        }
         this.dataListLoading = false;
-      });
+      })
     },
+
     // 每页数
     sizeChangeHandle(val) {
       this.pageSize = val;
       this.pageIndex = 1;
       this.getDataList();
     },
+
     // 当前页
     currentChangeHandle(val) {
       this.pageIndex = val;
@@ -137,15 +132,22 @@ export default {
     selectionChangeHandle(val) {
       this.dataListSelections = val;
     },
+
     // 新增 / 修改
-    addOrUpdateHandle(id) {}
+    addOrUpdateHandle(id) {
+
+    },
+
+
   },
+
   mounted() {
     this.dataSub = PubSub.subscribe("dataForm", (msg, val) => {
       this.dataForm = val;
       this.getDataList();
     });
   },
+
   beforeDestroy() {
     PubSub.unsubscribe(this.dataSub);
   }

xjs-business/xjs-project-mall/mall-product/src/main/java/com/xjs/mall/product/controller/SpuInfoController.java

@@ -34,8 +34,9 @@ public class SpuInfoController {
      * 列表
      */
     @RequestMapping("/list")
+    @ApiOperation("列表")
     public R list(@RequestParam Map<String, Object> params) {
-        PageUtils page = spuInfoService.queryPage(params);
+        PageUtils page = spuInfoService.queryPageByCondition(params);
 
         return R.ok().put("page", page);
     }

xjs-business/xjs-project-mall/mall-product/src/main/java/com/xjs/mall/product/service/SpuInfoService.java

@@ -16,8 +16,6 @@ import java.util.Map;
  */
 public interface SpuInfoService extends IService<SpuInfoEntity> {
 
-    PageUtils queryPage(Map<String, Object> params);
-
     /**
      * 保存spu关联信息
      * @param spuInfo spu信息
@@ -30,5 +28,11 @@ public interface SpuInfoService extends IService<SpuInfoEntity> {
      */
     void saveBaseSpuInfo(SpuInfoEntity spuInfoEntity);
 
+    /**
+     * 根据条件分页查询
+     * @param params 条件
+     * @return page
+     */
+    PageUtils queryPageByCondition(Map<String, Object> params);
 }
 

xjs-business/xjs-project-mall/mall-product/src/main/java/com/xjs/mall/product/service/impl/SpuInfoServiceImpl.java

@@ -1,7 +1,7 @@
 package com.xjs.mall.product.service.impl;
 
 import cn.hutool.core.collection.CollUtil;
-import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.ruoyi.common.core.utils.StringUtils;
@@ -46,14 +46,6 @@ public class SpuInfoServiceImpl extends ServiceImpl<SpuInfoDao, SpuInfoEntity> i
     @Resource
     private RemoteCouponFeign remoteCouponFeign;
 
-    @Override
-    public PageUtils queryPage(Map<String, Object> params) {
-        IPage<SpuInfoEntity> page = this.page(
-                new Query<SpuInfoEntity>().getPage(params),
-                new QueryWrapper<>()
-        );
-        return new PageUtils(page);
-    }
 
     @Override
     public void saveSpuInfo(SpuSaveVo spuSaveVo) {
@@ -150,7 +142,6 @@ public class SpuInfoServiceImpl extends ServiceImpl<SpuInfoDao, SpuInfoEntity> i
                 }
 
 
-
             });
         }
     }
@@ -160,5 +151,31 @@ public class SpuInfoServiceImpl extends ServiceImpl<SpuInfoDao, SpuInfoEntity> i
         super.baseMapper.insert(spuInfoEntity);
     }
 
+    @Override
+    public PageUtils queryPageByCondition(Map<String, Object> params) {
+        LambdaQueryWrapper<SpuInfoEntity> wrapper = new LambdaQueryWrapper<>();
+
+        String key = (String) params.get(Query.KEY_NAME);
+        String status = (String) params.get("status");
+        String brandId = (String) params.get("brandId");
+        String catelogId = (String) params.get("catelogId");
+
+        wrapper.and(StringUtils.isNotEmpty(key), wr -> {
+                    wr.like(SpuInfoEntity::getSpuName, key).or()
+                            .like(SpuInfoEntity::getSpuDescription, key);
+                })
+                .eq(StringUtils.isNotEmpty(status), SpuInfoEntity::getPublishStatus, status)
+                .eq(StringUtils.isNotEmpty(brandId), SpuInfoEntity::getBrandId, brandId)
+                .eq(StringUtils.isNotEmpty(catelogId), SpuInfoEntity::getCatalogId, catelogId);
+        wrapper.orderByDesc(SpuInfoEntity::getCreateTime);
+
+        IPage<SpuInfoEntity> page = this.page(
+                new Query<SpuInfoEntity>().getPage(params),
+                wrapper
+        );
+
+        return new PageUtils(page);
+    }
+
 
 }