后端开发10.规格模块

月木@

已于 2023-08-13 07:49:44 修改

阅读量927

点赞数

分类专栏：月木商城项目实战文章标签： spring boot

于 2023-08-10 02:36:53 首次发布

本文链接：https://blog.csdn.net/m0_63040701/article/details/132200837

版权

月木商城项目实战专栏收录该内容

13 篇文章 0 订阅

订阅专栏

概述

简介

效果图

数据库设计

创建规格表

DROP TABLE IF EXISTS `goods_specification`;

CREATE TABLE `goods_specification` (

  `goodsSpecificationId` int(11) NOT NULL AUTO_INCREMENT,

  `goodsSpecificationName` varchar(255) DEFAULT NULL,

  `goodsTypeId` int(11) DEFAULT NULL,

  PRIMARY KEY (`goodsSpecificationId`)

) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4;

创建规格项表

DROP TABLE IF EXISTS `goods_specification_option`;

CREATE TABLE `goods_specification_option` (

  `goodsSpecificationOptionId` int(11) NOT NULL AUTO_INCREMENT,

  `goodsSpecificationOptionName` varchar(255) DEFAULT NULL,

  `goodsSpecificationId` int(11) DEFAULT NULL,

  PRIMARY KEY (`goodsSpecificationOptionId`)

) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;

添加规格数据

INSERT INTO `goods_specification` VALUES ('3', '手机屏幕尺寸', '24');

INSERT INTO `goods_specification` VALUES ('4', '处理器', '24');

INSERT INTO `goods_specification` VALUES ('5', '笔记本CPU', '19');

添加规格项数据

INSERT INTO `goods_specification_option` VALUES ('5', '3.7英寸', '3');

INSERT INTO `goods_specification_option` VALUES ('6', '6.1英寸', '3');

INSERT INTO `goods_specification_option` VALUES ('7', '骁龙888+', '4');

INSERT INTO `goods_specification_option` VALUES ('8', '天玑8200', '4');

INSERT INTO `goods_specification_option` VALUES ('9', '麒麟9000E', '4');

INSERT INTO `goods_specification_option` VALUES ('10', 'G3050U', '5');

INSERT INTO `goods_specification_option` VALUES ('11', '双核心四线程2.3G-3.2GHzI3', '5');

实体类设计

规格实体类

@Data
public class GoodsSpecification implements Serializable {
    @TableId
    private Integer goodsSpecificationId;
    private String goodsSpecificationName;//规格名
    private Integer goodsTypeId;//商品类型
    @TableField(exist = false)
    private List<GoodsSpecificationOption>specificationOptions;//规格项集合
}

规格项实体类

@Data
public class GoodsSpecificationOption implements Serializable {
    @TableId
    private Integer goodsSpecificationOptionId;
    private String goodsSpecificationOptionName;//规格项内容
    private Integer goodsSpecificationId;//规格id
}

服务层逻辑

GoodsSpecificationService

package jkw.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.GoodsSpecification;

import java.util.List;

public interface GoodsSpecificationService {
    void add(GoodsSpecification goodsSpecification);
    void update(GoodsSpecification goodsSpecification);
    void delete(Integer id);
    GoodsSpecification findById(Integer id);
    Page<GoodsSpecification> search(int page, int size);
    List<GoodsSpecification> findAll();
}





GoodsSpecificationServiceImpl
package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.GoodsSpecificationMapper;
import jkw.mapper.GoodsSpecificationOptionMapper;
import jkw.pojo.GoodsSpecification;
import jkw.pojo.GoodsSpecificationOption;
import jkw.service.GoodsSpecificationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class GoodsSpecificationServiceImpl implements GoodsSpecificationService {
    @Autowired
    private GoodsSpecificationMapper goodsSpecificationMapper;

    @Autowired
    private GoodsSpecificationOptionMapper goodsSpecificationOptionMapper;

    @Override
    public void add(GoodsSpecification goodsSpecification) {
        goodsSpecificationMapper.insert(goodsSpecification);
    }

    @Override
    public void update(GoodsSpecification goodsSpecification) {
        goodsSpecificationMapper.updateById(goodsSpecification);
    }

    @Override
    public void delete(Integer id) {
        //先删除商品规格的所有规格项
        QueryWrapper<GoodsSpecificationOption> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("goodsSpecificationId", id);
        goodsSpecificationOptionMapper.delete(queryWrapper);
        //删除商品规格
        goodsSpecificationMapper.deleteById(id);
    }

    @Override
    public GoodsSpecification findById(Integer id) {
        return goodsSpecificationMapper.selectById(id);
    }

    @Override
    public Page<GoodsSpecification> search(int page, int size) {
        return goodsSpecificationMapper.selectPage(new Page<>(page, size), null);
    }

    @Override
    public List<GoodsSpecification> findAll() {
        return goodsSpecificationMapper.selectList(null);
    }
}

