ibms/src/components/ledger/lib/floorCascader.vue

<template>
    <div id="buildFloor">
        <span class="buildFloor" style="margin-right: 12px;">建筑楼层</span>
        <el-cascader placeholder="请选择建筑楼层" :options="options" v-model="value" filterable size="small" :style="isWidth ? '' : 'width:160px;'" @change="changeCascader"></el-cascader>
    </div>
</template>
<script>
    import tools from "@/utils/scan/tools"
    import { floorQuery, buildingQuery } from '@/api/scan/request'
    import { mapGetters, mapActions } from "vuex"

    export default {
        props: {
            isWidth: {
                type: Boolean,
                default: true
            },
            type: {
                type: String,
                default: "yes"
            }
        },
        computed: {
            ...mapGetters("layout", [
                "projectId",
                "secret",
                "userId"
            ])
        },
        data() {
            return {
                options: [],
                param: {
                    ProjId: '',
                    secret: ''
                },
                value: ['all']
            };
        },
        created() {
            this.param.ProjId = this.projectId
            this.param.secret = this.secret
            this.getData()
        },
        watch: {
            projectId() {
                this.value = ['all'];
                this.options = [];
                this.param.ProjId = this.projectId
                this.param.secret = this.secret
                this.getData()
                this.changeCascader(['all'])
            }
        },
        methods: {
            //设置默认选项
            setValue(val) {
                if (val && val.length) {
                    this.value = val
                }
            },
            //获取数据
            getData() {
                let data, buildParams = {
                    PageNumber: 1,
                    PageSize: 500,
                    Projection: [
                        "BuildID",
                        "BuildLocalName"
                    ]
                }, floorParams = {
                    Orders: "FloorSequenceID desc",
                    PageNumber: 1,
                    PageSize: 500,
                    Projection: [
                        "BuildID",
                        "FloorID",
                        "FloorLocalName",
                        "FloorSequenceID"
                    ]
                }
                let promise1 = new Promise((resolve, reject) => {
                    buildingQuery(buildParams, res => {
                        resolve(res)
                    })
                })
                let promise2 = new Promise((resolve, reject) => {
                    floorQuery(floorParams, res => {
                        resolve(res)
                    })
                })
                Promise.all([promise1, promise2]).then(values => {
                    let builData = values[0].Content, floorData = values[1].Content
                    data = builData.map(build => {
                        return {
                            value: build.BuildID,
                            label: build.BuildLocalName
                        }
                    })
                    data.unshift({
                        value: "all",
                        label: "全部"
                    }, {
                        value: "noKnow",
                        label: "未明确建筑的设备"
                    })
                    data.forEach(build => {
                        floorData.forEach(floor => {
                            if (build.value == floor.BuildID && floor.FloorID && floor.FloorLocalName && this.type == "yes") {
                                if (build.children) {
                                    build.children.push({
                                        value: floor.FloorID,
                                        label: floor.FloorLocalName,
                                        FloorSequenceID: floor.FloorSequenceID
                                    })
                                } else {
                                    build.children = []
                                    build.children.push({
                                        value: "all",
                                        label: "全部"
                                    },{
                                        value: 'noKnow',
                                        label: "未明确楼层的设备"
                                    },{
                                        value: floor.FloorID,
                                        label: floor.FloorLocalName,
                                        FloorSequenceID: floor.FloorSequenceID
                                    })
                                }
                            }
                        })
                    })
                    this.options = data
                })
            },
            //改变item
            changeCascader(value) {
                this.$emit("change", value)
            }
        }
    };
</script>
<style lang="less">
    .el-cascader .el-input .el-input__inner {
        vertical-align: bottom;
    }
</style>
<style lang="less" scoped>
    #buildFloor {
        margin-left: 10px;
        float: left;
        .buildFloor {
            color: #999999;
            font-size: 14px;
        }
    }
</style>