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

news2024/11/16 9:18:19

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2106722.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于找不到插件 ‘org.springframework.boot:spring-boot-maven-plugin:‘的解决方案

关于找不到插件 ‘org.springframework.boot:spring-boot-maven-plugin:‘的解决方案

找到项目结构后&#xff0c;点击库&#xff0c;全选所有后点击应用即可
阅读更多...
超声波眼镜清洗机买哪款？2024超声波眼镜清洗机推荐

超声波眼镜清洗机买哪款？2024超声波眼镜清洗机推荐

超声波清洗机正逐渐成为广受欢迎的清洁解决方案&#xff0c;它以高效、深入且细腻的清洁效果&#xff0c;以及操作上的简易性&#xff0c;赢得了消费者的广泛喜爱。不过&#xff0c;市面上琳琅满目的品牌、多样化的型号及波动的价格区间&#xff0c;确实给消费者挑选时带来了不…
阅读更多...
C1-2 ABB二次SDK开发——手把手教登录对应的机器人控制器（图片引导操作）登录机器人控制器和刷新机器人列表

C1-2 ABB二次SDK开发——手把手教登录对应的机器人控制器（图片引导操作）登录机器人控制器和刷新机器人列表

1.完成配置后我们开始进行操作 C1-1 ABB二次SDK开发——C#Window窗体-环境配置&#xff08;带ABB二次开发SDK资源包&#xff09;-CSDN博客文章浏览阅读95次。3.记住路径&#xff0c;右键C#引用&#xff0c;然后导入ABB.Robotics.Controllers.PC.dll。2.安装资源文件PCABB二次开…
阅读更多...
通过组合Self-XSS + CSRF得到存储型XSS

通过组合Self-XSS + CSRF得到存储型XSS

在一次漏洞赏金挖掘中&#xff0c;我在更改用户名的功能点出发现了一个XSS&#xff0c;在修改用户名的地方添加了一个简单的XSS payload并且刷新页面&#xff1a; 用户设置面板 XSS证明 但是问题是这个功能配置并不是公共的&#xff0c;造成XSS漏洞的唯一方法是告诉受害者将其…
阅读更多...
H5 响应式精品网站推荐导航源码

H5 响应式精品网站推荐导航源码

源码名称&#xff1a;响应式精品网站推荐导航源码 源码介绍&#xff1a;一款响应式精品网站推荐导航源码&#xff0c;可以自己修改代码替换图标图片和指向网址。背景图支持自动替换&#xff0c;背景图可以在img.php中修改 需求环境&#xff1a;H5 下载地址&#xff1a; http…
阅读更多...
6、LVGL控件-线条、图片、按钮矩阵

6、LVGL控件-线条、图片、按钮矩阵

本篇文章目录导航 ♠♠ LVGL控件-线条、图片、按钮矩阵 ♣♣♣♣ 一、LVGL 线条部件 ♦♦♦♦♦♦♦♦ 1.1 线条部件组成部分 ♦♦♦♦♦♦♦♦ 1.2 线条部件基本API ♦♦♦♦♦♦♦♦ 1.3 实验小演示 ♣♣♣♣ 二、LVGL 图片部件 ♦♦♦♦♦♦♦♦ 2.1 图片部件组成部分 ♦♦…
阅读更多...
.NET 一款免杀的白名单Shellcode加载器

.NET 一款免杀的白名单Shellcode加载器

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…
阅读更多...
论 LLMs 如何解决长文本问题？

论 LLMs 如何解决长文本问题？

一、长文本的核心问题与解决方向 1.1 文本长度与显存及计算量之关系 要研究清楚长文本的问题&#xff0c;首先应该搞清楚文本长度在模型中的地位与影响。那么我们便以 Decoder-base 的模型为例来进行分析 1.1.1 模型参数量 Decoder-base 的模型主要包括 3 个部分&#xff1…
阅读更多...
基于Java语言的光伏运维管理系统

基于Java语言的光伏运维管理系统

背景 ‌光伏发电系统主要由‌‌太阳电池板&#xff08;组件&#xff09;、‌控制器和‌逆变器‌三大部分组成&#xff0c;主要部件由电子元器件构成。此外&#xff0c;光伏发电系统还包括‌变压器、‌光伏方阵以及相关辅助设施等。‌ 光伏发电系统是利用光伏电池的光生伏特效应…
阅读更多...
Java-数据结构-链表-习题（三）(๑´ㅂ`๑)

Java-数据结构-链表-习题（三）(๑´ㅂ`๑)

文本目录&#xff1a; ​❄️一、习题一&#xff1a; ▶ 思路&#xff1a; ▶ 代码&#xff1a; ​❄️二、习题二&#xff1a; ▶ 思路&#xff1a; ▶ 代码&#xff1a; ​❄️三、习题三&#xff1a; ▶ 思路&#xff1a; ▶ 代码&#xff1a; ​❄️四、习题四&#xf…
阅读更多...
包的相关知识

