目录
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
问题描述、需求描述
需求描述:进入到主查询页面,根据查询条件查询数据,点击某个数据列打开新的页面展示详情,点击详情页的返回按钮、跳回上级页面并把查询条件回显并执行;
- 主页面和详情页面 之间使用的方式路由的方式跳转;
- 下面是主页面跳转详情页的代码块:
gotoFb(r) { this.$router.push({ name: 'OperationColumnsList', params: { eventId: r.id } }) }
- 详情页返回主页面的代码如下:
back() { this.$router.push({ name: 'workbench-WorkbenchList', }) }
解决方案
使用路由参数传递到详情页面并接收,代码如下:
back() {
this.$router.push({
name: 'workbench-WorkbenchList',
params: {
cQueryParam: this.$route.params.fQueryParam,
cTime: this.$route.params.fTime
}
})
},
最后在于 主页面的 create方法里面捕获参数:
created() {
const that = this
// 获取 返回页面的 查询条件
if(this.$route.fullPath === '/workbench/WorkbenchList'){
if(this.$route.params.cQueryParam === undefined){
this.queryParam = {
sysOrgCode: '',
rwzt: ''
};
this.time = [];
}else{
this.queryParam = this.$route.params.cQueryParam;
this.time = this.$route.params.cTime;
}
}
that.searchQuery();
},
这个 searchQuery()不能使用JeecgListMixin.js中封装的,需要重写一下代码(两个方法),如下:
searchQuery(arg, url) {
this.queryParam.pageNo = this.ipagination.current
this.queryParam.pageSize = this.ipagination.pageSize
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1
}
// 获取浏览器地址的参数,拼接到查询params中
this.loading = true
getAction(this.url.list, this.queryParam).then(res => {
if (res.success) {
//console.log("loadData::::::::::::::::",res.result.records)
this.dataSource = res.result.records || res.result
this.ipagination.total = res.result.total
}
if (res.code === 510) {
this.$message.warning(res.message)
}
this.loading = false
})
},
handleTableChange(pagination) {
//分页、排序、筛选变化时触发
//TODO 筛选
this.ipagination = pagination
this.searchQuery()
},
handleTableChange是分页的方法、searchQuery就是重写的查询方法。
需要注意的是 param和query参数的写法使用的路由名字写法不太一样。