lvyuou/select-list.vue

<template>
    <div class="e-select-list">
        <div class="select-update">
            <div>
                <el-select @change="$emit('input' , $event)" :value="value" filterable>
                    <el-option :value="0" label="请选择"></el-option>
                    <el-option :value="v.id" :label="getLabel(v)" v-for="v in list" :key="v.id"></el-option>
                </el-select>
            </div>
            <div>
                关键词：
                <el-input style="width: 150px" v-model="searchMsg.keyword" />
            </div>
            <div>
                <slot name="search"></slot>
            </div>
            <!--<div class="search-list" ref="search">
            </div>-->
            <div class="search-btn">
                <el-button icon="el-icon-search" @click="searchTable(true)">
                    搜索
                </el-button>
            </div>
        </div>
        <div class="" v-if="value!=0">
            <slot>
            </slot>
        </div>
    </div>
</template>
<style type="text/scss" lang="scss">
.e-select-list{
    .select-update{
        display: flex;
        flex-wrap:wrap;
        >div{
            margin-right: 10px;
        }
        >div:last-child{
            margin-right: 0px;
        }

    }
    .search-list{

    }
}
</style>
<script>
    import api from "@/api";
    import { empty, isArray ,isObject} from "@/utils/extend";
    import {findObject} from "@/utils/utils";

    export default {
        name: "e-select-list",
        data() {
            return {
                list:[],
                searchMsg:{
                    keyword:''
                }
            }
        },
        props:{
            value:[String,Number],
            model:{
                type:Object,
                required:true
            },
            module:{
                type:String,
                required: true
            },
            selectUpdate:[String,Array],
            searchUpdate:{
                type:[String,Array],
                default:''
            },
            showField:{
                type:[String,Array]
            }
        },
        watch: {
            value(val){
                this.selectOption(val);
            }
        },
        computed: {
        },
        methods: {
            selectOption(value){
                var v = findObject(this.list , r=>r.id == value );
                if( v !== false ){
                    this.updateModel(v);
                }else{
                    if(value == 0){
                        this.updateModel({});
                    }else{
                        this.$post(api.search.table , {id:value}).then(res=>{
                            if(!empty(res) && isObject(res)){
                                this.list.push(res);
                                this.updateModel(res);
                            }
                        }).catch(err=>{
                            this.$message.error(err.message)
                        })
                    }
                }
            },
            updateModel(v){
                var field = isArray(this.selectUpdate) ? this.selectUpdate : this.selectUpdate.split(',');
                for (var i=0;i<field.length;i++)
                {
                    var f = field[i];
                    if( f ){
                        var def = /(^[0-9]+$)/.test(this.model[f]) && this.model[f].length<11 ? 0 : '';
                        this.model[f] = v[f] !== undefined ? v[f] : def;
                    }
                }
            },
            getLabel(v){
                var result = '';
                var field = [];
                if(this.showField){
                    field = isArray(this.showField) ? this.showField : this.showField.split(',').filter(v=>!empty(v))
                }else{
                    field = isArray(this.selectUpdate) ? this.selectUpdate : this.selectUpdate.split(',')
                }

                //var field = isArray(this.selectUpdate) ? this.selectUpdate : this.selectUpdate.split(',')

                for (var i=0;i<field.length;i++)
                {
                    var f = field[i];
                    if(f && v[f]){
                        result += v[f]+' - ';
                    }
                }
                return result;
            },
            searchTable(isEmit){
                var where = {};
                var field = isArray(this.selectUpdate) ? this.selectUpdate : this.selectUpdate.split(',')
                var ext   = isArray(this.searchUpdate) ? this.searchUpdate : this.searchUpdate.split(',')
                var fs = field.concat(ext).filter(f=>f!='');
                where[fs.join('|')] = [ 'like' , '%'+this.searchMsg.keyword+'%'];
                this.$emit('update-where' , where);
                return new Promise((resolve, reject) => {
                    this.$post(api.search.select , {
                        table:this.module,
                        where:JSON.stringify(where)
                    }).then(res=>{
                        if(isEmit){
                            this.$emit('input' , 0);
                        }
                        this.list = res;
                        resolve(res)
                    }).catch(err=>{
                        reject(err.message);
                    });
                });
            }
        },
        created() {
            this.searchTable().then(res=>{
                if(this.value){
                    this.selectOption(this.value)
                }
            });
        },
        mounted() {
        },
        destroyed() {
        }
    }
</script>