GoodsSpecificationOptionService

package jkw.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.GoodsSpecificationOption;

import java.util.List;

public interface GoodsSpecificationOptionService {
    void add(GoodsSpecificationOption goodsSpecificationOption);

    void update(GoodsSpecificationOption goodsSpecificationOption);

    void delete(Integer id);

    GoodsSpecificationOption findById(Integer id);

    Page<GoodsSpecificationOption> search(int page, int size);
    //根据规格id查询所有规格项
    List<GoodsSpecificationOption> findAllByGoodsSpecificationId(Integer id);

    //根据商品id查询商品所有规格项
    List<GoodsSpecificationOption> findAllByGoodsId(Integer id);
}

GoodsSpecificationOptionServiceImpl

package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.GoodsMapper;
import jkw.mapper.GoodsSpecificationMapper;
import jkw.mapper.GoodsSpecificationOptionMapper;
import jkw.pojo.GoodsSpecification;
import jkw.pojo.GoodsSpecificationOption;
import jkw.service.GoodsSpecificationOptionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.List;

@Service
@Transactional
public class GoodsSpecificationOptionServiceImpl implements GoodsSpecificationOptionService {

    @Autowired
    private GoodsSpecificationOptionMapper goodsSpecificationOptionMapper;

    @Autowired
    private GoodsMapper goodsMapper;
    @Autowired
    private GoodsSpecificationMapper goodsSpecificationMapper;

    @Override
    public void add(GoodsSpecificationOption goodsSpecificationOption) {
        goodsSpecificationOptionMapper.insert(goodsSpecificationOption);
    }

    @Override
    public void update(GoodsSpecificationOption goodsSpecificationOption) {
        goodsSpecificationOptionMapper.updateById(goodsSpecificationOption);
    }

    @Override
    public void delete(Integer id) {

        goodsSpecificationOptionMapper.deleteById(id);
    }

    @Override
    public GoodsSpecificationOption findById(Integer id) {
        return goodsSpecificationOptionMapper.selectById(id);
    }

    @Override
    public Page<GoodsSpecificationOption> search(int page, int size) {
        return goodsSpecificationOptionMapper.selectPage(new Page<>(page, size), null);
    }

    @Override
    public List<GoodsSpecificationOption> findAllByGoodsSpecificationId(Integer id) {
        QueryWrapper<GoodsSpecificationOption> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("goodsSpecificationId", id);
        List<GoodsSpecificationOption> goodsSpecificationOptions = goodsSpecificationOptionMapper.selectList(queryWrapper);
        return goodsSpecificationOptions;

    }

    @Override
    public List<GoodsSpecificationOption> findAllByGoodsId(Integer id) {
        List<GoodsSpecificationOption> goodsSpecificationOptionList = new ArrayList<>();
        //查询商品的三级类型的id
        Integer goodsTypeId3 = goodsMapper.selectById(id).getGoodsTypeId3();
        //查询此类型下的所有规格
        QueryWrapper<GoodsSpecification> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("goodsTypeId", goodsTypeId3);
        List<GoodsSpecification> goodsSpecifications = goodsSpecificationMapper.selectList(queryWrapper);
        for (GoodsSpecification goodsSpecification : goodsSpecifications) {
            QueryWrapper<GoodsSpecificationOption> queryWrapper1 = new QueryWrapper<>();
            queryWrapper.eq("goodsSpecificationId", goodsSpecification.getGoodsSpecificationId());
            List<GoodsSpecificationOption> goodsSpecificationOptionList1 = goodsSpecificationOptionMapper.selectList(queryWrapper1);
            for (GoodsSpecificationOption goodsSpecificationOption : goodsSpecificationOptionList1) {
                goodsSpecificationOptionList.add(goodsSpecificationOption);
            }
        }

        return goodsSpecificationOptionList;
    }
}

控制层

GoodsSpecificationCon

package jkw.controller;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.GoodsSpecification;
import jkw.service.GoodsSpecificationService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.Serializable;
import java.util.List;

@RequestMapping("/goods/goodsSpecification")
@RestController
@CrossOrigin
public class GoodsSpecificationCon implements Serializable {
    @Autowired
    private GoodsSpecificationService goodsSpecificationService;

    /**
     * 新增
     *
     * @param goodsSpecification
     * @return
     */
    @PostMapping("/add")
    public BaseResult add(GoodsSpecification goodsSpecification) {
        goodsSpecificationService.add(goodsSpecification);
        return BaseResult.ok();
    }

    /**
     * 修改
     *
     * @param goodsSpecification
     * @return
     */
    @PostMapping("/update")
    public BaseResult update(GoodsSpecification goodsSpecification) {
        goodsSpecificationService.update(goodsSpecification);
        return BaseResult.ok();
    }

