Product management swiper setting and deletion implementation

<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="Please enter the product name..." clearable v-model="queryForm.query"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initProductList">Search</el-button>
      <el-button type="primary" @click="handleDialogValue()">Add product</el-button>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%">

      <el-table-column prop="name" label="Product Name" width="200" fixed/>
      <el-table-column prop="image" label="Product image" width="150" align="center">
        <template v-slot="scope">
          <img :src="getServerUrl() + '/image/product/' + scope.row.proPic" width="80" height="80"/>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="Product Price" width="100" />
      <el-table-column prop="stock" label="Commodity Stock" width="200" />
      <el-table-column prop="type" label="Product category" width="200" :formatter="typeNameFormatter"/>
      <el-table-column prop="hot" label="Hot sale?" width="100" align="center">
        <template v-slot="{row}">
            <el-switch v-model="row.hot" @change="hotChangeHandle(row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="swiper" label="Home slideshow?" width="100" align="center">
        <template v-slot="{row}">
          <el-switch v-model="row.swiper" @change="swiperChangeHandle(row)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="swiperPic" label="Slideshow picture" width="150" align="center">
        <template v-slot="scope">
          <img :src="getServerUrl() + '/image/swiper/' + scope.row.swiperPic" width="150" height="75"/>
        </template>
      </el-table-column>
      <el-table-column prop="swiperSort" label="Slide Sort" width="150" align="center"/>
      <el-table-column prop="description" label="Product Description" width="400"/>


      <el-table-column prop="action" label="action" width="500" fixed="right">
        <template v-slot="scope">
          <el-button type="success" @click="handleDialogValue(scope.row)">Change picture</el-button>

          <el-button type="primary" @click="handleDialogValue(scope.row)">Slideshow settings</el-button>

          <el-button type="primary" :icon="Edit" @click="handleDialogValue(scope.row)"></el-button>
          <el-button type="danger" :icon="Delete" @click="handleDelete(scope.row.id)"></el-button>

          <el-button type="primary" :icon="Edit" @click="handleDialogValue(scope.row)">Carousel setting</el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-pagination
        v-model:currentPage="queryForm.pageNum"
        :page-sizes="[10, 20, 30, 40,50]"
        :page-size="queryForm.pageSize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>

  <Dialog v-model="dialogVisible" :dialogTitle="dialogTitle" @initProductList="initProductList" :dialogValue="dialogValue"/>

</template>

<script setup>

import {<!-- -->Search,Edit,Delete} from '@element-plus/icons-vue'
import {<!-- --> ref } from 'vue'
import axios,{<!-- --> getServerUrl } from '@/util/axios'
import Dialog from './components/dialog'

import {<!-- -->ElMessageBox,ElMessage} from 'element-plus'

const queryForm=ref({<!-- -->
  query:'',
  pageNum:1,
  pageSize:10
})

const total=ref(0)


const tableData=ref([
])

const dialogValue=ref({<!-- -->})

const dialogTitle=ref('')

const initProductList=async()=>{<!-- -->
  console.log('xxx')
  const res=await axios.post("admin/product/list",queryForm.value);
  tableData.value=res.data.productList;
  total.value=res.data.total;
}

initProductList();

const dialogVisible=ref(false)



const handleSizeChange=(pageSize)=>{<!-- -->
  queryForm.value.pageNum=1;
  queryForm.value.pageSize=pageSize;
  initProductList();
}

const handleCurrentChange=(pageNum)=>{<!-- -->
  queryForm.value.pageNum=pageNum;
  initProductList();
}


const handleDialogValue = (row) => {<!-- -->
  if(row){<!-- -->
    dialogValue.value=JSON.parse(JSON.stringify(row));
    dialogTitle.value="Product modification"
  }else{<!-- -->
    dialogValue.value={<!-- -->
      bigType:{<!-- -->
        id:""
      }
    }
    dialogTitle.value="Add product"
  }
  dialogVisible.value=true;
}

