app-govern/components/Cn-filterCriteria/Cn-filterCriteria.vue

<template>
    <view class="nav choose">
        <view class="nav-menu nav-menu1" @click="selectEngineering" v-if="showQianTree">
            <view class="nav-text">
                {{
                    select.engineeringName || select.projectName || select.deviceName || select.lineName
                        ? [select.engineeringName, select.projectName, select.deviceName, select.lineName]
                              .filter((item) => item && item !== '')
                              .join('>')
                        : '全部工程'
                }}
            </view>

            <uni-icons type="bottom" size="14"></uni-icons>
        </view>
        <!-- 弹框组件 -->
        <Cn-qianTree
            ref="qiantree"
            :selectParent="true"
            :multiple="false"
            :range="list"
            :foldAll="true"
            :singleChoice="singleChoice"
            @confirm="treeConfirm"
            @cancel="treeCancel"
        ></Cn-qianTree>
        <picker
            mode="date"
            :value="select.date"
            :start="startDate"
            fields="month"
            :end="endDate"
            @change="bindDateChange"
            v-if="showDatetime"
        >
            <view class="nav-menu nav-menu1"
                ><view class="nav-text">
                    {{ select.date }}
                </view>
                <uni-icons type="bottom" size="14"></uni-icons>
            </view>
        </picker>
        <!-- <uni-datetime-picker v-if="!showDatetime" v-model="select.range" type="daterange" :end="endDate">
            <view class="nav-menu"
                >{{ select.range[0] + '至' + select.range[1] }}
                <uni-icons type="bottom" size="14"></uni-icons>
            </view>
        </uni-datetime-picker> -->
        <picker
            mode="date"
            :value="select.range"
            fields="year"
            :end="endDate.slice(0, -6)"
            @change="yearChange"
            v-if="!showDatetime"
        >
            <view class="nav-menu nav-menu1"
                ><view class="nav-text">
                    {{ select.range }}
                </view>
                <uni-icons type="bottom" size="14"></uni-icons>
            </view>
        </picker>

        <slot />
    </view>
