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

<template>
    <view class="nav choose">
        <view class="nav-menu" @click="selectEngineering" v-if="showQianTree"
            >{{
                // select.engineeringName + '>' + select.projectName + '>' + select.deviceName + '>' + select.lineName ||
                // '全部工程'
                select.engineeringName || select.projectName || select.deviceName || select.lineName
                    ? [select.engineeringName, select.projectName, select.deviceName, select.lineName]
                          .filter((item) => item && item !== '')
                          .join('>')
                    : '全部工程'
            }}
            <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"
                >{{ select.date }}
                <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 @change="bindReport" v-if="report" :value="select.report" :range="reportList">
            <view class="nav-menu"
                >{{ reportList[select.report] }}
                <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 },
        report: { type: Boolean, default: false },
        singleChoice: { type: Boolean, default: false },
        showQianTree: { type: Boolean, default: true },
    },
    data() {
        const currentDate = this.getDate({
            format: true,
        })
        return {
            select: {
                engineeringName: '',
                engineeringId: '', //工程ID
                projectName: '',
                projectId: '', //項目ID
                deviceName: '',
                deviceId: '', //设备ID
                lineName: '',
                lineId: '', //测点ID
                date: currentDate,
                range: ['', ''],
                report: 0,
            },
            list: [],
            reportList: ['日报', '月报'],
        }
    },
    created() {
        if (!this.showDatetime) {
            this.select.range = [this.endDate.slice(0, -3) + '-01', this.endDate]
        }
    },
    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
        },
        bindReport(e) {
            this.select.report = 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(name, id) {
            this.getTree()
            this.select.engineeringId = id
            this.select.engineeringName = name
        },
        // 取消回调事件
        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,
        },
    },
}
</script>
<style lang="scss" scoped>
/deep/ .uni-date-editor {
    width: 360rpx;
}
</style>