part 1
part 2
part 3
part 4 本页

5 套餐管理

5.1 新增套餐
5.2 套餐信息分页查询
5.3 删除套餐
其他小功能都比较简单且类似，不再赘述

5.1 新增套餐

5.1.1 整体分析

• 套餐是由菜品构成的，在添加套餐里面，可以添加菜品（会弹出每个菜品分类下的菜，比如主食下面有米饭）。套餐分类那里之前controller已经写好了，前端传不同的type分别查菜品分类、套餐分类，去修改对于的请求url即可。

• 类似的，添加菜品的时候有多少菜品分类也列出来了，需要写controller处理菜品分类下对于的菜品。
  

5.1.2 前端分析

• 获取套餐分类的列表

getDishTypeList() {//通过category中的type = 1/2 查出对于的菜品分类或是套餐分类，显示到前端的下拉框中//返回值中的data的类型是：List<Category>,赋值给了setMealList属性进行双向绑定getCategoryList({ type: 2, page: 1, pageSize: 1000 }).then((res) => {if (res.code === 1) {this.setMealList = res.data.map((obj) => ({ ...obj, idType: obj.id }))} else {this.$message.error(res.msg || '操作失败')}})
},

• 添加菜品，注意getDishList（）方法！

// 添加菜品，之前有按钮点击事件绑定了这个函数
//<div class="addBut" style="margin-bottom: 20px" @click="openAddDish">+ 添加菜品</div>
openAddDish() {this.seachKey = ''this.dialogVisible = true//搜索条件清空，菜品重新查询，菜品类别选第一个重新查询this.value = ''this.keyInd = 0//每个菜品对应有哪些菜，在dishList中循环显示出来this.getDishList(this.dishType[0].id)
},

• 通过套餐ID获取菜品列表分类：getDishList (id)