包的相关知识

1. java定义了一种名字空间&#xff0c;称之为包&#xff1a;package。一个类总属于某个包&#xff0c;类名只是一个简写&#xff0c;真正的完整类名应该是”包名.类名“。 2. 在Java虚拟机执行的时候&#xff0c;JVM只看完整类名&#xff0c;只要包名不同&#xff0c;类就不同…
阅读更多...
keysight346A安捷伦346B噪声源HP346B-18Ghz

keysight346A安捷伦346B噪声源HP346B-18Ghz

keysight346A安捷伦346B噪声源HP346B-18Ghz Agilent 346B | HP-346B 噪声源|惠普|安捷伦|噪声头|HP-346B 品牌:美国安捷伦 Agilent | 美国惠普 HP Agilent 346B选件H01高ENR噪声源 Agilent 346B选件H01有高的ENR&#xff08;典型值为21dB &#xff09;适于测量噪声系数很大的…
阅读更多...
【媒体邀约】论企业宣传与媒体合作

【媒体邀约】论企业宣传与媒体合作

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 在探讨企业宣传与媒体合作的策略和实施时&#xff0c;可以从以下结构进行论述&#xff1a; 一、前言 企业宣传与媒体合作在当代商业环境中扮演着至关重要的角色。随着信息科技的发展和媒…
阅读更多...
第二证券：有风险！筹码集中股出炉，这10股股东数骤降

第二证券：有风险！筹码集中股出炉，这10股股东数骤降

深圳华强&#xff1a;存在商场心境过热的风险 昨日晚间&#xff0c;深圳华强发布《股票生意失常不坚定及严峻失常不坚定暨风险提示公告》。公司在公告中提示&#xff0c;近期公司股价短期涨幅较大&#xff0c;明显违背商场走势&#xff0c;存在商场心境过热的风险。但公司基本…
阅读更多...
景区智慧公厕系统能给景区带来什么价值？

景区智慧公厕系统能给景区带来什么价值？

在当今数字化时代&#xff0c;景区智慧公厕系统正逐渐成为提升景区品质和游客体验的重要组成部分。 一、智慧公厕系统大屏功能 智慧公厕系统的大屏界面功能丰富多样。它可以实时显示公厕内的布局图&#xff0c;清晰地标明各个厕位的使用情况&#xff0c;让游客一目了然。同时&a…
阅读更多...
【Google Play】Via浏览器5.8.1最新国际版（如何鉴别是否官方？）

【Google Play】Via浏览器5.8.1最新国际版（如何鉴别是否官方？）

via 浏览器&#xff0c;为您的安卓设备带来清爽无打扰的上网体验&#xff0c;不会推送新闻和其他内容&#xff0c;让您的设备保持纯净。体积小巧&#xff0c;内存占用极低&#xff0c;确保您的安卓设备如同新机般运行流畅。简约设计&#xff0c;是极简主义爱好者和技术达人的首…
阅读更多...
查看vue项目的node版本

查看vue项目的node版本

如果项目使用的 yarn 和 typescript&#xff0c;可以査看yarn.lock里的types/node 的 version: "types/node*" :"integrity" "sha1-ZhA9Ltxxxxxxxxxxxx""resolved" "https://registry.npm.taobao.xxxxxxxx""version&q…
阅读更多...
Linux 磁盘管理-磁盘接口类型和分区看这一篇就够了

Linux 磁盘管理-磁盘接口类型和分区看这一篇就够了

今天给伙伴们分享一下Linux 磁盘管理-磁盘接口类型和分区&#xff0c;希望看了有所收获。 我是公众号「想吃西红柿」「云原生运维实战派」作者&#xff0c;对云原生运维感兴趣&#xff0c;也保持时刻学习&#xff0c;后续会分享工作中用到的运维技术&#xff0c;在运维的路上得…
阅读更多...
【机器学习】深度学习的现实应用——从图像识别到自然语言处理

【机器学习】深度学习的现实应用——从图像识别到自然语言处理

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、深度学习的概述1.1 深度学习的定义1.1.1 什么是深度学习1.1.2 深度学习的历史与发展 1.2 深度学习与传统机器学习的区别1.2.1 特征工程的区别1.2.2 模型复杂度与计算能力的对比 1.3 深度学习的关键技术1.3.1 人工神经网…
阅读更多...
xampp安装federated插件，实现mysql数据同步

xampp安装federated插件，实现mysql数据同步

需求&#xff1a;a服务器上的mysql数据库data表插入新数据时&#xff0c;需要同步到b服务器上的data表中。 解决&#xff1a;a服务器上开启federated引擎插件&#xff0c;创建data1对应b服务器上的data表。 在a服务器上的data表创建触发器&#xff0c;data表插入数据后执行触发…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023