效果图

image.png
image.png

组件封装

<!--
 * @Descripttion: 配置规则
 * @version: 1.0
 * @Author: bingbing
 * @Date: 2024年3月8日
-->

<template>
    <div class="sd-rule">
        <div class="sd-rule-content" v-for="(item, index) in ruleList"  :ref="'btn-' + item.id" :key="index">
            <el-dropdown class="rule-left" :class="{'rule-left-children': item.pid}"  @command="handleCommand($event, item, index)">
                <el-button type="primary" class="rule-btn">
                    <!-- <span :style="{'height': _height(item)}">{{item.logic == 'and' ? '并且' : '或者'}}</span> -->
                    <span>{{item.logic == 'and' ? '并且' : '或者'}}</span>
                    <!-- <div class="rule-line" :style="{'height': ((item.children.length -1) *52 - 16) + 'px'}"></div> -->
                    <div v-if="item.children.length > 0" class="rule-line" :style="{'height': height[item.id]}"></div>
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="and">并且</el-dropdown-item>
                        <el-dropdown-item command="or">或者</el-dropdown-item>
                        <el-dropdown-item command="addCondition">添加条件</el-dropdown-item>
                        <el-dropdown-item command="addUniteCondition">添加联合条件</el-dropdown-item>
                        <el-dropdown-item v-if="item.pid" command="delete">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <div class="rule-right" :ref="'right-' + item.id">
                <div v-for="(ele, num) in item.children" :key="num">
                    <div v-if="!ele.logic" class="data-select">
                        <el-select
                        v-model="ele.leftValue"
                        class="property"
                        :class="{'w-full': num > 0}"
                        placeholder="请选择"
                        filterable
                        clearable
                        >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                        </el-select>
                        <el-select class="w-240" v-model="item.middleValue" filterable clearable placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-input class="w-240" v-model="item.rightValue" placeholder="请输入"></el-input>
                        <el-button type="danger" icon="Delete" circle @click="deleteItem(item.children, num)"/>
                    </div>
                    <!-- <span v-else>{{ ele }}</span> -->
                    <!-- 递归、连线处理 -->
                    <sdRule v-else :ruleList="[ele]" :class="{'rule-left-40': num == 0}" @refresh="$emit('refresh')" @deleteItem="updateItem"></sdRule>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'sdRule',
    props: {
        ruleList: {
            type: Array,
            default: () => []   
        }
    },
    data() {
        return {
            height: {}
        }
    },
    created() { 
        this.$nextTick(() => {
            this.getHeight(this.ruleList)
        })
    },
    methods: {
        // 获取高度
        getHeight(ruleList) {
            ruleList.forEach(item => {
                this._height(item)
                if(item.children && item.children.length > 0) {
                    this.getHeight(item.children)
                }
            })
        },
        // 选择
        handleCommand(command, item) {
            if(command === 'and' || command === 'or') {
                item.logic = command
            }else if (command === 'addCondition') {
                item.children.push({
                    id: Date.now(),
                    pid: item.id,
                    leftValue: '',
                    middleValue: '',
                    rightValue: '',
                    logic: '',
                    children: []
                })
                this.$emit('refresh')
            }else if(command === 'delete') {
                this.$emit('deleteItem', item)
                this.$emit('refresh')
            }else {
                item.children.push({
                    id: Date.now(),
                    pid: item.id,
                    leftValue: '',
                    middleValue: '',
                    rightValue: '',
                    logic: 'and',
                    children: []
                })
                this.$emit('refresh')
            }
        },
        // 计算chidren高度
        // _height(item) {
        //     if(item.logic) {
        //         const btnY = this.$refs['btn-' + item.id][0].getBoundingClientRect().y
        //         const refData = this.$refs['right-' + item.id][0]
        //         const height = refData.children[refData.children.length -1]?.getBoundingClientRect().y
        //         this.height[item.id] = (height - btnY - 16) + 'px'
        //     }
        // },
        _height(item) {
            if(item.logic) {
                const btnRef = this.$refs['btn-' + item.id]
                const refData = this.$refs['right-' + item.id]
                if(!btnRef || !refData) return
                const btnY = btnRef[0].getBoundingClientRect().y
                const height = refData[0].children[refData[0].children.length -1]?.getBoundingClientRect().y
                this.height[item.id] = (height - btnY - 16) + 'px'
            }
        },
        // 删除子项
        deleteItem(data, index) {
            data.splice(index, 1)
            this.$emit('refresh')
        },
        // 递归传送数据
        updateItem(item) {
            this.$emit('deleteItem', item)
        }
    }
}
</script>