const handleDelete = (id) => {<!-- -->

  ElMessageBox.confirm(
      'Are you sure you want to delete this record?',
      'system hint',
      {<!-- -->
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
  )
      .then(async() => {<!-- -->
        console.log("id=" + id)
        let res=await axios.get("admin/product/delete/" + id);
        if(res.data.code==0){<!-- -->
          ElMessage({<!-- -->
            type: 'success',
            message: 'Deletion successful! ',
          });
          initProductList();
        }else{<!-- -->
          ElMessage({<!-- -->
            type: 'error',
            message: res.data.msg,
          });
        }

      })
      .catch(() => {<!-- -->

      })
}


const typeNameFormatter=(row)=>{<!-- -->
  return row.type.name
}

const hotChangeHandle=async(row)=>{<!-- -->
  let res = await axios.get("admin/product/updateHot/" + row.id + "/state/" + row.hot);
  if(res.data.code==0){<!-- -->
    ElMessage({<!-- -->
      type:'success',
      message:'Execution successful!',
    })
  }else{<!-- -->
    ElMessage({<!-- -->
      type: 'error',
      message: res.data.msg,
    })
    initProductList();
  }
}

const swiperChangeHandle=async(row)=>{<!-- -->
  let res = await axios.get("admin/product/updateSwiper/" + row.id + "/state/" + row.swiper);
  if(res.data.code==0){<!-- -->
    ElMessage({<!-- -->
      type:'success',
      message:'Execution successful!',
    })
  }else{<!-- -->
    ElMessage({<!-- -->
      type: 'error',
      message: res.data.msg,
    })
    initProductList();
  }
}


</script>

<style lang="scss" scoped>

.header{<!-- -->
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination{<!-- -->
  padding-top: 15px;
  box-sizing: border-box;
}


</style>

package com.java1234.controller.admin;

import com.java1234.entity.PageBean;
import com.java1234.entity.Product;
import com.java1234.entity.R;
import com.java1234.entity.SmallType;
import com.java1234.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Management end-product Controller
 * @author java1234_小峰
 * @site www.java1234.com
 * @company Nantong Xiaofeng Network Technology Co., Ltd.
 * @create 2022-02-14 6:54
 */
@RestController
@RequestMapping("/admin/product")
public class AdminProductController {<!-- -->


    @Autowired
    private IProductService productService;
    /**
     *Paging query based on conditions
     * @param pageBean
     * @return
     */
    @RequestMapping("/list")
    public R list(@RequestBody PageBean pageBean){<!-- -->
        System.out.println(pageBean);
        Map<String,Object> map=new HashMap<>();
        map.put("name",pageBean.getQuery().trim());
        map.put("start",pageBean.getStart());
        map.put("pageSize",pageBean.getPageSize());
        List<Product> productList = productService.list(map);
        Long total = productService.getTotal(map);

        Map<String,Object> resultMap=new HashMap<>();
        resultMap.put("productList",productList);
        resultMap.put("total",total);
        return R.ok(resultMap);
    }


    /**
     * Update popular status
     * @param id
     * @param hot
     * @return
     */
    @GetMapping("/updateHot/{id}/state/{hot}")
    public R updateHot(@PathVariable(value = "id")Integer id,@PathVariable(value = "hot")boolean hot){<!-- -->
        Product product=productService.getById(id);
        product.setHot(hot);
        if(hot){<!-- -->
            product.setHotDateTime(new Date());
        }else{<!-- -->
            product.setHotDateTime(null);
        }
        productService.saveOrUpdate(product);
        return R.ok();
    }

    /**
     * Update swiper status
     * @param id
     * @param swiper
     * @return
     */
    @GetMapping("/updateSwiper/{id}/state/{swiper}")
    public R updateSwiper(@PathVariable(value = "id")Integer id,@PathVariable(value = "swiper")boolean swiper){<!-- -->
        Product product=productService.getById(id);
        product.setSwiper(swiper);
        productService.saveOrUpdate(product);
        return R.ok();
    }

    /**
     * delete
     * @param id
     * @return
     */
    @GetMapping("/delete/{id}")
    public R delete(@PathVariable(value = "id")Integer id){<!-- -->
        productService.removeById(id);
        return R.ok();
    }
}

package com.java1234.entity;

import com.baomidou.mybatisplus.annotation.FieldStrategy;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import lombok.Data;

import java.math.BigDecimal;
import java.util.Date;
import java.util.List;

/**
 * Commodity
 * @author java1234_小峰
 * @site www.java1234.com
 * @company Nantong Xiaofeng Network Technology Co., Ltd.
 * @create 2021-11-22 22:13
 */
@TableName("t_product")
@Data
public class Product {<!-- -->

    private Integer id; // number

    private String name; // name

    private BigDecimal price; // price

    private String productIntroImgs; // Product introduction pictures

    private String productParaImgs; // Product specification parameter pictures

    private Integer stock; // stock

    private String proPic="default.jpg"; // Product picture

    private boolean isHot=false; // Whether the product is popular and recommended

    private boolean isSwiper=false; // Whether to rotate image products

    private Integer swiperSort=0; // Carousel sorting

    private String swiperPic="default.jpg"; // Product carousel pictures

    private String description; // description

    @JsonSerialize(using=CustomDateTimeSerializer.class)
    @TableField(updateStrategy = FieldStrategy.IGNORED)
    private Date hotDateTime; //Set the popular recommendation date and time

    @TableField(select = false)
    private List<ProductSwiperImage> productSwiperImageList;

    @TableField(select = false)
    private SmallType type; //Product category
}