数据权限的设计与实现系列6——前端筛选器组件Everright-filter使用探索

本文主要是介绍数据权限的设计与实现系列6——前端筛选器组件Everright-filter使用探索,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

linear 功能探索

最终我们是需要使用 API 的方式,调用后端服务拉取数据填充筛选器组件,不过在探索阶段,直接用 API 方式,就需要构造 mock 数据,比较麻烦,因此先使用 Function 方式来进行功能验证。

组件初始化

新建一个页面,复制官方示例,如下:

<script setup>
import { ref } from 'vue'
import { EverrightFilter } from 'everright-filter'
import 'everright-filter/dist/style.css'
const ERfilterRef = ref(null)
const lang = ref('zh-cn')
const handleListener = ({ type, data }) => {console.log(type, data)
}
const getOptions = async () => {return new Promise((resolve, reject) => {resolve({data: {options: [],operators: {}}})})
}
const getConditions = async (params) => {return new Promise((resolve, reject) => {resolve({data: {options: [],operators: {}}})})
}
const getProps = async () => {return new Promise((resolve, reject) => {resolve({data: {}})})
}
const getPropValues = async (params) => {return new Promise((resolve, reject) => {resolve({data: {}})})
}
</script><template><div><EverrightFilter:lang="lang"@listener="handleListener":getOptions="getOptions":getConditions="getConditions":getProps="getProps":getPropValues="getPropValues"ref="ERfilterRef"/></div></template>

页面初始化效果如下:

下拉列表是空的,添加条件点击后,组件显示发生了变化,如下:

大概的界面展示效果出来了,接下来我们摸索下如何添加一个最常用的文本类筛选条件。

文本类筛选条件

经过摸索,筛选条件对应着组件的 option,因此调整 getOptions 方法,模拟一个姓名的筛选条件,如下:

const getOptions = async () => {return new Promise((resolve, reject) => {resolve({data: {options: [{label: '姓名',en_label: 'name',renderType: 'TEXT',operatorKey: 'Text',value: 'name'        }],operators: {Text: [{label: '等于',en_label: 'Equal',style: 'noop'},{label: '等于其中之一',en_label: 'Equal to one of',value: 'one_of',style: 'tags'},{label: '不等于',en_label: 'Not equal',value: 'not_equal',style: 'noop'},{label: '包含',en_label: 'Contains',value: 'contains',style: 'noop'},{label: '不包含',en_label: 'Not contain',value: 'not_contain',style: 'noop'},{label: '为空',en_label: 'Empty',value: 'empty',style: 'none'},{label: '不为空',en_label: 'Not empty',value: 'not_empty',style: 'none'}]}}})})
}

效果如下:

每个筛选条件是一个对象,用{}包裹,对象属性含义如下:

label: 中文语种下的标签名称

en_label:英文语种下的标签名称

value: 筛选条件的英文编码

renderType: 筛选条件值的输入或选择控件,可选值:CASCADER,SELECT,REGION,TEXT,NUMBER,TIME,DATE,NONE

operatorKey: 操作符的键,需要在下面的 operators 中定义,一个键对应一个操作符集合。

还有includeOperator 和 excludeOperator两个属性,可以对操作符集合进行正向或反向选取。

例如,上面姓名例子中,若不希望操作符出现“等于其中之一”,需按如下写法配置:

options: [{label: '姓名',en_label: 'name',renderType: 'TEXT',operatorKey: 'Text',value: 'name',excludeOperator: {operator: ['one_of']}}
]

注意 excludeOperator 后不是直接指定数组,而是加了一层 operator 节点,其中的值 one_of 对应着操作符对象属性中的 value。

调整后就从操作符列表中去除了“等于其中之一”这一项,如下:

数值类筛选条件

参照上述文本类的配置模式,我们添加一个数值类筛选条件:年龄,如下:

