Smart_platform_ui/src/components/iosbasic-data/searchquery.vue

<template>
    <div>
        <div style="display:flex">
            <!--<slot v-if="slot" name="slot"></slot>-->
            <div style="width: 100%;">
                <el-select style="width: 100%" v-model="selectValue" :size="size" :placeholder="placeholder"
                    :filterable="filterable" :clearable="clearable" :remote="remote" :remote-method="remoteMethod"
                    :multiple="multiple" :collapse-tags="collapseTags" :disabled="disabled" :allow-create="allowCreate"
                    @change="corpChange" @focus="corpFocus" @clear="corpClear">
                    <el-option v-for="item in datalist" :key="item[forParameter.key]" :label="item[forParameter.label]"
                        :value="item[forParameter.value]"
                        :disabled="item[forParameter.disabled] ? item[forParameter.disabled] == disabledStatus : false">
                        <span style="float: left">{{ item[forParameter.label] }}</span>
                        <span v-if="desc" style="float: right; color: #8492a6; font-size: 13px">{{ item[forParameter.desc]}}</span>
                    </el-option>
                </el-select>
            </div>
            <div v-if="buttonIf" style="display: flex;align-items: center">
                <div class="bottonBox" v-if="tableIf" :class="disabled ? 'disabledBox' : ''" @click="bottonSearchfun">
                    <i class="el-icon-search"></i>
                </div>
                <el-tooltip effect="dark" content="获取最新资料" placement="top-start">
                    <div class="bottonBox" :class="disabled ? 'disabledBox' : ''" @click="refreshData"><i
                            class="el-icon-refresh"></i></div>
                </el-tooltip>
                <el-tooltip v-if="addIf" effect="dark" content="新建数据" placement="top-start">
                    <div class="bottonBox" :class="disabled ? 'disabledBox' : ''" @click="addJump"><i
                            class="el-icon-plus"></i>
                    </div>
                </el-tooltip>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="corpVisible" width="80%" top="5vh" append-to-body @closed="closed"
            class="el-dialogDeep" :close-on-click-modal="false" v-dialog-drag>
            <div>
                <el-row>
                    <el-col :span="24">
                        <slot></slot>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="corpVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 弹窗关闭
            corpVisible: false,
        }
    },
    props: {
        // 选择框的数据
        datalist: {
            type: Array,
            default: []
        },
        // 选择框数据选择的参数
        forParameter: {
            type: Object,
            default: {
                key: 'value',
                label: 'label',
                value: 'value',
                disabled: false,
                desc:'desc'
            }
        },
        // 两个按钮是否显示
        buttonIf: {
            type: Boolean,
            default: true,
        },
        // 绑定的值
        selectValue: {
            default: null
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: false
        },
        // 多选时是否将选中值按文字的形式展示
        collapseTags: {
            type: Boolean,
            default: false
        },
        // 是否可以搜索
        filterable: {
            type: Boolean,
            default: false
        },
        // 是否可以创建条目
        allowCreate: {
            type: Boolean,
            default: false
        },
        // 是否为远程搜索
        remote: {
            type: Boolean,
            default: false
        },
        // 是否可以清空选择项
        clearable: {
            type: Boolean,
            default: false
        },
        // 弹窗的标题
        title: {
            type: String,
            default: '选择数据'
        },
        // 是否禁用
        disabledStatus: {
            type: Number,
            default: 1
        },
        // 未输入的文字提示
        placeholder: {
            type: String,
            default: '请选择'
        },
        // 表格按钮
        tableIf: {
            type: Boolean,
            default: true
        },
        // 添加跳转按钮
        addIf: {
            type: Boolean,
            default: false
        },
        // 尺寸大小
        size: {
            type: String,
            default: 'small'
        },
        desc: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        // // 监听
        // selectValue:{
        //     // 执行方法
        //     handler(oldValue,newValue) {
        //         console.log(oldValue,145)
        //         console.log(newValue,146)
        //     },
        //     deep: true, // 深度监听
        //     immediate: true  // 第一次改变就执行
        // },
    },
    methods: {
        addJump() {
            if (this.disabled) {
                return
            }
            this.$emit('addJump')
        },
        // 聚焦事件
        corpFocus() {
            this.$emit('corpFocus')
        },
        corpClear(){
            this.$emit('corpClear')
        },
        // 下拉change
        corpChange(value) {
            this.$emit('corpChange', value)
        },
        /* 远程模糊查询操作用户 */
        remoteMethod(name) {
            if (name == null || name === "") {
                return false;
            }
            this.$emit('remoteMethod', name)
        },
        // 获取最新数据
        refreshData() {
            if (this.disabled) {
                return
            }
            this.$emit('remoteMethod')
        },
        // 弹窗确认事件
        confirm() {
            // this.corpVisible = false
            this.$emit('eldialogConfirm')
        },
        // 打开弹窗
        bottonSearchfun() {
            if (this.disabled) return
            if (!this.disabled) {
                this.corpVisible = true
                this.$emit('bottonSearchfun')
            }
        },

    }
}
</script>

<style lang="scss" scoped>
.bottonBox {
    height: 32px;
    background: #FFF;
    border: 1px solid #DCDFE6;
    font-size: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.disabledBox {
    color: #C0C4CC;
    cursor: not-allowed;
    background-image: none;
    background-color: #FFF;
    border-color: #EBEEF5;
}</style>