<style lang="scss" scoped>
.sd-rule {
    width: 100%;
    .sd-rule-content {
        display: flex;
        .rule-left {
            margin-bottom: 20px;
            position: relative;
            z-index: 999;
            .rule-btn {
                position: relative;
                // &::before {
                .rule-line {
                    position: absolute;
                    width: 1px;
                    transform: scaleX(0.5);
                    background: #333333;
                    left: 50%;
                    top: 32px;
                }
            }
        }
        .rule-left-children {
            margin-left: 40px;
            position: relative;
            z-index: 88;
            &::before {
                content: '';
                position: absolute;
                width: 80px;
                height: 1px;
                background: #333333;
                top: 15px;
                left: -80px;
            }
        }
        .rule-left-40 {
            & > .sd-rule-content > .rule-left-children::before {
                content: '';
                position: absolute;
                width: 40px;
                height: 1px;
                background: #333333;
                top: 15px;
                left: -40px;
            }
        }
        .rule-right {
            display: flex;
            flex-direction: column;
            .property {
                width: 240px;
                margin:0 20px 20px 40px;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    width: 40px;
                    height: 1px;
                    background: #333333;
                    top: 15px;
                    left: -40px;
                }
            }
            .w-full::before{
                content: "";
                position: absolute;
                width: 80px;
                height: 1px;
                background: #333333;
                top: 15px;
                left: -79px;
            }
            .data-select {
                display: flex;
                .w-240 {
                    width: 240px;
                    margin:0 20px 20px 0;
                }
            }
        }
    }
}
</style>

组件使用

<template>
    <div style="padding: 20px; box-sizing: border-box;">
        <sdRule :ruleList="ruleList" @refresh="refresh" @deleteItem="deleteItem" :key="key"></sdRule>
    </div>
</template>

<script>
import sdRule from '@/components/sdRule/index';
export default {
    components:{
        sdRule
    },
    data() {
        return {
            // ruleList: [
            //     {
            //         id: 101,
            //         pid: '',
            //         leftValue: '',
            //         middleValue: '',
            //         rightValue: '',
            //         logic: 'and',
            //         children: [
            //             {
            //                 id: 102,
            //                 pid: '101',
            //                 leftValue: '',
            //                 middleValue: '',
            //                 rightValue: '',
            //                 logic: 'or',
            //                 children: [
            //                     {
            //                         id: 103,
            //                         pid: '102',
            //                         leftValue: '',
            //                         middleValue: '',
            //                         rightValue: '',
            //                         logic: '',
            //                     },
            //                     {
            //                         id: 104,
            //                         pid: '102',
            //                         leftValue: '',
            //                         middleValue: '',
            //                         rightValue: '',
            //                         logic: 'and',
            //                         children: [
            //                             {
            //                                 id: 105,
            //                                 pid: '104',
            //                                 leftValue: '',
            //                                 middleValue: '',
            //                                 rightValue: '',
            //                                 logic: '',
            //                             },
            //                             {
            //                                 id: 106,
            //                                 pid: '104',
            //                                 leftValue: '',
            //                                 middleValue: '',
            //                                 rightValue: '',
            //                                 logic: '',
            //                             },
            //                             {
            //                                 id: 107,
            //                                 pid: '104',
            //                                 leftValue: '',
            //                                 middleValue: '',
            //                                 rightValue: '',
            //                                 logic: 'and',
            //                                 children: [
            //                                     {
            //                                         id: 108,
            //                                         pid: '107',
            //                                         leftValue: '',
            //                                         middleValue: '',
            //                                         rightValue: '',
            //                                         logic: '',
            //                                     },
            //                                     {
            //                                         id: 109,
            //                                         pid: '107',
            //                                         leftValue: '',
            //                                         middleValue: '',
            //                                         rightValue: '',
            //                                         logic: '',
            //                                     },
            //                                 ]
            //                             },
            //                         ]
            //                     },
            //                 ]
            //             },
            //             {
            //                 id: 110,
            //                 pid: '101',
            //                 leftValue: '',
            //                 middleValue: '',
            //                 rightValue: '',
            //                 logic: '',
            //             },
            //             {
            //                 id: 111,
            //                 pid: '101',
            //                 leftValue: '',
            //                 middleValue: '',
            //                 rightValue: '',
            //                 logic: '',
            //             },
            //             {
            //                 id: 112,
            //                 pid: '101',
            //                 leftValue: '',
            //                 middleValue: '',
            //                 rightValue: '',
            //                 logic: '',
            //             },
            //             {
            //                 id: 113,
            //                 pid: '101',
            //                 leftValue: '',
            //                 middleValue: '',
            //                 rightValue: '',
            //                 logic: '',
            //             },
            //             {
            //                 id: 114,
            //                 pid: '101',
            //                 leftValue: '',
            //                 middleValue: '',
            //                 rightValue: '',
            //                 logic: 'and',
            //                 children: []
            //             }
            //         ]
            //     }
            // ],
            ruleList: [
                {
                    id: 101,
                    pid: '',
                    leftValue: '',
                    middleValue: '',
                    rightValue: '',
                    logic: 'and',
                    children: []
                }
            ],
            key: 0
        }
    },
    methods: {
        // 更新线的长度
        refresh() {
            this.key ++
        },
        // 删除联合条件
        deleteItem(item) {
            this.filterFn(this.ruleList, item.id)
        },
        // 过滤树
        filterFn(treeData, id) {
            return treeData.filter((obj) => {
                if (obj.id == id) {
                    return false // 过滤该节点
                }
                // 对树节点的后代进行递归
                if (obj.children && obj.children.length > 0) {
                    obj.children = this.filterFn(obj.children, id)
                }
            
                return true // 返回该节点
                }
            )
        }
    }
}
</script>

<style>

</style>