当前位置: 首页 > news >正文

城市规则管理列表实现逻辑

这是index.vue文件,里面引入了Element UI 的<table-panel>、<el-form>、<el-form-item>、<el-table-column>组件来搭建基本的UI框架,引入各种API用来获取数据,引入组件用来实现页面功能。它的作用是渲染城市的规则数据,支持查询、重置、新增、上传、修改、删除功能,表单内部支持页面跳转。

1、渲染数据

  • 表单数据来源data() 里的 query,初始值来自 QUERY_INFO
  • 渲染方式:通过 el-form 的 :model 绑定和各表单项的 v-model 实现数据和页面的双向绑定。
  • 数据流动:初始化、外部参数、用户输入都会影响 query,页面和数据始终保持同步。

2、动态渲染

页面是典型的数据驱动+事件驱动的动态渲染:

  • 数据变化(如接口返回、表单输入)会自动更新页面内容。
  • 事件触发(如按钮点击、表格操作)会动态改变数据或页面结构。
  • 组件和内容的显示/隐藏、内容变化、交互行为都依赖于 Vue 的响应式和模板语法实现动态渲染。

 3、表单内的路由跳转

在 el-table-column 中使用 <template slot-scope="scope">(或 Vue 2.6+ 的 v-slot:default="scope")可以实现自定义每一行的渲染内容,包括按钮、链接、图标等,并且可以结合事件实现如路由跳转等复杂交互。

<el-table-columnlabel="客户设备清单"prop="customDevice"
><template slot-scope="scope"><span v-if="scope.row.customDevice == '未上传'">未上传</span><spanclass="cursor"@click="goToDevList(scope.row)"v-else>{{ scope.row.customDevice }}</span></template>
</el-table-column>
//////////////////////////////////
methods: {goToDevList(row) {if (!row || !row.id) return;this.params.ruleId = row.id;let query = cloneDeep(this.params);this.$router.push({ path: '/customer', query });}
}

说明

  • slot-scope="scope" 让你拿到当前行的数据对象(scope.row)。
  • 你可以根据 scope.row 的内容动态渲染不同内容。
  • 通过 @click="goToDevList(scope.row)",点击时把当前行数据传递给方法,实现路由跳转或其他操作。
  • 这样点击表格中某一行的“客户设备清单”内容时,就会跳转到对应页面,并带上当前行的参数。

用法总结

  1. slot-scope="scope"
    让你在 <template> 里拿到当前行的数据(scope.row),实现自定义渲染。

  2. 自定义内容
    可以渲染按钮、链接、图标等,并根据行数据动态显示不同内容。

  3. 事件绑定
    可以在自定义内容上绑定事件(如 @click),并把当前行数据作为参数传递。

  4. 路由跳转
    在事件方法中使用 this.$router.push 或 router.push,实现页面跳转并传递参数。

4、查询功能

<el-buttontype="primary" icon="el-icon-search" size="mini"@click="search"
>查询</el-button>methods: {getList() {this.search();}
}
// search() 方法在 mixin 中定义如下:
search() {this.$refs[this.tablePanelName] &&this.$refs[this.tablePanelName].search(this.query);
}

实现步骤与逻辑

  1. 用户点击“查询”按钮,触发 search 方法。
  2. search 方法会读取表单(query)中的查询条件,向后端接口发起请求(如 getRuleList)。
  3. 后端返回数据后,赋值给 ruleList,表格自动渲染新数据。
  4. 查询条件包括地市、规则名称、状态等,全部由表单双向绑定到 query

5、重置功能(防抖优化)

<el-buttonicon="el-icon-refresh"size="mini"@click="!resetState && resetQueryEvn('queryForm')"
>重置</el-button>methods: {resetQueryEvn(tag) {if (this.resetState) return;this.resetState = true;setTimeout(() => {this.resetState = false;}, 800);if (this.dialogMode) {this.$emit("reset");} else {this.resetForm(tag);}},// resetForm(tag) 一般会调用 this.$refs[tag].resetFields() 重置表单
}// mixins里的resetForm方法
resetForm(refName) {if (this.$refs[refName]) {this.$refs[refName].resetFields();}this.search();}

实现步骤与逻辑

  1. 用户点击“重置”按钮,先判断 resetState,防止短时间内多次点击(防抖)。
  2. 调用 resetQueryEvn('queryForm'),如果不是弹窗模式,则重置表单(如 this.$refs.queryForm.resetFields())。
  3. 查询条件恢复初始状态(QUERY_INFO),页面表单内容清空。
  4. 通常重置后会自动重新查询,刷新表格数据。

6、修改功能

<el-button type="success" size="mini" plain @click="handleModify(scope.row)">修改</el-button>methods: {handleModify(row) {this.dialogDate = row;this.openAddDialog = true;}
}
// 弹窗组件
<AddModifyDialog v-if="openAddDialog" :visible.sync="openAddDialog" :data="dialogDate" @onAddModified="getList"/>

