Merge pull request '完成广告管理模块接口' (#39) from Brunch_LPQ into main
commit
02aeabc082
@ -0,0 +1,59 @@
|
||||
package com.itmk.web.banner.controller;
|
||||
|
||||
|
||||
import com.alibaba.druid.util.StringUtils;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.metadata.IPage;
|
||||
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
||||
import com.itmk.utils.ResultUtils;
|
||||
import com.itmk.utils.ResultVo;
|
||||
import com.itmk.web.banner.entity.BannerParm;
|
||||
import com.itmk.web.banner.entity.SysBanner;
|
||||
import com.itmk.web.banner.service.SysBannerService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/api/banner")
|
||||
public class SysBannerController {
|
||||
@Autowired
|
||||
private SysBannerService sysBannerService;
|
||||
|
||||
// 新增
|
||||
@PostMapping
|
||||
public ResultVo addCategory(@RequestBody SysBanner sysBanner) {
|
||||
sysBannerService.save(sysBanner);
|
||||
return ResultUtils.success("新增广告成功！", sysBanner);
|
||||
}
|
||||
|
||||
// 编辑广告
|
||||
@PutMapping
|
||||
public ResultVo editCategory(@RequestBody SysBanner sysBanner){
|
||||
if(sysBannerService.updateById(sysBanner)){
|
||||
return ResultUtils.success("编辑广告成功！", sysBanner);
|
||||
}
|
||||
return ResultUtils.error("编辑广告失败！");
|
||||
}
|
||||
|
||||
// 删除广告
|
||||
@DeleteMapping("/{categoryId}")
|
||||
public ResultVo deleteCategory(@PathVariable Long categoryId){
|
||||
if(sysBannerService.removeById(categoryId)){
|
||||
return ResultUtils.success("删除广告成功！");
|
||||
}
|
||||
return ResultUtils.error("删除广告失败！");
|
||||
}
|
||||
|
||||
// 列表查询
|
||||
// 列表查询需要分页
|
||||
@GetMapping("/list")
|
||||
public ResultVo getList(BannerParm parm) {
|
||||
IPage<SysBanner> page = new Page<>(parm.getCurrentPage(), parm.getPageSize());
|
||||
//构造查询条件
|
||||
QueryWrapper<SysBanner> query = new QueryWrapper<>();
|
||||
query.lambda().like(!StringUtils.isEmpty(parm.getTitle()),SysBanner::getTitle,parm.getTitle());
|
||||
IPage<SysBanner> list = sysBannerService.page(page, query);
|
||||
return ResultUtils.success("查询成功",list);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
package com.itmk.web.banner.entity;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
@Data
|
||||
public class BannerParm {
|
||||
private Integer currentPage; //当前页
|
||||
private Integer pageSize;//每页查询的条数
|
||||
private String title;
|
||||
}
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
package com.itmk.web.banner.entity;
|
||||
|
||||
import com.baomidou.mybatisplus.annotation.IdType;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
import lombok.Data;
|
||||
|
||||
@Data
|
||||
@TableName("sys_banner")
|
||||
public class SysBanner {
|
||||
@TableId(type = IdType.AUTO)
|
||||
private Long bannerId;
|
||||
private Long goodsId;
|
||||
private String title;
|
||||
private String images;
|
||||
private String status;
|
||||
private Integer orderNum;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
package com.itmk.web.banner.mapper;
|
||||
|
||||
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
|
||||
import com.itmk.web.banner.entity.SysBanner;
|
||||
|
||||
public interface SysBannerMapper extends BaseMapper<SysBanner> {
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
package com.itmk.web.banner.service;
|
||||
|
||||
import com.baomidou.mybatisplus.extension.service.IService;
|
||||
import com.itmk.web.banner.entity.SysBanner;
|
||||
|
||||
public interface SysBannerService extends IService<SysBanner> {
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
package com.itmk.web.banner.service.impl;
|
||||
|
||||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
|
||||
import com.itmk.web.banner.entity.SysBanner;
|
||||
import com.itmk.web.banner.mapper.SysBannerMapper;
|
||||
import com.itmk.web.banner.service.SysBannerService;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@Service
|
||||
public class SysBannerServiceImpl extends ServiceImpl<SysBannerMapper, SysBanner> implements SysBannerService {
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
<!DOCTYPE mapper
|
||||
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||
|
||||
<mapper namespace="com.itmk.web.sys_banner.mapper.SysBannerMapper">
|
||||
|
||||
</mapper>
|
||||
@ -0,0 +1,18 @@
|
||||
//列表参数类型
|
||||
export type bannerListParm = {
|
||||
currentPage:number;
|
||||
pageSize:number;
|
||||
title:string;
|
||||
total:number; //分页的总条数
|
||||
}
|
||||
//广告管理数据类型
|
||||
export type bannerType = {
|
||||
categoryId: string;
|
||||
type:string;
|
||||
bannerId:string;
|
||||
goodsId:string;
|
||||
title:string;
|
||||
images:string;
|
||||
status:string;
|
||||
orderNum:string;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import http from "../../http";
|
||||
import type { bannerType, bannerListParm } from "./bannerModel";
|
||||
//新增
|
||||
export const addApi = (parm:bannerType)=>{
|
||||
return http.post("/api/banner",parm)
|
||||
}
|
||||
|
||||
//列表
|
||||
export const getListApi = (parm:bannerListParm)=>{
|
||||
return http.get("/api/banner/list",parm)
|
||||
}
|
||||
|
||||
//编辑
|
||||
export const editApi = (parm:bannerType)=>{
|
||||
return http.put("/api/banner",parm)
|
||||
}
|
||||
//删除
|
||||
export const deleteApi = (bannerId:string)=>{
|
||||
return http.delete(`/api/banner/${bannerId}`)
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
import type { bannerType } from "../../api/banner/bannerModel";
|
||||
import { EditType, type FuncList } from "../../type/baseType";
|
||||
import { ref } from "vue";
|
||||
import { deleteApi } from '../../api/banner/index'
|
||||
import useInstance from "@/hooks/useInstance";
|
||||
import { ElMessage } from "element-plus";
|
||||
export default function useBanner(getList: FuncList) {
|
||||
const { global } = useInstance()
|
||||
const showBtn = ref<{ show: (title: string, type: string, width?: number, height?: number, row?: bannerType) => {} }>();
|
||||
//新增
|
||||
const addBtn = () => {
|
||||
showBtn.value?.show("新增", EditType.ADD, 900, 500)
|
||||
}
|
||||
//编辑
|
||||
const editBtn = (row: bannerType) => {
|
||||
showBtn.value?.show("编辑", EditType.EDIT, 900, 500, row)
|
||||
}
|
||||
//删除
|
||||
const deleteBtn = async (row: bannerType) => {
|
||||
const confirm = await global.$myconfirm('确定删除吗？')
|
||||
if (confirm) {
|
||||
let res = await deleteApi(row.bannerId)
|
||||
if (res && res.code == 200) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
showBtn,
|
||||
addBtn,
|
||||
editBtn,
|
||||
deleteBtn
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import type { bannerListParm } from "../../api/banner/bannerModel";
|
||||
import { reactive ,ref,onMounted,nextTick} from "vue";
|
||||
import {getListApi} from '../../api/banner/index'
|
||||
export default function useBannerTable(){
|
||||
//表格高度
|
||||
const tableHeight = ref(0)
|
||||
//接收表格数据
|
||||
const tableList = ref([])
|
||||
//列表查询的参数
|
||||
const listParm = reactive<bannerListParm>({
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
title:'',
|
||||
total:0
|
||||
})
|
||||
//列表
|
||||
const getList = async()=>{
|
||||
let res = await getListApi(listParm)
|
||||
if(res && res.code == 200){
|
||||
tableList.value = res.data.records;
|
||||
listParm.total = res.data.total;
|
||||
}
|
||||
}
|
||||
//搜索
|
||||
const searchBtn = ()=>{
|
||||
getList()
|
||||
}
|
||||
//重置
|
||||
const resetBtn = ()=>{
|
||||
listParm.currentPage = 1;
|
||||
listParm.title = ''
|
||||
getList()
|
||||
}
|
||||
//页容量改变时触发
|
||||
const sizeChange = (size:number)=>{
|
||||
listParm.pageSize = size;
|
||||
getList()
|
||||
}
|
||||
//页数改变触发
|
||||
const currentChange = (page:number)=>{
|
||||
listParm.currentPage = page;
|
||||
getList()
|
||||
}
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
nextTick(()=>{
|
||||
tableHeight.value = window.innerHeight - 220
|
||||
})
|
||||
})
|
||||
return{
|
||||
listParm,
|
||||
getList,
|
||||
searchBtn,
|
||||
resetBtn,
|
||||
tableList,
|
||||
sizeChange,
|
||||
currentChange,
|
||||
tableHeight
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
import { ref } from "vue";
|
||||
import { getSelectListApi } from "../../api/goods";
|
||||
|
||||
// 定义下拉选项的类型
|
||||
export interface SelectOption {
|
||||
value: string | number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export default function useSelectCategory() {
|
||||
// 下拉数据
|
||||
const selectData = ref<SelectOption[]>([])
|
||||
|
||||
// 获取下拉数据
|
||||
const getSelect = async () => {
|
||||
try {
|
||||
let res = await getSelectListApi();
|
||||
console.log("API原始响应:", res); // 打印完整响应
|
||||
|
||||
if (res && res.code == 200) {
|
||||
// 打印实际数据结构
|
||||
console.log("API返回的数据类型:", typeof res.data);
|
||||
console.log("API返回的数据:", res.data);
|
||||
|
||||
// 检查数据是否为数组
|
||||
if (!Array.isArray(res.data)) {
|
||||
console.error("API返回的数据不是数组:", res.data);
|
||||
selectData.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查数组元素结构
|
||||
if (res.data.length > 0) {
|
||||
console.log("第一个元素的结构:", Object.keys(res.data[0]));
|
||||
}
|
||||
|
||||
// 创建新数组赋值，确保响应式更新
|
||||
const newData = res.data.map(item => ({
|
||||
value: item.value.toString(),
|
||||
label: item.label
|
||||
}));
|
||||
|
||||
selectData.value = newData;
|
||||
console.log("映射后的分类数据:", JSON.parse(JSON.stringify(newData)));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取分类数据失败:", error);
|
||||
selectData.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
selectData, getSelect
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
广告管理
|
||||
</div>
|
||||
<el-main>
|
||||
<!-- 搜索栏 -->
|
||||
<el-form :model="listParm" :inline="true" size="default">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入标题" v-model="listParm.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button :icon="Search" @click="searchBtn">搜索</el-button>
|
||||
<el-button :icon="Close" type="danger" plain @click="resetBtn"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button :icon="Plus" type="primary" plain @click="addBtn">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 表格 -->
|
||||
<el-table :height="tableHeight" :data="tableList" border stripe>
|
||||
<el-table-column label="广告图片" prop="goodsImage">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
:src="scope.row.images.split(',')[0]"
|
||||
style="height: 60px; width: 60px; border-radius: 50%"
|
||||
></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标题" prop="title"></el-table-column>
|
||||
<el-table-column label="是否上架" prop="title">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status == '0'" type="danger" size="default"
|
||||
>否</el-tag
|
||||
>
|
||||
<el-tag v-else size="default" effect="light">是</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" prop="orderNum"></el-table-column>
|
||||
<el-table-column label="操作" width="220" align="center">
|
||||
<template #default="scoped">
|
||||
<el-button :icon="Edit" type="primary" size="default" @click="editBtn(scoped.row)">编辑</el-button>
|
||||
<el-button :icon="Delete" type="danger" size="default" @click="deleteBtn(scoped.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page.sync="listParm.currentPage"
|
||||
:page-sizes="[10,20, 40, 80, 100]"
|
||||
:page-size="listParm.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="listParm.total" background>
|
||||
</el-pagination>
|
||||
|
||||
</el-main>
|
||||
<!-- 新增、编辑 -->
|
||||
<add-banner ref="showBtn" @onFresh="getList"></add-banner>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import AddBanner from "@/views/banner/AddBanner.vue";
|
||||
import { Edit, Plus, Delete, Search, Close } from "@element-plus/icons-vue";
|
||||
import useBannerTable from "@/compositions/banner/useBannerTable";
|
||||
import useBanner from "@/compositions/banner/useBanner";
|
||||
//表格业务
|
||||
const { getList, listParm, resetBtn, searchBtn, tableList,sizeChange ,currentChange,tableHeight} = useBannerTable();
|
||||
//增删改业务
|
||||
const { addBtn, editBtn, deleteBtn, showBtn } = useBanner(getList);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
Loading…
Reference in new issue