vue:使用【3.0】:条件模块

一、条件层级效果图

二、代码

<template><ContentWrap><!-- 添加条件分支:level1 --><div class="btnBox" v-if="isEdit"><el-button type="primary" @click="add">添加条件分支</el-button></div><div v-if="tableList.length > 0" class="boxOne"><div class="title" v-for="(level1, index) in tableList" :key="level1.accountName"><!-- 返回科目:level2 --><el-form-item :label="`${level1.accountName}`" label-width="80px"><el-selectv-model="level1.conditionName"placeholder="请选择数据":disabled="!isEdit"filterable><el-optionv-for="(item, index1) in titleList":key="index1":label="item.label":value="item.value"/></el-select><el-buttonlink:icon="Delete"@click="handleDelete(index)"type="danger"class="ml-10px"v-if="isEdit"/><el-button link :icon="Plus" @click="handleAdd(level1)" v-if="isEdit" /></el-form-item><!-- 条件设置:level3 --><div class="boxTwo" v-if="level1.children?.length > 0"><!-- 此处可不展示 style="display: none" --><div class="left"><div class="round" @click="handleRelation(level1)">{{ level1.relation }}</div><div class="border"></div></div><div class="right"><divclass="level1Right"v-for="(level2, level2Index) in level1.children":key="level2Index"><!-- 符号:or/AND --><div class="left" v-if="level2.children?.length > 0"><div class="round" @click="handleLevelRelation(level2)">{{ level2.relation }}</div><div class="border"></div></div><div class="levelRight" v-if="level2.children?.length > 0"><divclass="mb-20px"v-for="(level3, level3Index) in level2.children":key="level3Index"><el-row :gutter="20"><!-- 字典表 --><el-col :span="5"><el-form-item><el-selectv-model="level3.pName"placeholder="请选择数据":disabled="!isEdit"><el-optionv-for="(operator, index1) in operatorList":key="index1":label="operator.label":value="operator.value"/></el-select></el-form-item></el-col><!-- 数值类型 --><el-col :span="5"><el-form-item><el-selectv-model="level3.pType":placeholder="t('common.inputText')":disabled="!isEdit"@change="handleType(val, level3)"><el-optionv-for="(accountType, index1) in accountTypeList":key="index1":label="accountType.label":value="accountType.value"/></el-select></el-form-item></el-col><!-- 运算符,根据数值类型显示 --><el-col :span="5"><el-form-item><el-selectv-model="level3.pOption"placeholder="请选择数据":disabled="level3.pType === '' || !isEdit"><el-optionv-for="(kind, index1) in typeMap[level3.pType]":key="index1":label="kind.label":value="kind.value"/></el-select></el-form-item></el-col><!-- 值 --><el-col :span="6"><el-form-item><el-inputplaceholder="请输入"v-model="level3.pValue":disabled="!isEdit"/><!-- <el-date-pickerv-if="level3.pType === '3'"v-model="level3.pValue"clearable:placeholder="t('common.selectText')"type="date"value-format="YYYY-MM-DD":disabled="!isEdit"/><el-inputv-elseplaceholder="请输入"v-model="level3.pValue":disabled="!isEdit"/> --></el-form-item></el-col><!-- 操作 --><el-col :span="3"><el-form-item><el-buttonlink:icon="Delete"@click="handleRowDelete(level2, level3Index)"type="danger"class="ml-10px"v-if="isEdit"/><el-buttonlink:icon="Plus"@click="handleRowAdd(level2, index)"v-if="isEdit"/></el-form-item></el-col></el-row></div><div><el-buttonlink:icon="Delete"@click="handleNodeDelete(level1, level2Index)"type="danger"class="ml-10px"v-if="isEdit"/></div></div></div></div></div></div></div></ContentWrap>
</template>
<script lang="ts" setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import * as apiType from '@/api/system/dict/dict.data.ts'defineOptions({ name: 'SettingTable' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const emits = defineEmits(['success'])
const titleList = [{ label: 'lemon', value: 1 },{ label: 'orange', value: 2 },{ label: 'apple', value: 3 },{ label: 'banana', value: 4 },{ label: 'mango', value: 5 },{ label: 'cherry', value: 6 }
]
const operatorList = [{ label: 'doudou1', value: 1 },{ label: 'doudou2', value: 2 },{ label: 'doudou3', value: 3 },{ label: 'doudou4', value: 4 },{ label: 'doudou5', value: 5 },{ label: 'doudou6', value: 6 }
]
const accountTypeList = [{value: 1,label: '数值'},{value: 2,label: '字符串'},{value: 3,label: '日期'}
]
// 条件配置(数据类型:数值)
const numberConfig = [{value: 1,label: '>'},{value: 2,label: '>='},{value: 3,label: '<= '},{value: 4,label: '<'},{value: 5,label: '='},{value: 6,label: '!='}
]// 条件配置(数据类型:字符串)
const stringConfig = [{value: 7,label: 'equals'},{value: 8,label: 'contains'},{value: 9,label: 'startsWith'},{value: 10,label: 'endsWith'},{value: 11,label: 'equals'},{value: 12,label: 'before'},{value: 13,label: 'after'}
]// 条件配置(数据类型:日期)
const dateConfig = [{value: 11,label: 'YYYY-MM-DD'},{value: 12,label: ' YYYY-MM-DD HH:mm:ss'},{value: 13,label: 'YYYY-MM'}
]interface AccountItem {accountCode?: stringaccountName?: stringlabel?: stringvalue?: string
}interface ConditionItem {conditionName?: stringchildren?: childrenItems[]accountName?: stringrelation?: string
}interface itemProps {pName: stringpType: stringpOption: stringpValue: string
}interface childrenItems {relation?: stringchildren?: itemProps[]
}const props = defineProps({accountList: {type: Array as () => AccountItem[],required: true},chooseList: {type: Array as () => ConditionItem[],default: () => []},isEdit: {type: Boolean,default: false}
})
const chooseList = computed(() => {return props.chooseList
})const tableList = ref<ConditionItem[]>([])
// 运算符
const typeMap = {'1': numberConfig,'2': stringConfig,'3': dateConfig
}// 数值类型事件:更改值,运算符清空
const handleType = (val, item, index) => {item.pType = item.pTypeitem.pOption = ''
}/** 第一步:【level1】添加条件分支:新增 */
const add = () => {console.log('第一步:')// 1、判断上面一条数据是否填写const lastItem = tableList.value[tableList.value.length - 1]if (lastItem !== undefined) {if (lastItem?.conditionName === '') {message.error(`返回科目规则需配置完整`)return}const hasAllValues = checkValues(lastItem.children)if (!hasAllValues) {message.error('请填写完整条件')return}}// 2、添加数据const result: ConditionItem = {accountName: '返回科目',conditionName: '',relation: 'AND',children: []}tableList.value.push(result)console.log('添加条件分支', tableList.value)emits('success', tableList.value)
}
// 外层:条件
const handleRelation = (item) => {console.log('外层', item)if (!props.isEdit) returnitem.relation = item.relation === 'AND' ? 'OR' : 'AND'console.log('????', tableList.value)emits('success', tableList.value)
}function checkValues(data) {for (const item of data) {if (item.pName === '' || item.pType === '' || item.pOption === '' || item.pValue === '') {return false}if (item.children && item.children.length > 0) {const hasAllFields = checkValues(item.children)if (!hasAllFields) {return false}}}return true
}/** 第二步:【level2】返回科目:新增、删除、条件关系 */
// 新增
const handleAdd = (item) => {console.log('第二步:', item)// 1、判断上面一条数据是否填写if (item?.conditionName === '') {message.error('请选择提成科目!')return}// 2、判断上条数据是否填写完整const lastItem = item.children[item.children.length - 1]if (lastItem !== undefined) {if (lastItem.children?.length > 0) {const hasAllValues = checkFields(lastItem)if (!hasAllValues) {message.error('请填写完整条件')return}}} else {if (lastItem?.children?.length == 0) {message.error('请填写完整条件')return}}// 3、添加数据const result: itemProps = {pName: '',pType: '',pOption: '',pValue: ''}item.children.push({relation: 'AND',children: [result]})console.log('科目添加条件:新增', tableList.value)emits('success', tableList.value)
}
// 删除
const handleDelete = (index) => {console.log('第一步:科目添加条件:删除', tableList.value)tableList.value.splice(index, 1)emits('success', tableList.value)
}
// 条件关系
const handleLevelRelation = (item) => {console.log('里层')if (!props.isEdit) returnitem.relation = item.relation === 'AND' ? 'OR' : 'AND'emits('success', tableList.value)
}// 判断数组中的每个对象的 pName、pType、pOption、pValue 字段是否都有值
function checkFields(data) {for (const item of data.children) {if (item.pName === '' || item.pType === '' || item.pOption === '' || item.pValue === '') {return false}}return true
}/** 第三步:行内添加 */
const handleRowAdd = (item, index: number) => {console.log('第三步:新增行', item, index)// 1、判断上面一条数据是否填写const arr = item.childrenconst lastItem = arr.length > 0 ? arr[arr.length - 1] : nullconsole.log('lastItem', lastItem)if (lastItem.pName === '' ||lastItem.pType === '' ||lastItem.pOption === '' ||lastItem.pValue === '') {message.error(`返回科目规则需配置完整!`)return}// 2、添加数据const result: itemProps = {pName: '',pType: '',pOption: '',pValue: ''}item.children.push(result)console.log('tableList', tableList.value)emits('success', tableList.value)
}
const handleRowDelete = (item, index?: number) => {item.children.splice(index, 1)console.log('????', tableList.value)emits('success', tableList.value)
}/** 第四步:删除节点 */
const handleNodeDelete = (item, index) => {item.children.splice(index, 1)emits('success', tableList.value)
}onMounted(() => {tableList.value = chooseList.value // 初始化赋值
})watch(() => props.chooseList,(val) => {tableList.value = val}
)
</script><style lang="scss" scoped>
.title {padding: 10px 0;
}
.btnBox {display: flex;justify-content: flex-end;
}
.boxTwo {display: flex;justify-content: space-between;margin-top: 10px;.left {display: flex;align-items: center;position: relative;.round {width: 30px;height: 30px;border-radius: 50%;background-color: white;border: 1px solid black;font-size: 14px;color: black;margin: auto;position: relative;z-index: 3;text-align: center;}.border {position: absolute;left: 50%;top: 0;bottom: 0;border-left: 1px solid black;}}.right {flex: 1;padding: 10px;}.level1Right {display: flex;margin-bottom: 10px;}.levelRight {flex: 1;padding: 10px 10px 0 10px;display: block;}
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE5 RPG AttributeSet的设置

AttributeSet 负责定义和持有属性并且管理属性的变化。开发者可以子类化UAttributeSet。在OwnerActor的构造方法中创建的AttributeSet将会自动注册到ASC。这一步必须在C中完成。 Attributes 是由 FGameplayAttributeData定义的浮点值。 Attributes能够表达从角色的生命值到角色…

《现代C++语言核心特性解析》笔记草稿

仅供学习记录之用&#xff0c;谢绝转发 第1章 新基础类型&#xff08;C11&#xff5e;C20&#xff09; 1.1 整数类型long long 更多笔记 “在C中应该尽量少使用宏&#xff0c;用模板取而代之是明智的选择。C标准中对标准库头文件做了扩展&#xff0c;特化了long long和unsi…

【C++】vector的使用及模拟实现

目录 一、vector的介绍及使用1.1 介绍vector1.2 vector的使用1.2.1 构造1.2.2 遍历访问1.2.3 容量空间1.2.4 增删查改 二、vector的模拟实现2.1 成员变量2.2 迭代器相关函数2.3 构造-析构-赋值重载2.3.1 无参构造2.3.2 有参构造12.3.3 有参构造22.3.4 拷贝构造2.3.5 赋值重载2.…

RAG基础功能优化、以及RAG架构优化

RAG基础功能优化 对RAG的基础功能优化&#xff0c;我们要从RAG的流程入手[1]&#xff0c;可以在每个阶段做相应的场景优化。 从RAG的工作流程看&#xff0c;能优化的模块有&#xff1a;文档块切分、文本嵌入模型、提示工程优化、大模型迭代。下面针对每个模块分别做说明&#…

【IAP】FREERTOS堆大小影响到FLASH写入

最近在调LPC177X芯片IAP升级时发现&#xff0c;同一套代码&#xff0c;稍微加了点东西就导致写入失败&#xff0c;确认写入flash接口无误后 #define SRC_ADDR_NOT_MAPPED 4通过写入失败返回值&#xff0c;上网查阅资料 我在这里勾选了IRAM2区&#xff0c;也就是默认是可以使用…

兴达易控EtherCAT转Profibus网关让工业自动化变得轻松快捷

EtherCAT转Profibus网关&#xff08;XD-ECPBM20&#xff09;是一种用于实现不同通信协议间互联互通的设备。它主要用于工业控制系统中&#xff0c;能够将EtherCAT总线的数据传输转换为Profibus网络可接受的格式。这样的网关设备在工业自动化领域有着广泛的应用&#xff0c;因为…

【计算机网络】第七,八,九章摘要重点

第七章网络管理 1.计算机网络面临的两大威胁&#xff1f; 恶意程序有&#xff1a;计算机病毒&#xff0c;计算机蠕虫&#xff0c;特洛伊木马&#xff0c;逻辑炸弹&#xff0c;后门入侵和流氓软件。 2.安全的计算机网络四个目标&#xff1a; 机密性&#xff0c;端点鉴别&…

一文解析 Copycat Dex与 Bitcat Dex的区别

Copycat Dex和 Bitcat Dex都带一个 Cat 并且都是衍生品协议&#xff0c;很多人都会误认为这两个是同一个项目&#xff0c;实际不然。它们是面向两个不同赛道、不同资产类型的衍生品项目。 Copycat Dex和 Bitcat Dex都是衍生品 DEX&#xff0c;它们最本质的区别主要在于&#xf…

软件测试|使用Python提取出语句中的人名

简介 在自然语言处理&#xff08;NLP&#xff09;中&#xff0c;提取文本中的人名是一项常见的任务。Python作为一种流行的编程语言&#xff0c;拥有强大的NLP库和工具&#xff0c;使我们能够轻松地进行这项任务。在本文中&#xff0c;我们将使用Python示例来演示如何提取文本…

springboot vue线上部署项目注意跨域问题

springboot vue线上部署项目注意跨域问题 nginx配置 server {listen 8080;server_name localhost;charset utf-8;location / {root /home/user/cf/vue/dist;index index.html index.htm;try_files $uri $uri/ /index.html;add_header Access-Control-Allow-Origin *;add_heade…

MC使用Waterfall 跨服

前言 想弄一个跨服&#xff0c;目前这篇文章是边测试边写的&#xff0c;两个子服都是在同一个机器上运行的 如果两个子服在不同的网络&#xff0c;跨服的延迟就会比较高 两个子服 s1 和 s2 都是使用folia核心 版本1.20.1s1 端口: 25565s2 端口 : 25566 1.下载 Waterfall W…

Hello 2024补题

Wallet Exchange&#xff08;Problem - A - Codeforces&#xff09; 题目大意&#xff1a;A&#xff0c;B做游戏&#xff0c;它们的钱包里各有a,b个硬币&#xff0c;轮到它们操作时&#xff0c;它们可以扔掉自己或者对手钱包里的硬币&#xff0c;谁不能操作谁输&#xff0c;问…

Kafka的安装、管理和配置

Kafka的安装、管理和配置 1.Kafka安装 官网: https://kafka.apache.org/downloads 下载安装包,我这里下载的是https://archive.apache.org/dist/kafka/3.3.1/kafka_2.13-3.3.1.tgz Kafka是Java生态圈下的一员&#xff0c;用Scala编写&#xff0c;运行在Java虚拟机上&#xf…

【大数据】Flink 详解(九):SQL 篇 Ⅱ

《Flink 详解》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 10 10 10 篇文章&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&…

Flutter之配置环境创建第一个项目

随着时代发展&#xff0c;使用Flutter开发的项目越来越多&#xff0c;于是踏上了Flutter开发之路。 作为一个Android开发人员&#xff0c;也只能被卷到与时俱进&#xff0c;下面一起创建一个Flutter项目吧。 一、Android开发&#xff0c;电脑上已经具备了的条件&#xff1a; …

msyql 异常,别干着急,70%的问题都在这里!

性能测试中&#xff0c;数据库的性能问题&#xff0c;可能会占到 70%&#xff0c;所以讲性能测试&#xff0c;数据库是一个非常非常重要的知识。但是&#xff0c;最近在讲 MySQL 数据库的时候&#xff0c;却遇到了一个尴尬。 前言 之前的小伙伴是需要手动安装 MySQL 数据库的&…

pc-lint plus和keil 调用库文件策略的不同

同样一个源文件&#xff08;如"stm32h7xx.h"&#xff09;&#xff0c;keil会先从用户路径找文件&#xff0c;pc-lint会先从keil安装路径找源文件 1、问题 在使用pc-lint检测工程时碰到了一个问题 C:\Users\86151\AppData\Local\Arm\Packs\Keil\STM32H7xx_DFP\2.4.…

武理多媒体信息共享平台的架构设计与实现

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

Vue-23、Vue过滤器

1、效果 2、过滤器实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>过滤器</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.…

Linux C语言开发(二)C语言数据类型

目录 一.C语言概述 1.1 什么是C语言 1.2 C语言与Linux 1.3 C语言的特点 二.数据类型 2.1数据类型的分类 2.2整型 2.3 字符型 2.4 浮点型 2.5 枚举类型 2.6 数组类型 2.7 结构体类型 2.8 联合体类型 2.9 指针类型 2.10 空类型 2.11 static静态类型 2.12 extern…