getDishList (id) {queryDishList({categoryId: id}).then(res => {if (res.code === 1) {if (res.data.length == 0) {this.dishAddList = []return}let newArr = res.data;newArr.forEach((n) => {n.dishId = n.idn.copies = 1// n.dishCopies = 1n.dishName = n.name})this.dishAddList = newArr} else {this.$message.error(res.msg)}})
},

其中queryDishList({categoryId: id}) 发送ajax请求，根据categoryId获取dish（获取当前套餐分类下的菜）。dish表中有category_id（相当于是副键），也就是说，一个category对应很多的dish。

//提交表单，最主要的代码，把整体数据提交上去。
submitForm(formName, st) {this.$refs[formName].validate((valid) => {if (valid) {let prams = { ...this.ruleForm }prams.price *= 100prams.setmealDishes = this.dishTable.map((obj) => ({copies: obj.copies,dishId: obj.dishId,name: obj.name,price: obj.price,}))prams.status = this.ruleForm ? 1 : 0prams.categoryId = this.ruleForm.idTypeif(prams.setmealDishes.length < 1){this.$message.error('请选择菜品！')return }if(!this.imageUrl){this.$message.error('请上传套餐图片')return }// delete prams.dishListif (this.actionType == 'add') {delete prams.id//发送请求addSetmeal(prams).then((res) => {if (res.code === 1) {this.$message.success('套餐添加成功！')if (!st) {this.goBack()} else {this.$refs.ruleForm.resetFields()this.dishList = []this.dishTable = []this.ruleForm = {name: '',categoryId: '',price: '',code: '',image: '',description: '',dishList: [],status: true,id: '',idType: '',}this.imageUrl = ''}} else {this.$message.error(res.msg || '操作失败')}}).catch((err) => {this.$message.error('请求出错了：' + err)})} else {delete prams.updateTimeeditSetmeal(prams).then((res) => {if (res.code === 1) {this.$message.success('套餐修改成功！')this.goBack()} else {this.$message.error(res.msg || '操作失败')}}).catch((err) => {this.$message.error('请求出错了：' + err)})}} else {return false}})
},

其中调用的方法

// 新增数据接口
const addSetmeal = (params) => {return $axios({url: '/setmeal',method: 'post',data: { ...params }})
}

5.1.3 后端分析

• 对应的套餐分类复用了之前的，根据 category中的type = 1/2 查出对于的菜品分类或是套餐分类，显示到前端的下拉框中

1. 现在解决点击某个分类，显示该分类下具体菜品。
   
   代码：

/*** 根据菜品分类查菜品比如： 川菜这个选项一点击，就通过这个controller返回一个list（元素就是各种川菜dish）* @param dish 参数只有一个categoryId，* @return*/
@GetMapping("list/getDishByCategoryId.do")
public RetObj getDishByCategoryId(Dish dish){LambdaQueryWrapper<Dish> lambdaQueryWrapper = new LambdaQueryWrapper<>();lambdaQueryWrapper.eq(dish != null,Dish::getCategoryId,dish.getCategoryId()).orderByDesc(Dish::getSort);List<Dish> dishList = dishService.list(lambdaQueryWrapper);return RetObj.success(dishList);
}

2. 对应菜品分类下的菜品查询到并显示到前端后，整体添加页面提交请求给后端，进行插入数据。这里 肯定需要操作来个表，因为新增套餐这个页面提交的数据就涉及来个表的数据，主要是套餐下有很多菜品。

分析前端发送过来的数据

{"name": "二逼餐饮","categoryId": "1641061323236622337","price": 12300,"code": "","image": "abfe28a3-35af-493d-a043-295189807847.jpg","description": "asdf","dishList": [],"status": 1,"idType": "1641061323236622337","setmealDishes": [{"copies": 1,"dishId": "1645433949618958337","name": "二逼2","price": 32100},{"copies": 1,"dishId": "1413384757047271425","name": "王老吉","price": 500},{"copies": 1,"dishId": "1413385247889891330","name": "米饭","price": 200},{"copies": 1,"dishId": "1397860578738352129","name": "白切鸡","price": 6600}]
}

注意setmealDishes，这里面只有我们选中的菜品的信息，对setmeal_dish这个表进行操作的时候，肯定还需要setmeal_id,就是这个菜现在属于哪个套餐分类中，这个要自己加。
思路和之前类似，写一个MealDto，把meal的信息（名称、价格、图片等等存进去），还要报错对应的dish的信息，一次封装到MealDto
中。

• Dto类如下

@Data
public class SetMealDto extends Setmeal {//名字一定要和前端一致，否则无法注入List<SetmealDish> setmealDishes;
}

• service的处理，注意需要给setmeal_dish这个表插入具体菜品的时候，需要setmeal_id这个信息。List<SetmealDish>这个前端传来的数据中肯定没有这些菜品对应的套餐的setmeal_id，这个就需要我们重新构造一个list，把前端传来的那个list进行完善，添加setmeal_id的值。

@Transactional
public void saveMealWithFlavor(SetMealDto setMealDto) {this.save(setMealDto);List<SetmealDish> setmealDishes = setMealDto.getSetmealDishes();//setmealDishes中有一个字段：setmeal_id，这个字段在上面那个list中肯定是没有的！// 只有每个菜品自己的信息，这个setmeal_id就是setMealDto中的idList<SetmealDish> afterCompleteList = setmealDishes.stream().map(item -> {SetmealDish setmealDish = new SetmealDish();BeanUtils.copyProperties(item,setmealDish);setmealDish.setSetmealId(setMealDto.getId().toString());return setmealDish;}).collect(Collectors.toList());boolean res = setmealDishService.saveBatch(afterCompleteList);if (res == false){throw new RuntimeException("套餐中菜品导入失败！");}
}

• controller 简单编写

@PostMapping("/add/setmeal.do")
public RetObj setMealController(@RequestBody SetMealDto setMealDto){setmealService.saveMealWithFlavor(setMealDto);return RetObj.success("成功新增套餐！");
}