    /**
     * 删除
     *
     * @param goodsSpecificationId
     * @return
     */
    @DeleteMapping("/delete")
    public BaseResult delete(Integer goodsSpecificationId) {
        goodsSpecificationService.delete(goodsSpecificationId);
        return BaseResult.ok();
    }

    /**
     * 根据id查询
     *
     * @param goodsSpecificationId
     * @return
     */
    @GetMapping("/findById")
    public BaseResult findById(Integer goodsSpecificationId) {
        GoodsSpecification goodsSpecification = goodsSpecificationService.findById(goodsSpecificationId);
        return BaseResult.ok(goodsSpecification);
    }

    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    public BaseResult search(int page, int size) {
        Page<GoodsSpecification> SpecificationPage = goodsSpecificationService.search(page, size);
        return BaseResult.ok(SpecificationPage);
    }

    /**
     * 查询所有
     * @return
     */
    @GetMapping("/findAll")
    public BaseResult findAll(){
        List<GoodsSpecification> goodsSpecifications = goodsSpecificationService.findAll();
        return BaseResult.ok(goodsSpecifications);
    }
}

GoodsSpecificationOptionCon

package jkw.controller;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.GoodsSpecificationOption;
import jkw.service.GoodsSpecificationOptionService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.Serializable;
import java.util.List;

@RequestMapping("/goods/goodsSpecificationOption")
@RestController
@CrossOrigin
public class GoodsSpecificationOptionCon implements Serializable {
    @Autowired
    private GoodsSpecificationOptionService goodsSpecificationOptionService;

    @PostMapping("/add")
    public BaseResult add(GoodsSpecificationOption goodsSpecificationOption) {
        goodsSpecificationOptionService.add(goodsSpecificationOption);
        return BaseResult.ok();
    }

    /**
     * 修改
     *
     * @param goodsSpecificationOption
     * @return
     */
    @PostMapping("/update")
    public BaseResult update(GoodsSpecificationOption goodsSpecificationOption) {
        goodsSpecificationOptionService.update(goodsSpecificationOption);
        return BaseResult.ok();
    }

    /**
     * 删除
     *
     * @param goodsSpecificationOptionId
     * @return
     */
    @DeleteMapping("/delete")
    public BaseResult delete(Integer goodsSpecificationOptionId) {
        goodsSpecificationOptionService.delete(goodsSpecificationOptionId);
        return BaseResult.ok();
    }

    /**
     * 根据id查询
     *
     * @param goodsSpecificationOptionId
     * @return
     */
    @GetMapping("/findById")
    public BaseResult findById(Integer goodsSpecificationOptionId) {
        GoodsSpecificationOption goodsSpecificationOption = goodsSpecificationOptionService.findById(goodsSpecificationOptionId);
        return BaseResult.ok(goodsSpecificationOption);
    }

    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    public BaseResult search(int page, int size) {
        Page<GoodsSpecificationOption> SpecificationOptionPage = goodsSpecificationOptionService.search(page, size);
        return BaseResult.ok(SpecificationOptionPage);
    }

    /**
     * 根据规格Id查找所有规格项
     *
     * @param id
     * @return
     */
    @GetMapping("/findAllByGoodsSpecificationId")
    public BaseResult findAllBySpecificationId(Integer id) {
        List<GoodsSpecificationOption> goodsSpecificationOptions = goodsSpecificationOptionService.findAllByGoodsSpecificationId(id);
        return BaseResult.ok(goodsSpecificationOptions);
    }

    /**
     * 根据商品id查找所有规格项【依据是商品对应类型】
     * @param goodsId
     * @return
     */
    @GetMapping("/findAllByGoodsId")
    public BaseResult findAllByGoodsId(Integer goodsId){
        List<GoodsSpecificationOption> goodsSpecificationOptions = goodsSpecificationOptionService.findAllByGoodsId(goodsId);
        return BaseResult.ok(goodsSpecificationOptions);
    }
}

后台ui设计

