凡科建站网,外国ps修图网站,网站为什么百度不收录,wordpress 添加相册查询方案功能实现
上面实现了自定义查询功能框架#xff0c;从用户角度出发#xff0c;有些条件组合可以形成特定的查询方案#xff0c;对应着业务查询场景。诸多查询条件的组合#xff0c;不能每次都让用户来设置#xff0c;而是应该保存下来#xff0c;下次可以直接使…查询方案功能实现
上面实现了自定义查询功能框架从用户角度出发有些条件组合可以形成特定的查询方案对应着业务查询场景。诸多查询条件的组合不能每次都让用户来设置而是应该保存下来下次可以直接使用或者在其基础上按需调整也就是将查询方案持久化。
实体配置
使用平台的低代码配置功能来实现查询方案的实体配置。
考虑到自定义查询属于通用性功能因此放到了平台架构体系中位于底层的系统管理模块下。
实体配置如下 实体模型配置如下 查询方案内置于自定义查询功能内部的因此无需配置相关视图。
使用平台功能生成库表和代码、拷贝代码、编译、配置权限项。 功能整合
首先上整体效果图有个直观的了解如下图 在原有基础上顶部增加了查询方案的下拉列表用户可以通过下拉选择快速加载先前保存的查询方案并可以通过修改按钮来修改名称、通过删除按钮来删除方案。
查询方案的主体仍是由筛选器组件来承担集成整合过程中增加了交互。
底部通过保存按钮来保存查询方案通过另存为按钮来拷贝新增方案点击查询按钮后关闭对话框将查询方案对应查询条件组合传递给父窗口自定义查询功能页面发起查询操作。
查询方案下拉列表实现
在查询方案目录下新增一个select.vue的页面源码如下
templateel-selectv-modelselectedValue:sizesizeclearable:disabledreadonlystylewidth: 200px; margin: 20 autochangechangeel-optionv-foritem in dictionaryItemList:keyitem.id:valueitem.id:labelitem.name//el-select/templatescript
export default {name: QueryPlanSelect,label: 查询方案下拉,props: {modelValue: {type: String,required: false,default: },code: {type: String,default: },readonly: {type: Boolean,required: false,default: false},size: {type: String,default: }},data() {return {dictionaryItemList: [],selectedValue: }},watch: {modelValue: {immediate: true,handler: setSelected}},mounted() {this.loadData()},methods: {change(value) {let rowData nullthis.dictionaryItemList.forEach((item) {if (item.id value) {rowData itemreturn}})// 更新绑定值this.$emit(update:modelValue, value)// 注意此处若命令为change则可能会与底层实现冲突导致执行两次this.$emit(my-change, value, rowData)},setSelected() {this.selectedValue this.modelValue},loadData() {this.dictionaryItemList []this.$api.system.queryPlan.list().then((res) {this.dictionaryItemList res.dataif (this.dictionaryItemList.length 1) {this.selectedValue this.dictionaryItemList[0].idthis.$emit(my-change, this.dictionaryItemList[0].id, this.dictionaryItemList[0])} else {this.selectedValue this.$emit(my-change, , null)}})}}
}
/script
就是把查询方案实体的列表数据转换为下拉列表的数据格式并对传入值以及下拉选择变更后将数据通过事件触发返回给父页面也就是自定义查询页面。
查询方案下拉列表选中项变更
自定义查询页面会监听查询方案下拉列表的选择的变更可能有两种情况一是变更选择项二是清空选择对应的事件处理如下 // 查询方案变更queryPlanChanged(value, data) {// 保存为当前查询方案this.currentQueryPlan dataif (data) {//加载条件this.$refs.everrightFilter.setData(JSON.parse(data.content))} else {this.$refs.everrightFilter.clearData()}}注意当查询方案内容不为空时调用筛选器的setData方法来填充条件组合便于用户查看或在其基础上调整。
查询方案改名
点击下拉列表右侧的“修改”按钮弹出输入框这里实际是用于改名系统会弹出对话框默认填充当前选中的查询方案名称用户修改后点击确定按钮后保存如下图 功能实现使用了element plus的MessageBox的Prompt模式代码如下 // 修改方案名称modify() {if (this.currentQueryPlan null) {this.$message.warning(请先选择要改名的查询方案)return}//获取查询方案内容并做非空判断const content JSON.stringify(this.$refs.everrightFilter.getData(), null, \t)if (this.checkContentIsNull(content)) {return}// 输入新的方案名称ElMessageBox.prompt(请输入新的方案名称, 修改查询方案, {confirmButtonText: 确定,cancelButtonText: 取消,inputValue: this.currentQueryPlan.name,inputPattern: /./,inputErrorMessage: 不能为空}).then(({ value }) {this.currentQueryPlan.name valuethis.currentQueryPlan.content contentthis.$api.system.queryPlan.modify(this.currentQueryPlan).then((res) {//刷新查询方案列表this.refreshQuerPlanList()})})},查询方案删除
点击下拉列表右侧的“删除”按钮弹出确认框确定后删除如下 源码实现如下 // 删除remove() {if (this.currentQueryPlan null) {this.$message.warning(请先选择要删除的查询方案)return}this.$confirm(确定要删除该查询方案吗, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$api.system.queryPlan.remove(this.currentQueryPlan.id).then((res) {// 刷新查询方案列表this.refreshQuerPlanList()})})}查询方案新增/修改
在查询方案下拉列表无选中项的情况下通过筛选器配置查询条件组合后点击保存按钮弹出对话框输入方案名称后新增查询方案如下 在查询方案下拉列表有选中项的情况下点击保存按钮直接调用后端服务保存数据实际更新的是条件组合。
代码如下 // 保存查询方案save() {//获取查询方案内容并做非空判断const content JSON.stringify(this.$refs.everrightFilter.getData(), null, \t)if (this.checkContentIsNull(content)) {return}if (this.currentQueryPlan) {// 如当前查询方案不会空更新数据this.currentQueryPlan.content contentthis.$api.system.queryPlan.modify(this.currentQueryPlan)} else {// 如当前查询方案为空新增数据ElMessageBox.prompt(请输入方案名称, 新增查询方案, {confirmButtonText: 确定,cancelButtonText: 取消,inputPattern: /./,inputErrorMessage: 不能为空}).then(({ value }) {const data {name: value,entityModelCode: this.entityModelCode,content: content}this.$api.system.queryPlan.add(data).then((res) {//刷新查询方案列表this.refreshQuerPlanList()})})}}查询方案另存为
用户往往需要基于某个现有的查询方案调整另存为另一个查询方案通过功能按钮实现。
这里没有根据当前是否有选中的查询方案来控制另存为按钮的可用而是在逻辑上进行了处理如当前查询方案为空新增数据否则参照当前数据新增即另存实现如下
//另存为saveAs() {//获取查询方案内容并做非空判断const content JSON.stringify(this.$refs.everrightFilter.getData(), null, \t)if (this.checkContentIsNull(content)) {return}if (this.currentQueryPlan null) {// 如当前查询方案为空新增数据ElMessageBox.prompt(请输入方案名称, 新增查询方案, {confirmButtonText: 确定,cancelButtonText: 取消,inputPattern: /./,inputErrorMessage: 不能为空}).then(({ value }) {const data {name: value,entityModelCode: this.entityModelCode,content: content}this.$api.system.queryPlan.add(data).then((res) {//刷新查询方案列表this.refreshQuerPlanList()})})} else {// 如当前查询方案不为空参照当前数据新增ElMessageBox.prompt(请输入方案名称, 查询方案另存为, {confirmButtonText: 确定,cancelButtonText: 取消,inputPattern: /./,inputErrorMessage: 不能为空}).then(({ value }) {const data {name: value,entityModelCode: this.entityModelCode,content: content}this.$api.system.queryPlan.add(data).then((res) {//刷新查询方案列表this.refreshQuerPlanList()})})}}辅助方法
有几个公共辅助方法在这里也简单列一下
保存数据前需要判断是否已添加了条件即进行数据验证如下 // 判断方案内容是否为空checkContentIsNull(content) {if (content {}) {this.$message.warning(请先添加至少一个查询条件)return true}return false}
在对方案新增、修改、删除时需要刷新下拉列表如下 // 刷新查询方案列表refreshQuerPlanList() {this.$refs.queryPlanSelect.loadData()}后端处理
先前搭建框架的时候仅实现了单组单条件接下来就来完善该部分逻辑以及其他细节。
单组多条件
配置查询方案条件如下 后端逻辑完善如下 // 转换数据DataFilterRuleVO dataFilterRule JSON.parseObject(customQueryString, DataFilterRuleVO.class);// 获取组集合ListDataFilterGroupVO dataFilterGroupList dataFilterRule.getFilters();// 遍历组集合for (DataFilterGroupVO dataFilterGroup : dataFilterGroupList) {// 获取条件集合ListDataFilterConditionVO conditionList dataFilterGroup.getConditions();// 组内条件逻辑关系String logicalOperator dataFilterGroup.getLogicalOperator();if (CollectionUtils.isNotEmpty(conditionList)) {// 遍历条件集合for (DataFilterConditionVO condition : conditionList) {if (logicalOperator.equals(OR)) {queryWrapper queryWrapper.or();}// 获取字段名,命名风格驼峰转换成下划线String fieldName condition.getProperty();Object value condition.getValue();// 获取操作String operator condition.getOperator();QueryRuleEnum queryRule EnumUtils.getEnum(QueryRuleEnum.class, operator, QueryRuleEnum.EQ);addEasyQuery(queryWrapper, fieldName, queryRule, value);}}}
运行查看生成SQL如下
SELECT COUNT(*) AS total FROM cfg_template WHERE delete_flag NO AND (name ? AND content LIKE ?)将组内逻辑关系调整为或如下 运行查看生成SQL如下
SELECT COUNT(*) AS total FROM cfg_template WHERE delete_flag NO AND (name ? OR content LIKE ?)多组多条件
配置查询方案条件如下 后端逻辑增加组间逻辑关系处理调整后如下 // 转换数据DataFilterRuleVO dataFilterRule JSON.parseObject(customQueryString, DataFilterRuleVO.class);// 获取组集合ListDataFilterGroupVO dataFilterGroupList dataFilterRule.getFilters();// 组间条件逻辑关系String logicalOperatorGroup dataFilterRule.getLogicalOperator();// 遍历组集合for (DataFilterGroupVO dataFilterGroup : dataFilterGroupList) {if (logicalOperatorGroup.equals(OR)) {queryWrapper queryWrapper.or();}// 获取条件集合ListDataFilterConditionVO conditionList dataFilterGroup.getConditions();// 组内条件逻辑关系String logicalOperator dataFilterGroup.getLogicalOperator();if (CollectionUtils.isNotEmpty(conditionList)) {// 遍历条件集合for (DataFilterConditionVO condition : conditionList) {if (logicalOperator.equals(OR)) {queryWrapper queryWrapper.or();}// 获取字段名,命名风格驼峰转换成下划线String fieldName condition.getProperty();Object value condition.getValue();// 获取操作String operator condition.getOperator();QueryRuleEnum queryRule EnumUtils.getEnum(QueryRuleEnum.class, operator, QueryRuleEnum.EQ);addEasyQuery(queryWrapper, fieldName, queryRule, value);}}}
运行查看生成SQL如下 Preparing: SELECT COUNT(*) AS total FROM cfg_template WHERE delete_flag NO AND (name ? AND content LIKE ? AND name LIKE ? AND name LIKE ?)Parameters: 1(String), %2%(String), 3%(String), %4(String)看上去SQL从最终查询结果而言是正确的但是没有分组如果组内关系是or推测应该会出问题我们继续验证下。
将组间逻辑关系调整为或如下 运行查看生成SQL如下 Preparing: SELECT COUNT(*) AS total FROM cfg_template WHERE delete_flag NO AND (name ? AND content LIKE ? OR name LIKE ? AND name LIKE ?)Parameters: 1(String), %2%(String), 3%(String), %4(String)可以看出来果然出了问题我们希望各条件组相对独立用小括号包裹然后再参与组间逻辑运算。
基于上述需求对逻辑转换代码进行调整如下
private static E, VO void build(QueryWrapperE queryWrapper, ClassE entityClass, String customQueryString, SortInfo sortInfo) {// 转换数据DataFilterRuleVO dataFilterRule JSON.parseObject(customQueryString, DataFilterRuleVO.class);// 获取组集合ListDataFilterGroupVO dataFilterGroupList dataFilterRule.getFilters();// 组间条件逻辑关系String logicalOperatorGroup dataFilterRule.getLogicalOperator();// 遍历组集合for (DataFilterGroupVO dataFilterGroup : dataFilterGroupList) {if (logicalOperatorGroup.equals(OR)) {queryWrapper.or(x -generateQueryWrapper(x, dataFilterGroup));} else {queryWrapper.and(x -generateQueryWrapper(x, dataFilterGroup));}}// 附加排序if (sortInfo ! null StringUtils.isNotBlank(sortInfo.getField())) {// 此处未使用注解而是按照约定的规则将驼峰命名转换为下划线从而获取到数据库表字段名String orderField CommonUtil.camelToUnderline(sortInfo.getField());if (sortInfo.getAscType()) {queryWrapper.orderByAsc(orderField);} else {queryWrapper.orderByDesc(orderField);}}}private static E QueryWrapperE generateQueryWrapper(QueryWrapperE queryWrapper, DataFilterGroupVO dataFilterGroup) {// 获取条件集合ListDataFilterConditionVO conditionList dataFilterGroup.getConditions();// 组内条件逻辑关系String logicalOperator dataFilterGroup.getLogicalOperator();if (CollectionUtils.isNotEmpty(conditionList)) {// 遍历条件集合for (DataFilterConditionVO condition : conditionList) {if (logicalOperator.equals(OR)) {queryWrapper queryWrapper.or();}// 获取字段名,命名风格驼峰转换成下划线String fieldName condition.getProperty();Object value condition.getValue();// 获取操作String operator condition.getOperator();QueryRuleEnum queryRule EnumUtils.getEnum(QueryRuleEnum.class, operator, QueryRuleEnum.EQ);addEasyQuery(queryWrapper, fieldName, queryRule, value);}}return queryWrapper;}运行查看生成SQL如下 Preparing: SELECT COUNT(*) AS total FROM cfg_template WHERE delete_flag NO AND ((name ? AND content LIKE ?) OR (name LIKE ? AND name LIKE ?))Parameters: 1(String), %2%(String), 3%(String), %4(String)可以看到条件组外层使用了小括号包裹组间的逻辑运算也是正确的。
日期类型的处理
前面提到过在做筛选器组件前端功能验证时发现日期类型的属性生成查询规则与其他类型不同如下 value属性不是一个值而是对应了一个对象并且也不是日期字符串而是时间戳这种情况下需要后端另行解析处理。
设置测试条件如下 增加逻辑处理如下 运行查看生成SQL如下 Preparing: SELECT COUNT(*) AS total FROM cfg_template WHERE delete_flag NO AND ((name ? AND content LIKE ?) OR (name LIKE ? AND name LIKE ?))Parameters: 1(String), %2%(String), 3%(String), %4(String)
开源平台资料
平台名称一二三开发平台 简介 企业级通用开发平台 设计资料[csdn专栏] 开源地址[Gitee] 开源协议MIT 如果您在阅读本文时获得了帮助或受到了启发希望您能够喜欢并收藏这篇文章为它点赞~ 请在评论区与我分享您的想法和心得一起交流学习不断进步遇见更加优秀的自己
