循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计 - 伍华聪

vue

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

在系统模块中的业务列表展示里面,一般我们都会在列表中放置一些查询条件,如果是表字段不多,大多数情况下,放置的条件有十个八个就可以了,如果是字段很多,而这些条件信息也很关键的时候,就可能放置很多条件,但是界面空间比较有限,而常规的查询一般就那么几个常用条件,如果每次都占用很多版面,好像不是很合理和友好。本篇随笔探讨Vue+Element前端界面中处理高级查询模块的界面设计,提供了两种处理的思路供参考借鉴。

在系统模块中的业务列表展示里面,一般我们都会在列表中放置一些查询条件,如果是表字段不多,大多数情况下,放置的条件有十个八个就可以了,如果是字段很多,而这些条件信息也很关键的时候,就可能放置很多条件,但是界面空间比较有限,而常规的查询一般就那么几个常用条件,如果每次都占用很多版面,好像不是很合理和友好。本篇随笔探讨Vue+Element前端界面中处理高级查询模块的界面设计,提供了两种处理的思路供参考借鉴。

1、弹出框的高级查询条件的界面设计

 如常规的列表界面如下所示。

单击【高级查询】弹出一个新对话框窗口,里面可以查看到所有的查询条件

 我们来一段动画效果,操作界面的动态效果如下所示。

这里我为了降低单页面的代码量,把高级查询模块的代码抽取到一个独立的文件中,然后在主体页面中引入使用。

    <testproduct-advance

ref="advancesearch"

@search="advanceSearch"

/>

 我们在弹出高级查询对话框中,执行查询的时候,会获得条件对象,然后通过事件的方式给调用页面

    async handleSearch() { // 表单提交

this.isVisible = false;

this.$emit(\'search\', this.searchForm)

},

在主页面里面,会对高级查询的几个事件进行处理,如打开窗口,确定高级查询后触发查询。

  methods: {

advanceSearch(searchObj) { // 高级查询

// console.log(searchObj)

this.advanceSearchForm = searchObj;

this.msgSuccess(\'已选择高级查询条件进行查询了\')

this.isAdvanceSeach = false // 关闭高级查询窗口

this.getlist()

},

onResetAdvance(searchObj) { // 重置高级查询条件

// console.log(searchObj)

this.advanceSearchForm = searchObj;

},

showAdvanceForm() { // 显示自定义的高级查询对话框

this.$refs.advancesearch.show()

},

在getlist函数里面,需要对高级查询对象进行转换处理

    getlist() { // 列表数据获取

// 如果高级查询对象非空,则采用高级查询条件

var form = this.isEmpty(this.advanceSearchForm) ? this.searchForm : this.advanceSearchForm;

var param = { // 构造常规的分页查询条件

// 分页条件

SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

MaxResultCount: this.pageinfo.pagesize,

// 查询过滤条件

ProductNo: form.productNo,

BarCode: form.barCode,

MaterialCode: form.materialCode,

ProductType: form.productType,

ProductName: form.productName,

Status: form.status

}

.............

不过,由于高级查询和普通的查询界面代码有很多重复的地方,因此这样做感觉也相对比较啰嗦。 

下面的思路就折叠的方案进行讨论。

2、折叠式的高级查询条件的界面设计

这个思路来自于AntDesign的查询条件展示,默认它是基于常规条件的展示,如果展开则展示更多的条件。

单击【展开】则展开更多的条件,以供查询。

借鉴了这个方式,我们也可以使用这样的折叠方式来隐藏更多的查询条件,从而也使得不常用的条件默认隐藏起来,提高界面的友好性。

 这样折叠的条件和不折叠的条件在一个表单里面,只是通过一个状态的切换隐藏部分条件而已,虽然界面代码多增加一些,不过处理却变得简单一些,不需要单独编写一个高级查询的条件组件页面。

界面代码大致布局如下所示。

这样我们通过一个条件按钮来切换它的状态即可实现常用条件、高级查询条件的切换显示了。

<el-button :icon="expandMore ?\'el-icon-arrow-up\':\'el-icon-arrow-down\'" type="text" @click="expandMore =!expandMore">{{ expandMore ? \'收起\':\'展开\' }}</el-button>

这样查询处理,并不需要变化什么特殊的操作了,和常规操作一样,只不过多一些条件而已。

    getlist() { // 列表数据获取

var param = { // 构造常规的分页查询条件

// 分页条件

SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

MaxResultCount: this.pageinfo.pagesize,

// 查询过滤条件

Name: this.searchForm.name,

Sex: this.searchForm.sex,

.............

State: this.searchForm.state

};

// 使用日期范围选择控件,在查询对象增加开始日期CreationTimeStart、结束日期CreationTimeEnd

this.addDateRange(param, this.searchForm.creationTime)

// 获取列表,绑定到模型上,并修改分页数量

this.listLoading = true

testUser.GetAll(param).then(data => {

this.list = data.result.items

this.pageinfo.total = data.result.totalCount

this.listLoading = false

})

},

以上就是两种不同高级查询条件的界面设计,一般来说,我倾向于使用后者来实现,这样界面效果也比较完整统一。

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示 

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理 

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍 

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理 

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理 

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理 

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理 

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理 

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理 

使用代码生成工具快速开发ABP框架项目 

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理 

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题 

以上是 循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计 - 伍华聪 的全部内容, 来源链接: utcz.com/z/376097.html

回到顶部