index.vue

<template>
    <div>
        <el-select
            v-model="index"
            filterable
            clearable
            remote
            reserve-keyword
            :placeholder="$t('请输入关键词')"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
            v-for="(item, index) in formattedList"
            :key="item.id"
            :label="`${item.label}`"
            :value="index">
            </el-option>
        </el-select>
        <!-- <el-button v-if="quickable" type="text" @click="showQuickCreate=true" class="ml-10">{{$t('快速新建')}}</el-button> -->

        <!-- <quick-create v-if="showQuickCreate" @success="onQuickCreateSuccess" @close="showQuickCreate=false" :default="{type}"></quick-create> -->
    </div>
</template>
<script>
import {getCustomerContactsSelect, getCustomerContactsListByCustomer} from '@/api/ecw/customerContacts'
import QuickCreateCustomer from '@/components/QuickCreateCustomer'
import Vue from 'vue'
export default {
    components:{QuickCreateCustomer},
    props:{
        value: [String, Number],
        quickable: {
            type: Boolean,
            default: true
        },
        type: String, // 客户类别，新建时指定默认类别，也可以根据需要筛选联系人所属的客户类别
    },
    data(){
        return {
            index: null,
            list:[],
            loading: false,
            size: 20,
            showQuickCreate: false
        }
    },
    computed:{
        formattedList(){
            return this.list.map(item => {
                item.label = item.contactsName
                let more = []
                if(item.customerName){
                    more.push(item.customerName)
                }
                if(item.phoneNew){
                    more.push(item.phoneNew)
                }
                if(item.email){
                    more.push(item.email)
                }
                if(more.length){
                    item.label += `(${more.join('|')})`
                }
                return item
            })
        }
    },
    watch:{
        index(val){
            this.$emit('input', val !== null ? this.list[val].customerContactsId: null)
            this.$emit('change', val !== null ? this.list[val]: null)
        },
        value(val){
            this.init()
        },
        showQuickCreate(){
            if(!this.showQuickCreate)return
            const QuickCreateComp = Vue.extend(QuickCreateCustomer)
            const dialog = new QuickCreateComp({
                propsData:{
                    type: this.type
                },
                
            })
            dialog.$on('close', () => {
                console.log('关闭拉')
                this.showQuickCreate = false
                document.body.removeChild(dialog.$el)
                dialog.$destroy()
            })
            dialog.$on('success', (id) => {
                this.onQuickCreateSuccess(id)
                dialog.$emit('close')
            })
            
            dialog.$mount()

            window.dialogComp = dialog
            document.body.append(dialog.$el)
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            console.log('初始化联系人选择', this.value)
            if(!this.value) return
            let index = this.list.findIndex(item => item.customerContactsId == this.value)
            if(index < 0){
                getCustomerContactsSelect({ids: this.value}).then(res => {
                    if(!res.data || !res.data.length){
                        return this.$message.error(this.$t('联系人信息获取失败'))
                    }
                    this.list.unshift(res.data[0])
                    this.index = 0
                })
            }
        },
        remoteMethod(keyword){
            let params = {
                size: this.size
            }
            params.searchKey = keyword
            this.loading = true
            getCustomerContactsSelect(params)
                .then(res => this.list = res.data)
                .finally(() => this.loading = false)
        },
        onQuickCreateSuccess(data){
            this.showQuickCreate = false
            this.list.unshift(data)
            this.index = 0
            /* getCustomerContactsListByCustomer({customerId: id}).then(res => {
                if(!res.data || !res.data.length){
                    return this.$message.error(this.$t('联系人信息获取失败'))
                }
                let data = res.data[0]
                data.contactsName = data.name // 字段名跟getCustomerContactsSelect对齐
                this.list.unshift(data)
                this.index = 0
            }) */
        }
    }
}
</script>