1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<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>