容县网站开发,上海装修网站大全,成华区响应式网站建设,省规划建设发展局网站首页组件用于创建和编辑复杂的条件规则#xff0c;支持添加、删除条件和子条件#xff0c;以及选择不同的条件类型。 可实现json数据和页面显示的转换。 代码实现 #xff1a; index.vue:
templatediv classallany-containerdiv classco…组件用于创建和编辑复杂的条件规则支持添加、删除条件和子条件以及选择不同的条件类型。 可实现json数据和页面显示的转换。 代码实现 index.vue:
templatediv classallany-containerdiv classcontrol-barel-select v-modelpipe.condition stylewidth: 200px; margin-right: 16px; :disableddisabledel-option label满足以下所有条件 valueall/el-option label满足以下任一条件 valueany/el-option label不包含以下条件 valuenot//el-selectel-button v-if!disabled typeprimary clickaddCondition(condition)添加条件/el-buttonel-button v-if!disabled typesuccess clickaddCondition(all_any)添加子条件/el-buttonel-button v-if !disabled typedanger :iconDelete circle clickdelSelf//divdiv classconditions-wrapper!-- 侧边显示条 --div :classconditions-wrapper-${pipe.condition}/divdiv classconditions-wrapper--conditionsdiv v-for(child, idx) in pipe.children :keyidx classconditions-wrapper--conditionbiz-rule-all-any v-ifchild.type all_any :pipechild :attrOptionsattrOptions:disableddisabled delRulehandleDelRule(idx,child)/biz-rule-condition v-else-ifchild.type condition :pipechild :attrOptionsattrOptions:disableddisabled delRulehandleDelCondition(idx,child)//div/div/div/div
/templatescript 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);
}/scriptstyle scoped langscss.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;}
}/styleBizRuleCondition.vue:
templatediv classbizrulecondition-containerel-select v-modelpipe.name placeholder字段名称 stylewidth: 150px; margin-right: 16px; clearable :disableddisabledel-option v-foritem in attrOptions :keyitem.value :labelitem.label :valueitem.value//el-selectel-select v-modelpipe.operator stylewidth: 90px; margin-right: 16px; :disableddisabledel-option label valueeq/el-option label! valueneq/el-option label valuelt/el-option label valuegt/el-option label valuelte/el-option label valuegte/el-option labelin valuein/el-option labelnot in valuenot_in//el-selectel-badge:valuepipe.val_type string ? 字符串 : 数字:typepipe.val_type string ? info : successclick.nativeswitchVarType($event, pipe)stylemargin-right: 50px;:disableddisabledel-inputv-modelpipe.valueplaceholder字段值stylewidth: 150px;clearable:disableddisabled//el-badgeel-button typedanger :iconDelete circle clickdelSelf :disableddisabled//div
/templatescript 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)
}
/scriptstyle langscss scoped
.bizrulecondition-container {display: flex;flex-direction: row;.el-badge__content {transition: 400ms;user-select: none;}.el-badge__content:hover {cursor: pointer;}
}
/styleBizRuleAdapter.js:
templatediv classbizrulecondition-containerel-select v-modelpipe.name placeholder字段名称 stylewidth: 150px; margin-right: 16px; clearable :disableddisabledel-option v-foritem in attrOptions :keyitem.value :labelitem.label :valueitem.value//el-selectel-select v-modelpipe.operator stylewidth: 90px; margin-right: 16px; :disableddisabledel-option label valueeq/el-option label! valueneq/el-option label valuelt/el-option label valuegt/el-option label valuelte/el-option label valuegte/el-option labelin valuein/el-option labelnot in valuenot_in//el-selectel-badge:valuepipe.val_type string ? 字符串 : 数字:typepipe.val_type string ? info : successclick.nativeswitchVarType($event, pipe)stylemargin-right: 50px;:disableddisabledel-inputv-modelpipe.valueplaceholder字段值stylewidth: 150px;clearable:disableddisabled//el-badgeel-button typedanger :iconDelete circle clickdelSelf :disableddisabled//div
/templatescript 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)
}
/scriptstyle langscss scoped
.bizrulecondition-container {display: flex;flex-direction: row;.el-badge__content {transition: 400ms;user-select: none;}.el-badge__content:hover {cursor: pointer;}
}
/style
