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
<template>
<el-row class="" :gutter="10">
<el-col :span="10">
<el-card>
<div slot="header" class="header">
<el-input v-model="queryParams.searchKey" :placeholder="$t('用户名/手机/邮箱')" style="width:200px" />
<dict-selector :type="DICT_TYPE.USER_TYPE" v-model="queryParams.customerType" style="width:100px" />
<el-button type="primary" @click="reLoad">{{$t('搜索')}}</el-button>
</div>
<div class="list">
<div class="item" v-for="item in list" :key="item.id">
<el-link class="el-icon-plus" @click="choose(item)" :disabled="customerIds.indexOf(item.id) > -1" />
{{item.name}} （{{item.defaultContactName}}）
</div>
</div>
</el-card>
</el-col>
<el-col :span="10">
<el-card>
<div slot="header" class="header">
{{$t('已选客户')}}
</div>
<div class="list">
<div class="item" v-for="item in choosedList" :key="item.id">
<el-link class="el-icon-delete" @click="remove(item)" />
{{item.name}} （{{item.defaultContactName}}）
</div>
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import {getCustomerSelect, getCustomerList} from '@/api/ecw/customer'
export default {
props:{
value: {
type: Array,
default: () => {
return []
}
}
},
data(){
return {
list:[],
queryParams:{
page: 1,
pageSize: 500,
name: null,
level: null
},
choosedList:[]
}
},
computed:{
customerIds(){
let arr = []
this.choosedList.forEach(item => {
arr.push(item.id)
})
return arr
}
},
watch:{
customerIds(val){
this.$emit('input', val)
},
value(val){
if(Array.from(new Set(val)).sort().join(',') != Array.from(new Set(this.customerIds)).sort().join(',')){
this.getChoosedList()
}
}
},
created(){
/* if(this.value && this.value.length){
this.getChoosedList()
} */
this.reLoad()
},
methods:{
getChoosedList(){
if(!this.value || !this.value.length){
return
}
getCustomerList({ids: this.value.join(',')})
.then(res => {
this.$set(this, 'choosedList', res.data)
})
},
reLoad(){
this.queryParams.page = 1
this.list = []
this.getList()
},
loadNextPage(){
if(this.page >= this.pages){
return this.$message.info(this.$t('已加载全部'))
}
this.queryParams.page ++
this.getList()
},
getList(){
getCustomerSelect(this.queryParams).then(res => {
this.list = res.data.list
})
},
choose(customer){
this.choosedList.push(customer)
},
remove(customer){
this.choosedList.forEach((item,index) => {
if(item.id==customer.id) this.choosedList.splice(index,1)
})
}
}
}
</script>
<style scoped lang="scss">
.header{
>div{
margin-right: 5px;
}
}
.list{
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
padding: 0 10px;
}
</style>