wordpress 网站赏析wordpress做在线编辑图片大小

一. 需求说明

策略管理主要涉及到二个功能模块，业务流程如下：

1. 新增策略: 允许管理员定义新的策略，包括策略的具体内容和参数（如折扣率）

2. 策略分配: 将策略分配给一个或多个售货机。

graph TDA[登录系统] A --> B[新增策略]B --> C[策略分配]

对于策略和其他管理数据，下面是示意图：

• 关系字段：policy_id

二. 生成基础代码

2.1 创建目录菜单

2.2 配置代码生成信息

2.3 下载代码并导入项目

• 执行sql脚本

• 前端代码

• 后端代码

效果：

三. 策略管理改造

3.1 需求

参考页面原型，完成基础布局展示改造和策略详情改造（查看详情，展示策略名称和该策略下的设备列表）

3.2 代码实现

在policy/index.vue视图组件中修改基础布局

<!-- 列表展示 -->
<el-table v-loading="loading" :data="policyList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" type="index" width="50" align="center" prop="policyId" /><el-table-column label="策略名称" align="center" prop="policyName" /><el-table-column label="策略方案" align="center" prop="discount" /><el-table-column label="创建时间" align="center" prop="createTime" width="180"><template #default="scope"><span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><el-button link type="primary"  @click="handleUpdate(scope.row)" v-hasPermi="['manage:policy:edit']">修改</el-button><el-button link type="primary"  @click="handleDelete(scope.row)" v-hasPermi="['manage:policy:remove']">删除</el-button></template></el-table-column>
</el-table>
​
​
<!-- 添加或修改策略管理对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body><el-form ref="policyRef" :model="form" :rules="rules" label-width="80px"><el-form-item label="策略名称" prop="policyName"><el-input v-model="form.policyName" placeholder="请输入策略名称" /></el-form-item><el-form-item label="策略方案" prop="discount"><el-input-number :min="1" :max="100" :precision="0" v-model="form.discount" placeholder="请输入策略" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></template>
</el-dialog>

在policy/index.vue视图组件中修改策略详情

<el-button link type="primary"  @click="getPolicyInfo(scope.row)" v-hasPermi="['manage:vm:list']">查看详情</el-button>
​
<!-- 策略详情对话框 -->
<el-dialog v-model="policyOpen" title="策略详情" width="500px"><el-form-item label="策略名称" prop="policyName"><el-input v-model="form.policyName" placeholder="请输入策略名称" disabled /></el-form-item><label>包含设备：</label><el-table :data="vmList"><el-table-column label="序号" type="index" width="80" align="center" prop="id" /><el-table-column label="点位地址" align="left" prop="addr" show-overflow-tooltip /><el-table-column label="设备编号" align="center" prop="innerCode" /></el-table>
</el-dialog>
​
<script setup name="Policy">
import { listVm } from "@/api/manage/vm";
import { loadAllParams } from "@/api/page";/* 查看策略详情 */
const policyOpen = ref(false);
const vmList = ref([]);
function getPolicyInfo(row) {//1. 获取策略信息form.value = row;//2. 根据策略id，查询设备列表loadAllParams.policyId = row.policyId;listVm(loadAllParams).then(response => {vmList.value = response.rows;policyOpen.value = true;});
}
</script>

效果👇

四. 设备策略分配

4.1 需求

在设备管理页面中点击策略，对设备设置一个固定折扣，用于营销作用

4.2 实现

有以下几步

• 定义策略按钮以及方法

• import引入js获取策略列表的请求方法，向前端发送请求接收响应

• 根据产品原型编写对话框组件

• 点击确定/取消按钮时关闭策略管理对话框

在vm/index.vue视图组件中修改前端

<el-button link type="primary" @click="handleUpdatePolicy(scope.row)" v-hasPermi="['manage:vm:edit']">策略</el-button>
​
<!-- 策略管理对话框 -->
<el-dialog title="策略管理" v-model="policyOpen" width="500px" append-to-body><el-form ref="vmRef" :model="form" label-width="80px"><el-form-item label="策略" prop="policyId"><el-select v-model="form.policyId" placeholder="请选择策略"><el-option v-for="item in policyList" :key="item.policyId" :label="item.policyName":value="item.policyId"></el-option></el-select></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></template>
</el-dialog>
​
<script setup name="Vm">
import { listPolicy } from '@/api/manage/policy';// 取消按钮
function cancel() {open.value = false;policyOpen.value=false; // 关闭策略对话框reset();
}/** 提交按钮 */
function submitForm() {proxy.$refs["vmRef"].validate(valid => {if (valid) {if (form.value.id != null) {updateVm(form.value).then(response => {proxy.$modal.msgSuccess("修改成功");open.value = false;// 策略详情对话框关闭policyOpen.value = false;getList();});} else {addVm(form.value).then(response => {proxy.$modal.msgSuccess("新增成功");open.value = false;getList();});}}});
}/* 设备策略分配 */
const policyList = ref([]);
const policyOpen = ref(false);
function handleUpdatePolicy(row) {//1. 为表单赋值设备id和策略idform.value.id = row.id;form.value.policyId = row.policyId;//2. 查询策略列表listPolicy(loadAllParams).then((response) => {policyList.value = response.rows;policyOpen.value = true;});
}
</script>

在VendingMachineServiceImpl中修改后端逻辑

/*** 修改设备管理** @param vendingMachine 设备管理* @return 结果*/
@Override
public int updateVendingMachine(VendingMachine vendingMachine)
{if (vendingMachine.getNodeId()!=null) {// 查询点位表，补充：区域、点位、合作商等信息Node node = nodeService.selectNodeById(vendingMachine.getNodeId());BeanUtil.copyProperties(node,vendingMachine,"id");// 商圈类型、区域、合作商vendingMachine.setAddr(node.getAddress());// 设备地址}vendingMachine.setUpdateTime(DateUtils.getNowDate());// 更新时间return vendingMachineMapper.updateVendingMachine(vendingMachine);
}

效果👇