海上捞火锅

海上捞火锅


菜品批量起售/停售

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>菜品批量起售/停售</li> </ul> <h5>前端页面和服务端交互过程</h5> <ul> <li>在DishController添加status方法,通过数组保存ids,实现批量起售停售</li> </ul> <h5>触发事件</h5> <pre><code>&lt;span class="span-btn blueBug non" @click="statusHandle('1')"&gt;批量启售&lt;/span&gt; &lt;span style="border:none;" class="span-btn delBut non" @click="statusHandle('0')"&gt;批量停售&lt;/span&gt;</code></pre> <h5>接口调用</h5> <pre><code>statusHandle (row) { let params = {} if (typeof row === 'string' ) { if (this.checkList.length === 0) { this.$message.error('批量操作,请先勾选操作菜品!') return false } params.id = this.checkList.join(',') params.status = row } else { params.id = row.id params.status = row.status ? '0' : '1' } this.dishState = params this.$confirm('确认更改该菜品状态?', '提示', { 'confirmButtonText': '确定', 'cancelButtonText': '取消', 'type': 'warning' }).then(() =&gt; { // 起售停售---批量起售停售接口 dishStatusByStatus(this.dishState).then(res =&gt; { if (res.code === 1) { this.$message.success('菜品状态已经更改成功!') this.handleQuery() } else { this.$message.error(res.msg || '操作失败') } }).catch(err =&gt; { this.$message.error('请求出错了:' + err) }) }) },</code></pre> <h5>请求URL</h5> <ul> <li><code>[context-path]/dish/status/${params.status}</code></li> </ul> <h5>请求方式</h5> <ul> <li>POST </li> </ul> <h5>API接口</h5> <pre><code>const dishStatusByStatus = (params) =&gt; { return $axios({ url: `/dish/status/${params.status}`, method: 'post', params: { ids: params.id } }) }</code></pre> <h5>参数</h5> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">必选</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">id</td> <td style="text-align: left;">是</td> <td style="text-align: left;">bigint</td> <td>菜品编号</td> </tr> </tbody> </table> <h5>返回示例</h5> <pre><code>code: 1 data: "状态修改成功!" map: {} msg: null </code></pre> <h5>返回参数说明</h5> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">code</td> <td style="text-align: left;">int</td> <td>返回码:1:成功 0或其他:失败</td> </tr> <tr> <td style="text-align: left;">data</td> <td style="text-align: left;">object</td> <td>返回数据</td> </tr> <tr> <td style="text-align: left;">map</td> <td style="text-align: left;">map</td> <td>动态数据</td> </tr> <tr> <td style="text-align: left;">msg</td> <td style="text-align: left;">string</td> <td>错误信息</td> </tr> </tbody> </table> <h5>备注</h5> <ul> <li>data有两种返回值</li> </ul> <pre><code>public static &lt;T&gt; R&lt;T&gt; success(T object) { R&lt;T&gt; r = new R&lt;T&gt;(); r.data = object; r.code = 1; return r; } public static &lt;T&gt; R&lt;T&gt; error(String msg) { R r = new R(); r.msg = msg; r.code = 0; return r; }</code></pre> <h5>后端接口请求参数</h5> <ul> <li>在Controller接口方法中声明数组类型参数ids</li> <li>通过 @PathVariable 将 URL 中占位符参数status绑定到控制器处理入参</li> </ul> <h5>后端代码</h5> <pre><code>@PostMapping("/status/{status}") public R&lt;String&gt; status(@PathVariable Integer status,String[] ids){ log.info(ids.toString()); for (String id : ids) { Dish dish = dishService.getById(id); dish.setStatus(status); dishService.updateById(dish); } return R.success("状态修改成功!"); }</code></pre>

页面列表

ITEM_HTML