首页select数据筛选更改

shuishen

2023-02-02 caac46f6340e2e94cd370ece58db74db11f6873d

首页select数据筛选更改

 src/components/select/index.vue

@@ -1,26 +1,17 @@
<template>
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"
            class="selects-box"
            @click="optionsShow = !optionsShow"
        >
        <div :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow, 'select-choosable': selectAllClass }"
            class="selects-box" @click="selectClick">
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
        <div :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options" :style="{ height: 35 * options.length + 'px' }">
            <!-- 下拉框 -->
            <div
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
            >{{ item[optionsName] }}</div>
            <div @click="cutValue(item, index)" v-for="(item, index) in options" :key="index">{{ item[optionsName] }}
            </div>
        </div>
    </div>
</template>
@@ -43,6 +34,12 @@
        optionsName: {
            type: String,
        },

        selectAllClass: {
            type: Boolean,
            required: false,
            default: false
        }
    },

    data () {
@@ -51,11 +48,21 @@
        }
    },

    mounted () {
        setTimeout(() => {
            console.log(this.options)
        }, 3000)
    },

    methods: {
        //点击换文字的方法
        cutValue (item, index) {
            this.optionsShow = true
            this.$emit("selectCheck", item, index)
        },
        selectClick () {
            if (this.selectAllClass == true) return
            this.optionsShow = !this.optionsShow
        }
    }
}
@@ -83,6 +90,10 @@
    border: 1px solid rgba(20, 50, 123, 1);
}

.select-choosable {
    cursor: not-allowed !important;
}

.selects-container {
    width: 100%;
    height: 100%;

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-02 11:32:42
 * @LastEditTime: 2023-02-02 15:02:18
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -45,9 +45,8 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select v-if="selectAllShow" class="map-select" @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue" :options="policeStationOptions"
                :optionsName="'name'"></map-select>
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'name'" :selectAllClass="selectAllClass"></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'name'"></map-select>
@@ -469,8 +468,8 @@

    data () {
        return {
            selectAllClass: false,
            // 是否显示第一级select
            selectAllShow: false,
            houseLayerShow: true,
            carLayerShow: false,
            cameraLayerShow: false,
@@ -583,11 +582,11 @@
            that.policeSituationSiteClick(params)
        })

        if (this.userInfo.dept_id == '1123598813738675201') {
            this.selectAllShow = true
        } else {
            this.selectAllShow = false
        if (this.userInfo.dept_id != '1123598813738675201') {
            this.policeStationCheckValue = this.userInfo.user_name
            this.selectAllClass = true
        }


        this.getPoliceStationTree(1)

@@ -618,8 +617,8 @@

    methods: {
        // 加载首页下拉列表数据
        getPoliceStationTree (type, id) {
            getPoliceStationTree(type, id ? id : '').then(res => {
        getPoliceStationTree (type, id = '') {
            getPoliceStationTree(type, id).then(res => {
                if (type == 1) {

                    this.policeStationOptions = res.data.data
@@ -643,7 +642,9 @@
                        this.policeStaionChecked = currentItem

                    } else {

                        this.initPoliceStationLayer()

                    }

                } else if (type == 2) {
@@ -1968,6 +1969,8 @@
            margin: 0 5px;
            flex: 1;
        }


    }

    .equiment-detail {