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

<template>
    <view class="nav choose">
        <view class="nav-menu" :class="{ 'nav-menu-active': select.engineeringName }" @click="selectEngineering"
            >{{
                // 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" :color="select.engineeringName ? '#376cf3' : '#666'"></uni-icons>
        </view>
        <!-- 弹框组件 -->
        <Cn-qianTree
            ref="qiantree"
            :selectParent="true"
            :multiple="false"
            :range="list"
            :foldAll="true"
            @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>
        <slot />
    </view>
</template>
<script>
import { lineTree } from '@/common/api/device'
export default {
    components: {},
    props: {
        level: { type: Number, default: 3 },
        showDatetime: { 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: ['', ''],
            },
            list: [],
        }
    },
    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 = {
                    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([list, ...res.data])
            })
        },
        // 递归过滤函数：去除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
        },
        selectEngineering() {
            this.$refs.qiantree._show()
        },

        getProjectList() {},
        // 确定回调事件
        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
            }
        },
        // 取消回调事件
        treeCancel(e) {
            console.log(e)
        },
    },

    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>