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">
                    <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"
                        >
                    </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="disabled?'':corpVisible = true"><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="4">-->
                     <!--    <el-scrollbar>-->
                     <!--        <basic-container>-->
                     <!--            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" :style="treeStyle" />-->
                     <!--        </basic-container>-->
                     <!--    </el-scrollbar>-->
                     <!--</el-col>-->
                     <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,
                }
            },
            // 两个按钮是否显示
            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'
            },
        },
        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')
            },
            // 下拉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('')
            },

        }
    }
</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>