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"><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
}/** 第一步：【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>