实现步骤与逻辑

  1. 用户点击“修改”按钮,调用 handleModify(scope.row),把当前行数据赋值给 dialogDate,并打开弹窗。
  2. 弹窗组件 AddModifyDialog 通过 props.data 接收要编辑的数据,自动回显到表单。
  3. 用户在弹窗中修改内容,点击“确定”后,弹窗组件会调用 updateRule 接口提交修改。
  4. 修改成功后,弹窗关闭,并通过 @onAddModified 通知父组件刷新列表(调用 getList())。

7、删除功能

<el-button type="danger" size="mini" plain @click="handleDelete(scope.row)" @mouseup.native="resetButtonState($event)">删除</el-button>methods: {handleDelete(row) {this.$confirm('确认删除该规则吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {deleteRule(row.id).then(response => {this.$modal.msgSuccess("删除成功");this.search(); // 删除成功后刷新列表});}).catch(() => {this.$message.info('已取消删除');});}
}//删除规则接口
export function deleteRule(id) {return request({url: '/zx/ruleConfig/delete/'+id,method: 'delete',})
}

实现步骤与逻辑

  1. 用户点击“删除”按钮,弹出确认框。
  2. 用户确认后,调用 deleteRule(row.id) 接口删除该条数据。
  3. 删除成功后,弹出“删除成功”提示,并刷新表格数据(调用 search())。
  4. 如果取消删除,弹出“已取消删除”提示。

8、子组件 add-modify.vue

这个 add-modify.vue 组件是一个规则新增/修改弹窗表单,用于在规则管理页面中进行规则的创建和编辑。下面详细总结其用法和功能:

1. 组件用途
  • 用于弹窗形式新增或修改规则(如规则名称、运行周期、离线阈值、地市、派单路径等)。
  • 支持表单校验、数据回显、周期表达式的编码与解析。
2. 主要功能点

(1)弹窗显示与隐藏

  • 通过 :visible.sync="openAddDialog" 控制弹窗的显示与隐藏。
  • 关闭弹窗时会自动触发 update:visible 事件通知父组件。

(2)表单数据绑定与校验

  • 表单数据通过 form 对象双向绑定。
  • 校验规则通过 rules 对象定义,支持必填校验等。

(3)新增与修改模式自动切换

  • 通过 props.data 判断是“新增”还是“修改”:
    • 新增:data 为空,表单为空白。
    • 修改:data 有值,通过接口 getRuleById 拉取详情并回显到表单。

(4)表单提交

  • 点击“确定”按钮时,先校验表单,再根据是新增还是修改调用不同的接口addRule 或 updateRule)。
  • 成功后弹窗关闭,并通过 onAddModified 事件通知父组件刷新列表。
 3. 组件使用方法(父组件示例)
<add-modify:visible.sync="openAddDialog":data="dialogDate"@onAddModified="getList"
/>
// 懒加载components: {add-modify: () => import("./components/add-modify"),}
  • visible.sync:控制弹窗显示/隐藏。
  • data:传递当前要编辑的数据对象,新增时传 null
  • @onAddModified:监听新增/修改完成事件,通常用于刷新父组件的数据列表。
http://www.dtcms.com/a/272358.html

相关文章:

  • 【Note】Linux Kernel 实时技术深入:详解 PREEMPT_RT 与 Xenomai
  • 【React】MQTT + useEventBus 实现MQTT长连接以及消息分发
  • 昇腾 k8s vnpu配置
  • 在Linux中,如何使用grep awk sed find?
  • 链式二叉树数据结构(递归)
  • 自动化——bat——批量复制所选的文件
  • 微服务架构的演进:迈向云原生——Java技术栈的实践之路
  • SpringBoot整合腾讯云新一代行为验证码
  • RabbitMQ 幂等性
  • Allegro PCB 手动添加元器件全流程解析
  • expect 安装入门手册
  • 【保姆级教程】基于anji-plus-captcha实现行为验证码(滑动拼图+点选文字),前后端完整代码奉上!
  • 人工智能-基础篇-28-模型上下文协议--MCP请求示例(JSON格式,客户端代码,服务端代码等示例)
  • 开源入侵防御系统——CrowdSec
  • Linux 服务器综合性能测试脚本(优化版)结构化分析
  • 若依框架去掉Redis
  • CORESET 0 and SIB1 Scheduling in a Nutshell
  • 论文阅读笔记:VI-Net: Boosting Category-level 6D Object Pose Estimation
  • RocketMQ安装(Windows环境)
  • 上线节点固定,项目进度紧张,如何合理压缩工期
  • NGINX系统基于PHP部署应用
  • 实验作业1+整理笔记截图
  • 实训八——路由器与交换机与网线
  • 栈题解——有效的括号【LeetCode】两种方法
  • 硬件基础------电感
  • Matplotlib-绘制训练曲线指南
  • 力扣刷题记录(c++)06
  • HTML应用指南:利用GET请求获取全国永辉超市门店位置信息
  • Unity3D iOS闪退问题解决方案
  • PyTorch仿射变换:原理与实战全解析