<template>
  <div class="data-container">
    <!--头部 start-->
    <div class="data-header">
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--头部 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 800px;">
        <el-table-column label="规格名" prop="goodsSpecificationName" align="center"></el-table-column>
        <el-table-column label="商品类型" prop="goodsTypeId" align="center">
          <template #default="scope">
                <span v-for="item in typeList.list" :key="item.goodsTypeId">
                    {{ scope.row.goodsTypeId == item.goodsTypeId ? item.goodsTypeName : '' }}
                </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="400">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="success" @click="handleAddOption(scope.$index, scope.row)">新增规格项
            </el-button>
            <el-button size="small" type="info" @click="handleShowOptions(scope.$index, scope.row)">查看规格项
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="规格名">
          <el-input v-model="addFormInfo.goodsSpecificationName" size="large"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="addFormInfo.goodsTypeId" placeholder="请选择商品类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="规格名">
          <el-input v-model="editorFormInfo.goodsSpecificationName" size="large"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="editorFormInfo.goodsTypeId" placeholder="请选择商品类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
    <!--新增规格项对话框 start-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogAddOptionVisible"
        title="新增规格项"
        width="35%"
        center>
      <el-form inline :model="addOptionFormInfo" label-width="150px">
        <el-form-item label="规格项">
          <el-input v-model="addOptionFormInfo.goodsSpecificationOptionName" size="large"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddOptionVisible = false">取消</el-button>
                <el-button type="primary" @click="sureAddOptionHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--新增规格项对话框 end-->
    <!--查看规格项对话框 start-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogShowOptionVisible"
        title="新增规格项"
        width="35%"
        center>

      <el-table :data="options.list">
        <el-table-column label="规格项" prop="goodsSpecificationOptionName" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDeleteOption(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogShowOptionVisible = false">关闭</el-button>

            </span>
      </template>
    </el-dialog>
    <!--查看规格项对话框 end-->
  </div>
</template>

<script setup>
import axios from "@/utils/request.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化类型类型列表
const typeList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  goodsSpecificationName: "",
  goodsTypeId: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  goodsSpecificationId: '',
  goodsSpecificationName: "",
  goodsTypeId: "",
})
//新增规格项对话框控制器
const dialogAddOptionVisible = ref(false)
//初始化新增规格项对话框
const addOptionFormInfo = reactive({
  goodsSpecificationOptionName: '',
  goodsSpecificationId: ''
})
//查看规格项对话框控制器
const dialogShowOptionVisible = ref(false)
//初始化规格项对话框控制器
const options = reactive({
  list: []
})
/**
 * 网路请求：分页查询
 *  */
const http = (page, size) => {
  axios.get('goods/goodsSpecification/search', {
    params: {
      page: page,
      size: size
    }
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(currentPage.value, defaultPageSize.value)
  axios.get('goods/goodsType/findAllThree')
      .then(res => {
        if (res.data.code == 200) {
          typeList.list = res.data.data
        }
      })
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.post('goods/goodsSpecification/add', {
    goodsSpecificationName: addFormInfo.goodsSpecificationName,
    goodsTypeId: addFormInfo.goodsTypeId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.get('goods/goodsSpecification/findById', {
    params: {
      goodsSpecificationId: row.goodsSpecificationId
    }
  }).then(res => {

    if (res.data.code == 200) {
      editorFormInfo.goodsSpecificationId = res.data.data.goodsSpecificationId;
      editorFormInfo.goodsSpecificationName = res.data.data.goodsSpecificationName;
      editorFormInfo.goodsTypeId = res.data.data.goodsTypeId;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.post('goods/goodsSpecification/update', {
    goodsSpecificationId: editorFormInfo.goodsSpecificationId,
    goodsSpecificationName: editorFormInfo.goodsSpecificationName,
    goodsTypeId: editorFormInfo.goodsTypeId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      //添加失败：给出提示信息(element-plus/反馈组件/message信息提示)
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.delete("goods/goodsSpecification/delete", {
      params: {
        goodsSpecificationId: row.goodsSpecificationId
      }
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })
}
/**
 * 新增规格项对话框弹出事件
 */
const handleAddOption = (index, row) => {
  dialogAddOptionVisible.value = true
  addOptionFormInfo.goodsSpecificationId = row.goodsSpecificationId
}
const sureAddOptionHandler = () => {
  axios.post('goods/goodsSpecificationOption/add', {
    goodsSpecificationOptionName: addOptionFormInfo.goodsSpecificationOptionName,
    goodsSpecificationId: addOptionFormInfo.goodsSpecificationId
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddOptionVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 查看规格项对话框弹出事件
 */
const handleShowOptions = (index, row) => {
  dialogShowOptionVisible.value = true
  axios.get('goods/goodsSpecificationOption/findAllByGoodsSpecificationId', {
    params: {
      id: row.goodsSpecificationId
    }
  }).then(res => {
    if (res.data.code == 200) {
      options.list = res.data.data
    }

  })
}
const handleDeleteOption = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.delete("goods/goodsSpecificationOption/delete", {
      params: {
        goodsSpecificationOptionId: row.goodsSpecificationOptionId
      }
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        axios.get('goods/goodsSpecificationOption/findAllByGoodsSpecificationId', {
          params: {
            id: row.goodsSpecificationId
          }
        }).then(res => {
          if (res.data.code == 200) {
            options.list = res.data.data
          }

        })
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })
}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>