由于代码生成器有生成相应的spu查询列表接口,如下:
接口路径不变,修改该接口所调用的service层方法,加上相应查询参数,在SpuInfoService接口添加允许有筛选条件的方法,如下:
/**
* 根据条件筛选列表
* @param params
* @return
*/
PageUtils queryPageByCondition(Map<String, Object> params);
在SpuInfoServiceImpl类中添加相关的方法实现,如下:
@Override
public PageUtils queryPageByCondition(Map<String, Object> params) {
QueryWrapper<SpuInfoEntity> wrapper = new QueryWrapper<>();
String key = (String) params.get("key");
if (!StringUtils.isEmpty(key)) {
wrapper.and((w) -> {
w.eq("id", key).or().like("spu_name", key);
});
}
String status = (String) params.get("status");
if (!StringUtils.isEmpty(status)) {
wrapper.eq("publish_status", status);
}
String brandId = (String) params.get("brandId");
if (!StringUtils.isEmpty(brandId) && !"0".equalsIgnoreCase(brandId)) {
wrapper.eq("brand_id", brandId);
}
String catelogId = (String) params.get("catelogId");
if (!StringUtils.isEmpty(catelogId) && !"0".equalsIgnoreCase(catelogId)) {
wrapper.eq("catalog_id", catelogId);
}
IPage<SpuInfoEntity> page = this.page(
new Query<SpuInfoEntity>().getPage(params),
wrapper
);
return new PageUtils(page);
}
然后修改下配置文件application.yml,添加上全局的时间类型转换,方便前端展示,如下:
然后让列表接口调用新的方法,如下:
这里涉及到的前端文件spu.vue需要修改下,不然会报错,修改后整体代码如下:
<template>
<div>
<el-row>
<el-col :span="24">
<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-select style="width:160px" v-model="dataForm.status" clearable>
<el-option label="新建" :value="0"></el-option>
<el-option label="上架" :value="1"></el-option>
<el-option label="下架" :value="2"></el-option>
</el-select>
</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="searchSpuInfo">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24">
<spuinfo :catId="catId"></spuinfo>
</el-col>
</el-row>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import CategoryCascader from "../common/category-cascader";
import BrandSelect from "../common/brand-select";
import Spuinfo from "./spuinfo";
import PubSub from "pubsub-js";
export default {
//import引入的组件需要注入到对象中才能使用
components: { CategoryCascader, Spuinfo, BrandSelect },
props: {},
data() {
//这里存放数据
return {
catId: 0,
catelogPath: [],
dataForm: {
status: "",
key: "",
brandId: 0,
catelogId: 0
},
catPathSub: null,
brandIdSub: null
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
searchSpuInfo() {
console.log("搜索条件", this.dataForm);
PubSub.publish("dataForm",this.dataForm);
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {},
//生命周期 - 挂载完成(可以访问DOM元素)
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;
});
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {
PubSub.unsubscribe(this.catPathSub);
PubSub.unsubscribe(this.brandIdSub);
}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>
重启测试spu列表效果:
试下分类筛选条件,如下:
列表为空是正常的,因为没有该分类下的spu。
试试检索:
SPU检索功能功能完成。