当前位置: 首页 > news >正文

vue3实现规则编辑器

组件用于创建和编辑复杂的条件规则,支持添加、删除条件和子条件,以及选择不同的条件类型。
可实现json数据和页面显示的转换。

在这里插入图片描述

在这里插入图片描述
代码实现 :
index.vue:

<template><div class="allany-container"><div class="control-bar"><el-select v-model="pipe.condition" style="width: 200px; margin-right: 16px;" :disabled="disabled"><el-option label="满足以下所有条件" value="all"/><el-option label="满足以下任一条件" value="any"/><el-option label="不包含以下条件" value="not"/></el-select><el-button v-if="!disabled" type="primary" @click="addCondition('condition')">添加条件</el-button><el-button v-if="!disabled" type="success" @click="addCondition('all_any')">添加子条件</el-button><el-button v-if=" !disabled" type="danger" :icon="Delete" circle @click="delSelf"/></div><div class="conditions-wrapper"><!--   侧边显示条   --><div :class="`conditions-wrapper-${pipe.condition}`"></div><div class="conditions-wrapper--conditions"><div v-for="(child, idx) in pipe.children" :key="idx" class="conditions-wrapper--condition"><biz-rule-all-any v-if="child.type === 'all_any'" :pipe="child" :attrOptions="attrOptions":disabled="disabled" @delRule="handleDelRule(idx,child)"/><biz-rule-condition v-else-if="child.type === 'condition'" :pipe="child" :attrOptions="attrOptions":disabled="disabled" @delRule="handleDelCondition(idx,child)"/></div></div></div></div>
</template><script setup>
import {ref, watch} from 'vue';
import BizRuleCondition from './BizRuleCondition.vue';
import {Delete} from "@element-plus/icons-vue";
import {deepClone} from "@/utils.js";defineOptions({name: 'BizRuleAllAny'
})const emit = defineEmits(['delRule']);const props = defineProps({pipe: {type: Object,default: () => ({type: 'all_any',condition: 'all',children: [],})},attrOptions: {type: Array,default: () => {return []}},disabled: {type: Boolean,default: false}
});
const pipe = ref(props.pipe);function addCondition(type) {if (type === 'all_any') {pipe.value.children.push({type: 'all_any',condition: 'all',children: [],});} else if (type === 'condition') {pipe.value.children.push({type: 'condition',name: '',operator: 'eq',value: '',val_type: 'string',});}
}function delSelf() {emit('delRule')
}// 删除条件组
const handleDelRule = (idx,child) => {pipe.value.children.splice(idx, 1);
}// 删除条件组中的子数据
const handleDelCondition = (idx,child) => {pipe.value.children.splice(idx, 1);
}</script><style scoped lang="scss">.allany-container {.control-bar {display: flex;flex-direction: row;}.conditions-wrapper {display: flex;flex-direction: row;}.conditions-wrapper-all {width: 4px;margin: 5px 20px 0;border-radius: 5px;transition: background-color 400ms;background-color: #67C23A;&:hover {background-color: #529b2e;}}.conditions-wrapper-any {width: 4px;margin: 5px 20px 0;border-radius: 5px;transition: background-color 400ms;background-color: #E6A23C;&:hover {background-color: #b88230;}}.conditions-wrapper-not {width: 4px;margin: 5px 20px 0;border-radius: 5px;transition: background-color 400ms;background-color: rgb(245, 245, 245);&:hover {background-color: rgb(144, 147, 153);}}.conditions-wrapper--conditions {display: flex;flex-direction: column;}.conditions-wrapper--condition {padding-top: 15px;}
}</style>

BizRuleCondition.vue:

<template><div class="bizrulecondition-container"><el-select v-model="pipe.name" placeholder="字段名称" style="width: 150px; margin-right: 16px;" clearable :disabled="disabled"><el-option v-for="item in attrOptions" :key="item.value" :label="item.label" :value="item.value"/></el-select><el-select v-model="pipe.operator" style="width: 90px; margin-right: 16px;" :disabled="disabled"><el-option label="==" value="eq"/><el-option label="!=" value="neq"/><el-option label="<" value="lt"/><el-option label=">" value="gt"/><el-option label="<=" value="lte"/><el-option label=">=" value="gte"/><el-option label="in" value="in"/><el-option label="not in" value="not_in"/></el-select><el-badge:value="pipe.val_type === 'string' ? '字符串' : '数字'":type="pipe.val_type === 'string' ? 'info' : 'success'"@click.native="switchVarType($event, pipe)"style="margin-right: 50px;":disabled="disabled"><el-inputv-model="pipe.value"placeholder="字段值"style="width: 150px;"clearable:disabled="disabled"/></el-badge><el-button type="danger" :icon="Delete" circle @click="delSelf" :disabled="disabled"/></div>
</template><script setup>
import {ref, defineProps, watch} from 'vue';
import {Delete} from "@element-plus/icons-vue";
import {deepClone} from "@/utils.js";const emit = defineEmits(['delRule']);const props = defineProps({pipe: Object,attrOptions:Array,disabled:Boolean
});
const pipe = ref({});watch(() => props.pipe, (newData) => {if (!newData) returnpipe.value = deepClone(newData)
}, {deep: true,immediate: true
})function switchVarType(e, kv) {if (String(e.target.tagName).toUpperCase() === 'SUP') {kv.val_type = kv.val_type === 'number' ? 'string' : 'number';}
}function delSelf() {emit('delRule')
}
</script><style lang="scss" scoped>
.bizrulecondition-container {display: flex;flex-direction: row;.el-badge__content {transition: 400ms;user-select: none;}.el-badge__content:hover {cursor: pointer;}
}
</style>

BizRuleAdapter.js:

<template><div class="bizrulecondition-container"><el-select v-model="pipe.name" placeholder="字段名称" style="width: 150px; margin-right: 16px;" clearable :disabled="disabled"><el-option v-for="item in attrOptions" :key="item.value" :label="item.label" :value="item.value"/></el-select><el-select v-model="pipe.operator" style="width: 90px; margin-right: 16px;" :disabled="disabled"><el-option label="==" value="eq"/><el-option label="!=" value="neq"/><el-option label="<" value="lt"/><el-option label=">" value="gt"/><el-option label="<=" value="lte"/><el-option label=">=" value="gte"/><el-option label="in" value="in"/><el-option label="not in" value="not_in"/></el-select><el-badge:value="pipe.val_type === 'string' ? '字符串' : '数字'":type="pipe.val_type === 'string' ? 'info' : 'success'"@click.native="switchVarType($event, pipe)"style="margin-right: 50px;":disabled="disabled"><el-inputv-model="pipe.value"placeholder="字段值"style="width: 150px;"clearable:disabled="disabled"/></el-badge><el-button type="danger" :icon="Delete" circle @click="delSelf" :disabled="disabled"/></div>
</template><script setup>
import {ref, defineProps, watch} from 'vue';
import {Delete} from "@element-plus/icons-vue";
import {deepClone} from "@/utils.js";const emit = defineEmits(['delRule']);const props = defineProps({pipe: Object,attrOptions:Array,disabled:Boolean
});
const pipe = ref({});watch(() => props.pipe, (newData) => {if (!newData) returnpipe.value = deepClone(newData)
}, {deep: true,immediate: true
})function switchVarType(e, kv) {if (String(e.target.tagName).toUpperCase() === 'SUP') {kv.val_type = kv.val_type === 'number' ? 'string' : 'number';}
}function delSelf() {emit('delRule')
}
</script><style lang="scss" scoped>
.bizrulecondition-container {display: flex;flex-direction: row;.el-badge__content {transition: 400ms;user-select: none;}.el-badge__content:hover {cursor: pointer;}
}
</style>

相关文章:

vue3实现规则编辑器

组件用于创建和编辑复杂的条件规则&#xff0c;支持添加、删除条件和子条件&#xff0c;以及选择不同的条件类型。 可实现json数据和页面显示的转换。 代码实现 &#xff1a; index.vue: <template><div class"allany-container"><div class"co…...

【快速上手】pyspark 集群环境下的搭建(Standalone模式)

目录 前言 &#xff1a; 一、spark运行的五种模式 二、 安装步骤 安装前准备 1.第一步&#xff1a;安装python 2.第二步&#xff1a;在bigdata01上安装spark 3.第三步&#xff1a;同步bigdata01中的spark到bigdata02和03上 三、集群启动/关闭 四、打开监控界面验证 前…...

中文NLP地址要素解析【阿里云:天池比赛】

比赛地址&#xff1a;中文NLP地址要素解析 https://tianchi.aliyun.com/notebook/467867?spma2c22.12281976.0.0.654b265fTnW3lu长期赛&#xff1a; 分数:87.7271 排名&#xff1a;长期赛:56&#xff08;本次&#xff09;/6990&#xff08;团体或个人&#xff09;方案&#xf…...

使用AddressSanitizer内存检测

修改cmakelist.txt&#xff0c;在project(xxxx)后面追加&#xff1a; option(MEM_CHECK "memory check with AddressSanitizer" OFF) if(MEM_CHECK)set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -fsanitizeaddress")set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS…...

11月1日星期五今日早报简报微语报早读

11月1日星期五&#xff0c;农历十月初一&#xff0c;早报#微语早读。 1、六大行今日起实施存量房贷利率新机制。 2、谷歌被俄罗斯罚款35位数&#xff0c;罚款远超全球GDP。 3、山西吕梁&#xff1a;女性35岁前登记结婚&#xff0c;给予1500元奖励。 4、我国人均每日上网时间…...

实用篇:Postman历史版本下载

postman历史版本下载步骤 1.官方历史版本发布信息 2.点进去1中的链接,往下滑动;选择你想要的版本 例如下载v11.18版本 3.根据操作系统选择 mac:mac系统postman下载 window:window系统postman下载 4.在old version里找到对应版本下载即可 先点击download 再点击free downlo…...

微服务实战系列之玩转Docker(十七)

导览 前言Q&#xff1a;如何实现etcd数据的可视化管理一、创建etcd集群1. 节点定义2. 集群成员2.1 docker ps2.2 docker exec2.3 etcdctl member list 二、发布数据1. 添加数据2. 数据共享 三、可视化管理1. ETCD Keeper入门1.1 简介1.2 安装1.2.1 定义compose.yml1.2.2 启动ke…...

操作系统-实验报告单(1)

目录 1 实验目标 2 实验工具 3 实验内容、实验步骤及实验结果 一、安装虚拟机及Ubuntu 5、*存在虚拟机不能安装的问题 二、Ubuntu基本操作 1、桌面操作 2、终端命令行操作 三、在Ubuntu下运行C程序 3、*Ubuntu中编写一个Hello.c的主要程序 4 实验总结 实 验 报 告…...

rom定制系列------小米8青春版定制安卓14批量线刷固件 原生系统

&#x1f49d;&#x1f49d;&#x1f49d;小米8青春版。机型代码platina。官方最终版为 12.5.1安卓10的版本。客户需要安卓14的固件以便使用他们的软件。根据测试&#xff0c;原生pixeExpe固件适配兼容性较好。为方便客户批量进行刷写。修改固件为可fast批量刷写。整合底层分区…...

CATIA许可证常见问题解答

在使用CATIA软件的过程中&#xff0c;许可证问题常常是用户关心的焦点。为了帮助大家更好地理解和解决这些问题&#xff0c;我们整理了一份CATIA许可证常见问题解答&#xff0c;希望能为您提供便捷的参考。 问题一&#xff1a;如何激活CATIA许可证&#xff1f; 解答&#xff1a…...

PySpark Standalone 集群部署教程

目录 1. 环境准备 1.1 配置免密登录 2. 下载并配置Spark 3. 配置Spark集群 3.1 配置spark-env.sh 3.2 配置spark-defaults.conf 3.3 设置Master和Worker节点 3.4 设配置log4j.properties 3.5 同步到所有Worker节点 4. 启动Spark Standalone集群 4.1 启动Master节点 …...

【源码+文档】基于SpringBoot+Vue旅游网站系统【提供源码+答辩PPT+参考文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

9.排队模型-M/M/1

1.排队模型 在Excel中建立排队模型可以帮助分析系统中的客户流动和服务效率。以下是如何构建简单排队模型的步骤&#xff1a; 1.确定模型参数 到达率&#xff08;λ&#xff09;&#xff1a;客户到达系统的平均速率&#xff08;例如每小时到达的客户数&#xff09;。服务率&…...

【GO学习笔记 go基础】编译器下载安装+Go设置代理加速+项目调试+基础语法+go.mod项目配置+接口(interface)

编译器下载&安装 下载并安装go1.23.2.windows-amd64.msi默认安装再C:\Program Files\Go\ PS C:\Users\kingchuxing\Documents> go version go version go1.23.2 windows/amd64Go设置GOPROXY国内加速 windows // 启用 Go Modules 功能 PS C:\Users\kingchuxing…...

从0开始学习shell脚本

了解Shell和Shell脚本 Shell&#xff1a;Shell是一个命令解释器&#xff0c;用来执行用户输入的命令。常用的Shell包括Bash、Zsh、Ksh等。Linux默认的Shell通常是Bash。 Shell脚本&#xff1a;Shell脚本是由一系列命令组成的文件&#xff0c;脚本可以运行一连串命令&#xff…...

官方工具重装Windows 11当前版本 /绕过硬件检查/免U盘

官方工具重装Windows 11当前版本 /绕过硬件检查/免U盘 官方工具重装Windows 11当前版本 /绕过硬件检查/免U盘_win11安装跳过检测-CSDN博客...

JavaEE初阶---网络原理/UDP服务器客户端程序

文章目录 1.网络初识2.网络编程2.1TCP/UDP区别介绍2.2UDP的socket api使用2.3UDP协议里面的服务器客户端程序 1.网络初识 网络和计算机类似&#xff1a;都是属于军用》民用&#xff1b; 网络诞生于美苏争霸时期&#xff0c;当时就感觉核战争一触即发&#xff0c;形式非常严峻…...

每天10个vue面试题(六)

1、对Vue设计原则的理解&#xff1f; 渐进式JavaScript框架&#xff1a;与其它大型框架不同的是&#xff0c;Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。另一方面&#xff0c;当与现代化…...

Qt:信号和槽

目录 关于信号 connect函数 关于connect connect的使用 自定义信号、自定义槽 自定义槽 第一种方式自定义槽 第二种方式自定义槽 自定义信号 信号槽 带参数的信号槽 参数个数一致的示例 参数个数不一致的示例 Q_OBJECT 信号和槽存在的意义 disconnect函数 使用…...

可以免费商用的字体下载

这里介绍一个开源仓库&#xff0c;收录的可以免费商用的字体&#xff0c;目前中文字体1308款&#xff0c;英文字体980款&#xff0c;共约2288多款字体。 Description Free fonts that can be used commercially.There are currently 1308 Chinese fonts and 980 English font…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...