const getOptions = async () => {return new Promise((resolve, reject) => {resolve({data: {options: [{label: '姓名',en_label: 'name',renderType: 'TEXT',operatorKey: 'Text',value: 'name',excludeOperator: {operator: ['one_of']}},{label: '年龄',en_label: 'age',renderType: 'NUMBER',operatorKey: 'Number',value: 'age'}],operators: {Text: [{label: '等于',en_label: 'Equal',style: 'noop'},{label: '等于其中之一',en_label: 'Equal to one of',value: 'one_of',style: 'tags'},{label: '不等于',en_label: 'Not equal',value: 'not_equal',style: 'noop'},{label: '包含',en_label: 'Contains',value: 'contains',style: 'noop'},{label: '不包含',en_label: 'Not contain',value: 'not_contain',style: 'noop'},{label: '为空',en_label: 'Empty',value: 'empty',style: 'none'},{label: '不为空',en_label: 'Not empty',value: 'not_empty',style: 'none'}],Number: [{label: '等于',en_label: 'Equal',value: 'equal',style: 'noop'},{label: '不等于',en_label: 'Not equal',value: 'not_equal',style: 'noop'},{label: '大于',en_label: 'Greater than',value: 'greater_than',style: 'noop'},{label: '大于等于',en_label: 'Greater than or equal to',value: 'greater_than_equal',style: 'noop'},{label: '小于',en_label: 'Less than',value: 'less_than',style: 'noop'},{label: '小于等于',en_label: 'Less than or equal to',value: 'less_than_equal',style: 'noop'},{label: '区间',en_label: 'Between',value: 'between',style: 'range'},{label: '为空',en_label: 'Empty',value: 'empty',style: 'none'},{label: '不为空',en_label: 'Not empty',value: 'not_empty',style: 'none'}]}}})})
}

效果如下:

‍其他数据类型,如日期、时间等也大同小异,先不管细节,优先看看整体,继续说一下操作符。

操作符

在上面的探索过程中,实际已经涉及到了操作符,再具体说明下。

示例

[{label: '等于',en_label: 'Equal',value: 'equal',style: 'noop' // 无意义},{label: '等于其中之一',en_label: 'Equal to one of',value: 'one_of',style: 'tags' // 由操作符控制value为多选类型,适用于renderType CASCADER、SELECT、REGION、TEXT},{label: '为空',en_label: 'Empty',value: 'empty',style: 'none' // 不显示 value},{label: '区间',en_label: 'Between',value: 'between',style: 'range' // 由操作符控制value为区间类型,适用于renderType NUMBER、TIME、DATE}]

属性说明

label: ‘为空’,
en_label: ‘Empty’,
value: 操作符的编码,自定义
style: 样式,内置了四种

  • none:不显示值控件,用于不需要值的地方,如为空、不为空等
  • noop:单个值,如等于、不等于
  • tags:由操作符控制 value 为多选类型,适用于 renderType 为CASCADER、SELECT、REGION、TEXT类型之一时
  • range:由操作符控制 value 为区间类型,适用于 renderType 为 NUMBER、TIME、DATE 类型之一时

组件方法

我们使用数据筛选器进行灵活的自定义条件组合,最终还是需要将筛选器的结果拿到后,作为参数传给后端服务的。

这时候就需要使用组件提供的 getData 方法了。

在页面中新加一个按钮,调用组件的获取数据方法,将数据 json 格式化后输出到控制台,如下:

我们输入两个查询条件,界面如下:

点击按钮,输出数据如下:

{"filters": [{"conditions": [{"property": "name","value": "张三"},{"operator": "greater_than","property": "age","value": 24}],"logicalOperator": "and"}],"logicalOperator": "and"
}

注意该 json 的数据结构以及最终数据和 option 和 operater 的对应关系,筛选条件 option 的 value 对应着 conditions 中的 property,操作符 operation 的 value 对应着 conditions 中的 operator,筛选条件输入的值,最终对应着 conditions 中的 vaule,然后就是组内和组件的关系设定,是 and 还是 or。

后端拿到该 json 语句后,进行解析和处理,转换成最终的 sql 语句来执行。‍

matrix 功能探索

有了上面 linear 的基础,matrix 就简单多了。

逻辑组的数量,类型为 linear 时默认只有 1 个,类型matrix则调整为了可以动态添加多个。

在原 demo 代码基础上,为筛选器组件新增一个属性 type="matrix"(默认是 linear)即可,刷新页面,效果如下:

获取到 data 结构如下:

{"filters": [{"conditions": [{"property": "name","value": "张三"},{"operator": "greater_than","property": "age","value": 24}],"logicalOperator": "and"},{"conditions": [{"operator": "equal","property": "age","value": 30}],"logicalOperator": "and"}],"logicalOperator": "and"
}

可以看到,数据结构并没有变化,只是多个逻辑分组的情况下,数据看上去更复杂了一些而已。

开源平台资料

平台名称:一二三开发平台

简介: 企业级通用开发平台

设计资料:[csdn专栏]

开源地址:[Gitee]

开源协议:MIT

如果您在阅读本文时获得了帮助或受到了启发,希望您能够喜欢并收藏这篇文章,为它点赞~
请在评论区与我分享您的想法和心得,一起交流学习,不断进步,遇见更加优秀的自己!

这篇关于数据权限的设计与实现系列6——前端筛选器组件Everright-filter使用探索的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138239

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取