城市规则管理列表实现逻辑
这是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)"
,点击时把当前行数据传递给方法,实现路由跳转或其他操作。 - 这样点击表格中某一行的“客户设备清单”内容时,就会跳转到对应页面,并带上当前行的参数。
用法总结
-
slot-scope="scope"
让你在<template>
里拿到当前行的数据(scope.row
),实现自定义渲染。 -
自定义内容
可以渲染按钮、链接、图标等,并根据行数据动态显示不同内容。 -
事件绑定
可以在自定义内容上绑定事件(如@click
),并把当前行数据作为参数传递。 -
路由跳转
在事件方法中使用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);
}
实现步骤与逻辑
- 用户点击“查询”按钮,触发
search
方法。 search
方法会读取表单(query
)中的查询条件,向后端接口发起请求(如getRuleList
)。- 后端返回数据后,赋值给
ruleList
,表格自动渲染新数据。 - 查询条件包括地市、规则名称、状态等,全部由表单双向绑定到
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();}
实现步骤与逻辑
- 用户点击“重置”按钮,先判断
resetState
,防止短时间内多次点击(防抖)。 - 调用
resetQueryEvn('queryForm')
,如果不是弹窗模式,则重置表单(如this.$refs.queryForm.resetFields()
)。 - 查询条件恢复初始状态(
QUERY_INFO
),页面表单内容清空。 - 通常重置后会自动重新查询,刷新表格数据。
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"/>
实现步骤与逻辑
- 用户点击“修改”按钮,调用
handleModify(scope.row)
,把当前行数据赋值给dialogDate
,并打开弹窗。 - 弹窗组件
AddModifyDialog
通过props.data
接收要编辑的数据,自动回显到表单。 - 用户在弹窗中修改内容,点击“确定”后,弹窗组件会调用
updateRule
接口提交修改。 - 修改成功后,弹窗关闭,并通过
@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',})
}
实现步骤与逻辑
- 用户点击“删除”按钮,弹出确认框。
- 用户确认后,调用
deleteRule(row.id)
接口删除该条数据。 - 删除成功后,弹出“删除成功”提示,并刷新表格数据(调用
search()
)。 - 如果取消删除,弹出“已取消删除”提示。
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
:监听新增/修改完成事件,通常用于刷新父组件的数据列表。