</template>
<script>
import { lineTree } from '@/common/api/device'
export default {
    components: {},
    props: {
        level: { type: Number, default: 3 },
        showDatetime: { type: Boolean, default: true },
        singleChoice: { type: Boolean, default: false },
        showQianTree: { type: Boolean, default: true },
    },
    data() {
        const currentDate = this.getDate({
            format: true,
        })
        const rangeDate = this.getDate({
            format: true,
        }).slice(0, -3)
        console.log('🚀 ~ rangeDate:', rangeDate)
        return {
            select: {
                engineeringName: '',
                engineeringId: '', //工程ID
                projectName: '',
                projectId: '', //項目ID
                deviceName: '',
                deviceId: '', //设备ID
                lineName: '',
                lineId: '', //测点ID
                date: currentDate,
                range: rangeDate,
            },
            list: [],
        }
    },
    created() {},
    onShow() {},

    mounted() {},

    methods: {
        getTree() {
            this.clear()
            lineTree().then((res) => {
                let list = {}
                if (this.singleChoice) {
                    let result = this.findFirstLevel(res.data)
                    console.log('🚀 ~ result:', result)
                    this.select.engineeringName = result.parents[0].name
                    this.select.engineeringId = result.parents[0].id //工程ID
                    this.select.projectName = result.parents[1].name
                    this.select.projectId = result.parents[1].id //項目ID
                    this.select.deviceName = result.parents[2].name
                    this.select.deviceId = result.parents[2].id //设备ID
                    this.select.lineName = result.node.name
                    this.select.lineId = result.node.id //测点ID
                } else {
                    list = {
                        id: '',
                        pid: '0',
                        pids: '0',
                        name: '全部工程',
                        path: null,
                        provinceId: null,
                        cityId: null,
                        area: null,
                        remark: null,
                        sort: 0,
                        level: 0,
                        comFlag: null,
                        type: null,
                        lineType: null,
                        conType: null,
                        process: null,
                        isTop: 0,
                        children: [],
                        ndid: null,
                    }
                }

                this.list = this.filterTreeByLevel(this.singleChoice ? res.data : [list, ...res.data])
                // this.findFirstLevel( this.list)
            })
        },
        // 递归过滤函数：去除level > 2的节点
        filterTreeByLevel(tree) {
            // 遍历每一个节点
            return tree.map((node) => {
                // 复制当前节点（避免修改原数据）
                const newNode = { ...node }

                // 如果当前节点有子节点，并且当前节点的level <= 2（因为level=2的节点的子节点是level=3，需要过滤）
                if (newNode.children && newNode.children.length > 0) {
                    // 递归过滤子节点：只保留子节点中level <= 2的
                    newNode.children = this.filterTreeByLevel(
                        newNode.children.filter((child) => child.level <= this.level),
                    )
                }

                return newNode
            })
        },
        getDate(type) {
            const date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            if (type === 'start') {
                year = year - 10
            } else if (type === 'end') {
                year = year
            }
            month = month > 9 ? month : '0' + month
            day = day > 9 ? day : '0' + day

            return this.showDatetime ? `${year}-${month}` : `${year}-${month}-${day}`
        },
        bindDateChange(e) {
            this.select.date = e.detail.value
        },
        yearChange(e) {
            this.select.range = e.detail.value
        },

        selectEngineering() {
            this.$refs.qiantree._show()
        },

        // 确定回调事件
        treeConfirm(e) {
            this.clear()

            this.setSelect(e[0].rank, e[0].name, e[0].id)
            e[0].parents.forEach((item) => {
                this.setSelect(item.rank, item.name, item.id)
            })
        },
        // 清空
        clear() {
            this.select.engineeringName = ''
            this.select.engineeringId = '' //工程ID
            this.select.projectName = ''
            this.select.projectId = '' //項目ID
            this.select.deviceName = ''
            this.select.deviceId = '' //设备ID
            this.select.lineName = ''
            this.select.lineId = '' //测点ID
        },
        setSelect(rank, name, id) {
            switch (rank) {
                case 0:
                    this.select.engineeringId = id
                    this.select.engineeringName = name
                    break
                case 1:
                    this.select.projectId = id
                    this.select.projectName = name
                    break
                case 2:
                    this.select.deviceId = id
                    this.select.deviceName = name
                    break
                case 3:
                    this.select.lineId = id
                    this.select.lineName = name
                    break
            }
        },
        external(params) {
            this.getTree()
            // this.select.engineeringId = id
            // this.select.engineeringName = name
            this.select.engineeringName = params.engineeringName
            this.select.engineeringId = params.engineeringId //工程ID
            this.select.projectName = params.projectName
            this.select.projectId = params.projectId //項目ID
            this.select.deviceName = params.deviceName
            this.select.deviceId = params.deviceId //设备ID
            this.select.lineName = params.lineName
            this.select.lineId = params.lineId //测点ID
        },
        // 取消回调事件
        treeCancel(e) {
            console.log(e)
        },
        findFirstLevel(list, parents = []) {
            for (const item of list) {
                // 当前就是 level=3
                if (item.level === 3) {
                    return {
                        node: item, // 第一个 level=3
                        parents: parents, // 它的所有上级
                    }
                }

                // 递归子节点
                if (item.children && item.children.length) {
                    const res = this.findFirstLevel(item.children, [...parents, item])
                    if (res) return res // 找到直接返回，不再循环
                }
            }
            return null
        },
    },

    computed: {
        startDate() {
            return this.getDate('start')
        },
        endDate() {
            return this.getDate('end')
        },
    },

    watch: {
        select: {
            handler(val, oldVal) {
                if (this.loading) return
                this.$emit('select', val)
            },
            deep: true,
            immediate: true,
        },
        level: {
            handler(val, oldVal) {
                this.getTree()
            },
            deep: true,
            immediate: true,
        },
        // showDatetime: {
        //     handler(val, oldVal) {
        //         if (val == false) {

        //             console.log("🚀 ~  this.select.range:",  this.select.range)
        //         }
        //     },
        //     deep: true,
        // },
    },
}
</script>
<style lang="scss" scoped>
/deep/ .uni-date-editor {
    width: 360rpx;
}
.nav-menu {
    display: flex;
    align-items: center;
}
// .nav-menu1 {
//     max-width: calc(100vw - 150px);
//     overflow: hidden !important;
//     -webkit-line-clamp: 1;
//     display: -webkit-box;
//     -webkit-box-orient: vertical;
//     text-overflow: ellipsis;
//     word-break: break-all;
//     white-space: nowrap;
// }
.nav-menu1 {
    display: flex;
    align-items: center;
    max-width: calc(100vw - 150px);
}
/* 文字容器：单行溢出省略 */
.nav-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap; /* 强制不换行 */
    text-overflow: ellipsis;
    // -webkit-line-clamp: 1;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // text-overflow: ellipsis;
    // word-break: break-all;
    // white-space: nowrap;
    line-height: 1;
}
</style>