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="small" :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">
                <el-button  :disabled="disabled" icon="el-icon-search" size="mini" @click="corpVisible = true"></el-button>
                <el-tooltip effect="dark" content="获取最新资料" placement="top-start">
                    <el-button :disabled="disabled" icon="el-icon-refresh" size="mini" @click="refreshData"
                               style="margin-left:0px;"></el-button>
                </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:'请选择'
            },
        },
        methods:{
            // 聚焦事件
            corpFocus(){
                this.$emit('corpFocus')
            },
            // 下拉change
            corpChange(value) {
                this.$emit('corpChange',value)
            },
            /* 远程模糊查询操作用户 */
            remoteMethod(name) {
                if (name == null || name === "") {
                    return false;
                }
                this.$emit('remoteMethod',name)
            },
            // 获取最新数据
            refreshData(){
                this.$emit('remoteMethod')
            },
            // 弹窗确认事件
            confirm(){
                this.corpVisible = false
                // this.$emit('')
            },

        }
    }
</script>

<style scoped>

</style>