kd-aiot-frontend-qms/src/components/common/seekPage.vue

<template>
    <div class="index_box">
        <el-form label-width="90px" :inline="true">
            <el-form-item v-for="(item, i) in seekList" :key="i">
                <el-form-item :label="item.label" :label-width="item.labelWidth + 'px'" v-if="i <= 2">
                    <!-- input 输入 -->
                    <div>
                        <div v-if="item.type == 'input'">

                            <el-input clearable v-model="defaultWhere[item.value]"
                                :placeholder="item.placeholder || '请输入内容'"
                                :style="{ width: item.width ? item.width + 'px' : '220px' }" />
                        </div>
                        <div v-if="item.type == 'select'">
                            <el-select clearable :v-model="defaultWhere[item.value]"
                                :placeholder="item.placeholder || '请输入内容'" :multiple="item.multiple ? item.multiple : false"
                                :filterable="item.filterable ? item.filterable : true"
                                :style="{ width: item.width ? item.width + 'px' : '220px' }">
                                <el-option v-for="(op, i) in item.planList" :label="op.label" :value="op.value"
                                    :key="i"></el-option>
                            </el-select>
                        </div>
                        <div v-if="item.type == 'date'">
                            <el-date-picker v-model="defaultWhere[item.value]" @visible-change="change"
                                :type="item.dateType || 'daterange'" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{ width: item.width ? item.width + 'px' : '220px' }">


                            </el-date-picker>
                        </div>
                    </div>
                </el-form-item>

            </el-form-item>

            <el-form-item>
                <el-dropdown ref="dropdownref" trigger="click" :hide-on-click="false" v-model="dropdownVisible">
                    <div v-if="seekList.length > 3">
                        <span class="el-dropdown-link">
                            更多选项<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <div class="padding">
                                <el-form label-position="left">
                                    <el-form-item v-for="(item, i) in deboListRow" :key="i" :inline="true"
                                        label-position="left">
                                        <el-form-item :label-width="item.labelWidth ? item.labelWidth : '90' + 'px'"
                                            :inline="true" :label="item.label">
                                            <div v-if="item.type == 'input'">
                                                <el-input clearable v-model="defaultWhere[item.value]"
                                                    :placeholder="item.placeholder || '请输入内容'"
                                                    :style="{ width: item.width ? item.width + 'px' : '220px' }" />
                                            </div>
                                            <div v-if="item.type == 'select'">
                                                <el-select clearable v-model="defaultWhere[item.value]"
                                                    :multiple="item.multiple ? item.multiple : false"
                                                    :filterable="item.filterable ? item.filterable : true"
                                                    :placeholder="item.placeholder || '请输入内容'"
                                                    :style="{ width: item.width ? item.width + 'px' : '220px' }"
                                                    @visible-change="change" @change="handerChange">
                                                    <el-option v-for="(op, i) in item.planList" :label="op.label"
                                                        :value="op.value" :key="i"></el-option>
                                                </el-select>
                                            </div>

                                            <div v-if="item.type == 'date'">
                                                <el-date-picker v-model="defaultWhere[item.value]"
                                                    @blur="change" :type="item.dateType || 'daterange'"
                                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                                    value-format="yyyy-MM-dd HH:mm:ss"
                                                    
                                                    :style="{ width: item.width ? item.width + 'px' : '220px' }">


                                                </el-date-picker>
                                            </div>

                                        </el-form-item>
                                    </el-form-item>
                                </el-form>
                            </div>

                        </el-dropdown-menu>
                    </div>
                </el-dropdown>


            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="search">
                    查询
                </el-button>
                <el-button @click="reset" icon="el-icon-refresh-left" type="primary">重置</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>

let defaultWhere = {};
export default {
    props: {
        seekList: {
            type: Array,
            default: () => []
        }
    },

    components: {

    },
    watch: {
        seekList: {
            handler(val) {

                val.forEach(item => {

                    defaultWhere[item.value] = null;

                })

                this.$nextTick(() => {

                    if (Array.isArray(val) && val.length <= 3) {
                        this.seekListRow = val
                    } else if (Array.isArray(val) && val.length >= 3) {
                        this.seekListRow = val.slice(0, 3);
                        this.deboListRow = val.slice(3);
                    }
                })

            },
            deep: true,
            immediate: true,
        }
    },

    data() {


        return {
            defaultWhere: {},
            dropdownVisible: true,

            deboListRow: [],
            seekListRow: []
        }
    },

    computed: {
        info() {
            return this.$store.state.user.info;
        },

    },

    created() {


    },
    methods: {

        change(visible) {
           
            this.dropdownVisible = visible;
            this.$refs.dropdownref.show()
        },
        handerChange() {
            this.$refs.dropdownref.show()
        },

        search() {
            this.$emit('search', this.defaultWhere);
        },
        // 重置
        reset() {
            this.defaultWhere = {};
            this.search();
        }

        //  折叠悬浮中样式调整
    },
}
</script>

<style scoped>
.index_box {
    display: flex;
}

.padding {
    padding: 20px;
}
</style>