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

学海无涯，行者无疆

已于 2024-09-04 10:05:44 修改

阅读量796

点赞数 6

分类专栏： # 数据权限文章标签：数据权限数据权限设计数据权限实现数据权限方案数据权限控制数据权限功能通用数据权限

于 2024-09-04 10:02:11 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/seawaving/article/details/141529095

版权

数据权限专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
数据权限的设计与实现系列6——前端筛选器组件Everright-filter使用探索

1.API options该接口用于获取触发器和操作符的数据，通过调用该接口，获取可用的触发器和操作符。例如，获取可用的触发器选项，如文本、数字、日期等，以及每个触发器支持的操作符，如等于、不等于、大于、小于等。2.API conditions该接口用于获取字段值（如下拉、级联）的数据。通过调用该接口，可以获取下拉列表、级联选择器等字段值的数据。这些数据可以是静态的，事先定义好的选项列表，也可以是动态的，根据特定条件生成的选项列表。获取字段值的数据可以为筛选器的条件设置提供可选的值。
复制链接

扫一扫